Category: jQuery

Click Once and Unbind

Have something happen on a click event, but only once! Unbind the click handler after the element has been clicked once. $(‘#my-selector’).bind(‘click’, function() { $(this).unbind(‘click’); alert(‘Clicked and unbound!’); }); Also see Ben’s comment below...

Better Responsive Images Using Multiple Backgrounds

.bg-image { width: 100%; /* default background-position */ background-position: center center; /* lt ie 8 */ -ms-background-position-x: center; -ms-background-position-y: center; /* scale proportionately */ background-size: cover; /* IE8 workaround – http://louisremi.github.io/background-size-polyfill/ */ -ms-behavior: url(/backgroundsize.min.htc);...

How to make Underline Individual Words using jQuery?

jQuery $(‘h1’).each(function() { var words = $(this).text().split(‘ ‘); $(this).empty().html(function(){ for(i = 0; i < words.length; i++){ if(i == 0){ $(this).append(‘<span>’ + words[i] + ‘</span>’); } else { $(this).append(‘ <span>’ + words[i] + ‘</span>’); }...

Working with Attributes

Setting Single Attribute $(“img”).attr(“src”, “http://cdn.css-tricks.com/images/banner.jpg”); Setting Single Attribute (with function) $(“div”).attr(“id”, function (arr) { return “div-id” + arr; }) Setting Multiple Attributes $(“img”).attr({ src: “http://cdn.css-tricks.com/images/banner.jpg”, title: “banner”, alt: “banner” }); Getting Attribute var $source...

jQuery finish() Method

<!DOCTYPE html> <html> <head> <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”> </script> <script> $(document).ready(function(){ $(“#start”).click(function(){ $(“div”).animate({height:300},3000); $(“div”).animate({width:300},3000); }); $(“#complete”).click(function(){ $(“div”).finish(); }); }); </script> </head> <body> <p> <button id=”start”>Start Animation</button> <button id=”complete”>Finish Current Animation</button> </p> <div style=”background:#98bf21;height:100px;width:100px”> </div> </body> </html>

jQuery clearQueue() Method

<!DOCTYPE html> <html> <head> <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”> </script> <script> $(document).ready(function(){ $(“#start”).click(function(){ $(“div”).animate({height:300},1500); $(“div”).animate({width:300},1500); $(“div”).animate({height:100},1500); $(“div”).animate({width:100},1500); }); $(“#stop”).click(function(){ $(“div”).clearQueue(); }); }); </script> </head> <body> <button id=”start”>Start Animation</button> <button id=”stop”>Stop Animation</button> <br><br> <div style=”background:red;height:100px;width:100px;”> </div> </body> </html>

jQuery delay() Method

<!DOCTYPE html> <html> <head> <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”> </script> <script> $(document).ready(function(){ $(“button”).click(function(){ $(“#div1”).delay(“slow”).fadeIn(); $(“#div2”).delay(“fast”).fadeIn(); $(“#div3”).delay(800).fadeIn(); $(“#div4”).delay(2000).fadeIn(); $(“#div5″).delay(4000).fadeIn(); }); }); </script> </head> <body> <p>This example sets different speed values for the delay() method.</p> <button>Click to fade in...

jQuery – The noConflict() Method

What if you wish to use other frameworks on your pages, while still using jQuery? jQuery and Other JavaScript Frameworks As you already know; jQuery uses the $ sign as a shortcut for jQuery....

jQuery – Dimensions

With jQuery, it is easy to work with the dimensions of elements and browser window. jQuery Dimension Methods jQuery has several important methods for working with dimensions: width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery...

jQuery Effects – Sliding

The jQuery slide methods slides elements up and down. jQuery Sliding Methods With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() jQuery slideDown() Method...

jQuery Callback Functions

A callback function is executed after the current effect is 100% finished. jQuery Callback Functions JavaScript statements are executed line by line. However, with effects, the next line of code can be run even...

How to write jQuery Effect fadeOut() Method?

<!DOCTYPE html> <html> <head> <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”> </script> <script> $(document).ready(function(){ $(“.btn1”).click(function(){ $(“p”).fadeOut() }); $(“.btn2”).click(function(){ $(“p”).fadeIn(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button>Fade out</button> <button>Fade in</button> </body> </html> Definition and Usage The fadeOut()...

How to use jQuery Effect Methods?

jQuery Effect Methods The following table lists all the jQuery methods for creating animation effects. Method Description animate() Runs a custom animation on the selected elements clearQueue() Removes all remaining queued functions from the...

How to use jQuery Selectors?

jQuery selectors are one of the most important parts of the jQuery library. jQuery Selectors jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to “find” (or select) HTML...

jQuery Sticky Footer

In general the CSS Sticky Footer is the best way to go, as it works perfectly smoothly and doesn’t require JavaScript. If the markup required simply isn’t possible, this jQuery JavaScript might be an option. HTML...

Get X, Y Coordinates of Mouse Within Box

The below code will give you the X, Y coordinates of a mouse click within a given box. Removing all the stuff about the offset, you can easily get the X, Y coordinates of...

How to use of jQuery.data()?

jQuery.data() is used to set/return arbitrary data to/from an element. Syntax: jQuery.data(element, key, value) “element” is the DOM element to which the data is associated. “key” is an arbitrary name of the piece of...

Write the animate function in jquery?

The animate function is used to apply the custom animation effect to elements. -Syntax: $(selector).animate({params}, [duration], [easing], [callback]) “param” defines the CSS properties on which you want to apply the animation. “duration” specify how...

Partial Page Refresh

Refresh certain elements of a page using jQuery after a set amount of time, can be used with any element with an ID. I amended the example given with the URL to only refresh...

Sliding Background Links

$(‘a’, ‘#nav’).hover(function() { if(!$(this).parent().hasClass(‘current’)) { $(this).stop().animate({ backgroundPosition: ‘(0 -75px)’ }); } }, function() { if(!$(this).parent().hasClass(‘current’)) { $(this).stop().animate({ backgroundPosition: ‘(0 -0)’ }); } }); Slides up and down the background image of a link when...

Styled Popup Menu using jQuery

This idea is from Veer.com and how they handle the dropdowns for things like T-Shirt sizes. Thank you to Dennis Sa. View Demo HTML We’ll wrap a regular text input inside an <div>, which also...

Highlight Related Label when Input in Focus

  $(“form :input”).focus(function() { $(“label[for='” + this.id + “‘]”).addClass(“labelfocus”); }).blur(function() { $(“label”).removeClass(“labelfocus”); });

jQuery Sticky Footer

In general the CSS Sticky Footer is the best way to go, as it works perfectly smoothly and doesn’t require JavaScript. If the markup required simply isn’t possible, this jQuery JavaScript might be an option. HTML...

How to get Image Preloader using jQuery?

Very easy way to preload images which are needed later (e.g. when a hover is performed) <script type=”text/javascript”> $.preloadImages = function() { for(var i = 0; i<arguments.length; i++) { $(“<img />”).attr(“src”, arguments[i]); } }...

How to Find all Internal Links using jQuery?

Find all links that start with the sites domain, a slash, relative file path, or a hashtag. var siteURL = “http://” + top.location.host.toString(); var $internalLinks = $(“a[href^='”+siteURL+”‘], a[href^=’/’], a[href^=’./’], a[href^=’../’], a[href^=’#’]”);

How to Underline Individual Words with jQuery?

There is no CSS for applying an underline (text-decoration: underline;) only to individual words in a multiple-word element. The best way would be to wrap each word in a span (not the spaces, just...

Working with Attributes using jQuery

Setting Single Attribute $(“img”).attr(“src”, “/images/banner.jpg”); Setting Single Attribute (with function) $(“div”).attr(“id”, function (arr) { return “div-id” + arr; }) Setting Multiple Attributes $(“img”).attr({ src: “/images/banner.jpg”, title: “banner”, alt: “banner” }); Getting Attribute var $source...