This is a discussion on "have tables in hover popups" within the JavaScript Forum section. This forum, and the thread "have tables in hover popups are both part of the Program Your Website category.
|
|
|
|
|
 |
||
have tables in hover popups
|
||
| Notices |
 |
|
|
LinkBack | Thread Tools |
Nov 29th, 2006, 04:25
|
|||
|
|||
|
have tables in hover popups
I am using code to make a popup on mouseover,eg.
<style type="text/css"> #popup { /* Necessary: */ position: absolute; display: none; z-index: 10; /* Additional styling: */ width: 250px; padding: 5px; etc etc } </style> Anyway, I'm wondering whether I can put something in so that the popup will be able to display tables somehow. So instead of having plain text on a background, it can display text in 3 different rows. The effect I'm after is like on some sites where the links are double-underlined, you hover and a very nice looking box appears with rounded corners. (The rounded corners would be nice, but I'm more wondering how to have different parts of the popup box look different. If this makes sense and somebody knows, please help... Thanks 
|
|
|
|
Dec 22nd, 2006, 07:25
|
|||
|
|||
|
Re: have tables in hover popups
I know what you are talking about. The code that I have used (but not originally mine) is:
<html> <head> <STYLE TYPE="text/css"> <!-- #dek {position:absolute;margin-top:300;visibility:hidden;Z-INDEX:200;} //--> </STYLE> </head> <body> <center> <DIV ID="dek"></DIV> </center> <SCRIPT TYPE="text/javascript"> <!-- Xoffset= 0; // modify these values to ... Yoffset= 0; // change the popup position. var old,skn,iex=(document.all),yyy=-1000; var ns4=document.layers var ns6=document.getElementById&&!document.all var ie4=document.all if (ns4) skn=document.dek else if (ns6) skn=document.getElementById("dek").style else if (ie4) skn=document.all.dek.style if(ns4); else{ skn.visibility="visible" skn.display="none" } function popup(bak){ var msg="This is not orignally my script but I have edited it a lot."; var content="<TABLE WIDTH=300 BORDER=1 BORDERCOLOR=#800000 CELLPADDING=2 CELLSPACING=0 "+ "BGCOLOR='#990000'><td><FONT COLOR=white SIZE=3><center>Text here</center></font></td></table><TABLE style='border-top-width:0' WIDTH=300 BORDER=1 BORDERCOLOR=#800000 CELLPADDING=2 CELLSPACING=0 "+ "BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=white SIZE=3>"+msg+"</FONT></TD></TABLE>"; yyy=Yoffset; if(ns4){skn.document.write(content);skn.document.c lose();skn.visibility="visible"} if(ns6){document.getElementById("dek").innerHTML=c ontent;skn.display=''} if(ie4){document.all("dek").innerHTML=content;skn. display=''} } function kill(){ yyy=-1000; if(ns4){skn.visibility="hidden";} else if (ns6||ie4) skn.display="none" } //--> </SCRIPT> <a href="" onmouseover="javascript: popup('#000000')" ONMOUSEOUT="kill()">Hover to See</a> This will create two tables when you hover over it. You will have to mess around with the styles and position Last edited by john787787; Dec 22nd, 2006 at 07:28. Reason: forgot something
|
|
Dec 22nd, 2006, 15:20
|
|||
|
|||
|
Re: have tables in hover popups
You shouldn't be looking to create table unless they are to hold tabular data. you should be using <div> elements.
And use css to make the popup both appear and disappear. You shouldn't need JavaScript for this. Consider what is to happen if someone is using assistive technology and css and/or JavaScript are not available to them.
|
|
Dec 23rd, 2006, 13:36
|
||||
|
||||
|
Re: have tables in hover popups
I hate seeing code as bad as John78...'s. It makes me sad.
|
|
Dec 23rd, 2006, 15:27
|
|||
|
|||
|
Re: have tables in hover popups
aww...
What I think you're looking for is something explained here, that only uses CSS (& a Javascript function for silly IE6): http://www.alistapart.com/articles/dropdowns/ This is the kind of thing it can produce, you can see if it's what you're after: http://www.htmldog.com/articles/suckerfish/example/
|
|
| Tags |
| popup |
| Thread Tools | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| CSS Hover Effect In IE | Monie | Web Page Design | 6 | Feb 12th, 2008 00:43 |
| CSS li hover. | PicoDeath | Web Page Design | 9 | Dec 19th, 2007 14:26 |
| css hover | alexgeek | Web Page Design | 9 | Aug 2nd, 2007 18:18 |
| hii Help with hover | hawashp | Starting Out | 1 | May 13th, 2007 16:35 |
