CSS - Hover Popup

I'm using Eric Meyer's Pure CSS Popups template for a new site. I want to have a graphic pop up in the middle of the page for one particular link when clicked, rather than have the browser load a new page, but I don't know how to go about it. Can anybody shed some light on how to alter the stylesheet to have this one link act differently from the rest?

Thanks.

Hi guys, i really don't know if this can be accomplished with CSS but here it goes:
I want a user that's filling a form on my web application to be able to click on a certain field(or a link near that field) and pop out another form, fill it, submit it and then continue to fill the original form.
Maybe there's a bit of Javascript there or a combination of technologies, i really don't know so forgive me if i'm in the wrong forum, but i've seen similar stuff done with CSS, so if any of you has any idea on how i can accomplish this i'd appreciate it very much.
I've attached a graphic to illustrate it better.
Thanks!

Hi
I'm building a selectbox insead of using the common select tag.
I use the windows.createpopup() method to display the list of choise.
Differently to the div object the popup object is like a new window so it doesn't inherit the css style sheet I've attached to the main window.
I tought to attach it by using the addImport(url) method of the styleSheet object but it doesn't seem to work. Here it's my code, the show function it's called when the selectbox expands:

var Select_box = window.createPopup();
Select_box.document.styleSheets[0].addImport("URL('common/css/default_style.css');")

function show(element) {
if (Select_box.isOpen==false) {
Select_box.document.body.innerHTML = Select_box_content.innerHTML;
Select_box.document.body.className='selectbox';
Select_box.show(0, 18, 150, 50, element);
}
else {
Select_box.hide();
}
}

I've noticed that using the addImport method on the main window, and not on the instance of the select_box, with 0 index of the styleSheet the error doesn't occur but it doesn't also change the proprety. Tring using any other index value it gives me the usual error.
So how can I attach a style sheet to a popup created with the window.createpopup()?

Thank you

I'll admit right off - I don't know much about CSS.

I have a page that displays the event logs on my servers. If I display the whole message of each event it will take up way too much space. I'd like to have it so that if you move your mouse over the message like of the event, a "window" pops up (without navigating away from the page they are on) with the whole message.

I know my viewers are going to be using IE 6.1.

I've looked through here and on google for it, and I think I'm just looking in the wrong place.

Thanks.

Hi to all

How to show popup on hover the link through css like

<a here="">Hover here</a>

show a popup on left side of the link

thanks in advance

http://siliconsatan.com/test.php

The above test example is for a DIV that will show / hide with a click on a button / link.

Problem: Scroll down a bit, click on one of the links. The whole page will scroll to the top. It has something to do with the <a> tag.

I could get rid of the <a> tag, but then I would have to use JS to both do the roll-over, and trap the "click" event?

I'm actually using JS to trap the "click" event anyway, but I was hoping for a fully CSS roll-over function.

(The content - <li> ... </li> - is dynamically populated, or in the final it will be)

What am I doing wrong?

Hi, I'm still relatively new to CSS and liquid layouts, so please bear with me. I've made a new layout using only CSS over he

http://www.abhiram.astahost.com/trialcss/index.html

and the CSS file is:

http://www.abhiram.astahost.com/trialcss/mystyle.css

Now, when I move the mouse over one of the menu buttons, there should be a popup text that appears below the the button. The problem is, I don't want the button size to increase when you move the mouse over it. This is happening because I've had to use 'position:relative'. Also, I don't want the 'content' and 'rightbar' regions moving down when you mouse over it. I've designed this in 1024x768 res. Any ideas? One way of doing it would be to use absolute positioning, but I want the text to appear below each button.

Thanks a lot.

Hi,

At work I have to do popup menus (I hate them), so I am trying with all I have to not use Javascript. I have the following working using just CSS and HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Pure CSS Popups</title>

<style type="text/css">

body
{
    font-family: Arial;
}

div#menubar
{
    background-color: steelblue;
    font-weight: bold;
}

div#menubar a.menuhead
{
    position: relative;
    text-decoration: none;
    margin-right: 18pt;
    color: darkblue;
}

div#menubar a.menuhead:hover
{
    color: white;
    background-color: darkblue;
}

div#menubar a.menuhead div.menu
{
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 1em;
    width: 15em;
    background-color: steelblue;
    border: 2px solid darkblue;
}

div#menubar a.menuhead:hover div.menu
{
    visibility: visible;
}

div#menubar a.menuhead div.menu div.menuitem
{
    width: 100%;
    cursor: pointer;
    background-color: steelblue;
    border-bottom: 1px solid darkblue;
}

div#menubar a.menuhead div.menu div.menuitem:hover
{
    background-color: darkblue;
}

div.menuitem a
{
}

</style>
</head>

<body>

<div id="menubar">
    <a class="menuhead" href="">Menu 1
        <div class="menu">
            <div class="menuitem">Menuitem 1</div>
            <div class="menuitem">Menuitem 2</div>
            <div class="menuitem">Menuitem 3</div>
            <div class="menuitem">Menuitem 4</div>
            <div class="menuitem">Menuitem 5</div>
        </div>
    </a>
</div>

</body>
</html>

Now what I want to do is put real hyperlinks inside of the menuitem divs. However, when I do so it messes up for some strange reason in both Firefox and IE. If someone could tell me why I would GREATLY appreciate it.

Code:

<div id="menubar">
    <a class="menuhead" href="">Menu 1
        <div class="menu">
            <div class="menuitem">Menuitem 1</div>
            <div class="menuitem">Menuitem 2</div>
            <div class="menuitem"><a href="">Menuitem 3</a></div>
            <div class="menuitem">Menuitem 4</div>
            <div class="menuitem">Menuitem 5</div>
        </div>
    </a>
</div>

In Firefox, the menu items after the one with the hyperlink no longer format correctly, and the menu also becomes part of the menubar.

In IE it looks ok, but when the mouse is moved over the menuitem hyperlink the menu goes away.

In both, the menuitem divs get shrunk down to the width of the text.

Any ideas???

Hi all,

Thanks for the interest,

I want to set my menus like the categories in alibaba.com ( the menu of the left side), on mouse over the sub menus should come up in the same way as here.

How can I achieve this ?

Thank you guys

Good day to you all,
I'm working on a css popup script.
It work, but I would like the popup to be always in the center of the window.

here is my code :

PHP Code:
echo "<a onmouseover=this.style.cursor=\"pointer\" ' onfocus='this.blur();' onclick=\"document.getElementById('".$value."').style.display = 'block' \" ><img src=\"".$directory."/".$value."\" width=\"50px\"></a>\n"; 
    echo "<div id='".$value."' style='display: none;  position: absolute;  text-align:left; margin: -50px -200px; margin-top:-150px; z-index:50; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; '>";
    echo "<img src=\"".$directory."/".$value."\" /><br />".$value."<br/>";
    echo "<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('".$value."').style.display = 'none' \" ><span style=\"color:#000000;\">Close</span></a></div></div>"; 





Thanks!

Thank you for stopping by!

I'd like some guidance about a problem that has to do with CSS (and a bit of JavaScript I guess) and trying to position an overlaying DIV.

The problem description is quite simple;
When I click an image on the "main" area, a div gets, with a little help from javascripting, its display property set to "block". This surely and safely makes the div's content appear as it should and all is fine.
I now have a headache from trying to figure out how I could position this div. I know what I'd like to do but I can't quite figure out how to get it right.

I'd like to have the popup-div center itself on the page, regardless of the size of contents inside it.
The content mostly consists of text of varied amounts and next to no images or other media content.

If you got any ideas about this or got a link to a website that's similar to what I'm trying to accomplish or any input at all, feel free to make a comment! It's much appreciated!

Here's what the popup CSS looks like atm:
Code:

div.PopUp {
	width: 550px;
	border: dashed silver 1px;
	display: none;
	position: absolute;
	left: 150px;
	top: 50px;
	background-color: black;
	text-align: justify;
	font-size: 10pt;
	color: black;
}

Regards
DrLaban

Dear clever CSSers

I am currently changing my flyout menu from something rather complex, to the Suckerfish version.

I have one problem: I have been using some mouseover tooltip-like information boxes giving extra details of the contents of a link, by having a div within the text of the hyperlink, to come visible when hovered. It has worked very well in my old version. Here's my test page

In the new version, there are two lines of CSS allowing the popup to open, which is also enclosed in a balloon-style info graphic, actually in two halves so that it can open like a clamshell if there is extra text in there, or a user has a larger than normal font setting:

Code:

#nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;width:196px;height:105px;line-height:1.2em;text-align:left;word-wrap:break-word;text-wrap:normal;white-space:normal;padding:0px;} #nav a:hover span {visibility:visible;z-index:9999;min-height:130px;} 

This CSS does allow the popup to appear, but unfortunately it positions each popup at the same position on the page. I would prefer it that they appeared with the 'point' of the balloon pointing at the relavent link. You can see that if you hover '2nd level here', and then 'page 1', or 'page 2' or 'another page', the info balloon appears in exactly the same place on the page.

Changing the positioning from position absolute to position relative causes the popup to appear in about the correct position, but it also expands the link area on the menu itself to a huge blank area and misses off the balloontop.png graphic from the popup, which I presume is staying inserted, hidden, within the menu item and causing it to expand.

Thanks for any ideas on this. BTW, the javascript is a neat one that repositions submenus where necessary so they can't vanish below the bottom of the page.

Best wishes

Tony

I've been fighting with CSS popup menus for a while now, and finally got everything looking ... close enough ... in every browser at my disposal (even IE). Now, I've started filling my page with content and all hell's breaking loose again. *sigh*

For some background info, this page has a menu at the top, and the content area directly below it. In the content area, I have two divs that generate what's supposed to look like a dialog window.

The titlebar div has class "title", the main window area div, class "window" and ID'd "dlg1". The idea being that the "title" div can be clicked to make the "window" div display: none and fold up in a window-shade fashion via a JavaScript function. The script works flawlessly, astonishingly enough, and can be used so that several "dialogs" can exist on the page, independently expandable just by giving them different IDs.

Now for the details:
The menu is a CSS UL -> LI:hover -> UL { display: block } sort (with a cheat script to make IE a little less retarded.) I've set the z-index of the submenu UL to 1000, hoping nothing in the Z-stack would have a higher display precedence than THAT.

Firefox displays everything perfectly. The menus stay on top, the scripts work, life is good.
Opera 7 works pretty much the same way. The rollover effects are kind of slow, at least in the Linux version, but no big deal.
KDE's Konqueror 3.3.1 has no problem with the title and window divs, but always hides the menu under the <textarea> form element inside the window div. This is not acceptable, but since I will be probably the only one who will use this page in KDE, I can even live with that.
MSIE... god bless it... it can't help itself. The menu will draw over the title div, but not the window div.

So:
1) Regarding Konqueror's problem, the CSS-over-Flash post below suggests that some elements are too specialized to expect reliable z-index support. Am I to understand that my <textarea> tag will probably never sit correctly in the Z-stack unless the user agent draws them from scratch (like Firefox and Opera seem to do)?

..and, most importantly...

2) Is there ANY reason anyone can see why my menu is weaving behind those divs in IE?

Here is a link to all of my content. (It's seperated into a few files to ensure efficient use of the cache, and to make changes easier.)

Main CSS file (holds common properties to all pages, regardless of content. Controls the menu, for example.)
http://www.mtaonline.net/~nwallette/test/ttmsmain.css

Secondary CSS file (holds properties common to all pages that use the window architecture described above.)
http://www.mtaonline.net/~nwallette/test/ttmsdlg.css

Main JavaScript file (holds code to activate the window-shade function, and some other stuff yet to come.)
http://www.mtaonline.net/~nwallette/test/ttmsmain.js

MSIE patch JavaScript file (called in an IE conditional statement to fix support for :hover over LI's.)
http://www.mtaonline.net/~nwallette/test/stupidie.js

...and finally, the HTML that illustrates the problems.
http://www.mtaonline.net/~nwallette/test/argh.html

To see what I mean, you'll need to make sure the two "dialogs" are expanded (click on the title bars) and then hover over the Admin menu. Make sure your window size is small enough so the Admin menu dropdown covers part of the dialogs below it.

To see the Konqueror problem, contract the first dialog and make sure the 2nd one is expanded, and the Admin menu covers part of the multi-line text box.

Any ideas, anyone? Please??