Skip to main content

Posts

Showing posts from 2013

Create a Pop-up div in jQuery

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: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery Tutorial - Pop-up div on hover</title> </head> <body> </body> </html> Notice how I am using the HTML5 doctype –  <!DOCTYPE html>  – 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 th