Bring css popup to the top

[rogerio]

I have a .css popup that is getting displayed multiple times on the same page. The first popup is always on top with the second below and the third below the second. How can I bring the one click on to the top? thanks...

[justsomeguy]

The z-index property controls the order that things stack in. A higher z-index puts the element on a higher level.

[rogerio]

I googled for several hours and there does not seem to be anything that will reliably return the z-index/zindex; what is a method for resetting the index?

[justsomeguy]

You don't really "reset" it (reset it to what?), you just set it.

[rogerio]

The problem is that if a user has 5 popups open on the same page clicking through them and I just arbitrarily give one of them that the user just clicked a number that matches another one - what happens?

[justsomeguy]

If multiple elements have the same z-index then I believe the one that gets displayed on top depends on the order of the elements in the DOM or the HTML markup.

[rogerio]

This is my problem, how to I control the index value of several popups?

[justsomeguy]

I'm not sure what you're asking. You set the z-index via CSS. I don't know what else you're asking. You can set the z-index on as many elements as you want. If your code is opening several popups and you need to keep track of the z-index of each one, then I would use an array to hold that data.

[rogerio]

If there are 5 popups open at the same time, they will have zindex values of 1-5. If the popup with the zindex of 3 is clicked on and it is given the value of 5 to bring it on top, what happens to the popup that has the current value of 5? It seems the one that has the current value of 5 has to be changed so the popup 3 can be brought to the top or there will be a collision. I know I could give the value of 6 to the popup that is clicked on, but there is the problem of another popup having been opened in the mean time that has that index already. In other words, every popup and its' value must be tracked some way unless there is a method for reording the zindex of all the popups leaving the highest index on the popup that the user selected.

[dsonesuk]

You either have to loop through all popups, and reset their z-index to low value, and set the current popup z-index to high value to bring it above the others, or use classname that uses a high z-index value, remove classname from currently opened popups and apply to most current popup on opening.

[justsomeguy]

There's no "collision". You can set the z-index of all of them to 1, and when they activate a particular one set it to 10,000. The browser isn't going to crash.

[rogerio]

EDIT: Putting all this together, this is what I came up with on 3 images and they hold their position in the line-up. If there is a better idea give it to me... thanks

function incIndex(obj){var elements = document.getElementsByTagName("*");var highest_index = 0;var p = document.getElementById(obj);var x;    for (var i = 0; i < elements.length - 1; i++)         {        if (parseInt(elements[i].style.zIndex) > highest_index)        {            highest_index = parseInt(elements[i].style.zIndex);            x = elements[i].style.zIndex;        }    }    p.style.zIndex = parseInt(x)+1;}

Edited August 2, 2012 by rogerio

[dsonesuk]

Using you code from previous posting, If your popup element is div with class name 'popup' loop through all div elements, and with a div element with classname 'popup' set to default lower z-index value, then set current selected to higher

var div_elemts = document.getElementsByTagName("div");for(i=0;i<div_elemts.length; i++){if(div_elemts[i].className=="popup")    {    div_elemts[i].style.zIndex="50";    }}

obj.style.zIndex="100";

[rogerio]

thanks dsonesuk. (on a note: I see you sent this on the 3rd and I just got the email on the 5th) I have ran into another problem with getting "resize:both" working. As you can see I have 3 div's and I want to resize all 3. The only way I can see is to place the resize on the "main" div but it doesn't show. I know this only works in FF.

<html><head><script type="text/javascript">function ShowPop(id){  document.getElementById(id).style.display = "block";}function HidePop(id){   document.getElementById(id).style.display = "none";}</script> 	<style>		#main { border: 8px #000 solid; width: 400px; height: 300px; margin: auto; display:none; resize:both;}		#one { width: 100%; height: 25px; background-color: blue; display: inline-block; }		#two { width: 100%; height: 255px; background-color: red; display: inline-block; overflow:auto;}	</style></head><body><a href='#' onclick='ShowPop("main");'>Show popup</a><p></p><div id="main">	<span id="one"><img src='x11_move.gif' left='0px'><img src='x11_close.gif' style='float:right;' onclick='HidePop("main");'>Hide popup></span>    	<span id="two">A whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of text</span></div>

Edited August 5, 2012 by rogerio

[dsonesuk]

You have to use overflow: auto; with resize: both;

[rogerio]

oops, I left that out of the code I posted, but it is located here:

#main { padding:10px; border:1px solid; width: 400px; height: 300px;  display:none; resize:both;}

[dsonesuk]

??? I tested it with overflow: auto; and the resize corner feature appears.

[rogerio]

??? It showed in 'main' where the whole popup can be resized? I got it to show in the inner div's, but that only works on one div and not all 3.

[rogerio]

ok, I got it working, but it took a trick in "#two" which can probably be improved on:

	    #main { border:1px solid; width:400px; height:300px; display:none; resize:both; [color=#ff0000]overflow:hidden; background-color:red;[/color]}	    #one { border-radius:5px; width: 100%; height: 25px; background-color: blue; display:inline-block; }	    #two { [color=#ff0000]height: 91%;[/color] width: 100%; [color=#ff0000]background-color:red;[/color] display:inline-block; overflow:auto;}

[dsonesuk]

How about

<div id="main">		<div id="one"><img src='x11_move.gif' left='0px'><img src='x11_close.gif' style='float:right;' onclick='HidePop("main");'>Hide popup></div>  		<div id="two">A whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of textA whole lot of text THE END</div></div>

	#main {	background-color: red;	border-radius: 10px;	float: left; /* or position: absolute; */}			#one {	background-color: blue;	border-radius: 10px 10px 0 0;	height: 25px;	line-height: 25px;	padding-left: 10px;}			#two {	background-color: red;	height: 300px;	margin: 5px 5px 5px 10px;	overflow: auto;	resize: both;	width: 400px;}

Edited August 6, 2012 by dsonesuk

[rogerio]

The popup looks great but I ran into a problem trying to get it to move; how do I incorporate this with the popup:

var ie = document.all;var nn6 = document.getElementById &&! document.all;var isdrag = false;var x, y;var dobj;var xL, yT;function movemouse( e ){   if( isdrag )  {   dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;   dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;   return false;  }}function selectmouse( e ){   var fobj	   = nn6 ? e.target : event.srcElement;   var topelement = nn6 ? "HTML" : "BODY";  while (fobj.tagName != topelement && fobj.className != "dragme")  {   fobj = nn6 ? fobj.parentNode : fobj.parentElement;  }    if (fobj.className=="dragme")  {   isdrag = true;   dobj = fobj.parentNode.parentNode;   tx = parseInt(dobj.style.left+0);   ty = parseInt(dobj.style.top+0);   x = nn6 ? e.clientX : event.clientX;   y = nn6 ? e.clientY : event.clientY;   document.onmousemove=movemouse;   return false;  }}function styledPopupClose(pop){   document.getElementById(pop).style.display = "none";}document.onmousedown=selectmouse;document.onmouseup=newFunction("isdrag=false");

[dsonesuk]

Good question, wish i knew the answer, since i know nothing of this drag script and even if it even worked before.

[rogerio]

The code works, I have it in use and will try to put something together later - have got to leave for several hours. It use a .css with a class='dragme' which is called with a onMouseDown/onMouseMove events.

[rogerio]

dsonesuk, this is pretty good size (hope no one minds), but here is a working example of dragging a popup. Maybe you can fit your popup example into it??? Notice the note in the 'move' scrip (the first script) about changing the 'parenNode' to match the depth of the popup in the '<span></span>' levels.

<?xml  version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC><html xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:w="urn:schemas-microsoft-com:office:word"xmlns="http://www.w3.org/TR/REC-html40"><head><link rel='stylesheet' href='sample.css' type='text/css'><title>DHTML Popups Sample 06</title><script type='text/javascript'>/* ====================THE MOVE SCRIPT==================*/var ie = document.all;var nn6 = document.getElementById &&! document.all;var isdrag = false;var x, y;var dobj;function movemouse( e ){   if( isdrag )  {   dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;   dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;   return false;  }}function selectmouse( e ){   var fobj	   = nn6 ? e.target : event.srcElement;   var topelement = nn6 ? "HTML" : "BODY";  while (fobj.tagName != topelement && fobj.className != "dragme")  {   fobj = nn6 ? fobj.parentNode : fobj.parentElement;  }	if (fobj.className=="dragme")  {   isdrag = true;//Add or delete 'parentNode' for the depth of the popup:   dobj = fobj.parentNode;   tx = parseInt(dobj.style.left+0);   ty = parseInt(dobj.style.top+0);   x = nn6 ? e.clientX : event.clientX;   y = nn6 ? e.clientY : event.clientY;   document.onmousemove=movemouse;   return false;  }}function styledPopupClose(pop){   document.getElementById(pop).style.display = "none";}document.onmousedown=selectmouse;document.onmouseup=newFunction("isdrag=false");/* ====================END OF THE MOVE SCRIPT==================*/ function ShowPop(event, objID) /* these variables have been tested and work */{var obj=document.getElementById(objID);var wid;if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){  x=event.clientX;  y=event.clientY;}else{  x=event.pageX;  y=event.pageY;}w=(screen.availWidth)/4;h=(screen.availHeight)/4;obj.style.Width=w+'px';obj.style.height=h+'px'; obj.style.position = "absolute";obj.style.left = x+"px";obj.style.top = y+10+"px";obj.style.display = "block";}function HidePop(popID){var obj=document.getElementById(popID);   obj.style.display = "none";}</script><style type='text/css'>.dragme{cursor: move;}.popup{   position:absolute;   left:-9999px;   width:300px;   height:400px;   border-style:solid;   border-width:4px;   border-color:blue;   background-color:#000000;/*   padding: 5px; */   font-family: Tahoma;   font-size: 10pt;   z-index:2;   display:none;   overflow:hidden;   border-radius:4px;   resize:both;} /* ie bug needed to make span show*/.dragme{cursor: move;}a{   text-decoration:none;}.popup a:hover span{top:0px;}.close{ float:right;cursor:pointer;}.text{ overflow:auto;width:376px;height:277px;padding-left:2px;padding-right:2px;color:white;}</style></head><body><span id='popup3' class='popup'>  <img src='../images/x11_move.gif' class='dragme' onMouseover='ddrivetip("Move", 40);' onMouseout='hideddrivetip();'>  <img src='../images/x11_close.gif' class='close' onMouseover='ddrivetip("Close", 40);' onMouseout='hideddrivetip(); 'onclick='HidePop("popup3");'>  <span id='text' style="color:white;">some text</span></span><a href="#" onMouseDown='ShowPop(event, "popup3");'><u>Load Popup</u></a></body></html>

[dsonesuk]

That script is old, and refers to Netscape 6, the browser sniffing is unreliable, and does not work in IE9, also the !doctype is unrecognised and reverts to quirks mode, which IE requires to work properly like other better browsers. You should look for a more up to date script that will work with current browsers.