• Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

Code Geekz

    • Most Popular

      All time

    • 30 Best Tools for Data Visualization

      37 Comments

    • Best PHP Frameworks for Developers

      33 Comments

    • Latest Stories

      What is new?

    • Free SPF Lookup Tool For Securing Email Servers And Reducing Spam Risks

      June 25, 2025

    • Building Product Teams That Scale: The Case for Remote .NET Developers

      May 21, 2025

    • Comments

      Most Recent

    • B. Frances on:

      Best WordPress Wedding Themes

    • Ultimate Content Locker Pro on:

      Best WordPress Social Content Locker Plugins for 2017

  • Home
  • WORDPRESS
    • PLUGINS
    • PHP
    • Themes
    • DEVELOPMENT
      • Javascript
      • JQuery
      • Mootools
  • WEB DESIGN
    • DESIGN
    • CSS
    • HTML
  • TYPOGRAPHY
    • FONTS
  • RESOURCES
    • TUTORIALS
    • THEMES
    • SLIDERS
    • TECHNOLOGY
  • ARCHIVES
  • CONTACT
  • Advertise

10 Useful jQuery Code Snippets for Developers

3
  • by Gavin
  • In DEVELOPMENT · JQuery
  • — 9 Dec, 2013

Implementing JQuery into your theme will enable you in creating a more interactive and creative website. With just a few strips of code website owners can produce a myriad of custom elements as well as visually enhanced animations without the use of Flash since jQuery supports most CSS3 selectors, IDs, class names, and tag names.

Using Jquery you will be able to change an existing element within a number of ways as well as: decreasing page load time and thereby giving your end users a better experience when visiting your site.

For this post, we would like to share with our readers 10 Useful 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;
});

});

 
Source  

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('');
}
});

 
Source  

3. Select Box Restrict

$("#categories option").click(function(e){
if ($(this).parent().val().length > 2) {
$(this).removeAttr("selected");
}
});

 
Source  

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'});

});

 
Source  

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);

 
Source  

6. jQuery Toggle Disabled

/* HTML
|
|
|
<input type="text" value="I &lt;3 EMOTICODE :)" />
<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();
});
});

 
Source  

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;
});

});

 
Source  

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 + '"']);
});
});

 
Source  

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;
});

 
Source  

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;
});

 
Source  

Share

Tags: best jquery code snippetsCode Snippetsjquery code snippetsjquery snippets

— Gavin

A Web addicted Geek stuck inside Tron.

  • Previous story 25 Stylish Free Fonts for Your Designs
  • Next story 15 jQuery CSS Plugins to Speed Up Your Coding

You may also like...

  • Best jQuery Plugins for August 2014
  • Top jQuery Plugins for June 2014
  • 20 Exciting jQuery Mobile Plugins for 2015
  • 20 jQuery Text Effect Plugins to Beautify Your Contents

Enter your em@il & get our posts delivered.





  • Enter your em@il & get our posts delivered.

  • Codegeekz
    • Home
    • DEVELOPMENT
    • 10 Useful jQuery Code Snippets for Developers
    • Home
    • WORDPRESS
      • PLUGINS
      • PHP
      • Themes
      • DEVELOPMENT
        • Javascript
        • JQuery
        • Mootools
    • WEB DESIGN
      • DESIGN
      • CSS
      • HTML
    • TYPOGRAPHY
      • FONTS
    • RESOURCES
      • TUTORIALS
      • THEMES
      • SLIDERS
      • TECHNOLOGY
    • ARCHIVES
    • CONTACT
    • Advertise

    CODEGEEKZ.COM