Design Woop | The Web Design and Development Blog » jQuery

10 Useful jQuery Plugins For Enhancing Your Website UX

David — Mon, 30 Jan 2012 08:00:00 +0000

Incorporating jQuery effectively and modestly in your website build process is a great way to enhance and take your user experience to another level. Using jQuery plugins can be a great tool for helping display content to your users in a much more intuitive and interactive way. The jQuery community is fantastic, developers are consistently releasing new, quality jQuery plug-ins for us to incorporate into our websites.

In this post I will take show you a collection of jQuery plugins that are really useful for improving your overall user experience on your website.

Nivo Slider

The Nivo Slider is a fantastic jQuery slider plug-in, it is available in two formats, one jQuery plug-in is a dedicated WordPress plug-in and the other is freely available for all websites.

Isotope

Isotope is a jQuery plug-in that can add some serious improvement to how your users navigate content displayed on a webpage. The plugin makes use of some great jQuery effects to alter your content layout on a page.

FlexSlider

Another great yet simple to use free jQuery slider plug-in which is completely responsive and packed with tons of slide animations.

Mosaic

One of my personal favorite jQuery plugins for improving how additional content is served to a user is Mosaic. Mosaic automatically generates sliding boxes and captions, allowing slide and fade animations with custom directions.

Supersized

If you use big background images in web design, then Supersized is a jQuery plugin you should take a look at. Supersized is a full screen background slideshow allowing you to rotate through, pause/play and array of images that are set as the website background.

jQuery Image Parallax

The jQuery Image Parallax plug-in allows you to manage the animation aspects of a banner which you could use for your header or background.

jMenu

jMenu is a useful jQuery plug-in that allows you to create awesome menus that include unlimited sub navigation items.

Assign

Assign is a jQuery plug-in that lets you easily assign multiple keyboard shortcuts and events for specified functions.

Dynamic Tag

The Dynamic Tag form is a stylish way to enhance your tags inside a form input, try the demo its a great enhancement plug-in.

jQuery Tour

jQuery Tour is a flexible plug-in that can provide a stylish, high customizable way to provide your users with a website tour.

What Plugins Do You Use?

I would be interested to hear about some of the plugins you use on a regular basis, drop me a comment and I will add them to the list.

Tutorial: Creating A Sticky Sidebar Using jQuery

Alexandre Smirnov — Thu, 15 Sep 2011 09:00:00 +0000

DesignWoop welcomes this guest post by Alexandre Smirnov a web designer and developer who lives and works in California.

Today, I will be showing how to create a jQuery sticky sidebar script. Now, I’m sure many of you have a question: Why can’t I just use “position:fixed”?

Well, you can, but then the element with that style will stay where it is relative to the top of the viewport.

This means, if the element you are “fixing” in place is in the center of the page, it will stay in the center of the page as you scroll down. With this script, it will stay wherever you want it to be.

Check out the demo

jQuery sticky sidebar script

Setting the HTML

Now, we’re going to start off with some simple HTML for the sticky sidebar. In this case, we’ll be “sticking” a div with an id of “sticky”.



&lt;div id=&quot;sticky&quot;&gt;
&lt;/div&gt;
&lt;div id=&quot;text&quot;&gt;
&lt;/div&gt;

Setting the CSS

Now that we’ve got the foundation, we can apply some styles to it to make the page look nice.



body {

    background: #fbfbfb;

}
#container {

    width: 744px;

}
#text {

    color: #333333;

    margin-top: 100px;

    width: 500px;

    height: 10000px;

    float: right;

    font-size: 15px;

    line-height: 23px;

}

Of course, we’re also going to need to style our sticky element.



#sticky {

margin-top: 50px;

margin-left: 50px;

padding:5px;

background: rgba(255,255,255,1);

height: 120px;

width: 305px;

-webkit-border-radius: 7px;

-moz-border-radius: 7px;

border-radius: 7px;

}

Setting the jQuery

Great, now we can move on to the jQuery that will make this all work. Before we begin, let me clarify exactly how the logic behind this goes. We have a normal element, just sitting on the page. Then, when the page is scrolled enough that the element we’re sticking is touching the top of the viewport, we “stick” the element.

What that means? We set the element to be “position:fixed”, after which we give it margins that will place it into the same stop where it was before being fixed? Sound complicated? Don’t worry, the code is actually quite simple.

First, we declare some variables.



var obj = $('#sticky');

var offset = obj.offset();

var topOffset = offset.top;

var leftOffset = offset.left;

var marginTop = obj.css(&quot;marginTop&quot;);

var marginLeft = obj.css(&quot;marginLeft&quot;);

We need these values to be able to position the element correctly when it is “stuck”.

Next, we have to create a window scroll function. This function will execute every time the page is scrolled.



$(window).scroll(function() {

	var scrollTop = $(window).scrollTop();

});

As you can see, the syntax is quite simple. Also, take a look at the “scrollTop” variable. This variable will be updated every time the page is scrolled. It holds the value of how far the user has scrolled. Specifically, how far away the top of the viewport is from the top of the actual page.

Now, we’re going to need two “if” statements. One of them will execute if the user has scrolled to the sticky element. Now, the next “if” statement may seem extra at first.

However, it is actually very important. Image that the user has scrolled down, and the sticky element has been “stuck”. Then, imagine what would happen if the user were to scroll back up the page?

The element would stay “stuck”, instead of going back to its previous position. In order to fix it, we’re going to have a function that checks if the sticky element is higher than its original position. If it is, the function reapplies the original styles. That’s why we need so many variables at the top of the javascript.

These are the “if” statements:



	if (scrollTop &gt;= topOffset){
		obj.css({

			marginTop: 0,

			marginLeft: leftOffset,

			position: 'fixed',

		});

	}
	if (scrollTop &lt; topOffset){ 		obj.css({ 			marginTop: marginTop, 			marginLeft: marginLeft, 			position: 'relative', 		}); 	}

Those “if” statements are the meat of this code – they make everything work. Here’s the end result:

 var obj = $('#sticky'); var offset = obj.offset(); var topOffset = offset.top; var leftOffset = offset.left; var marginTop = obj.css(&quot;marginTop&quot;); var marginLeft = obj.css(&quot;marginLeft&quot;); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); 	if (scrollTop &gt;= topOffset){
		obj.css({

			marginTop: 0,

			marginLeft: leftOffset,

			position: 'fixed',

		});

	}
	if (scrollTop &lt; topOffset){
		obj.css({

			marginTop: marginTop,

			marginLeft: marginLeft,

			position: 'relative',

		});

	}

});

Well, that’s the end of this tutorial. I hope you enjoyed it! Also, don’t forget to actually include the jQuery library, and don’t forget to wrap everything in a $(document).ready(function(){} as well.

Check out the demo

jQuery sticky sidebar script

I actually made this into a jQuery plugin, so if you intend to use this in one of your future projects, I would suggest downloading the plugin: jSticky.

Tutorial: Getting Started With jQuery Animations

Alexandre Smirnov — Thu, 07 Jul 2011 14:00:34 +0000

DesignWoop welcomes this guest post by Alexandre Smirnov a web designer and developer who lives and works in California.

jQuery. No doubt you have heard about this popular JavaScript library. It has taken the throne of all the JavaScript libraries out there because of its many features and easy syntax. Today, I will show you one of the simpler uses of jQuery: you can animate things. this will be the focus of today’s tutorial.

Before we begin, you should learn one very important thing: this next snippet of code.

The following snippet of code basically says, when the document is ready, do something:

$(document).ready(function(){
//Jquery code goes here
});

This is important because if you don’t use it, jQuery could try to manipulate DOM elements that don’t exist yet. It wouldn’t be able to, and there would be complications.

Now that you know that, we can move on to the article’s focus.

A typical animate function:

$('#something').animate({

});

In order to animate something, you have to give it some parameters. For example what to animate, what the new value is, and how long you want the animation to take.

Let’s include the code that will actually make this work:

$('#something').animate({
	opacity: '0.5'
}, 120);

View the demo

Opacity is what is being animated, and it’s being animated to 0.5. I’m also saying that I want it to take 120 milliseconds to complete. That is the meat of it – however, there are some more things you should keep in mind.

The built in jQuery animate function cannot animate strings. For example, you cannot animate an object from float: left to float: right without doing a lot of extra work. Likewise, you can’t animate colors. If I wanted to animate the color of an element, I would have to use jQuery UI.

Multiple Animations

If you are animating multiple things, you must use commas to separate them. A common mistake is to use a semicolon; Don’t do that!

Here’s what you should do:

$('#something').animate({
	opacity: '0.5', //<-- notice the comma
	height: '10', //<-- notice the comma
}, 120);

View the demo

jQuery assumes by default that the value you are animating is in pixels, so if you are too lazy to write the “px”, you don’t have to. It is also possible to animate “em” and “%”.

Also, the jQuery selector syntax is much like CSS. Notice I have a number sign in front of the “something” text. That would work only if what I’m animating has an ID of “something”. If I wanted to animate all the elements with the class “something” on the page, I would do this:

$('.something').animate({
	opacity: '0.5',
}, 120);

Animate On Hover

Now, you know how to animate elements with jQuery. That’s useful, but what if we don’t want an element to animate the moment the page finishes loading? What if we want it to animate only when we hover over it? Take a look:

$('#something').hover(function(){
 $(this).animate({
 opacity: '0.5',
 });
});

View the demo

What this is saying is, “when you hover over #something, animate its opacity to 0.5. Also, keep this in mind: “$(this)” is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked. In this case, “$(this)” is equivalent to “$(‘#something’)”.

Using Callbacks

Now, back to animating. What if you don’t want it to stay that way, and want it to animate back to opacity: 1 when you hover off of “#something”? This is where callbacks come in.

$('#something').hover(function(){
 $(this).animate({
 opacity: '0.5',
 });
}, function(){
 $(this).animate({
 opacity: '1',
 });
});

View the demo

This snippet of code makes an element animate to 0.5 opacity when you hover over it, and animates it back to 1 when you hover off of it.

Animate On Click

Hovering is a popular way to start a jQuery animate function. However, clicking is also a great way to initialize an animate function.

$('#something').click(function(){
 $(this).animate({
 opacity: '0.5',
 });
});

View the demo

As you can see, the syntax is basically the same. Unfortunately, jQuery doesn’t support click callbacks, so this will be a one-time animation. If you aren’t satisfied with that, there’s a marvelous plugin just waiting for you: Clickoutside.js

Also, a problem with animations is that the queue up. Check out this article for more info: Animations Without Queueing up.

If you want more info, take a look at the official jQuery page on animating.

Well, that’s the end of this tutorial. Good luck!

Using jQuery To Create Smooth Page Scrolling

David — Thu, 20 Jan 2011 10:55:15 +0000

In this post I will walk through the tutorial showing you how to create a smooth page scrolling effect allowing you to scroll to the top or bottom of your web page in a smooth action using jQuery.

If you are not sure what animation I am referring too, then take a look at the demo first. You will see a link at the top of the page called ‘Scroll to bottom‘ and a link at the bottom of the page called ‘Scroll to top’. Both of these links will allow you to scroll smoothly to either the top or bottom of the web page.

View The Demo

How it works

First we need to include jQuery before the closing tag in our web page, for the demonstration I have used this method:

jQuery Scroll to bottom:

First I place the link in my page to tell the user to ‘Scroll to bottom’, when this is clicked the page will smoothly scroll.

The link:

Scroll to bottom

The jQuery:

How it works:

If your new to jQuery then all our first line of code is doing is checking the page has loaded before the remaining code is executed -

$(document).ready(function(){

The next line will execute the code contained inside the {} brackets when the link with the class ‘scrollToBottom’ is clicked.

$(document).ready(function(){
  $('a.scrollToBottom').click(function(){

 });
})

Within this function we then insert this code -

$('html, body').animate({scrollTop: $(document).height()}, 'slow');

return false;

It is fairly self explanatory to see what is happening with the code above, when a link with the class ‘scrollToBottom’ is clicked the code inside the function will run, the smooth scroll effect is created using the scrollTop function. The code above will scroll to the bottom of the page, using the height of window to determine the bottom. The speed of this is controlled using ‘slow’, ‘medium’ and ‘fast’ speed controls, I used ‘slow.

jQuery Scroll To Top

First, insert a link into the footer section of of your homepage , when this is clicked the jQuery code will execute the .animate function. The class applied to the link is very important as it is referenced in the jQuery.

The link:

Scroll to bottom

The jQuery:

How it works:

When the page has loaded and the link with the class .scrollToTop has been clicked jQuery will execute this -

$('html, body').animate({scrollTop:0}, 'slow');

return false;

The .animate() method allows us to create animation effects on any numeric CSS properties, the scrollTop function is set to 0, this represents the scroll bar being at the very top position and ‘slow’ represents the speed at which the animation will run at.

You will have noticed this line:

return false;

This prevents the default action of the event being triggered, in our case it prevents the user following the link.

This also could have been used:

event.preventDefault();

However I found using this caused the animations to be anything but smooth.

Download | Demo

How To: Create a jQuery sticky sidebar

David — Sat, 01 Jan 2011 15:08:15 +0000

This tutorial will show you how to implement a jQuery sticky sidebar, the sidebar will slide up and down the screen respective to which way you are scrolling, this way the sidebar always sits at the top of the window.

This is a great feature to add to your site, as it allows for the sidebar content to always be in view of the user, this is great for displaying ads or additional content.

Step 1 – Creating the basic HTML

Nothing advanced here, we are setting up a basic HTML page for demonstration purposes.

Note: As this plugin will need the jQuery libary, I have included it in between the tags. I am pulling in the libary which is hosted by Google using this line -




	Floating sidebar

Step 2 – Add the script from – Smart sticky floating box

Follow the link and download the plugin, the code we are using is below. For this demonstration, I will insert this script right before the closing tag.

Step 3 – Add content

I shall now add content to the page, using a div based layout, I have created 4 different divs – ‘header’, ‘content’ ‘menu’, ‘footer’. The div we will be looking at to scroll up/down the page will be the ‘menu’. Your page will now look like so -




 Floating sidebar
 
 
 


 

 dw

 

 Archives

 

 Smart sticky floating box

 Scroll down, the 'archives' sidebar will follow!

 Want your box to float beside you as you scroll, but ONLY in a specific constrained area? or only on it's parents area? - you got it.

 
 Extremely useful for side-menus
 All in one vertical floating solution
 

 Parameters:

 
 duration - the duration of the animation
 tartOffset - the amount of scroll offset after it the animations kicks in
 offsetY - the offset from the top when the object is animated
 lockBottom - 'true' by default, set to false if you don't want your floating box to stop at parent's bottom
 

 Example:

 jQuery('#menu').stickyfloat({duration: 400});

 


 Back to post | Download jQuery Plugin


 


 Footer

The plug-in will look for the div with ID of ‘menu’ and apply the effect…

The full documentation and plug-in download can be found at – http://plugins.jquery.com/project/stickyfloat

See it in action – Demo

Favourite Links 4

Stu Greenham — Mon, 01 Feb 2010 13:04:38 +0000

Week 4 is up and here are my favourite posts/links/freebies of the last 7 days. There are not much this week unfortunately I will make up for this next week!

jQuery Growl

Visit Source: http://labs.d-xp.com/growl/

Growl the popular software for Mac (and Windows now) has now been made into a neat little jQuery plugin allowing you to alert your users in the same manner the Growl software does.

Showcase of Buttons in Web Design

Visit Source: http://vandelaydesign.com

Vandelay Design posted this great article showcasing many button styles in web design. A great bookmark for inspiration when your struggling to come up with some of your own!

35 Beautiful E-Commerce Websites

Visit Source: http://www.smashingmagazine.com

Another showcase here this time E-Commerce websites. Smashing Magazine posted this beast displaying 35 beautiful E-Commerce websites. Another great bookmark!

60+ Free Clean, Simple Minimalist WordPress Themes

Visit Source: http://www.tripwiremagazine.com

Trip Wire posted this article showcasing 60+ free WordPress themes, mostly minimalistic in style. If your new to Web Design but want to start blogging etc then this is a great place to start looking for a sweet WordPress theme.

30+ PSD Files (Books, Notebooks, Magazines)

Visit Source: http://ledesigne.com

LeDesigned (A blog I recently started subscribing to as they are constantly pumping out great articles daily) posted this awesome article and a great resource containing 35+ PSD Books, Notebooks and Magazine files.

Superb Jquery CSS Image Effects and Tooltips Tutorials

Visit Source: http://www.designzzz.com

Designzzz pulled together this amazing post of jQuery plugin/effects. If your like me and always trying to find them cool plugins you’ve previously come across in the past but can’t remember where you saw them well this is one to bookmark!

20 Fonts Ideal for Big and Powerful Headings

Visit Source: http://webdesignledger.com

Another great post from Web Design Ledger to finish of the post! This post looks at 20 fonts that are ideal for big and powerful headings! Franchise and Nevis are my favourites!

Right thats it for this week, as I am off on holiday so got lots to do but next week I will have plenty for you!

Design Woop | The Web Design and Development Blog » jQuery

10 Useful jQuery Plugins For Enhancing Your Website UX

What Plugins Do You Use?

Tutorial: Creating A Sticky Sidebar Using jQuery

Check out the demo

You may also like:

Setting the HTML

Setting the CSS

Setting the jQuery

Check out the demo

Tutorial: Getting Started With jQuery Animations

A typical animate function:

Multiple Animations

Animate On Hover

Using Callbacks

Animate On Click

Using jQuery To Create Smooth Page Scrolling

How it works

jQuery Scroll to bottom:

The link:

The jQuery:

How it works:

jQuery Scroll To Top

The link:

The jQuery:

How it works:

You will have noticed this line:

Download | Demo

How To: Create a jQuery sticky sidebar

Step 1 – Creating the basic HTML

Step 2 – Add the script from – Smart sticky floating box

Step 3 – Add content

Smart sticky floating box

See it in action – Demo

Favourite Links 4

jQuery Growl

Showcase of Buttons in Web Design

35 Beautiful E-Commerce Websites

60+ Free Clean, Simple Minimalist WordPress Themes

30+ PSD Files (Books, Notebooks, Magazines)

Superb Jquery CSS Image Effects and Tooltips Tutorials

20 Fonts Ideal for Big and Powerful Headings