css display window

[TheCandyman]

I'm looking how to do those popup windows like here:

http://www.ask.com/web?q=google&qsrc=0&o=0&l=dir

(hover over the binoculars)

or here

http://www.download.com/3120-20_4-0.html?tg=dl-20&qt=dvd&tag=srch

(hover over the result links)

What is it called, and do you know of any examples/tutorials?

 

[ca8msm]

Have a look at the View Source of the pages in question as it will show you or point you at how it is done.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[TheCandyman]

I did, that's why i'm asking here for a simple example. Anyone?

 

[vacunita]

You can take an image of what you want to show and place it inside a DIV.

Style the div using CSS any way you want, incude in your stylings a "display:none "property so its invisible. and a position:absolute so its out of the document flow and doesn't take up space. Then using Javascript change the display property to displat:block; OnMouseHover of the icon. and to display:none OnMouseOut.

And there you go.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[TheCandyman]

I did pull out some of the code, but i'm not a JS programmer so i'm trying to understnad what's going on

function b_h() {
    if (!document.layers && document.getElementById){
        b_PIP = false;
        obj('b_Prev').style.visibility='hidden';
        obj('b_Prev').innerHTML = "";
        obj('b_C').style.display='none';
    }
}
function b_s(binoc,p,io) {
    if (!document.layers && document.getElementById) {
        var h,w,bh,bw,Up,b_IL,b_IB;
        
        bh = 357;
        bw = 410;
        b_IL = 41;
        if (big()) {
            
            h = 260;
            w = 348;
            
            Up = bup(h,io);
            
            b_IB =(Up)?34:45;
        }else {
            
            h = 180;
            w = 240;
            
            Up = bup(h,io);
            
            b_IB =(Up)?114:45;
        }

        var b_P,b_C,b_RL,en,eo,pt,sld,url,ref,bub;
        b_P = obj('b_Prev');
        b_C = obj('b_C');
        b_RL = obj('r'+io+'_t');
        p.u = '[URL unfurl="true"]http://binoculars.ask.com/binocl_get?url='[/URL] + binoc; 
        if(navigator.userAgent.toLowerCase().indexOf("msie 5") > -1)
            ref = p.u;  
        else ref=_RP(p);
        bub = b_t();
        bPIP = true;
        b_P.innerHTML = '<img id="bub'+io+'" width="'+bw+'" height="'
                +bh+'" src="' + bub + '" /><img id="binocImg'+io+
                '" width="'+w+'" height="'+h+'" src="'+ ref +
                '" onload="javascript:b_c('+io+','+w+','+h+
                ');" style="position:absolute;left:'+b_IL+'px;top:'+
                b_IB+'px" />';
    }
}

<div id="r_b0" class="prel T11">
     	<a id="r0_b" href="[URL unfurl="true"]http://www.google.com/"[/URL] onmouseover="b_s('ff90821feeb2b02a33a6f9fc8e5f3fcd&s=3013059917',{en:'bi',io:'0',b:'alg',tp:'d',ec:'8'},0);" onmouseout="b_h();" ></a>
</div>

 

[vacunita]

Wow how complex, my idea works somethng like this:
First Create 2 styles, 1 for how it should look, and one when its hidden:

.preview_visible{
  width:100px;
  height:100px;
  border:2px solid #000000;
  background-color:#ede7d3;
  position:absolute;
 [red] left:100px;
  top:10px;[/red]
  text-align:center;
  display:block;
}
.preview_hidden{
display:none;
}

Using the left and top properties will affect where the box is dsplayed.

Then create your DIV. with whatver you want in it, i placed some text just to test.

<div name="mybox" id="preview" class="preview_hidden">
This is a Preview Window
</div>

Then using whichever object you want to use to get the preview box to pop from, add the Onmouseover and Onmouseout events. I used an image but you can use another DIV, a text box, anything at all. 

<img src="drive.jpg" OnMouseover="document.getElementById('preview').className='preview_visible'" OnMouseout="document.getElementById('preview').className='preview_hidden'">


Then just set the approriate classes depending on the action.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[TheCandyman]

That seems to work on an image, how would you tweak it to run off of some text. I tried it on a link, but couldn't get it to work.

<body>
....
<a href="#" OnMouseover="document.getElementById('preview').className='preview_visible'" OnMouseout="document.getElementById('preview').className='preview_hidden'">&nbsp;332&nbsp;</a>
<div name="mybox" id="preview" class="preview_hidden">This is a Preview Window</div>
....
</body>

 

[TheCandyman]

Looks like it puts it way at the top, guess it's the

  left:100px;
  top:10px;

is there a way to make it right above the curser, or to the right?

 

[vacunita]

It should work off of a link just the same.

As I said modify the left and top attributes to make it appear where you want it, alternatively i suppose you could use Javascript to get the mouse coordinates and dynamically change the top and left attributes to match the coordinates.

You'll Have to search for that yourself. Google has plenty of results for "Get Mouse coordinates with Javascript".










----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[mkrausnick]

There is a freeware canned solution called OVERLIB that works really well. I use it to expand events on an event calendar - hover over the event title and an expanded descripton pops up.

Check out

http://www.bosrup.com/web/overlib/

. There are links to samples.

Mike Krausnick
Dublin, California

 

[TheCandyman]

Thanks for all the pointers, got it working so i thought i would post my code to any googlers out there that may find this. You can always dump the javascript into a .js or .inc file to be included in to make your page cleaner to work with.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.</title>
<style type="text/css">
	.catList {border:0px solid #ffffff;}
	.catList a {text-decoration:none;position:relative;z-index:1}
	.catList a span {display:none;position:relative}
	.catList a:hover {border:0px solid #ffffff;text-decoration:underline; background-color:#eeeeee}
	#catDescHolder {display:none;position:absolute;width:150px;}
</style>
</head>
<body style="margin:0px">

<script type="text/javascript">
function getPosLeft(obj) {
	if (obj.offsetParent) {
		return obj.offsetLeft;
	} else {
		return obj.pageX;
	}
}
function getPosTop(obj) {
	if (obj.offsetParent) {
		return obj.offsetTop;
	} else {
		return obj.pageY;
	}
}
function showDesc(cat) {
if (cat.getElementsByTagName("span")[0].innerHTML != "") {
	document.getElementById("catDescHolder").innerHTML = cat.getElementsByTagName("span")[0].innerHTML;
	document.getElementById("catDescHolder").style.top = (parseInt(getPosTop(cat)) + 15) + "px";	
	document.getElementById("catDescHolder").style.left = getPosLeft(cat) + "px";		
	document.getElementById("catDescHolder").style.position = "absolute";	
	document.getElementById("catDescHolder").style.width = "180px";	
	document.getElementById("catDescHolder").style.backgroundColor = "#ffffff";	
	document.getElementById("catDescHolder").style.padding = "5px";	
	document.getElementById("catDescHolder").style.border = "1px solid #555555";	
	document.getElementById("catDescHolder").style.display = "block";	
	MenuSetVisible("catDescHolder",true,document.getElementById("catDescHolder").style.left,document.getElementById("catDescHolder").style.top,"180px");	
	if (navigator.appName != "Microsoft Internet Explorer" && document.getElementById("catDescHolder").style.left == "608px" && (parseInt(getPosTop(cat)) + 15) >=826 && (parseInt(getPosTop(cat)) + 15) <=1326 ) {
		document.getElementById("holder300x250").style.display = "none";	
	}
}	
}

function hideDesc() {
	document.getElementById("catDescHolder").style.display = "none";	
	MenuSetVisible("suggestedShim",false,"0px","0px","0px");
	document.getElementById("holder300x250").style.display = "block";	
}
</script>

<br><br><br>
<div id="catDescHolder" style="position:relative;z-index:100"></div>
<div class="catList">
   <a onmouseover="showDesc(this)" onmouseout="hideDesc()" href="index.htm">Item 1<span>Test 1</span></a><br><br>
   <a onmouseover="showDesc(this)" onmouseout="hideDesc()" href="index.htm">Item 2<span>Test 2</span></a><br><br>
   <a onmouseover="showDesc(this)" onmouseout="hideDesc()" href="index.htm">Item 3<span>Test 3</span></a><br><br>  
</body>
</html>