Creative Individual Design Blog » jQuery

Create a jQuery Tooltip!

Laura Montgomery — Sun, 25 Nov 2012 13:40:55 +0000

In this article I am going to show you how to create a simple Tooltip effect using jQuery. What’s great about this method is that it degrades gracefully, so if someone doesn’t have Javascript enabled they don’t see anything out of place.

This tutorial assumes that you have some understanding of jQuery but I’ll be explaining everything as we go so should be good for beginners as well. You will also need to understand HTML and CSS.

I’ve included the finished files and a demo so you can see what we are going to achieve.

The Technique

The tooltip that we will be creating will appear when we hover over a link. We will use the HTML5 custom data attribute (data-*) to hold our information, then use jQuery to dynamically create a container (div) to hold the information within the custom data attribute.

Tutorial Demo

Still not sure what we are trying to achieve? Just click the image below to view the demo:

View the Tutorial Demo

The HTML

OK, first create a new HTML file and insert the usual DOCTYPE, html, head, etc. information. Notice I am using the HTML5 DOCTYPE.



  
    
    Tooltip Demo

Add links to your CSS and Tooltip JS files, and create these files. I’ve used layout.css and tooltip.js respectively. You will also need to link to a hosted jQuery library or host your own. I personally prefer to link to Google but use whichever option is best for you and your project.

...
  
    
    Tooltip Demo
    
    
    
  
...

Now, add a link (

...

  My Link

...

Finally, add our custom data attribute. For readability I am using data-tooltip but feel free to use something which better describes your content.

...

  My Link

...

And that’s it for the HTML. Pretty simple right? The CSS is even easier…

The CSS

Our tooltip will have an ID of tooltip. This isn’t obvious from the HTML because this div will be created dynamically by our jQuery script, so just take my word for it for now – all will become clear in a minute. For our CSS we actually only need to add two styles to div#tooltip for the basic tooltip effect, position and z-index. Add the following to layout.css:

div#tooltip {
  position: absolute;
  z-index: 10;
}

In the demo (and downloadable files) I’ve also added some basic styling such as background, color, padding and even box shadow to improve the effect, but I’ll leave this up to you to style the tooltip to suit your site design.

The jQuery

Open up tooltip.js and write out the document ready function – feel free to use the shorter version but for readability I will use the full function.

$(document).ready(function() {
});

Next we want to target any element with an attribute of data-tooltip, so this will be our selector. The action will be .hover.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
    }
  );
});

We first want to create the div which will hold our tooltip information. Remember from above that this will be a div with an ID of tooltip. We will use .before to position this div before our link in the DOM. This is why position and z-index are so important in our CSS – these position the tooltip div visually above our link (and other content) and stops any nasty content jumping from occurring. Note the single quotes used.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
      $(this).before('')
    }
  );
});

Next we want to get the information from our data attribute and store it in a variable. I have put this variable above the previous line which is good practice, especially in cases where I would be using more than one variable, i.e. keeping them together.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
      var tooltip = $(this).attr("data-tooltip");
      $(this).before('')
    }
  );
});

Finally, we want to add the information stored in our variable to our new div. We can use .text to achieve this.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
      var tooltip = $(this).attr("data-tooltip");
      $(this).before('')
      $("div#tooltip").text(tooltip);
    }
  );
});

If you have any basic knowledge of jQuery you will know that .hover also includes hover off within the action. Let’s make use of that now to delete the tooltip div when we move our mouse cursor off the link. We simply need to use .remove to achieve this.

$(document).ready(function() {
  $("[data-tooltip]").hover(
    function() {
      var tooltip = $(this).attr("data-tooltip");
      $(this).before('')
      $("div#tooltip").text(tooltip);
    },
    function() {
      $("div#tooltip").remove();
    }
  );
});

We are almost done. The last part is to get the tooltip div to follow our mouse cursor as it moves around the link. I have used a similar effect in a previous post. First we want to create two variables which will tell the div how far away from our cursor to move so that we can easily see all of the text.

$(document).ready(function() {
  var moveLeft = 20;
  var moveDown = 10;
  $("[data-tooltip]").hover(
    ...
  );
});

The action of the tooltip div moving occurs when we move our mouse cursor around on the link with the data attribute, so this is what we will be targeting with the .mousemove action.

$(document).ready(function() {
  var moveLeft = 20;
  var moveDown = 10;
  $("[data-tooltip]").hover(
    ...
  );
  $("data-tooltip").mousemove(function() {
  });
});

We then just need to use .css on our tooltip div to move it from the top and from the left – remember that we used position: absolute in our CSS, this is coming into play again.

$(document).ready(function() {
  var moveLeft = 20;
  var moveDown = 10;
  $("[data-tooltip]").hover(
    ...
  );
  $("data-tooltip").mousemove(function() {
    $("div#tooltip").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });
});

We have one small update to do to our code to finish. Notice the e used - i.e. e.pageY and e.pageX. We simply need to add e between the parenthesis of each of our functions. See the full complete code below:

$(document).ready(function() {
  var moveLeft = 20;
  var moveDown = 10;
  $("[data-tooltip]").hover(
    function(e) {
      var tooltip = $(this).attr("data-tooltip");
      $(this).before('')
      $("div#tooltip").text(tooltip);
    },
    function(e) {
      $("div#tooltip").remove();
    }
  );
  $("[data-tooltip]").mousemove(function(e) {
    $("div#tooltip").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });
});

Load up your HTML page and check out the script in action.

That’s it!

View the Tutorial Demo

Get The Source Code

You can download the complete tutorial source code by clicking on the big button below and unzipping the file.

jQuery 101 – Learning the Basics

Laura Montgomery — Sun, 17 Jun 2012 17:26:52 +0000

By now most web designers and developers have a very good understanding of jQuery and its capabilities; for most it is their go to JavaScript library when adding some additional functionality or interactivity to their web pages.

However there are still plenty of people out there who are new to web development and who would like to get started with this great language but don’t know how to.

Well, this one’s for you!

What is jQuery?

In essence, jQuery is a powerful JavaScript library which makes life a lot easier for those of us with little (or no) JavaScript knowledge. It allows us to add JavaScript functionality to a web page using much simpler code. jQuery is particularly apt at adding event-handling, transversing, animations or Ajax interactions to a web page.

I don’t know about you, but that all sounds rather confusing and boring… But believe me it’s not! And once you get a basic understanding of jQuery, you’ll be WOW-ing yourself in no time. And the best way to get this basic understanding is just to get started.

Are you ready?

Installing the jQuery Library

To make use of jQuery you first need to make the script available to your webpage. There are a few options available when adding the jQuery library to your webpage but they basically breakdown into two options:

Downloading the latest source file and hosting it on your own website/server.
Linking to hosted files such as those on jQuery’s own site, on Google’s Libraries API or a few other hosted options.

Personally I almost always opt for linking to files hosted on an external source unless for some reason I am developing without an internet connection, and that pretty much doesn’t happen to me anymore! So I am going to show you how to implement the hosted option. So break open your favourite text editor and let’s get started.

Let’s create the basic HTML page structure first:



    
        jQuery 101 - Learning the Basics

We are going to link to Google’s latest (at time of writing) stable copy of jQuery. A quick search of “google jquery” should find the page you are looking for but for reference purposes it is:

https://developers.google.com/speed/libraries/devguide

Click on the jQuery (not jQuery UI) link in the table of contents. You are looking for the source path which references jquery.min.js. This is the compressed version of the file and will save you quite a bit of loading time – this is allows a good thing.

Now that we’ve got our reference, let’s add it to our page:

...

    jQuery 101 - Learning the Basics
    

...

That’s it! How easy was that?

Your First jQuery Function

Now that the library is loaded onto our page, let’s prepare the page for our first jQuery function. Almost all jQuery code that you write will start with this function. It is the Document Ready function and basically it stops jQuery from running until the webpage has finished loading.

...

    jQuery 101 - Learning the Basics
    
    

...

Now that we have the boring bit done, let’s see what jQuery can do.

Your Second jQuery Function

Let’s create a paragraph with a link that hides the paragraph when clicked. Really very simple stuff with jQuery.

First let’s add the paragraph and link between the body tags:

...

This paragraph will disappear when you click this link.

...

Now let’s add our jQuery:

...
$(document).ready(function(){
    $("a.make-disappear").click(function(){
        $("p.disappear").hide();
    });
});
...

Save your code as a HTML document (such as index.html) and load the page in your favourite web browser (such as Google Chrome or Internet Explorer). Now click the link to see your script run by hiding the paragraph.

Amazing!

View the Tutorial Demo

Understanding the Syntax

Now that you have some code to look at, let’s try and understand what it’s doing by understanding the basic jQuery syntax. Every function in jQuery follows this basic structure, or syntax:

Basic Syntax: $(selector).action();

Let’s break it down:

The $ (dollar sign) defines jQuery. Other JavaScript libraries also make use of this sign so if you are mixing libraries you can use jQuery instead.
(selector) finds or queries elements in the HTML. So in our example the selector is (“a.make-disappear”) which tells jQuery to look for a hyperlink (a tag) with a class of make-disappear. The selector uses CSS syntax to query the DOM, such as .classname for classes and #idname for ids.
.action() is the jQuery action to be performed on the HTML elements. So in our example the action is .click(), in other words when the user performs a click on the link. We then run another function within the .click() action.

Our Syntax: $(selector).action(function(){$(selector).action();});

Within our .click() action we run another function by using function(){} and within this function we use $(selector).action(); again.
Our second selector is (“p.disappear”) which tells us that when a link with the class of make-disappear is clicked, look for any paragraphs (p tag) with a class of disappear.
Our second action is .hide(). What this tells jQuery to do is that when a hyperlink with a class of make-disappear is clicked, look of any paragraphs with a class of disappear and hide them.

Some Basic Events

Now that we have an understanding of our second jQuery function – making a paragraph disappear when we click a link – let’s look at some more basic events.

.toggle()

The .toggle() action combines the .hide() and .show() actions. Let’s create another link which toggles a span:

... ...

Show/Hide This text will appear and disappear.

...

Now let’s add our jQuery:

...
$(document).ready(function(){
    ...
    $("p.toggle a").click(function(){
        $("p.toggle span").toggle();
    });
});
...

Save your file again and refresh your browser. By clicking the link you can show and hide the text wrapped in the span tag. Magic!

View the Tutorial Demo

In the jQuery code above, instead of giving each element a class or id, I’ve only given the paragraph tag a class of toggle and then referenced other elements within the paragraph, just like you would with CSS. So by clicking the link within the paragraph with a class of toggle, we can show and hide the span within the paragraph.

All this is very nice, but we can do better than this! Introducing the .slideToggle() effect.

.slideToggle() and .find()

Now that you’ve gotten your head around some basics, lets speed things up a bit. In our next example we are going to look at .slideToggle() and .find(). As you probably have guessed .slideToggle() is very similar to .toggle() only with a slide animation effect. We are also introducing the .find() which helps us with the selector part of our query and could make our query up to twice as fast.

Let’s duplicate our previous code and instead of the paragraph having a class of toggle we’ll give it a class of slideToggle:

... ...

Show/Hide This text will appear and disappear.

...

Now let’s add our jQuery:

...
$(document).ready(function(){
    ...
    $("p.slideToggle").find("a").click(function(){
        $("p.slideToggle").find("span").slideToggle();
    });
});
...

Save your file again and refresh your browser to see the .slideToggle() effect. Pretty sweet! But we can still do better than that!

View the Tutorial Demo

Animation Speed

A lot of actions, including .slideToggle, allow us to dictate the speed of the animation. There are a few options available:

slow (600 milliseconds)
normal (400 milliseconds)
fast (200 milliseconds)
a custom speed in milliseconds

Let’s update our jQuery by adding the fast speed:

...
$(document).ready(function(){
    ...
    $("p.slideToggle").find("a").click(function(){
        $("p.slideToggle").find("span").slideToggle("fast");
    });
});
...

Once again, save your file and refresh your browser.

Notice that we put the word fast in quotes in our code above. The same goes for normal and slow. However if we want to dictate our speed in milliseconds we just enter the number, like so:

...
$(document).ready(function(){
    ...
    $("p.slideToggle").find("a").click(function(){
        $("p.slideToggle").find("span").slideToggle(1000);
    });
});
...

Our .slideToggle() effect will now take 1 second (1000 milliseconds) to complete.

.css(), this Selector and Basic Selector Filters

Let’s push the boat out again with our jQuery. In our next example we are going to look at one new action, the this selector and some basic selector filters. The action is .css() and as you can imagine, this allows us to add or edit CSS properties to our DOM elements. The this selector allows us to target the element which has been actioned, such as through .click(). The basic selector filters we will be looking at are :even, :odd and :last, and these allow us to target even numbered elements, odd numbers elements and the last element in our given query.

In our next example we are going to create a checklist. That is, an unordered list with zebra strips and a function which allows us to click on a list item and change its colour plus put a line-through the text, showing that this item has been completed.

On a side note, this example is for the purposes of showing how something could be done and not how it should be done – we’ll get to that later.

OK, first let’s create our simple list:

...

    ...
    
        List item 1
        List item 2
        List item 3
        List item 4
        List item 5
        List item 6
    

...

Now let’s style our list items using .css(). First let’s give each item some padding:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");
});
...

Notice we are just running our usual selector with the .find() action and finally we are adding one CSS property to all the unordered lists-items – padding of 5 pixels on all sides.

Next let’s target all our even list items. Remember that arrays start with 0 so technically our first list item is even, not odd as you would expect. We’ll use the :even filter to do this:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");

    $("ul.list1").find("li:even").css({
        "border-top":"1px solid #eee",
        "background":"#fcfcfc"
    });
});
...

Notice that this time our .css() action is a little different because we are specifying more than one CSS property. Make sure to remember this so that you don’t get tripped up in the future.

Now let’s style the other items in our list using the :odd selector filter:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");

    $("ul.list1").find("li:even").css({
        "border-top":"1px solid #eee",
        "background":"#fcfcfc"
    });

    $("ul.list1").find("li:odd").css({ 
        "border-top":"1px solid #d3e9ff", 
        "background":"#e8f3ff" 
    }); });
...

And finally let’s add another border at the bottom of the last list item using :last:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");

    $("ul.list1").find("li:even").css({
        "border-top":"1px solid #eee",
        "background":"#fcfcfc"
    });

    $("ul.list1").find("li:odd").css({
        "border-top":"1px solid #d3e9ff",
        "background":"#e8f3ff"
    });

    $("ul.list1").find("li:last").css("border-bottom","1px solid #d3e9ff"); 
});
...

If you save your document and refresh your browser you will see that we have created a very simple zebra strip effect.

Now let’s create our checklist functionality by using the this selector:

...
$(document).ready(function(){
    ...
    $("ul.list1").find("li").css("padding","5px");

    $("ul.list1").find("li:even").css({
        "border-top":"1px solid #eee",
        "background":"#fcfcfc"
    });

    $("ul.list1").find("li:odd").css({
        "border-top":"1px solid #d3e9ff",
        "background":"#e8f3ff"
    });

    $("ul.list1").find("li:last").css("border-bottom","1px solid #d3e9ff");

    $("ul.list1").find("li").click(function(){
        $(this).css({
            "border-top":"1px solid #fcf47e",
            "background":"#ffffea",
            "text-decoration":"line-through"
        });
    });

});
...

In this last query what we are asking jQuery to do is get any unordered lists with a class of list1 (ul.list1), find all the list items (li) within the unordered list, then, if any of the list items are clicked, apply the css following css styles only to the item that was clicked (this). Got it? Great, go check it out in your browser.

View the Tutorial Demo

.hasClass(), .addClass(), .removeClass() and if Statements

Remember how I said that the last example showed how a checklist function could be done but it wasn’t how it should be done? Well let’s learn how it should be done and while we are at it we’ll learn about .hasClass(), .addClass(), .removeClass() and JavaScript if statements, plus also add the functionality to unselect items too. Exciting, eh?

OK, first duplicate the unordered list items from the previous example and give it a class of list2.

...

    ...
    
        List item 1
        List item 2
        List item 3
        List item 4
        List item 5
        List item 6
    

...

Easy so far. Next we are going to style our list using CSS rather than jQuery. So we need to create a stylesheet and link to it in our HTML head:

...

    jQuery 101 - Learning the Basics
    
    ...

...

OK, next add the following styles to your stylesheet. These will look very familiar to you as they are the same styles that we used in the last example. The only difference to note is that I’ve swapped around the styles for odd list items and even list items. Notice that we are using CSS3 Pseudo-classes.

ul.list2 li { padding: 5px; cursor: pointer; }
ul.list2 li:nth-of-type(odd) { border-top: 1px solid #eee; background: #fcfcfc; }
ul.list2 li:nth-of-type(even) { border-top: 1px solid #d3e9ff; background: #e8f3ff; }
ul.list2 li:last-of-type { border-bottom:1px solid #d3e9ff; }
ul.list2 li.completed { border-top: 1px solid #fcf47e; background: #ffffea; text-decoration: line-through; }

We are almost done. Now just for our jQuery. We are going to run the same query as before. jQuery will find all the unordered lists with a class of list2, then will find all the list items within the unordered list. This time when the user clicks on a list item the jQuery will run an if statement. It will check if the list item has a class of completed by using .hasClass(), and if so will remove the class using .removeClass(). If it doesn’t has a class of completed it will add the class using .addClass().

...
$(document).ready(function(){
    ...
    $("ul.list2").find("li").click(function(){
        if($(this).hasClass("completed")) {
            $(this).removeClass("completed");
        } else {
            $(this).addClass("completed");
        }
    });

});
...

And that’s it. Go check it out in your browser.

View the Tutorial Demo

Conclusion

Hopefully by the time you’ve completed this tutorial you’ll have some good basics about jQuery and how to use it. This tutorial only scratches the surface and you’ve only just begun to delve into the exciting world of jQuery.

So “Where do I go from here?” I hear you ask. I’d recommend continuing your journey on the W3Schools jQuery tutorial where you’ll cover what we’ve already learnt here, plus expand your knowledge even more by getting to grips with actions like .animate(), learning about callbacks, using Ajax and much more.

Not enough for you? Here’s some more useful resources:

Get The Source Code

You can download the complete tutorial source code by clicking on the big button below and unzipping the file.

5 jQuery Scripts & Plugins You Can’t Live Without

Laura Montgomery — Mon, 24 Oct 2011 18:38:51 +0000

This post introduces a new category of posts to the Creative Individual blog – 5 You Can’t Live Without. This is were I’ll list my top 5 of a particular subject, such as Web Technologies, Sources of Online Inspiration, or as in the case of this post, 5 jQuery Scripts & Plugins You Can’t Live Without.

So, let’s find out which jQuery scripts and plugins have made my Top 5 list, and which one I consider to be number 1.

5. jQuery UI

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

I’ve included jQuery UI as a whole, rather than just a particular section of its functionality because I think its strength lies in the wide variety of functions this plugin provides. And also the ability to only add the script that you need to your project makes jQuery UI all the better.

Website: http://jqueryui.com/

4. selectivizr

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

I think selectivizr has said it all; if you want to use CSS3 pseudo-classes in your web project and be confident that it’ll work across all browsers (ahem, in Internet Explorer 6-8), then selectivizr is a most! And let’s face it, why wouldn’t you use CSS3 pseudo-classes!

Website: http://selectivizr.com/

3. Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Just like selectivizr, if you want to use the latest web technologies and be confident that everything is going to work as planned, then adding Modernizr will save you a lot of headaches. Add it too your default build files and don’t look back!

Website: http://www.modernizr.com/

2. Fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

There is a whole host of jQuery lightboxes out there but Fancybox is by far my favourite. It deals with different types of content wonderfully and manages to look great a the same time. The documentation is pretty good and there’s lots of examples to help you out too.

Website: http://fancybox.net/

1. Nivo Slider

The world’s most awesome jQuery Image Slider

With a statement like that, you know its gotta be good! Just like Fancybox there are a lot of alternatives to Nivo Slider but Nivo Slider hasn’t made the top of my list for no reason. It is so easily to implement and comes with some highly polished themes and lots of options built in. And recently added are Nivo Slider Pro and a WordPress Plugin. If you haven’t already heard of this great image slider, go check it out now.

Website: http://nivo.dev7studios.com/

Do you agree with my Top 5 jQuery Scripts & Plugins You Can’t Live Without? What plugins make your top 5 list? Share your thoughts below.

Create Multiple Pop-up Divs using the jQuery prev() Method

Laura Montgomery — Sat, 13 Aug 2011 16:19:46 +0000

This tutorial is an update on a previous Creative Individual jQuery tutorial – Create a Pop-up div in jQuery. The first tutorial showed you how to create a very simple pop-up div, but after a few requests in the comments, I felt it was important to update the technique so that multiple pop-up divs could be created without duplicating the code unnecessarily.

If you haven’t already read the first tutorial and are new to jQuery, it might be worth reading it to get a better understanding of the basic techniques before trying this slightly more advanced method.

The Technique

In this tutorial we are going to create a simple profile overview page containing 4 profile images and names. When we hover over the image or name a more detailed profile will appear. This div is positioned before the image and name link in the code and is initially hidden. When we hover over the image, a jQuery event will occur which will change the display declaration from hidden to block, making the div appear. This is when we make use of the prev() method.

Tutorial Demo

Still not sure what we are trying to achieve? Check out the tutorial demo below:

View the Tutorial Demo

The HTML

Create a new HTML document and insert all the usual code – doctype, html tags, head tags, body tags, etc. as shown below:



  
    
    jQuery Tutorial - Pop-up div on hover - Version 2

With that done, let’s insert our mark-up. First we’ll create a div with an id of container to act as our content wrap (to center it on screen and give it a nice width). Then I’ve inserted some basic information for the viewer in the form of a h1 and p. Very simple so far!

Then we get to the important bit. Create a div with a class of profile. It’s important to use a class because we are going to have more than one of these on screen and of course we want our code to validate. Inside this div create another div with a class of pop-up. Insert whatever kind of information you need here but for the purposes of this example, I’m going to use basic profile information – Name, Age, and Location.

Again inside our div with a class of profile but below the div with a class of pop-up, add the trigger link. Inside my link with a class of trigger I’ve added an image and a span with the profile name.

...

  jQuery Tutorial - Pop-up div on hover
  
    To view profile information for each person, simply hover your
    mouse cursor over the profile image or name.
  

  
    
    
      
        Name: Person 1

        Age: 23

        Location: Canada
      
    
    
    
      
      

      Person 1
    
  

...

You then of course repeat the div with a class of profile however many times you need, but the basic structure remains the same.

Next we’ll need to create a div to clear the floats we will be adding to the profile divs in our css. I tend to always use a class of clear for this purpose. However you could add this style to almost anything, such as a footer or section.

...
      
      
        
          This techique makes use of the prev()
          method.

There’s one last thing we need to do before we are finished with our HTML. Let’s link to our stylesheet which we will be creating in the next step.

...

  
  jQuery Tutorial - Pop-up div on hover - Version 2
  

...

The CSS

Now its time to make things look a bit prettier. Create a new document and name it styles.css, i.e. the file name we have just linked to in our HTML.

First let’s quickly sort out our basic styles and wrapper div:

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #000 url(bg-texture.png) repeat;
  color: #dddddd;
}

h1, h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a {
  color: #EB067B;
  text-decoration: none;
}

div#container {
  width: 580px;
  margin: 100px auto 0 auto;
  padding: 20px;
  background: #000;
  border: 1px solid #1a1a1a;
}

All pretty basic stuff. Next we’ll style the profiles by floating them left and adding a width, plus giving our span a little bit of styling to make it sit nice.

div.profile {
  width: 70px;
  text-align: center;
  float: left;
  margin: 10px 37px 30px 38px;
}

span.name {
  display: block;
  padding-top: 5px;
}

Now the important bit, the pop-up div itself. We are going to use position: absolute and display:none, plus a bit of styling to make it look good.

/* HOVER STYLES */
div.pop-up {
  display: none;
  text-align: left;
  position: absolute;
  margin-top: -100px;
  width: 120px;
  padding: 0px 13px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

And don’t forget our clearing div to sort our our floats on the profile divs.

div.clear {
  clear: both;
}

That’s the CSS done! Easy.

The jQuery

Now for what you’ve all be waiting for, the jQuery! Head back over to your HTML file. First we need to link to the jQuery library. I pretty much always link to Google’s files rather than download my own copy. The main reason for this is that it tends to speed things up a touch with user experience. Insert the following into the head of your HTML file.

...

...

Next we are going to create our pop-up effect. You can create your jQuery code in an external javascript file, such as popUp.js and linking to it just like we did above for the jQuery library. And in fact if you’re using a lot of javascript/jQuery I’d recommend it to keep things clean and legible. However for this example I’m going to write my code directly into the head of my HTML, below the line where I have link to Google’s jQuery library.

Note: If your writing into the HTML head, you’ll need to wrap your jQuery with script tags:

First let’s make our document ready. Below I’m using the long version for legibiliy but feel free to use the short version – $(function() { … });

$(document).ready(function() {
...
});

If the javascript is running, i.e. the user doesn’t have javascript disabled or isn’t using a device that doesn’t support it, we can then use jQuery to change some CSS on our pop-up divs. First we’ll change the display declaration to display:block, then we’ll set an opacity declaration of opacity: 0:

$(document).ready(function() {
  //If Javascript is running, change css on product-description to display:block
  //then hide the div, ready to animate
  $("div.pop-up").css({'display':'block','opacity':'0'})
});

Next we are going to make use of the .hover() function, so that when someone hovers over our trigger, the image and span which are contained within the trigger link, something happens:

...
$("a.trigger").hover()
...

Inside this hover method we are going to create a function which will animate our pop-up divs, causing them to fade in. We’ll will use the this selector to select the current element and the .prev() method to select the previous element from the selector – in this case the current selector is a.trigger that we hovered over and the previous element is div.pop-up just before it in the code. We will then use .animate() to change the opacity from 0 to 1 and finally, set the animation speed. Sounds a lot but all this happens in only a few lines:

...
$("a.trigger").hover(
  function () {
    $(this).prev().stop().animate({
      opacity: 1
    }, 500);
  }
)
...

OK, so far so good. If you check your page in the browser you’ll see that our fade in effect is working perfectly. However, there is quite an obvious problem. The pop-up div doesn’t fade out again when we hover off. In fact it just hangs around there getting in the way! That’s because we haven’t told it to fade back out again when we hover off. Thankfully the .hover() function includes a callback which allows us to animate the hover off state. So let’s sort it out now.

We are going to do pretty much the same thing, only this time the opacity will change from 1 to 0 and we’ll speed up the animate a bit so that the pop-up fades out quicker than what it fades in:

...
$("a.trigger").hover(
  function () {
    $(this).prev().stop().animate({
      opacity: 1
    }, 500);
  },
  function () {
    $(this).prev().stop().animate({
      opacity: 0
    }, 200);
  }
)
...

Rechecking your page in the browser, you can now see that everything is going according to plan.

That’s it!

View the Tutorial Demo

Get The Source Code

You can download the complete tutorial source code by clicking on the big button below and unzipping the file.

Create a Pop-up div in jQuery

Laura Montgomery — Mon, 21 Feb 2011 22:57:17 +0000

Update (13th August 2011): This technique has been updated to create the same effect with multiple pop-ups. View the new technique here:
Create Multiple Pop-up Divs using the jQuery prev() Method

jQuery is a powerful and easy-to-use Javascript library, like MooTools and and Prototype. It is not surprising that in recent years it has become extremely popular with website designers and has become the Javascript library of choice – I know it’s my favourite!

If you are new to jQuery, you should check out my Beginner’s Guide to jQuery article first, just to get to grips with the basics.

Tutorial Demo

This is an easy tutorial suitable for those fairly new to jQuery. This tutorial will teach you how to create a simple pop-up effect, showing a hidden div, when you hover over the trigger link.

View the Tutorial Demo

The HTML

Create a new HTML document and insert all the usual code – doctype, html tags, head tags, body tags, etc. as shown below:



  
    
    jQuery Tutorial - Pop-up div on hover

Notice how I am using the HTML5 doctype – – it is a good idea to get into the habit of using this.

First we are going to create a div with an id of container to hold our page content and centralise it, just to make things a bit prettier. Inside this div we will add a h1, p (paragraph), and a (link/hyperlink) with an id of trigger. All this of course goes inside the body tags.

...

  
    jQuery Tutorial - Pop-up div on hover
    
      To show hidden div, simply hover your mouse over
      this link.
    
  

...

Almost done with the HTML, the last thing we need to create is the div which will be hidden on the page loading, and triggered to become visible with the mouse hovers over the a#trigger tag.

...

  
    jQuery Tutorial - Pop-up div on hover
    
      To show hidden div, simply hover your mouse over
      this link.
    

    
    
      Pop-up div Successfully Displayed
      
        This div only appears when the trigger link is hovered over.
        Otherwise it is hidden from view.
      
    

  

...

The CSS

Now that we have our basic code in place, let’s style things up and make our page look a bit prettier. It is also at this stage that we will hide the pop-up div, using the display: none; css declaration.

Firstly, lets set some basic page styles and centre the container div, though if you are using this code within a website project, you don’t need to worry about this step as you will have your own page styles already set-up.

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #000 url(bg-texture.png) repeat;
  color: #dddddd;
}

h1, h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a {
  color: #EB067B;
}

div#container {
  width: 580px;
  margin: 100px auto 0 auto;
  padding: 20px;
  background: #000;
  border: 1px solid #1a1a1a;
}

For the sake of speed, I have added my styles inside the head tags of my html document, but for a live project I would always recommend attaching your styles to an external css document using the link tag.

In the css code above I am mostly just tweaking default browser styling, such as text colour, background colour, font-family, padding and margin – all pretty basic stuff. The most important bit is to make sure your div#container has a width and that the horizontal margins are set to auto – this centres the div, but again, pretty basic stuff.

Lastly, we are going to style the pop-up div. This is were the display: none; css attribute previously mentioned comes into play. It hides the div when the page loads. We also need to use position: absolute; so that the div gets positioned correctly with the jQuery we will add next. Again, we will add some basic styling such as width, colour, and padding, just to finish things off.

/* HOVER STYLES */
div#pop-up {
  display: none;
  position: absolute;
  width: 280px;
  padding: 10px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

The jQuery

Now we get to the exciting bit! Let’s add the jQuery to the page and get the pop-up div hover effect working. First we need to link to the jQuery library. You can download the latest files from jQuery.com and link to them locally, but I prefer to link to Google’s library files for my own ease and for speed on the part of any visitors to your site. Insert the following line of code inside the head tags of your html document:

Note that it is always worth checking what the latest version is and developing with that. However, this script definitely works with jQuery version 1.5.0.

Now let’s write our basic function. Just like with the css, I would always recommend linking to an external Javascript document, but for the sake of speed I have added my code into the head of my html document.

First let’s create a function:

$(function() {

});

Inside this function we are going to tell the browser that when someone hovers over the a tag with an id of trigger, to show the div with an id of pop-up.

$(function() {
  $('a#trigger').hover(function() {
    $('div#pop-up').show();
  });
});

Testing your page at this stage, you should see the div appear when you hover over the trigger link. However the first issue we have is that it doesn’t disappear again when you hover off the link. Let’s fix that.

By default, the .hover() method has a hover off call back. Add the following code to deal with the hover off method:

$(function() {
  $('a#trigger').hover(function() {
    $('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });
});

We now have the hover off method set to hide the div#pop-up – great! Now notice when you test this page that the pop-up div appears no where near our mouse pointer. On this small page that is not an issue, but on a longer, busy page this could be a real problem – besides, it looks untidy!

Let’s make the pop-up div appear at our mouse-pointer. First add an e inside the brackets at .hover(function() {, then add the .css method after .show() but before the semi-colon.

$(function() {
  $('a#trigger').hover(function(e) {
    $('div#pop-up').show()
      .css('top', e.pageY)
      .css('left', e.pageX)
      .appendTo('body');
  }, function() {
    $('div#pop-up').hide();
  });
});

If you test your script at this stage, you will probably see the div flash and flicker as it appears and disappears from view. This is happening because the div is appearing right beneath our mouse-pointer. We need to move the div away slightly to deal with this. First create two variables to hold our values:

$(function() {
  var moveLeft = 20;
  var moveDown = 10;
  ...
});

Then add these variables to the e.pageX and e.pageY:

$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $('a#trigger').hover(function(e) {
    $('div#pop-up').show()
      .css('top', e.pageY + moveDown)
      .css('left', e.pageX + moveLeft)
      .appendTo('body');
  }, function() {
    $('div#pop-up').hide();
  });
});

When you re-test your page this time, things should look and behave much better. The div should pop-up when hovering over the trigger link, appearing 20px to the left and 10px below your mouse pointer. And it should disappear again when you hover off the trigger link.

We are pretty much there – however the div is pretty static once it appears on screen. Let’s make it follow our mouse pointer and give our script the extra WOW factor!

We are going to use the .mousemove method on the a#trigger selector and tell the div#pop-up to follow our mouse pointer using the same .css methods as before:

$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $('a#trigger').hover(function(e) {
    $('div#pop-up').show()
      .css('top', e.pageY + moveDown)
      .css('left', e.pageX + moveLeft)
      .appendTo('body');
  }, function() {
    $('div#pop-up').hide();
  });

  $('a#trigger').mousemove(function(e) {
    $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

});

At this stage you can remove the first set of .css() methods as they are no longer needed. However, to make the code easier to read, I have just commented out the 3 now unnecessarily lines and added the semi-colon in after .show(). The code below is the final jQuery script:

$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $('a#trigger').hover(function(e) {
    $('div#pop-up').show();
      //.css('top', e.pageY + moveDown)
      //.css('left', e.pageX + moveLeft)
      //.appendTo('body');
  }, function() {
    $('div#pop-up').hide();
  });

  $('a#trigger').mousemove(function(e) {
    $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

});

View the Tutorial Demo

Get The Source Code

You can download the complete tutorial source code by clicking on the big button below and unzipping the file.

A Beginner’s Guide to jQuery

Laura Montgomery — Tue, 05 Oct 2010 22:25:19 +0000

If you have been designing and developing for the web for more than a few months, it is very likely that you have already come across jQuery and understand how powerful a tool it can be. However if you are new to web design, particularly with regards to front-end development, then you just might want to take a closer look at this fantastic JavaScript library.

What is jQuery?

The first thing you may want to know is ‘What exactly is jQuery?’ Well, jQuery is a powerful JavaScript library which simplifies programming with JavaScript. This is what jquery.com has to say about itself:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

What is great about jQuery is that it is very easy to get to grips with, so you can be sure that you’ll hit the ground running with this powerful JavaScript library that packs quite a punch!

Background Knowledge

Before you get started with jQuery, it is a good idea to have a basic understanding of website coding. You should be able to write and understand:

HTML
CSS
JavaScript – Not essential but will certainly give you an advantage!

If you are unfamiliar with any of these, I suggest looking at the W3Schools website for more information. Their resources explain everything very clearly and provide great working examples.

Once you have got to grips with the basics of HTML, CSS and JavaScript, it is time to look at jQuery. Below I have compiled a list of resources and useful tutorials aimed at jQuery beginners.

jQuery Resources

Currently jQuery is all the rage and there is no shortage of great resources on-line. Below I have included a few which I feel those new to jQuery should be aware of.

jQuery: Write Less, Do More

Let’s start with jQuery.com – here you can download the full version of jQuery, including previous versions. There is lots of information and documentation to keep you on the right track. Plus there are tutorials and plenty of ready-to-use User Interface (UI) widgets and effects provided.

Website: http://jquery.com/

jQuery UI: User Interface

And here is were you can download those great ready-to-use widgets and effects to bring your User Interface to life.

Website: http://jqueryui.com/

W3Schools: jQuery Tutorial

I have already mentioned W3Schools in this post, but I truly can not emphasize how well this website explains everything. Plus the working examples are a great way to help you understand the code and tweak it to create your own effects.

Website: http://www.w3schools.com/jquery/default.asp

jQuery Visual Cheat Sheet 1.4.2

At the time of this post going live, the latest stable version of jQuery is 1.4.2 – so if you happen to be using jQuery 1.4.2 this cheat sheet is a great visual aid to help you remember all the different attributes, effects, animations and much more!

Website: http://woorkup.com/wp-content/uploads/2010/06/jQuery-Visual-Cheat-Sheet-1.4.2.pdf

Tutorials & Examples

There are plenty of jQuery tutorials and examples on-line, including lots of ready-to-use effects and widgets. Below are some examples that I believe will help a beginner to jQuery quickly create some stunning effects which will really add the ‘wow’ factor to any website project.

FancyBox: An Alternative jQuery Lightbox

I would be surprised if you have not come across FancyBox in use while surfing the internet. This jQuery script is a great way to show a gallery of images, both as thumbnails and as larger images, in a clean and simple manner. FancyBox also allows you to add captions and previous and next navigation to the ‘floating lightbox’ style image. I truly recommend visiting the website to see this script in action!

Website: http://fancybox.net/

Line25: Basic Beginners Guide to Installing a jQuery Lightbox

In this step-by-step tutorial on Line25, Chris Spooner shows you, from start to finish, how to had a jQuery lightbox script to your website gallery. In his tutorial, Chris recommends using the lightbox script from http://leandrovieira.com/projects/jquery/lightbox/.

Website: http://line25.com/tutorials/basic-beginners-guide-to-installing-a-jquery-lightbox

ThemeForest: jQuery for Absolute Beginners Video Series

If you are the type who prefers to watch video tutorials, then this series from ThemeForest, Lost in the Woods is just the thing you are looking for. This video series is aimed at absolute beginners to jQuery and takes you through everything from downloading the script from jQuery.com, to more advanced techniques such as jQuery’s Ajax capabilities and submitting information to a database.

Website: http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/

jQuery For Designers: Coda Slider Effect

This great script from jQuery For Designers gives you a neat away to display lots of information on a website without using a lot of visual space – a great way to keep information above the ‘fold’. Don’t forget to check out the other tutorials on the site while you’re there!

Website: http://jqueryfordesigners.com/coda-slider-effect/

CSS Globe: Easy Slider 1.7

This script is quite similar to the Coda Slider Effect script above, however this script also includes an auto-play functionality so that the animation starts as soon as the page has finished loading.

Website: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

One More Thing

In many of the examples I have provided above you are shown how to download the latest version of jQuery and link to it in your HTML file. However you can also use the hosted jQuery libraries from Google or Microsoft:

Google jQuery Library

Microsoft jQuery Library

Closing Thoughts

Once you have gone through and understood the resources above, you will be well-on-your-way to becoming a proficient jQuery user; with the ability to edit existing code to suit your needs or write your own code from scratch.

Are you new to jQuery? What are your thoughts regarding the resources provided above? Or have you used jQuery before? Can you recommend tutorials, examples and resources that will be of great help to others?