Ajax Updates |
- Searching for Text with jQuery
- jQuery Snippets Target Blank
- Load jQuery from Google
- How to validate Date of Birth with jQuery
| Searching for Text with jQuery Posted: 15 Dec 2009 02:13 PM PST This function performs a recursive search for nodes that contain a pattern. Arguments are a jQuery object and a pattern. The pattern can be a string or a regular expression. $.fn.egrep = function(pat) { var out = []; var textNodes = function(n) { if (n.nodeType == Node.TEXT_NODE) { var t = typeof pat == 'string' ? n.nodeValue.indexOf(pat) != -1 : pat.test(n.nodeValue); if (t) { out.push(n.parentNode); } } else { $.each(n.childNodes, function(a, b) { textNodes(b); }); } }; this.each(function() { textNodes(this); }); return out; }; Case-Insensitive Contains Check var pattern = /exp/i; $('#id').filter(function() { return pattern.test($(this).text()); });  Related Listings:
| |||||
| Posted: 15 Dec 2009 02:08 PM PST Replacement For target="_blank" A real quick way to make all your external links open in another window. All you have to do to get this jQuery snippet to work is have the rel="external". With that this little bit or jQuery will open the link in a blank window. // Replace for target="_blank" to open in a new window $("a[@rel~='external']").click( function() { window.open( $(this).attr('href') ); return false; }); Easy jQuery Parent Load With this small bit of jQuery you are able to have the browser load the parent href attribute of the item you are clicking. All that you have to have on the child element is rel="ajax". // Load parent container via AJAX $("a[@rel~='ajax']").click( function() { $(this).parent().load( $(this).attr('href') ); return false; }); Easy Vertical Align This little snippet can come in real handy when you are trying to center a object to the documents height. This is quite simple all you have to do to make this work is as the class vcenter to the object that you want to center to your document. // Center Object Vertically to Document var doc_height = $(document).height(); var el_height = $(".vcenter").height(); $(".vcenter").css({"position" : "relative" , "top" : doc_height/2 - el_height/2}); Simple jQuery Lightbox Who needs a huge 5k Lightbox when you can build your own with as little as what you see below. This is the basic version of this snippet brought to you by Clayton McIlrath. If you would like to know everything about this jQuery snippet go to jQuery Lightbox Modal Plugin. This Lightbox is so easy to use all you have to do is style your Lightbox how you want to. Then you invoke the modal() function and that will trigger your lightbox. (function ($) { // Custom Lightbox, you can also find this on http://thinkclay.com/news/jquery-lightbox-modal-plugin $.fn.modal = function() { return this.each(function(i){ var ah = $(this).height(); var wh = $(this).parent().height(); var nh = (wh - ah) / 3; var aw = $(this).width(); var ww = $(this).parent().width(); var nw = (ww - aw) / 2; $(this).css({'margin-top' : nh, 'margin-left' : nw}); alert(dh); }); }; })(jQuery); Related Listings:
| |||||
| Posted: 15 Dec 2009 02:01 PM PST The AJAX Libraries API provides your applications with stable, reliable, high speed, globally available access to all of the most popular, open source JavaScript libraries. Your application can use our very flexible loader google.load() or direct, path based access to the scripts. The most powerful way to load the libraries is by using google.load() to name a library and your prefered version. E.g.: google.load("jquery", "1.3.2"); google.load("jqueryui", "1.7.2"); google.load("prototype", "1.6.1.0"); google.load("scriptaculous", "1.8.3"); google.load("mootools", "1.2.4"); google.load("dojo", "1.4.0"); google.load("swfobject", "2.2"); google.load("yui", "2.8.0r4"); google.load("ext-core", "3.0.0"); As you can see in the code snippets above, the first argument to google.load is the name of a library. The second argument is a version specification. The complete list of Ajax libraries is a growing collection of the most popular, open source JavaScript libraries. The versioning system allows your application to specify a desired version with as much precision as it needs. By dropping version fields, you end up wild carding a field. For instance, consider a set of versions: Specifying a version of “1.8.2″ will select the obvious version. This is because a fully specified version was used. Specifying a version of “1.8″ would select version 1.8.4 since this is the highest versioned release in the 1.8 branch. For much the same reason, a request for “1″ will end up loading version 1.9.1. Note, these versioning semantics work the same way when using google.load and when using direct script urls. Each library is available via both google.load() and directly, via < script/ > tag. The google.load() approach offers the most functionality and performance. In the sections that follow, we document all of the libraries that are available. For each library we list its name (as in the name used in google.load()), all of the versions that we have on hand for the library, etc. Related Listings:
| |||||
| How to validate Date of Birth with jQuery Posted: 15 Dec 2009 01:56 PM PST In a recent project I had to implement what's commonly referred to as a Legal Drinking Age (LDA) page. Basically what needs to happen is that the user has to enter their date of birth and thus 'confirm' that they are of a legal drinking age for their respective country. This brought me to an interesting requirement – the user needs to enter their birth of date (in this case via 3 select boxes), their age then needs to be calculated from the entered date and they are either granted, or denied access based on the result. Interestingly enough, after having a quick look around I hadn't been able to find any similar example, so I had to come up with something myself. The following code is my solution : $("#lda-form").submit(function(){ var day = $("#day").val(); var month = $("#month").val(); var year = $("#year").val(); var age = 18; var mydate = new Date(); mydate.setFullYear(year, month-1, day); var currdate = new Date(); currdate.setFullYear(currdate.getFullYear() - age); if ((currdate - mydate) < 0){ alert("Sorry, only persons over the age of " + age + " may enter this site"); return false; } return true; }); First, we get the relevant entered date values – the "day", "month" and "year". I've also added an "age" var so that this can be easily edited if necessary – the current value is set to 18. Next we create a Date object and call it "mydate". We then use the object's "setFullYear" method to set the value of "mydate" to the user's entered birth date. You can view more information about this method here. The only thing to notice here is that we have subtract 1 from the "month" value as it's 0 indexed. Now that we have the user's birth date sorted, we then create another Date object and call it "currdate". The default value for "currdate" is the current date. We then set "currdate" to whatever the current date is minus our "age" value – i.e. Today – 18 years. Once again, we use the "setFullYear" method to set the date. However, to get the current date in a useable format, we use the "getFullYear" method and THEN subtract 18 from the resulting value. So to do this we use "currdate.getFullYear() – age". Once we have the date of 18 years ago and the user's birth date, both in the same format, it's simply a matter of making sure that the required date minus the birth date isn't greater than 0. If so, we output an alert to inform the user then return "false" to make sure that the form doesn't get submitted. Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.