10 jQuery snippets every developer should know

For this post, we would like to share with our readers 10 JQuery Code Snippets which we’ve collected that users can copy and paste directly into their themes by which to create some nice visual effects which will spruce up your website. Enjoy !
1. Smooth Scrolling for Internal Links
$('a[href^="#"]').bind('click.smoothscroll',function (e) { e.preventDefault(); var anchor = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 500, 'swing', function () { window.location.hash = anchor; }); });
2. JS : jQuery Get All Nodes, Including Orphaned Text
var $element = $('#my-element'); var $nodes = $element.contents(); $nodes.each(function() { if(this.nodeType === 3 && $.trim($(this).text())) { $(this).wrap(''); } });
3. Select Box Restrict
$("#categories option").click(function(e){ if ($(this).parent().val().length > 2) { $(this).removeAttr("selected"); } });
4. Facebook Get User Permissions and Send These Via Ajax
// always put this function inside a click or a user action, don't automatically open it or browser will block the popup. $('#button_id').click(function(){ FB.login(function(logged) { if(logged.status == "connected"){ FB.api("/me", function(response) { $.ajax({ type: "POST", url: "pass_value.php", data: { fb_id: response.id, name: response.first_name, last_name: response.last_name, gender: response.gender}, success: function(){window.location.href = "gosomewhere.php"; } }); }); } /* in the scope u specify all permission you need, in this case you get all basic INFO and pubblish to wall permission */ }, {scope: 'publish_stream'}); });
5. jQuery Remove Class with WildCard
var _c = 'your-icon-class' $('.currency').removeClass (function (index, css) { return (css.match (/\bicon-\S+/g) || []).join(' '); }).addClass('icon-'+_c);
6. jQuery Toggle Disabled
/* HTML | | | <input type="text"value="I <3 EMOTICODE <img src="http://codegeekz.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> " /> <input type="button" value="Toggle Disabled" /> | | | */ // Plugin (function($) { $.fn.toggleDisabled = function() { return this.each(function() { var $this = $(this); if ($this.attr('disabled')) $this.removeAttr('disabled'); else $this.attr('disabled', 'disabled'); }); }; })(jQuery); // TEST $(function() { $('input:button').click(function(){ $('input:text').toggleDisabled(); }); });
7. Smooth Scroller
// HTML: // <h1 id="anchor">Lorem Ipsum</h1> //<a class="topLink" href="#anchor">Back to Top</a> $(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; }); });
8. Form Tracking with JS and Google Analytics
var array1 = []; $(document).ready(function () { $('input').change(function () { var formbox = $(this).attr('id'); array1.push(formbox); console.log("you filled out box " + array1); }); $('#submit').click(function () { console.log('tracked ' + array1); //alert('this is the order of boxes you filled out: ' + array1); _gaq.push(['_trackEvent', 'Form', 'completed', '"' + array1 + '"']); }); });
9. Test Password Strength
$('#pass').keyup(function(e){ var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); var enoughRegex = new RegExp("(?=.{6,}).*", "g"); if (false == enoughRegex.test($(this).val())) { $('#passstrength').html('More Characters'); } else if (strongRegex.test($(this).val())) { $('#passstrength').className = 'ok'; $('#passstrength').html('Strong!'); } else if (mediumRegex.test($(this).val())) { $('#passstrength').className = 'alert'; $('#passstrength').html('Medium!'); } else { $('#passstrength').className = 'error'; $('#passstrength').html('Weak!'); } return true; });
10. Make Entire Div Clickable
<div class="myBox">blah blah blah. <a href="http://google.com">link</a></div> [/jquery] The following lines of jQuery will make the entire div clickable: [jquery] $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
tags: jquery resources tutorials tips plugins snippets webdev
Related Posts
- How to Become a Full Stack Developer in 2018
- Best apps to boost your social media
- Ten Laws of Successful Social Media and Content Marketing
- Increase the Number of Backlinks to Your Site the Right Way
- 3 Top Tips for Picking the Right Web Hosting Service for Your Needs
- What You Need to Start a Great Healthcare Blog
- Tips To Choose the Right PMP Certification
- 4 Strategies to Improve YouTube Marketing
- Top Ideas for Creating Website Content
- Best Paywall Plugins for WordPress
- How to Have a Website That Brings Excitement to the Accounting Industry
- How to Recover a Deleted Microsoft Word Document