On the hunt for the best open source resources and more

Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.

x

As many of you already know, jQuery can do a lot of things in more than just one way, so if you see a tip, trick or solution and think/know this can be done better, smarter or faster please let me know, post and share it in a comment below of just email me this, so that i can use this for part 2.

1. Disable right-click

Disable right-click contextual menu.

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

2. Disappearing search field text

Hide when clicked in the search field, the value.(example can be found below in the comment fields)

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
   textFill($('input.text1'));
});

	function textFill(input){ //input focus text function
 	var originalvalue = input.val();
 	input.focus( function(){
  		if( $.trim(input.val()) == originalvalue ){ input.val(''); }
 	});
 	input.blur( function(){
  		if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
 	});
}

3. Opening links in a new window

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.

$(document).ready(function() {
   //Example 1: Every link will open in a new window
   $('a[href^="http://"]').attr("target", "_blank");

   //Example 2: Links with the rel="external" attribute will only open in a new window
   $('a[@rel$='external']').click(function(){
      this.target = "_blank";
   });
});
// how to use
open link

4. Detect browser

Change/add something for a certain browser.

Notice: As of jQuery 1.4, the $.browser variable is replaced by $.support.

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
	// do something
}

// Target Safari
if( $.browser.safari ){
	// do something
}

// Target Chrome
if( $.browser.chrome){
	// do something
}

// Target Camino
if( $.browser.camino){
	// do something
}

// Target Opera
if( $.browser.opera){
	// do something
}

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
	// do something
}

// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
	// do something
}
});

5. Preloading images

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
jQuery.preloadImages = function()
{
  for(var i = 0; i").attr("src", arguments[i]);
  }
}
// how to use
$.preloadImages("image1.jpg");
});

6. CSS Styleswitcher

Switch between different styles?

$(document).ready(function() {
	$("a.Styleswitcher").click(function() {
		//swicth the LINK REL attribute with the value in A REL attribute
		$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
	});
// how to use
// place this in your header

// the links
Default Theme
Red Theme
Blue Theme
});

7. Columns of equal height

If you are using two CSS columns, use this to make them exactly the same height.

$(document).ready(function() {
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
// how to use
$(document).ready(function() {
    equalHeight($(".left"));
    equalHeight($(".right"));
});
});

8. Font resizing

Want to let the users change there font size?

$(document).ready(function() {
  // Reset the font size(back to default)
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase the font size(bigger font0
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease the font size(smaller font)
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});

9. Smooth(animated) page scroll

For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target
   || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body')
  .animate({scrollTop: targetOffset}, 900);
    return false;
   }
  }
  });
// how to use
// place this where you want to scroll to

// the link
go to top
});

11. Get the mouse cursor x and y axis

Want to know where your mouse cursor is?

$(document).ready(function() {
   $().mousemove(function(e){
     //display the x and y axis values inside the div with the id XY
    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
// how to use


});

12. Verify if an Element is empty

This will allow you to check if an element is empty.

$(document).ready(function() {
  if ($('#id').html()) {
   // do something
   }
});

13. Replace a element

Want to replace a div, or something else?

$(document).ready(function() {
   $('#id').replaceWith('
I have been replaced

');
});

14. jQuery timer callback functions

Want to delay something?

$(document).ready(function() {
   window.setTimeout(function() {
     // do something
   }, 1000);
});

15. Remove a word

Want to remove a certain word(s)?

$(document).ready(function() {
   var el = $('#id');
   el.html(el.html().replace(/word/ig, ""));
});

16. Verify that an element exists in jQuery

Simply test with the .length property if the element exists.

$(document).ready(function() {
   if ($('#id').length) {
  // do something
  }
});

17. Make the entire DIV clickable

Want to make the complete div clickable?

$(document).ready(function() {
	$("div").click(function(){
	  //get the url from href attribute and launch the url
	  window.location=$(this).find("a").attr("href"); return false;
	});
// how to use
home

});

18. Switch between classes or id’s when resizing the window.

Want to switch between a class or id, when resizing the window?

$(document).ready(function() {
   function checkWindowSize() {
	if ( $(window).width() > 1200 ) {
		$('body').addClass('large');
	}
	else {
		$('body').removeClass('large');
	}
   }
$(window).resize(checkWindowSize);
});

19. Clone a object

Clone a div or an other element.

$(document).ready(function() {
   var cloned = $('#id').clone();
// how to use


});

20. Center an element on the screen

Center an element in the center of your screen.

$(document).ready(function() {
  jQuery.fn.center = function () {
	  this.css("position","absolute");
	  this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	  this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	  return this;
  }
  $("#id").center();
});

21. Write our own selector

Write your own selectors.

$(document).ready(function() {
   $.extend($.expr[':'], {
       moreThen1000px: function(a) {
           return $(a).width() > 1000;
      }
   });
  $('.box:moreThen1000px').click(function() {
      // creating a simple js alert box
      alert('The element that you have clicked is over 1000 pixels wide');
  });
});

22. Count a element

Count an element.

$(document).ready(function() {
   $("p").size();
});

23. Use Your Own Bullets

Want to use your own bullets instead of using the standard or images bullets?

$(document).ready(function() {
   $("ul").addClass("Replaced");
   $("ul > li").prepend("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});

24. Let Google host jQuery for you

Let Google host the jQuery script for you. This can be done in 2 ways.

//Example 1



 // Example 2:(the best and fastest way)

25. Disable jQuery animations

Disable all jQuery effects

$(document).ready(function() {
    jQuery.fx.off = true;
});

26. No conflict-mode

To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

$(document).ready(function() {
   var $jq = jQuery.noConflict();
   $jq('#id').show();
});

Resources

• jQuery
• jQuery UI
• 14 days of jQuery
• Learning jQuery
• Improve your jQuery – 25 excellent tips
• Cheatsheet jQuery 1.1.3
• Cheatsheet jQuery 1.2
• Cheatsheet jQuery 1.3
• Cheatsheet jQuery 1.3.2
• Cheatsheet jQuery 1.4

If you are looking for JN0-303 help, then you should opt for braindump written and organized by certified experts to help you pass 642-975 on time in single effort.

Written by: Mark Dijkstra

Mark Dijkstra is the founder and main writer of OpenSourceHunter. He's also a passionate freelance web developer and designer. Mark is one of those people that spend too much time on the internet to keep up with all of the trends and tools.
You can follow Mark on twitter @ MarkDijkstra

Share this Story

If you enjoyed reading, consider sharing the love with the rest of the world.

Share

Related Posts

Keep reading with more great articles!

More Categories

• Adobe AIR
• Advertisement
• AJAX
• Analytics
• Animations
• Announcement
• API
• Bookmark
• Browser
• Calendar
• Charts
• CMS
• CSS
• Design
• Desktop
• E-commerce
• Editor
• Email
• Fireworks
• Flash
• Forms
• Forum
• Framework
• FreeBee
• Gallery
• Gimp
• Giveaway
• Google
• Icons
• Illustrator
• Images
• Inspiration
• Interview
• Javascript
• jQuery
• Layout
• Menu
• MooTools
• Photoshop
• PHP
• Poll
• Popup
• Prototype
• Resources
• RSS
• Script.aculo.us
• Site of the month
• Stats
• Tables
• Template
• Tips and tricks
• Tools
• Tooltip
• Tutorials
• Twitter
• Upload
• Vector
• Video
• Web OS
• Wordpress

28 Comments