CSS - Css Popup Auto Close In 3 Seconds

Hi all,

I'm trying to get a pop up css based box (onClick is from an image) to display="none" when a user selects a value from a select box. I have a close link in the pop up, but I've been told that's not good enough.....

I have been trying to get the onChange handler to work, but I can't seem to find the right way to access it properly..

If anyone has done something similar, can you please send me your code snippet or direct me to a tutorial that explains how to do this? I'm new to javascript so please be gentle. Oh I guess I should mention that there are around 100 of these boxes and the div id is being created dynamically with ColdFusion....

Thanks!

Dave

Hi,
Is this the correct way to create Open and Close Link with image background?
it does not seem to work for me. Image is not displayed properly.
Code:

<style type="text/css">
span.open{background-image:url('img/open.gif');background-repeat:no-repeat; width:20px}
span.close{background-image:url('img/close.gif');background-repeat:no-repeat; width:20px}
</style>

<a id="toggleLnk" href="javascript: toggleOpenClose()">Open This<span class="open"></span></a>	


function toggleOpenClose() changes the class name and text as follows:
<a id="toggleLnk" href="javascript: toggleOpenClose()">Close This<span class="close"></span></a>

Hello everyone,

At the moment I am trying to achieve a re-design of my website (http://www.madewithpixels.co.uk) in pure XHTML/CSS.

After many hours of tweaking and a little bit of help here and there, I now have a version that almost exactly matches my original html design save for a couple of issues.

I'm aiming to have a fixed sized header, 2 content boxes that fill the available height of the browser window and and a footer that sticks to the bottom of the browser,

I'm so very nearly there, except somethings not quite right.... I can get the container expanding in height with the browser window no problem, by setting the height attributes in the CSS and the height of the DIV in the html to 100% height ... except it's TOO big, the footer is waaay down the bottom and requires me to scroll down to it (not what i want)....AND... it doesnt work in mozilla...

so, after a bit more tweaking, I changed the %'s for em's and now mozilla works correctly... so far so good, now to get the content boxes and the footer to
remain in view all the time.... easy i think, just play about with the height attributes in the CSS and the DIV and everthing should be fairly straightforward.

But no! it doesnt work, whatever i do, i cannot get the main content coloumns and the footer to remain in view and fit to 100% height of the browser at the same time, I've tried every combination of % and EM's that I can think of, and can acheive both effects, but not at the same time.

also, in IE I have about 10px of white above the footer that i cant eliminate... If anyone can give me an explanation as to what is happening (im sure the two problems are related) I'd be very grateful.
I've been tweaking this code for two days now and am getting nowhere.

i'm getting closer all the time, i just need to understand whats happening here and I reckon i'll be ready to start putting the rest of the elements in like the navigation etc

Thanks very much to anyone who has the time to make a suggestion, its very much appreciated.

For reference, you can see the latest version he
http://www.madewithpixels.co.uk/sandbox/latest.htm

cheers

Mike

I've looked at other threads to figure out my problem. However, I didn't really find one that matched my tiny problem. But anyways...

I made this markup where the div tags change css attributes. Works nicely in Opera and Firefox (and other mozilla based browsers), but the evil IE yet ruinz my dreams.

The link to the problem is he

http://www.shockcannon.com/beta_test/fb/imagefx.php

Here is PART of the region where i want the effect to happen:

Code:

<div id="ToC">

<table width="390" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="195 align="left valign="top">

<table width="195" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2" valign="top" height="16">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="head1">Photoshop</span>
&nbsp;&nbsp;<a href="javascript: idget_alt('photoshop','show');">Show</a> | <a href="javascript: idget_alt('photoshop','hide');">Hide</a>

</td>
</tr>
<tr>
<td height="10" width="10">
<img src="../images/subheading/ball_01.gif" width="10" height="10" alt="">
</td>
<td height="10">
<img src="../images/subheading/ball_02.gif" width="100%" height="1" alt=""></td>
</tr>
<tr id="photoshop">
<td colspan="2" valign="top" class="sub_indent">

<a href="imagefx.php?file=PS_lightning"><div class="toc_sizer"><img src="imagefx/image_display/PS_lightning.gif" width="40" height="40" alt="" align="left" border="1" hspace="3"><strong>Storm Sky</strong><br>Create a electric storm in 5 easy steps.</div></a>

<div class="toc_sizer"><img src="imagefx/image_display/blank.gif" width="40" height="40" alt="" align="left" border="1" hspace="3"><strong>TV Scanlines</strong><br>Enhance your image by adding a TV-feel to it (FW version, as well).</div>

...and here is the css region:

Code:

/* Sub Atttributes */
.sub_indent {
   padding-left: 10px;
}
.toc_sizer {
   width: 195px;
   height: 55px;
}
#ToC strong { /* Table of content mini title colorer */
   color: #999966;
   font-size: 11px;
}
#ToC div { /* Table of content mini title colorer */
   color: #CCCCCC;
   border: 1px solid #333333;
   padding: 1px 1px 1px 1px;
}
#ToC div:hover, #ToC div.sfhover a { /* Table of content mini title colorer */
   background-color: #444444;
   border: 1px dotted #666666;
}

Any guesses? Thankz!

I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm

Code:

.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Code:

<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close?

thanks in advance for your help

Hi everyone, I am wondering why IE sucks so bad...


Just kidding. Actually, my CSS popup appears in Mozilla Firefox (best browser on earth ) but not in IE. The guy that I learned it from (http://www.meyerweb.com/eric/css/edge/popups/demo.html) works in both IE and Mozilla, and I dont understand why mine doesn't any help would be appreciated

Mine:
Code:

div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 160px; left: -10px; width: 125px;
   padding: 0px; margin: 0px; z-index: 100;
   color: #000; background: #fff;
   font: 10px Verdana, sans-serif; text-align: left; }
div#links {position: absolute; top: 96px; left: 27px; width: 58px; height: 20px; font: 10px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; font: 10px Verdana, sans-serif; 
   padding: 0px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #fff; }

His:
Code:

div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background: #444;
   border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 180px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

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 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

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
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 have the following page:

http://take2records.com/test/dbtest.php

Which you can test using

http://take2records.com/test/dbtest...4&id_num=404100

What I need is to be able to have a popup any time you hover over a particular row in the generated table.

I found this code to do the hover:

Code:

class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<br />
<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br />

But I don't see how to apply this when the user hovers over a particular row.

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,

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???