Creative Individual Design Blog » Tutorials

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.

CSS3 Pseudo-classes: Harnessing the power!

Laura Montgomery — Wed, 17 Aug 2011 15:21:47 +0000

If you have a passing interest in website development, or work with code everyday, there’s a pretty good chance that you’ve heard of HTML5 and CSS3 by now. There’s lots of discussion around HTML5 and how wonderful it is – and rightfully so. However I’m going to discuss some simple but power CSS3. Because let’s face it, CSS3 is where things get really exciting when developing a website.

This post will go into 4 of the most common (in my opinion) CSS3 pseudo-class selectors and how to use them in the real world. The 4 that I will be discussing are:

:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type

However there are lots more pseudo-classes on offer and its always worth getting a bit more familiar with them. I recommend the information on the sitepoint site for further reading:

http://reference.sitepoint.com/css/css3psuedoclasses

:first-of-type

If you can read English, you probably already have a pretty good idea what this CSS3 selector does. Simply, it allows you to pick the first item of a given type, such as the first list item in an unordered list.

Here’s a simple example of how you’d use it:

HTML

  First
  Second
  Third


CSS
ul li:first-of-type {
  font-weight: bold;
}

The code above will create an unordered list of three items. The first item is then displayed in bold using CSS3.

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

:last-of-type

Similar to the :first-of-type selector, only this selector will pick the last item of a given type. So if we go back to our unordered list and simply change the CSS from :first-of-type to :last-of-type, we will see that the last item (the third in this case) is now in bold.

HTML

  First
  Second
  Third


CSS
ul li:last-of-type {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

:nth-of-type

Using the nth-of-type is when our CSS can get really powerful. There are several ways to use the :nth-of-type selector but I am only going to show you two. If you want to read more on the :nth-of-type, check out what sitepoint has to say:

http://reference.sitepoint.com/css/pseudoclass-nthoftype

:nth-of-type(3)

This is the simpler form of :nth-of-type, simply declaring that we want to target only the third item of a given type. So back to our unordered list and by changing the CSS selector, only the third list item is in bold (no matter how many list items we add).

HTML

  First
  Second
  Third


CSS
ul li:nth-of-type(3) {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

:nth-of-type(3n)

Even more useful again is when we target every third item of a type using :nth-of-type(3n). We could change this to target every fourth, fifth, sixth, etc. by changing 3 to 4, 5, 6, etc.

If we create an unordered list of 6 items, you can see how :nth-of-type(3n) works:

HTML

  First
  Second
  Third
  Forth
  Fifth
  Sixth


CSS
ul li:nth-of-type(3n) {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

Note: If you want to target every second item, use :nth-of-type(even). There is also a :nth-of-type(odd) selector.

:nth-last-of-type

After reading the last few examples, you’ve probably worked out what this selector does and how to use it. Rather than targeting just the last item of a given type, you can target the second or third last item, for example, or even the last two or three items. A really handy selector!

:nth-last-of-type(3)

By using :nth-last-of-type(3), we can target the third last item in our list:

HTML

  First
  Second
  Third
  Forth
  Fifth
  Sixth


CSS
ul li:nth-last-of-type(3) {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

:nth-last-of-type(-n+3)

And finally, by using :nth-last-of-type(-n+3), we can target the last three items in our unordered list:

HTML

  First
  Second
  Third
  Forth
  Fifth
  Sixth


CSS
ul li:nth-last-of-type(-n+3) {
  font-weight: bold;
}

Example: http://creativeindividual.co.uk/wp-content/uploads/2011/css3-pseudo-classes/

Older Browsers

If you are knowledgable with CSS3, you probably already realise that there is a small problem with using CSS3 pseudo-classes, and it is that older browsers will not support them!

Don’t let that put you off for fear not, there has already been some very clever people who have realised this problem and have used Javascript to work around it, saving our sanity in the process!

The Javascript that I use on a regular basis is Selectivizr, which you can read more about and download from here:

http://selectivizr.com/

Conclusion

I love the power and simplicity of CSS3 pseudo-classes. It saves us from littering our HTML and CSS with unnecessary classes just to deal with unwanted padding or margin, such as on the last paragraph of a block of text. It enables us to easily create zebra-strips on an index or list page. I find they help me a lot with fine-tuning the spacing in a grid of thumbnails on a gallery page. And they’ll definitely make your life easier when using a CMS (content management system) to stop the site from looking broken long after the initial launch.

As with much HTML5 and CSS3, the possibilities are only limited by your own imagination! And I hope my list of examples of four common pseudo-class selectors has given you some food for thought.

Have you have used CSS3 pseudo-classes in a recent website project? Then why not tell us about it in the comments?

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.

Christmas Collections #1 – Seasonal Illustration Tutorials

Laura Montgomery — Sat, 11 Dec 2010 16:41:28 +0000

Welcome to the first issue of Christmas Collections from Creative Individual. The festive season is upon us and we at Creative Individual have searched the web for the best of everything Christmas themed that the internet has to offer.

There will be several Christmas Collections from Creative Individual to get you into the spirit of the season, which will include tutorials, WordPress themes, Christmas icons, desktop wallpapers, fantastic freebies, and much more besides.

With all the said, are you ready for your first Christmas present from Creative Individual? Today’s Christmas Collection is a showcase of fantastic, festive illustration tutorials collected from some of the internet’s best web designers, illustrators and digital artists. Enjoy!

Create a Cute Vector Reindeer Character in Illustrator

This Illustrator tutorial written by Chris Spooner shows you how to create a high quality, and very cute, Rudolph of your very own. Chris always produces fantastic tutorials and his blog is second-to-none (in my opinion). So if you haven’t already, make sure you add him to your RSS Feed so that he can continue to wow you throughout the coming year!

http://www.blog.spoongraphics.co.uk/tutorials/create-a-cute-vector-reindeer-character-in-illustrator

Beautiful Fluffy Clouds in Photoshop – Christmas Tutorial

Abduzeedo is another designer who continually blows my mind with his amazing illustration skills. And in this tutorial from him, Abduzeedo shows you how to create a beautiful illustration which could be used on Christmas cards, desktop wallpapers and much more besides.

http://abduzeedo.com/beautiful-fluffy-clouds-photoshop-christmas-tutorial

Create a Vector Clip-Art Style Snowman in Illustrator

A simple and very easy-to-follow tutorial from Callum Chapman which shows you how to create a clip-art style snowman – this tutorial uses Adobe Illustrator and is a great one for beginners.

http://circleboxblog.com/2009/tutorials/create-a-vector-clip-art-style-snowman-in-illustrator/

Design a Simple Illustration for Christmas

The first of a few from Adobe Tutorials that we will be recommending. In this tutorial you will use a lot of simple techniques to create a highly polished final illustration.

http://www.adobetutorialz.com/articles/30970180/1/Design-a-simple-illustration-for-Christmas

How to Create Happy New Year 2011 Greetings Card in Photoshop CS5

The second from Adobe Tutorials, this tutorial is aimed at Photoshop CS5 users – so a great way to brush-up on some new skills and techniques.

http://www.adobetutorialz.com/articles/30970646/1/how-to-create-happy-new-year-2011-greeting-card-in-photoshop-cs5

How to Create Stylized Greetings Card with Christmas Baubles in Photoshop CS5

Another Photoshop CS5 tutorial from Adobe Tutorials – in this one, you’ll be creating some very shiny Christmas baubles on a beautiful and stylish snowflake background.

http://www.adobetutorialz.com/articles/30970628/1/how-to-create-stylized-greeting-card-with-christmas-baubles-in-photoshop-cs5

Beautiful Christmas Vision Tutorial And Wallpaper

Another Photoshop tutorial, and this one by Dainis Graveris on 1st Web Designer shows you how to create a simple, but very beautiful, Winter wonderland scene.

http://www.1stwebdesigner.com/tutorials/beautiful-christmas-vision-tutorial-and-wallpaper/

24 Free Christmas Photoshop Tutorials

Our first website containing a collection of great Christmas themed Photoshop tutorials, including one from Fabiano Meneghetti, co-founder of ZEE and one of the writers from Abduzeedo.

http://www.toxel.com/design/2008/11/30/24-free-christmas-photoshop-tutorials/

60 Beautiful Christmas Photoshop Tutorials

You can always be guaranteed to find great posts on the Smashing Magazines website, and this post of 60 Beautiful Christmas Photoshop Tutorials is no exception.

http://www.smashingmagazine.com/2008/12/16/beautiful-christmas-photoshop-tutorials/

20 Fantastically Festive Christmas Photoshop Tutorials

The last of our websites containing a collection of Christmas themed tutorials. And this one from PSD Fan contains some very unusual and unique tutorials, so definitely worth checking out!

http://psdfan.com/inspiration/graphic-design/20-fantastically-festive-christmas-photoshop-tutorials/

Design Christmas Card with Tree Balls in Photoshop

In this tutorial from Adobe Tutorials, you will be shown how to create realistic looking baubles for a Christmas Card design.

http://www.adobetutorialz.com/articles/30970109/1/design-christmas-card-with-tree-balls-in-photoshop

Create a Christmas Card – Christmas Tree on Red Background

Another simple and stylish tutorial from Adobe Tutorials. Create a Christmas Tree on a red and black background, which includes a slight bokeh effect.

http://www.adobetutorialz.com/articles/30970594/1/create-a-christmas-card-christmas-tree-on-red-background

How to Create a Christmas Greetings Card with New Year’s Toys in Photoshop CS5

Our second last tutorial from Adobe Tutorials shows you how to make some stylised, glass/transparent Christmas baubles in Photoshop CS5.

http://www.adobetutorialz.com/articles/30970626/1/how-to-create-christmas-greeting-card-with-new-year-s-toys-photoshop-cs5

How to Create a Christmas Background with Snowflakes and Stars in Photoshop CS5

Our last tutorial link for this post is our final from Adobe Tutorials. In this post you’ll create a stylish Christmas background illustration containing stars and snowflakes.

http://www.adobetutorialz.com/articles/30970596/1/how-to-create-christmas-background-with-snowflakes-and-stars-in-photoshop-cs5

Christmas Collections #2

Our next Christmas Collections post will contain some great links to Festive wallpapers and Christmas icons, so make sure you come back for more from Creative Individual.

Until part 2, enjoy the festive season and best wishes from Creative Individual.

Make a Print-Ready, 1 Colour Business Card in Adobe Illustrator

Laura Montgomery — Thu, 11 Nov 2010 20:56:12 +0000

I find that Adobe Illustrator can be a very flexible tool for creating print-ready artwork, especially for page layout where you don’t need any more than a couple of pages. This tutorial will show you how to create a stylish business card which is ready for professional printing, using just a few simple tools in Illustrator.

In this tutorial we are going to create a 1 process colour business card, namely magenta, which has a 3mm bleed and a 5mm quiet zone. Don’t worry if you don’t know what this all means, things will become apparent as we go through the tutorial. My business card’s final size is 85 x 55mm (width x height) but you should check with your local printer what size they prefer before creating your artwork.

Let’s Get Started

First open up Adobe Illustrator and create a new document that is 85 x 55mm (or whatever size your printer recommends). Make sure to set the Color Mode to CMYK (for printing) as opposed to RGB (for screen).

Once you have your new document, I recommend setting up some guides as a visual reference to let you know if you’ve going off-track. If they are not already visible, press CMD/Ctrl + R to show the page rulers.

First set up the bleed – the bleed essentially means you’ll make an image larger than your final artwork so that you can have colour right to the edges. It means that when the printer trims the paper, there is no chance of accidentally getting an unsightly white edge!

My printer recommends 3mm bleed, again you should check what your printer prefers. My guides need to be set 3mm outside the artwork box. The left guide is positioned -3mm on the x co-ordinates while the right is 88mm, the top guide is 58mm on the y co-ordinates while the bottom is -3mm.

The quiet zone again saves us from potential errors caused by any shift in the trimming process and also keeps our artwork looking tidy by not having text run all the way to the edge. I’m setting my quiet zone to 5mm. So the left guide will be at 5mm on the x co-ordinates while right is 80mm, the top guide is at 50mm on the y co-ordinates while the bottom is at 5mm.

Once you’re all set up, it’s time to get started and create the artwork. Grab the Type Tool (or T on your keyboard) and create a text box. Type your name or business name and select a strong typeface – I’ve opted for Century Gothic in bold.

Next we are going to add a star shape using the Star Tool. If you’ve never used it before, you’ll find it amongst the shape tools, most-likely fronted by the Rectangle Tool as shown above.

Just like the Rectangle Tool, if you click once on screen with this tool selected, you can enter in exact co-ordinates to help you create the perfect star for your artwork.

Create the star and position it beside your name. You may need to experiment with the size a bit to get the effect you are completely happy with. I recommend holding Shift while you scale the star up and down using the Selection Tool (or V on the keyboard) to keep it’s proportions correct. I’ve also rotated my star slightly to add some character.

Next we are going to create a magenta band of colour by using the Rectangle Tool (or press M on your keyboard). Like with the Star Tool, simply click once on screen to enter in the exact co-ordinates. I’ve created mine at 91 x 10mm – this means it runs from bleed guide to bleed guide and is 1cm tall. I’ve also positioned it just on the edge of my quiet zone, meaning when trimmed, my card with have a 5mm white band at the top. Make sure the colours in the colour pallette are set to 0, 100, 0, 0 for 100% Magenta.

Next select both the text and star and group them (CMD/Ctrl + G) and then position your logo inside the magenta band of colour. You will need to bring the logo to the front by pressing Shift + CMD/Ctrl + ] on your keyboard otherwise it will be hidden beneath the band of colour. Don’t forget to change the text to white, otherwise we are no longer preparing artwork for 1 colour-process printing.

Again, keep the logo outside the quiet zone. You may also wish to scale the logo up or down – don’t forget to hold Shift while using the Selection Tool (V) to keep the proportions.

Create another text box using the Type Tool and enter in your details. I’ve decided to create one box with type in bold for my occupation, and another in regular for my contact details (p.s. that’s not my real telephone number). I recommend keeping all your text boxes aligned to one another to keep everything looking professional, so on this case I’ll position all my text boxes and logo to the left edge of the quiet zone.

We have now finished the artwork for the front of the card. Save your artwork as ‘business-card-front’, then duplicate the file, renaming it as ‘business-card-back’. We now have the back of the business card already set up with guides and logo ready to use.

Open your new file ‘business-card-back.ai’ and delete the contact details. Resize your band of magenta to 91 x 61mm and make sure it lines up with the bleed guides on all sides.

Grab your Star Tool again and create an oversized star graphic. Change the star graphic colour to 75% Magenta, i.e. the CMYK colours in the colour-palette will read 0, 75, 0, 0. Position this graphic so that it flows over the boundaries of the canvas. Don’t worry, we sort out the over-spill in a minute! You will also need to Send Backward the graphic one layer (CMD/Ctrl + [) so that it is positioned above the background colour but below the logo.

Also, re-position your logo to the centre or wherever you feel looks best.

Now we are going to create a Clipping Mask to deal with our star graphic over-spill. Select the background box and copy it (CMD/Ctrl + C), then paste it in front (CMD/Ctrl + F). Still selected, bring the copied box to the front (Shift + CMD/Ctrl + ]). Select all (CMD/Ctrl + A) and then right-click and select ‘Make Clipping Mask‘ as shown above.

We now have our Clipping Mask in place and have completed the artwork for the back of the business card. Save your file (CMD/Ctrl + S).

We are nearly there! Now it is time to save our file as a PDF and make it ready for print! This time Save As (Shift + CMD/Ctrl + S) and change the file type to PDF. Then make sure you are saving as a high resolution PDF (with no compression) and that you have the above Marks & Bleeds set.

Selected are the Trim Marks and Registration Marks, with the Trim Weight set to 0.25pt and the Offset to 3mm. The Bleeds are all set to 3mm.

Open up the ‘business-card-front.ai’ file and repeat the previous step, saving the file as a PDF ready for print.

Lastly, open up your PDF files and double-check you are happy with everything before sending your final artwork to print. Always worth double-checking are things like your contact details, telephone number and if you’ve spelt your own name correctly!

That’s it! You’ve now created artwork for your own business card which you can send to any professional printers. This example uses only magenta ink, however for one colour processing you could also use cyan, yellow or black to create a similar effect.

Creative Individual Design Blog » Tutorials

Create a jQuery Tooltip!

The Technique

Tutorial Demo

The HTML

The CSS

The jQuery

Get The Source Code

jQuery 101 – Learning the Basics

What is jQuery?

Installing the jQuery Library

Your First jQuery Function

Your Second jQuery Function

Understanding the Syntax

Some Basic Events

.toggle()

.slideToggle() and .find()

Animation Speed

.css(), this Selector and Basic Selector Filters

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

Conclusion

Get The Source Code

CSS3 Pseudo-classes: Harnessing the power!

:first-of-type

:last-of-type

:nth-of-type

:nth-of-type(3)

:nth-of-type(3n)

:nth-last-of-type

:nth-last-of-type(3)

:nth-last-of-type(-n+3)

Older Browsers

Conclusion

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

The Technique

Tutorial Demo

The HTML

jQuery Tutorial - Pop-up div on hover

The CSS

The jQuery

Get The Source Code

Create a Pop-up div in jQuery

Tutorial Demo

The HTML

jQuery Tutorial - Pop-up div on hover

jQuery Tutorial - Pop-up div on hover

Pop-up div Successfully Displayed

The CSS

The jQuery

Get The Source Code

Christmas Collections #1 – Seasonal Illustration Tutorials

Create a Cute Vector Reindeer Character in Illustrator

Beautiful Fluffy Clouds in Photoshop – Christmas Tutorial

Create a Vector Clip-Art Style Snowman in Illustrator

Design a Simple Illustration for Christmas

How to Create Happy New Year 2011 Greetings Card in Photoshop CS5

How to Create Stylized Greetings Card with Christmas Baubles in Photoshop CS5

Beautiful Christmas Vision Tutorial And Wallpaper

24 Free Christmas Photoshop Tutorials

60 Beautiful Christmas Photoshop Tutorials

20 Fantastically Festive Christmas Photoshop Tutorials

Design Christmas Card with Tree Balls in Photoshop

Create a Christmas Card – Christmas Tree on Red Background

How to Create a Christmas Greetings Card with New Year’s Toys in Photoshop CS5

How to Create a Christmas Background with Snowflakes and Stars in Photoshop CS5

Christmas Collections #2

Make a Print-Ready, 1 Colour Business Card in Adobe Illustrator

Let’s Get Started

Further Reading & Inspiration