Simple Blog site to help instruct and learn about different coding practices.
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:
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
...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 } });
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)');
// 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
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><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a 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.
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:
Tuesday, April 17, 2012
My Ongoing List of Fiddles (80+ & Counting)
Not sure why i'm doing this, other than to make it easier for ME to find my fiddles quickly, since the dashboard only show a few at a time. But who knows, someone may find this page useful in finding my fiddles as well! As you may notice, there is A LOT of "SO Help"(s), these mean they answered a question on Stackoverflow.com
FYI, it takes a minute to load ...
FYI, it takes a minute to load ...
See more @ Spyk3's jsFiddle Dashboard!
Thursday, March 29, 2012
PHP: Get Age Comparison Results of 3 Functions
Perhaps I'll blog in detail more about these functions later, but for now, I'm going to present to you 3 of the more popular age formulas and the results I've found.
ALERT: function getAge_2 seems to be the most popular one I've found on the net and is the one that tends to be wrong!
First, the functions
The following results span 100 years from 1/1/1902 to today, 3/29/2012. As you will see in the followingtwo tables, the key difference was found in getting the age of someone with a birthday tomorrow, expect on some years before 1932 where the difference was also found for the day AFTER tomorrow.
The Full table was way to big, so i'll find another way to show it later, gota get back to the grind, this was just to help others know! Laters!
ALERT: function getAge_2 seems to be the most popular one I've found on the net and is the one that tends to be wrong!
First, the functions
function getAge_1($date) { // Y-m-d format $now = explode("-", date('Y-m-d')); $dob = explode("-", $date); $dif = $now[0] - $dob[0]; if ($dob[1] > $now[1]) { // birthday month has not hit this year $dif -= 1; } elseif ($dob[1] == $now[1]) { // birthday month is this month, check day if ($dob[2] > $now[2]) { $dif -= 1; } elseif ($dob[2] == $now[2]) { // Happy Birthday! //$dif = $dif." Happy Birthday!"; }; }; return $dif; } function getAge_2($date) { // Y-m-d format return floor((time() - strtotime($date))/(60*60*24*365.2425)); } function getAge_3($date) { // Y-m-d format return intval(substr(date('Ymd') - date('Ymd', strtotime($date)), 0, -4)); }
The following results span 100 years from 1/1/1902 to today, 3/29/2012. As you will see in the following
The Difference Table |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Year |
getAge_1 |
getAge_2 |
getAge_3 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
The Full table was way to big, so i'll find another way to show it later, gota get back to the grind, this was just to help others know! Laters!
Monday, March 19, 2012
Helpful Hints: Javascript/jQuery Knowing When the User Stopped Typing
This is just going to be a quick post with something on my mind to help new coders out there. Really I just need a short break from thinking.
Ever seen those handy dandy sites that preform some action AFTER you finish typing, rather than slowing down your device by trying to repeat the action for every character? Wanna know how to do it? GOOD! Then you're in the right place. This "type waiting" is actually very easy! It's all about timing ... or timers rather.
The one flaw to the following system is being unable to know the average type speed of a user. This is often countered by simply using a 2 second timer (although many sites use only a 1 second timer and preform fine). Two seconds is optimal because it is both: an easy amount of time that most people don't mind waiting to see a reaction, and is usually plenty of time to decide if even a "hunt 'n peck" user has stopped typing. However, you will only know what works best for your sight through experimentation. Now, who wants code?
On with the code! First I will example this action in javascript (hang on jQuery users, you're next) as it is really quite simple and will help you get a better idea of what is going on. The first thing you need to do is create a variable outside of your functions (preferably global, but its up to you, how, when, and where you want to use it). It doesn't have to be anything fancy, but be careful of name-spacing as per usual.
Ok, now that the hard part is over let's create our initial function.
Finally the really easy part, your WORK! Simply write the function you want called after the typeing timer stops!
With all the functions made, the rest is too easy. Simply find the element you want to attach it too. And viola! You're all done!
Now, for those of you using jQuery:
Create your variable. Then the code (even easier, cause its jQuery :D)
Ever seen those handy dandy sites that preform some action AFTER you finish typing, rather than slowing down your device by trying to repeat the action for every character? Wanna know how to do it? GOOD! Then you're in the right place. This "type waiting" is actually very easy! It's all about timing ... or timers rather.
The one flaw to the following system is being unable to know the average type speed of a user. This is often countered by simply using a 2 second timer (although many sites use only a 1 second timer and preform fine). Two seconds is optimal because it is both: an easy amount of time that most people don't mind waiting to see a reaction, and is usually plenty of time to decide if even a "hunt 'n peck" user has stopped typing. However, you will only know what works best for your sight through experimentation. Now, who wants code?
On with the code! First I will example this action in javascript (hang on jQuery users, you're next) as it is really quite simple and will help you get a better idea of what is going on. The first thing you need to do is create a variable outside of your functions (preferably global, but its up to you, how, when, and where you want to use it). It doesn't have to be anything fancy, but be careful of name-spacing as per usual.
Ok, now that the hard part is over let's create our initial function.
Finally the really easy part, your WORK! Simply write the function you want called after the typeing timer stops!
With all the functions made, the rest is too easy. Simply find the element you want to attach it too. And viola! You're all done!
Now, for those of you using jQuery:
Create your variable. Then the code (even easier, cause its jQuery :D)
Enjoy!
Monday, March 5, 2012
jQuery: myURL Extension (How to get that pesky site URL on demand/dynamically)
UPDATE: Now includes Parameter support for making site links like http://www.mysite.com?para1=test¶2=test+2
I would also like to further reiterate that I do appreciate your input, good, bad, or indifferent!
Let me first say, this is not my usual style blog in that I'm not going to explain this extension much today (perhaps another blog). This is simply to show off a fancy extension/plug-in I've made for jQuery that helps to retrieve your site URL (with parameters!) on demand.
I find this feature most often useful when doing a lot of Ajax to PHP work where i'm needing to grab specific controllers or controller functions at specific moments. Usually in simple things like loading grids or collecting data for a live change of some sort.
Anyway, on with the show! I'm going to start this by showing you how easy this function is to use. Then I'll give you all of it's possible uses. Finally, if you're just here for the extension, you'll find it at the bottom of this post.
The Ease of Use! OMG! That was so ... easy? Could it really be? And keep in mind, while there are many alternatives out there for doing this, most require you to check the browser version as different browsers have different methods for fetching the key info needed to build your URL string. I already did the work for you!
Now let's look at many of the possible ways to use this so you can maximize your coding experience without a lot of horrendous thinking (ow my head!).
Well you saw how to get the basic URL of your sight, but what if you need that ever famous `index.php` page? Try this:
Now let's try something a little harder. Perhaps you need a image from your image folder that cannot be reached via the index.php but rather by your base URL plus images directory. In other words, your images folder would be like `http://spyk3lc.blogspot.com/images/`. LoL, all too easy for the myURL func!
Wheh! We're almost to the end (finally, this is taking forever :P). You're final quest is to put it all together and grab a directory with content via the index.php add-in!
Well, you're almost ready for the actual code, though I should throw just two more piece of info at ya. First, if you really don't like breaking it all down in multiple string parameters, then just use one! See:
WAIT! What about this parameter update I came here for? Perhaps you need your site link with data sent to a REST control or a youtube style player is on your site using your own videos, or whatever your purpose! Now simply include a JSON style object as the LAST parameter in your call to myURL and watch the magic happen!
And finally, for you control freaks out there. I did ensure to include a config that can be run just after you add the plugin. These config options will allow you to set a main directory and sub-directory for both local and on-line use. Keep in mind though, these directories are added before index.php because this is ideal if you are working from a local host with multiple domain directories or even an online sand-box of the same setup. You can also change this at anytime, but every call you make to myURL after you change the config will be reflected.
FINALLY, the Plug-In!
As Seen in jsFiddle Example here:
I would also like to further reiterate that I do appreciate your input, good, bad, or indifferent!
Let me first say, this is not my usual style blog in that I'm not going to explain this extension much today (perhaps another blog). This is simply to show off a fancy extension/plug-in I've made for jQuery that helps to retrieve your site URL (with parameters!) on demand.
I find this feature most often useful when doing a lot of Ajax to PHP work where i'm needing to grab specific controllers or controller functions at specific moments. Usually in simple things like loading grids or collecting data for a live change of some sort.
Anyway, on with the show! I'm going to start this by showing you how easy this function is to use. Then I'll give you all of it's possible uses. Finally, if you're just here for the extension, you'll find it at the bottom of this post.
The Ease of Use! OMG! That was so ... easy? Could it really be? And keep in mind, while there are many alternatives out there for doing this, most require you to check the browser version as different browsers have different methods for fetching the key info needed to build your URL string. I already did the work for you!
Now let's look at many of the possible ways to use this so you can maximize your coding experience without a lot of horrendous thinking (ow my head!).
Well you saw how to get the basic URL of your sight, but what if you need that ever famous `index.php` page? Try this:
Now let's try something a little harder. Perhaps you need a image from your image folder that cannot be reached via the index.php but rather by your base URL plus images directory. In other words, your images folder would be like `http://spyk3lc.blogspot.com/images/`. LoL, all too easy for the myURL func!
Wheh! We're almost to the end (finally, this is taking forever :P). You're final quest is to put it all together and grab a directory with content via the index.php add-in!
Well, you're almost ready for the actual code, though I should throw just two more piece of info at ya. First, if you really don't like breaking it all down in multiple string parameters, then just use one! See:
WAIT! What about this parameter update I came here for? Perhaps you need your site link with data sent to a REST control or a youtube style player is on your site using your own videos, or whatever your purpose! Now simply include a JSON style object as the LAST parameter in your call to myURL and watch the magic happen!
And finally, for you control freaks out there. I did ensure to include a config that can be run just after you add the plugin. These config options will allow you to set a main directory and sub-directory for both local and on-line use. Keep in mind though, these directories are added before index.php because this is ideal if you are working from a local host with multiple domain directories or even an online sand-box of the same setup. You can also change this at anytime, but every call you make to myURL after you change the config will be reflected.
FINALLY, the Plug-In!
Monday, February 27, 2012
How to Create a Simple jQuery Function
I really feel the title of this should be "How to Turn Any Simple Function into a Reusable jQuery Function", but aside from that title being really long, if you're a bit of a jQuery noob, then you probably typed something similar to the the actual title in Google and thus ended up here.
If you've used jQuery, or are just starting out, then you should realize jQuery functions as simplified namespace calls of otherwise tedious function calls. For example, $.ajax() is a jQuery function that provides almost all of the complexities of an ajax call into one name space where parameters are passed through in simple json style such as $.ajax({ url: 'http://spyk3lc.blogspot.com' });. You too can have this power!
To demonstrate this easy procedure, I'm going to take something simple, used quite frequently ... everywhere and make it into a simple, reusable set of functions. So what is this all powerful command? Simply tuning your cursor from default to waiting and back again.
First, I'll look at the most simple approach. Perhaps you simply want to set your cursor t wait while something is happening and then to default when that event is done. So at the start of your action you may have something like:
While at the end of your action your change becomes:
While this is a simple process, when surrounded by jQuery calls, it can look completely out of place and may not fit in the manner you wish. So we want to change these calls to fit in jQuery style functions we can use again and again.
A prior warning, this next couple steps negates paying attention to jQuery name-spacing and is not "best practice", however, before I end this article, I will explain a better way to "crop" this down to size and review why name-spacing is important, I promise. For now, let's stick with the simple process of making those jQuery functions!
The first thing to know is that this doesn't have to be wrapped in your typical "document.ready" bubble, as jQuery already provides a "plug-in" style way of adding your functions, after you've called for jQuery. The mark up is simple:
With that said, you are now ready to make your first custom jQuery function. Inside your new extension set up, simply start your function with an if statement that determines if the namespace you're using is available in the jQuery library. This if function is as simple as:
Keep in mind, this check is no magic. It is as simple as javascript trying to use the function $.cursorDefault and then getting a kick back tell it that namespace is undefined. Yay! Then we can use it! For future reference, get familiar with the console, and if ever question a namespace you are about to use, then simply try to console log it first to see if it exist. For example, before writing this function we're about to write, if you want to double check if that namespace exist, then do the following:
If you've used jQuery, or are just starting out, then you should realize jQuery functions as simplified namespace calls of otherwise tedious function calls. For example, $.ajax() is a jQuery function that provides almost all of the complexities of an ajax call into one name space where parameters are passed through in simple json style such as $.ajax({ url: 'http://spyk3lc.blogspot.com' });. You too can have this power!
To demonstrate this easy procedure, I'm going to take something simple, used quite frequently ... everywhere and make it into a simple, reusable set of functions. So what is this all powerful command? Simply tuning your cursor from default to waiting and back again.
First, I'll look at the most simple approach. Perhaps you simply want to set your cursor t wait while something is happening and then to default when that event is done. So at the start of your action you may have something like:
While at the end of your action your change becomes:
While this is a simple process, when surrounded by jQuery calls, it can look completely out of place and may not fit in the manner you wish. So we want to change these calls to fit in jQuery style functions we can use again and again.
A prior warning, this next couple steps negates paying attention to jQuery name-spacing and is not "best practice", however, before I end this article, I will explain a better way to "crop" this down to size and review why name-spacing is important, I promise. For now, let's stick with the simple process of making those jQuery functions!
The first thing to know is that this doesn't have to be wrapped in your typical "document.ready" bubble, as jQuery already provides a "plug-in" style way of adding your functions, after you've called for jQuery. The mark up is simple:
With that said, you are now ready to make your first custom jQuery function. Inside your new extension set up, simply start your function with an if statement that determines if the namespace you're using is available in the jQuery library. This if function is as simple as:
Keep in mind, this check is no magic. It is as simple as javascript trying to use the function $.cursorDefault and then getting a kick back tell it that namespace is undefined. Yay! Then we can use it! For future reference, get familiar with the console, and if ever question a namespace you are about to use, then simply try to console log it first to see if it exist. For example, before writing this function we're about to write, if you want to double check if that namespace exist, then do the following:
- Use a browser like Google chrome and go to your page or even the jQuery homepage
- Open the debugging console (ctrl+shift+j in Chrome)
- Click to type in the console
- Type $.YourDesiredFunctionName
- If it says something like undefined after you press enter, then you are in the clear to use this as a function name, just be careful it doesn't interfer with any other desired
Finally, we can make our first function.
Walla! It was just that easy! And reuse is even easier. Simply type `$.cursorDefault();` and at that moment it is called, your cursor will magically become normal again. Now where is that wait function?
Oh there it is, but there is a problem here. The namespace issue! It's never a good idea to make multiple function names where one will do. This is where you must be work smarter, not harder. Think about what our two functions are doing and what they are similar too.
Well, one function sets it to default or 0 as seen in the binary world, whereas the other provides it an action state. This is very similar to a boolean!
But how do we simulate this out of two functions? Parameters!
So now all we need is a new function name not being used by jQuery and one that probably want be used by other plugins. In our case we'll use "cursorWait", as we already have it tested and working, but this time we're going to make a parameter change to it.
So let's see how to rewrite this into one function name:
Now, you have written your first jQuery function, and it's reuse is simple.
Before we go,let me point out that our final function solution can actually be written in several ways. I chose the switch statement simply to drive home the point that this will work weather it has a parameter or not. However, since the only param we need is `false`, you could just as easily use a full if statement or even a online if statement such as:
That's all for now! Keep an eye out for more easy jQuery tips and even other language and library tips in the near future! Good luck!
Oh there it is, but there is a problem here. The namespace issue! It's never a good idea to make multiple function names where one will do. This is where you must be work smarter, not harder. Think about what our two functions are doing and what they are similar too.
Well, one function sets it to default or 0 as seen in the binary world, whereas the other provides it an action state. This is very similar to a boolean!
But how do we simulate this out of two functions? Parameters!
So now all we need is a new function name not being used by jQuery and one that probably want be used by other plugins. In our case we'll use "cursorWait", as we already have it tested and working, but this time we're going to make a parameter change to it.
So let's see how to rewrite this into one function name:
Now, you have written your first jQuery function, and it's reuse is simple.
Before we go,let me point out that our final function solution can actually be written in several ways. I chose the switch statement simply to drive home the point that this will work weather it has a parameter or not. However, since the only param we need is `false`, you could just as easily use a full if statement or even a online if statement such as:
That's all for now! Keep an eye out for more easy jQuery tips and even other language and library tips in the near future! Good luck!
An Intro
In case anyone cares, I'm starting this blog with a little info on me and why I'm making this blog. First of all, let it be noted that this is the about the 3rd time in 5 years I've wanted to start a blog and never get past my first post. So, while this time I expect to carry it much further, I can't mislead anyone by promising this to be ongoing thing unless of course I have "encouragement" to do otherwise or simply maintain my self-will to maintain this blog. That being said, here's to the new and hopefully final attempt!
Next I should mention a little of my background and experience. Of course I have had 0 college training in coding. That's not to say I never went to college. I did go for four years in pursuit of a business degree. Then life happened, I never graduated, flip-flopped from one thing to the next till a former employer gave me a chance behind the keyboard. Suddenly the sun rose and I began to question myself, "You've done this since you were 9 ... Why the hell did you go to school for business!?"
So here I am, 3-4 years later, coding the complexities of life into a simple software solution. At my previous employer, I was responsible for simple formats under vb and c# with a large reference to understanding the dreaded "win32 libs" ... all of them. Our company provided software for law enforcement and thus I became the guy responsible for adding certain "securities" to our programs, such as disabling the keyboard while a vehicle is in motion. It was fun, and beyond entertaining, however, a slight error in management left to seek other means of income, preferably in the same field I had become acquainted with.
Today I help develop both a website for the sale of and a web software for the use of a product my company has designed. At my back is a great structural engineer and between the two of us, we have created a new type of diagnostic tool not yet seen in the medical world using features of web-design not often seen on the internet. Now, I won't claim to know it all, and my pure javascript writing can sometimes be annoyingly week, but designing and launching the program we have has put me in quite a spot of often times, figuring out how to do things that have yet to be done, or simply, finding easier ways to do things others have made complicated.
All that said, a large majority of what I do today requires me to stay up to date in several languages and peeks my interest into all languages and libraries. As time flows on, I find myself moving from one project to another, constantly learning new techniques, new libraries, and sometimes, new languages. While I've had quite a background in .Net languages and an older background in javascript and perl, most recently I tend to be caught up in PHP through CodeIgniter and javascript via jQuery. I mention this so as to help future readers understand, that this blog my contain 5 months worth of entries on doing things in jQuery, and then may suddenly flip the script and have 7 months of blogs on how to do things in Ruby.
I don't intend to ever focus this blog to one type of learning other than coding in general. So periodically, as my personal habits and/or career shifts and changes, so will my post of blogs. At present, I'm obsessed with the newest version of jQuery (1.7 at moment) and will probably make my next several post about simple things I've learned to do in jQuery that I feel all beginners should know or at least understand to some extent.
Next I should mention a little of my background and experience. Of course I have had 0 college training in coding. That's not to say I never went to college. I did go for four years in pursuit of a business degree. Then life happened, I never graduated, flip-flopped from one thing to the next till a former employer gave me a chance behind the keyboard. Suddenly the sun rose and I began to question myself, "You've done this since you were 9 ... Why the hell did you go to school for business!?"
So here I am, 3-4 years later, coding the complexities of life into a simple software solution. At my previous employer, I was responsible for simple formats under vb and c# with a large reference to understanding the dreaded "win32 libs" ... all of them. Our company provided software for law enforcement and thus I became the guy responsible for adding certain "securities" to our programs, such as disabling the keyboard while a vehicle is in motion. It was fun, and beyond entertaining, however, a slight error in management left to seek other means of income, preferably in the same field I had become acquainted with.
Today I help develop both a website for the sale of and a web software for the use of a product my company has designed. At my back is a great structural engineer and between the two of us, we have created a new type of diagnostic tool not yet seen in the medical world using features of web-design not often seen on the internet. Now, I won't claim to know it all, and my pure javascript writing can sometimes be annoyingly week, but designing and launching the program we have has put me in quite a spot of often times, figuring out how to do things that have yet to be done, or simply, finding easier ways to do things others have made complicated.
All that said, a large majority of what I do today requires me to stay up to date in several languages and peeks my interest into all languages and libraries. As time flows on, I find myself moving from one project to another, constantly learning new techniques, new libraries, and sometimes, new languages. While I've had quite a background in .Net languages and an older background in javascript and perl, most recently I tend to be caught up in PHP through CodeIgniter and javascript via jQuery. I mention this so as to help future readers understand, that this blog my contain 5 months worth of entries on doing things in jQuery, and then may suddenly flip the script and have 7 months of blogs on how to do things in Ruby.
I don't intend to ever focus this blog to one type of learning other than coding in general. So periodically, as my personal habits and/or career shifts and changes, so will my post of blogs. At present, I'm obsessed with the newest version of jQuery (1.7 at moment) and will probably make my next several post about simple things I've learned to do in jQuery that I feel all beginners should know or at least understand to some extent.
Subscribe to:
Posts (Atom)