Pop ups that aren't actually pop ups!

ryanhellyer · #1 (**permalink**) 02-08-2008, 07:23 AM

This is in response to the following question which was posted in the client side scripting forum. It is more of an HTML/CSS question hence I'm answering it here ...

Quote:

Originally Posted by dilipv

... i did saw the Pop windows in one of the website. just follow the following url.

http://www.webforumz.com/graphics-fo...and-banner.htm

In the above given link,just scroll to the fourth post, there you will find a hyper linked word " reading " powers have left us... if you place mouse on it you will
find something. i wanted to do the same on my site ....

That is not a pop up. It looks like a pop up but technically is not as it is still the same page.

What they've done there is use a CSS mouseover. It is the same technique used for creating dropdown menus and various other on page features.

What happens, is that when you roll over the piece of text, it changes the CSS value for the box which appears from display:none to display:block in the CSS.

Here is a crude demo of how this works:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Hover demo</title>
<style type="text/css">
    a div {display:none}
    a:hover div {display:block}
</style>
</head>
<body>

<a href="#">Hover over me<div>some random text</div></a>

</body>
</html>

ryanhellyer · #2 (**permalink**) 02-08-2008, 07:26 AM

One more thing ...

You can add as much content, styling and whatever else you want to include inside the DIV tag in the demo above. All of the content of the DIV will be hidden until you hover over the link.

You can also achieve the same effect with other elements which support the :hover pseudo tag, so you don't always need to use a link tag, although that it is probably the most common way to do it.

You can position the "pop up" with relative positioning to move it's position relative to the thing you are hovering over.

ryanhellyer · #3 (**permalink**) 02-08-2008, 07:29 AM

Actually ... I've had a sudden brain surge (it's 1:30am here at the moment) ...

That particular example you showed is probably not entirely generated by this technique, it may be Javascript generated. Although the principle is still the same and the method I've outlined above is likely to be more useful to you.

dilipv · #4 (**permalink**) 02-12-2008, 02:12 AM

hi ryanhellyer,

i saw your quote.i i would like to thank you once again for your reply.
i tried the code and i am happy that it's working
can you please explain the code. i wanted to know what does this following code do.
<style type="text/css">
a div {display:none}
a:hover div {display:block}
can you tell me how to create dropdown menu in javascript.

Thank you
Jitesh

ryanhellyer · #5 (**permalink**) 02-13-2008, 04:26 AM

The code you have pointed out there is the CSS which controls how the div tag behaves when it is inside a link, both as normal and when hovered over with the mouse.

Display:none indicates that you can not see div at all and display:block indicates that it will be displayed as a block element. Hopefully that makes some sense!

In general, you should avoid creating dropdowns in Javascript and only use the Javascript to help out older browsers like IE6 which can not handle basic CSS.

I've created a WordPress plugin for creating dropdown menus which may be useful as a demonstration for you ... Plugin page | Demo page

If you have a look at the code on the demo page, you will see that the CSS file controls the behaviour of the dropdown and there is a small Javascript to kick the menu down in older versions of IE. There are quite a few things going on in the creation of such dropdowns so I suggest having a go at modifying/adapting the code for your own needs and if you have any troubles post back here.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode