WE ARE CREATIVE!

Great Features Of Our Work Thats Why Our Clients Love Us!

» » 10 jQuery snippets every designer should know
10 jQuery snippets every designer should know
10 jQuery snippets every designer should know

10 jQuery snippets every designer should know

 

 

jQuery is used on thousands upon thousands of web pages. It’s one of the most common libraries to insert into pages, and it makes DOM manipulation a snap.

Of course, part of jQuery’s popularity is its simplicity. It seems we can do almost anything we like with this powerful library.

For all the options open to us, there are some snippets we tend to come back to time and time again. Today I’d like to give you 10 snippets that everyone, newbies to gurus, will use time and time again.

 

1) Back to top button

// Back To Top
		$('a.top').click(function(){
		$(document.body).animate({scrollTop : 0},800);
		return false;
		});
//Create an anchor tag
		<a class=”top” href=”#”>Back to top</a>

As you can see using the animate and scrollTop functions in jQuery we don’t need a plugin to create a simple scroll to top animation.

By changing the scrollTop value we can change where we want the scrollbar to land, in my case I used a value of 0 because I want it to go to the very top of our page, but if I wanted an offset of 100px I could just type 100px in the function.

So all we are really doing is animating the body of our document throughout the course of 800ms until it scrolls all the way to the top of the document.

 

2) Checking if images are loaded

$(‘img’).load(function() {
		console.log(‘image load successful’);
		});

Sometimes you need to check if your images are fully loaded in order to continue with your scripts, this three line jQuery snippet can do that for you easily.

You can also check if one particular image has loaded by replacing the img tag with an ID or class.

 

3) Fix broken images automatically

$('img').error(function(){
		$(this).attr('src', ‘img/broken.png’);
		});

Occasionally we have times when we have broken image links on our website and replacing them one by one isn’t easy, so adding this simple piece of code can save you a lot of headaches.

Even if you don’t have any broken links adding this doesn’t do any harm.

 

4) Toggle class on hover

$(‘.btn').hover(function(){
		$(this).addClass(‘hover’);
		}, function(){
		$(this).removeClass(‘hover’);
		}
		);

We usually want to change the visual of a clickable element on our page when the user hovers over and this jQuery snippet does just that, it adds a class to your element when the user is hovering and when the user stops it removes the class, so all you need to do is add the necessary styles in your CSS file.

 

5) Disabling input fields

$('input[type="submit"]').attr("disabled", true);

On occasion you may want the submit button of a form or even one of its text inputs to be disabled until the user has performed a certain action (checking the "I’ve read the terms” checkbox for example) and this line of code accomplishes that; it adds the disabled attribute to your input so you can enable it when you want to.

To do that all you need to do is run the removeAttr function on the input with disabled as the parameter:

$('input[type="submit"]').removeAttr("disabled”);

 

6) Stop the loading of links

$(‘a.no-link').click(function(e){
		e.preventDefault();
		});

Sometimes we don’t want links to go to a certain page or even reload it, we want them to do something else like trigger some other script and in that case this piece of code will do the trick of preventing the default action.

 

7) Toggle fade/slide

// Fade
		$( ".btn" ).click(function() {
		$( ".element" ).fadeToggle("slow");
		});
// Toggle
		$( ".btn" ).click(function() {
		$( ".element" ).slideToggle("slow");
		});

Slides and Fades are something we use plenty in our animations using jQuery, sometimes we just want to show an element when we click something and for that the fadeIn and slideDown methods are perfect, but if we want that element to appear on the first click and then disappear on the second this piece of code will work just fine.

 

8) Simple accordion

// Close all Panels
		$('#accordion').find(‘.content').hide();
		// Accordion
		$('#accordion').find(‘.accordion-header').click(function(){
		var next = $(this).next();
		next.slideToggle('fast’);
		$(‘.content’).not(next).slideUp('fast’);
		return false;
		});

By adding this script all you really need to on your page is the necessary HTML go get this working.

As you can see in this snippet I firstly closed all the panels in our accordion and then on the click event I made the content that is linked to that header slide toggle , and all the other ones slide up. It’s a simple method for a quick accordion.

 

9) Make two divs the same height

$(‘.div').css('min-height', $(‘.main-div').height());

Sometimes you want two divs to have the same height no matter what content they have in them, this little snippet enables just that; in this case it sets the min-height which means that it can be bigger than the main div but never smaller. This is great for masonry like websites.

 

10) Zebra stripped unordered list

$('li:odd').css('background', '#E8E8E8’);

With this little snippet you can easily create zebra striped unordered lists, this places the background you define on every odd list item so that you can place the default one for the even ones in your CSS file. You can add this snippet to any type of markup, from tables to plain divs, anything you want to be zebra stripped.

 

Conclusion

These are the pieces of jQuery code I find myself using again and again in my projects. I hope you bookmark this page and come back whenever you need one of these snippets.

by datasky | 23-01-2014, 09:42 | 3 Comments

Comments

dljsf sd sdfsdkf sfdsokfd sdfskdfsdf

by test at 27 January 2014 19:51 Replay

ome people, especially those running on busy daily schedules tend to use the pills to help maintain weight since they can not afford to follow all the diet programs. This is not advised. It is recommended that one seek advice from a professional in this field before using the pills. This can save one from many dangers associated with the misuse.

The diet pills should always be taken whole. Some people tend to divide the pills to serve a longer period of time. This is not advised and can lead to ineffectiveness. If it is required that one takes a complete tablet, it means that a certain amount of the ingredients are required to achieve the desired goal. It is also recommended that one does not crush the pill and dissolve it in beverages. Chemicals found in beverages have the potential of neutralizing the desired nutrients in the pill thereby leading to ineffectiveness. The best way to take the tablets is swallowing them whole with a glass of water.

https://www.cialissansordonnancefr24.com/comment-commander-du-cialis-internet/

by Philipskype at 29 November 2017 06:32 Replay

Send us a comment!

What our clients say

"Our businesses objectives were instantly transformed into a tangible visual experience far beyond our expectations. The creativity that was used on our website is exactly what we had hoped for. Easily A+ work."

-- Ahmad Momenirad --

"Now that's creativity. The precise detail that has been presented in our web designing is absolutely incredible. Our thoughts were brought to life with in-depth creativity and exactness. The insight that was provided to us was perfectly articulated and explained to us in a way that made it seem like we were the actual web designers"

-- Niki Salehi --

"There are no words that can describe how truly amazed we are. The blueprint is vivid and complete genius. Our content is unlike anything that we ever would have imagined. This is one of the top web design firms in the industry"

-- akbar Sabaghian --

"What a gorgeous design. It fits perfectly with our company's vision, purpose and business goals. The content is perfect"

-- Mohammad Momeniha --

"Bravo! Bravo! Finally content and web designing that is easy to follow and understand. This is easily the best investment that our company has ever made. We would highly recommend this web design agency to anyone that is interested"

-- Mohammad Sadeq Ahmad Yazdi --

"All I can say is wow! I've never seen such a user friendly website that could be navigated with such ease. Unbelievable work by a one of a kind web design firm"

-- Mahsa Aslani --