Wednesday, June 18, 2014

Random String in PHP

I know it's been quite a while and I need to do some SERIOUS reformatting ... For now, here's a quick and easy method to getting a random string in PHP:

substr(str_shuffle(MD5(microtime())), 0, 10);

That's it! Use it in a function like:

function str_rand($length=10) { return substr(str_shuffle(MD5(microtime())), 0, $length); } 
echo str_rand();

Max user processing time will be *about .030s on average. Enjoy!

Wednesday, May 22, 2013

Add jQuery to almost any site from the console!

I know i seriously need to update my blog. But for now, a new fun entry! Have you ever been to a site and wanted to manipulate some stuff on the site with ease? Without long lines of vanilla JS? The following code snippet will help you do exactly that! Simply open the console, paste the code, hit enter/submit and you're good to go! Have fun editing that site to look however you want! Enjoy!

Monday, November 12, 2012

How To: Reset Digital Signature on Infopath in a Sharepoint (2010) Workflow

I'm not sure how 2010 specific this is, although, right off the top, 2010 versions are all I have worked with thus far. As you can see at my StackOverflow question (found here), I had an issue arise not to long ago where I really needed to know how to do as the title says. After hours of Googling, forum searching, and even mIRC chatting I found no solution that actually worked. I found many solutions claiming to work, and perhaps they did for older versions, however none worked for our setup. I should mention we use all 2010 software and our SQL is on a virtual. Not sure how much difference any of that could make, but on to the point. I finally found the answer myself, through much trial and tribulation. Perhaps, on another day I will break this down more and detail what is going on, but for now, I'm keeping the explanation of code short. In short, I found, that to work with all users (including non-admins) I had to first raise security level and then read the XML file, find the correct url for creating the namespace object, and finally edit the XML and save it back to the document. Keep in mind, this InfoPath form is on a Library list in Sharepoint and all of this work (as per requirment) is done via CSharp in a WorkFlow. And now, the code:

Friday, November 9, 2012

(Preliminary - Will be edited this weekend) jQuery for Absolute Begginers!

Key note: this is just a rough draft for Chapter one. I'm posting it so some people I know can give me feed back. If you stumble across this before I edit it and remove this line, please leave a comment and tell me how useful this looks to be to you. Also, please tell me your "coding" experience thus far. Thank you.

still waiting on 2 feed backs from 2 people 1/26/13
With this tutorial, I hope to show how easy it can be for anyone to incorporate some "fancy features" into their website.  Many other tutorials out there take aim at the user having had some JavaScript experience. However, I feel with just a little knowledge of HTML[1] and CSS[2], and some very basic JavaScript I will present, anyone can use jQuery, no JavaScript experience required.  If you are not yet familiar with HTML and CSS, then you are not quite ready for adding graphics and creature features.  Please visit w3schools great tutorials on HTML and CSS and build a few basic webpage’s before diving in the deep end.  jQuery is not hard, in fact it makes JavaScript look like calculus, but you should at least know how to build a page before you start changing what it does.

What is jQuery?

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

What this simple means is jQuery is prewritten code for using JavaScript to manipulate your webpage’s. Now, in depth, jQuery does much more than manipulate webpage’s, but as the title states, this is for absolute beginners.

Chapter 1

In this lesson I simply aim to introduce you to adding jQuery to your page.  I'll explain how to ensure it's added in the right place and what to do with plug-ins in the future. We'll also observe a few basic rules you will need to always keep in mind when adding jQuery to your page.

The first thing to understand is where to insert your jQuery.  In order to use jQuery in your page, you must first insert a link to the library in the <HEAD> of your page. Another thing to keep in mind (take note) you don't ever need more than one jQuery Library reference.  Often times, when using Copy and Paste to add a jQuery "Plug In" to a page, developers may accidentally add more than one reference to a jQuery library.  For example:

<html>
<head>
    <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>

Seen above are 2 slightly different plug-ins using two different jQuery libraries. However, this can cause many problems as the second library will attempt to "override" the first.  You should always include only one link to the jQuery library and check that all plug-ins work with that library version. For example:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>

IMPORTANT! If one plug-in does not work fully, simply look for another. One great benefit to jQuery is its popularity. There are thousands of plug-ins to choose from!

Now, before we get into the coding, let me explain the links here. The "Tag" of these links are "script" which basically tells your browser to be ready to either load a document for reading, or read what follows inside (we'll get to the later in a minute). The "type" attribute is not necessary in HTML5, however, most browsers people are using today are not updated and thus you may want to stick with what is still considered "standard".  In this case we are telling the browser to prepare to read JavaScript. Remember, as mentioned before, jQuery is basically a large library of prewritten JavaScript code. Finally, the attribute "src" tells our webpage where to look for the document.  In these cases, they are all online; however you may have a local reference.  For instance, if your jQuery library is included as the same place as your webpage you could just use:

<script type="text/javascript" src="jquery.min.js"></script>

More commonly however the library is placed in a seperate folder whereas you may see something like:

<script type="text/javascript" src="../js/jquery.min.js"></script>

Proper rules of folder and file reference are a bit beyond the scope of this tutorial. Determining where to point your link at is based on what type of page or site you are building. If you need help figuring out what type your site is or how to set up your folders and files, please visit the good folks at www.stackoverflow.com. There are plenty of answers there, and if you can't find your question, post it!

With all the absolute basics understood, you are almost ready to write some code. To begin writing code, you will once again use the "script" tag, only this time, we won't be loading libraries.  Instead, you will be writing your own code for the browser to evaluate.  I should also mention here, many older tutorials will tell you to include this at the end of the page.  While not everyone is caught up on HTML5, 99% of standards today keep everyone on something fast enough that this is no longer an issue.  It used to be an old trick for ensuring everything loading properly; however, it is no longer needed.  Today, simply add your new script tag in head just after adding your jQuery library reference.  For example:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

    <script type="text/javascript">
        // here is where you will begin "coding"
        // are you ready!?
    </script>

You must make sure your own code always goes after the jQuery reference, otherwise, your code will break!

As before, the script tag prepares the browser for some code reading, but this time it will read what is between your tags. Here is where you will begin to learn some very simple basics to JavaScript. In order to better understand what's going on, please review the following diagram and refer back as needed:

1.    <script type="text/javascript"> // Here is the begining of your CODE writting area
2.        // GLOBAL AREA code written here is considered "Global" and does not preform any action
2a.        var exampleVariable = "Learning jQuery is Fun!";
2b.        function exampleFunction() { alert(exampleVariable); };
3.        $(function() { // Equivalent to JavaScript’s [if (document.readyState === "complete")], previously known as [$(document).ready(function() {] in jQuery
4.            // here is where actions are preformed
5.        }) //  the close of your ready function
6.    </script> // the close of your code

The Breakdown:
    1.    As discussed before, this is your opening to tag to your code. The "type" attribute tells the browser the code it's about to read is more JavaScript.
            If this seems confusing, don't forget, jQuery "is" JavaScript. It's simply prewritten JavaScript.
    2.    "Global Area". This area sits "outside" of your action and thus does not perform action. However, you can use this area to save things "globally" that you may want to recall later. Realistically, this too is outside the scope of this tutorial; however, knowing just how it basically works will benefit any coder in the long run. Just know that "Global" means, "Can be called (referred to in code) from anywhere after this variable is established".
        a.    This is an example of a "Global Variable". Be careful naming your variable as there are already many pre-established "globals" already. Variables like this can be used to hold a "string" of text, a "Boolean" true or false value, or even an "array" of information.  If you really want more information on JavaScript Variables you can get it here (http://www.w3schools.com/js/js_variables.asp), however, the most you'll ever need for working with jQuery (usually) is knowing how to type [ var exampleVariable = something ]. I will show you more on making use of JavaScript Variables with jQuery in other lessons.
        b.    This is an example of a "Global Method". Global methods are simply functions written (usually before the action code) that contain an action that is not preformed until the function name is called. Whenever the function name is called, the action of the method begins to unfold and something on the end user's screen changes (usually). Again, global means it can be called from anywhere.
    3.    This line simply means "the page is loaded, let's start doing some work!" In pure JavaScript this is referred to as the "document complete ready state" and is written slightly different in older jQuery.  However, most all jQuery plug-ins today are compatible with this form of call. Just in case you come across a need for an older jQuery, the old way is:
            $(document).ready( function() {
                - You will still find this way referred to in a lot of answers to questions online and in a lot of plug-in tutorials. Keep in mind, it does still work this way even in new jQuery. However you choose to write it is your own preference.
        3. "KEY NOTE!"    Something to take notice of here is the "$" symbol. The "$" is simply a "shorthand" call to the jQuery Library. In other words, "$(function () {" is the same as "jQuery (function () {". You might come across another library in the future which may use the same shorthand symbol in which case, you'll need to use the whole word. However, this rarely happens to professionals and if you find yourself having a library conflicting with jQuery, I simply recommend getting rid of it and finding a jQuery Plug In that will suit your needs.
    4.    As mentioned in the comment seen there, this is the area where all the action takes place.  This is the meat and potatoes we will be playing with in the future. For now, simply know that this is where the action is!
    5.    This is simply the closing symbols for the initial call to "document.ready".
    6.    Your final script closing tag is very important. Treat it just like HTML and be sure to close your script when it has reached its end.

Sunday, August 26, 2012

jQuery/jQueryUI Help: Tabs | Get Currently Selected Tab

Update! Please note: In newer versions of jQueryUI (1.9+), `ui-tabs-selected` has been replaced with `ui-tabs-active`.
So I've noticed a major need for further explanation on how to work with jQueryUI Tabs. It is probably one of the most popular features I've seen used and "mis-used" due simply to lack of understanding of some very simple code.
The question is often proposed, "How do I get the currently selected tab?" or "tab index?". The documentation actually answers the later, but people still seemed to be confused. I've noticed many coders also have trouble understanding what to do with the Tab Index once they have it.
Well let's get started shall we!?
First of all, the documentation on the sight states:
[jQueryUI Reference]
...retrieve the index of the currently selected tab
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

That seems all well and dandy, but what if you need to do more? What if you need the "panel" that is open in order to manipulate data within? What if you need the current tab itself in order to make some text change or promote a specific "pop-up"?
Their next suggestion is found a little hidden in the documentation via the "tabs events". Within events like "tabsshow" you can retrieve required info via the bonded return parameter "ui".
For examnple:
$("#tabsElementID").tabs({
    show: function(e, ui) {
        // Objects available in the function context:
        ui.tab     // anchor element of the selected (clicked) tab
        ui.panel   // element, that contains the selected/clicked tab contents
        ui.index   // zero-based index of the selected (clicked) tab
    }
});
But what if you need to access these items outside the tabs events?!?

Whatever your scenario may be, I have the answer!Keep Reading



I'll try to break things down and keep this as easy to follow as possible, so please read all the way through.
First of all, getting the currently selected tab and the currently selected panel is easy. However, let's break this up.
By "tab", I am referring to the ACTUAL TAB the user clicks on to change the screen.
By "panel", I am referring to the PANEL where your ACTUAL CONTENT exist. In other words, the change the user sees with his/her eyes.
Now, let's get those current items and see how easy we can make this:
//  To retrieve the current TAB and assign it to a variable ...
var curTab = $('.ui-tabs-selected'); // in NEWER jQueryUI, this is now ui-tabs-active
//  To retrieve the current PANEL and assign it to a variable ...
var curTabPanel = $('.ui-tabs-panel:not(.ui-tabs-hide)');
Now of course, if you have multiple tabs sections, you may need to inquire the encapsulating div element ID for the specific tabs group you want the current tab from. Such as:
//  if you have 2 tabs areas created as follows ...
$('#example-1').tabs();
$('#example-2').tabs();

//  and you want the current tab or panel for the tabs of example-2
//  then you would simpley include the element ID to the code I previously mentioned ...
var curTab = $('#example-2 .ui-tabs-selected');//  To retrieve the current TAB and assign it to a variable ...
var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');//  To retrieve the current PANEL and assign it to a variable ...

YAY! I have what I need! Now what can I get from it?


In short, "Anyting yu want..."
That's right! You now have the power to go forth and do good work! I'll of course give you some examples. Remember earlier, how I showed you on the jQueryUI site, they mentioned how to get the index. See below on how to do that with this new piece of code ... and much ... MUCH MORE!
//  First, lets grab the panel for example-1
var curTabEx01 = $('#example-1 .ui-tabs-panel:not(.ui-tabs-hide)');

//  Now, to get the index just simply ...
curTabEx01.index();
//  To get the ID property of the current panel
curTabEx01.prop("id");
//  To get an attribute for the currently selected panel
curTabEx01.attr("class");
//  to get to something inside the panel and hide it
curTabEx01.find(".some-class-to-hide").hide();
//  and so forth and so on, I really hope you get the point by now
One Last thing to elaborate on. If you create your tabs exactly as seen in the jQueryUI examples, then your panel index will be on a 1-index value. This is not too much of a problem unless you expect 0-index value as with most things in coding. Just subtract one like: curTabEx01.index() - 1;
This is because the "ul" containing your "tabs" is technically index number 0.
HOWEVER!
If you want to have the panels be on a zero index value, and you don't want to subtract one every time you get the index, then you can place you panels inside their own encapsulating div element and it will not hurt anything. Like so:
<div class="demo">
    <div id="tabs">
        <ul>
            <li><href="#tabs-1">Nunc tincidunt</a></li>
            <li><href="#tabs-2">Proin dolor</a></li>
            <li><href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div class="panels-area">
            <div id="tabs-1">
                <p>Proin elit ...</p>
            </div>
            <div id="tabs-2">
                <p>Morbi tincidunt, ...</p>
            </div>
            <div id="tabs-3">
                <p>Mauris eleifend ...</p>
            </div>
        </div>
    </div>
</div>

Now you have the power, and hopefully the know-how to use it. G'luck coders and enjoy!

jsFiddle with example of this code in action

Friday, April 27, 2012

JavaScript Object.Join? With this jQuery Plug you can!

I had a need not to long ago to join an object much in the way you use Array.join().  Naturally, I thought it might be easier to convert the object's to array's, but then I thought, "Why not make a jQuery plug for this?  After all, how hard can it be?"  As it turned out, it was a little bit harder than I thought.  Although, I did finally figure it out and have been successfully using this plug for most of this year.  Now, admittedly, it hasn't been tested on every type of object, so if you use this and find an error, PLEASE COMMENT ME ABOUT IT!  After all, I can't "improve" it if I don't know where it is broken.  Also, if you do report a "bug", please be sure to give me some example of how you reached the bug so I can replicate the issue myself.  In this post, I'm simply going to add the jsFiddle (see below) as it has everything you need; the code, example usage, and example output.  Simply copy out the code between the comments in the JS area of the fiddle and paste it anywhere into your page you like, or paste it into a js file to be included in your header.  Perhaps one day soon, I'll make more official files and a better blog site, but for now, most you know what to do.


Wednesday, April 25, 2012

Simple JS Snippet for Adding a .position Function to the window Object

Not a whole lot to explain here.  I'll include a jsFiddle below that will even show you how to put this func on a timer to update value at a certain area (in my case, a pair of table columns) regularly so you can use this func to tell if the window is being moved!

This function is pretty straight forward and simple.  It first checks to see if anything else in the place of `window.position` and if not, it adds the simple function.  The function itself does nothing more than check browser version, then return an object containing an "x" and a "y" reflecting the current browser window's x and y position on your screen.

I forgot to mention, when I first posted this, using this function this way (preferably at the TOP of your JavaScript) not only enables `window.position`, but it actually assigns the function as a "global".  What this means is that you can recall it in most browsers by simply typing `position()`.  Now, just so you know, this is generally advised against for various reason's.  If you don't feel comfortable assigning this as a global function, you can always use a name-spacing ftw.  For more on name-spacing, check out this nice blog here.

The function:


The Example: