rogerio

That's what I was attempting to do, but for some reason, I don't seem to get the idea of how to make it work. If I block the onmouseout, and the user hasn't clicked, then the popup is going to stay open anyway.

Yea, I see the problem is in the order of events captured. I need to trap the 'onclick' ahead of the 'onmouseout' and that ain't going to happen: onmouseover onmouseout onclick Oh well, I was just doing it for convenience anyway - make the user pay their dues... I am currently only using click events. thanks for the help

I may be misunderstanding where you are going: I want it to toggle "only" in the case of mouseover and mouseout, and at the same time, when mouseover opens the popup and the link is clicked, I want the popup to stay open until the close button is clicked. If the link is not clicked then mouseout will close it.

I see the toggle, but the issue I am running into is that 3 events are involved:1 mouseover show popup2 if mouseout and no click, close popup3 if click keep popup open - the popup contains a close button. I have discovered that "return" will retain the variable - probably old hat to you.

I have a situation where I want to use onMouseOver and onMouseOut to open and close a popup; but if the user clicks on the link I want the popup to stay visible until it is manually closed. The problem seems to be that I cannot get a variable to maintain its' value between operations. Can this even be done with javascript? thanks...

dsonesuk, here is another script that I found, does it have merit? var Drag = {obj : null,init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper){ o.onmousedown = Drag.start; o.hmode = bSwapHorzRef ? false : true ; o.vmode = bSwapVertRef ? false : true ; o.root = oRoot && oRoot != null ? oRoot : o ; if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px"; if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px"; if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px"; if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px"; o.minX = typeof minX != 'undefined' ? minX : null; o.minY = typeof minY != 'undefined' ? minY : null; o.maxX = typeof maxX != 'undefined' ? maxX : null; o.maxY = typeof maxY != 'undefined' ? maxY : null; o.xMapper = fXMapper ? fXMapper : null; o.yMapper = fYMapper ? fYMapper : null; o.root.onDragStart = new Function(); o.root.onDragEnd = new Function(); o.root.onDrag = new Function();},start : function(e){ var o = Drag.obj = this; e = Drag.fixE(e); var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); o.root.onDragStart(x, y); o.lastMouseX = e.clientX; o.lastMouseY = e.clientY; if (o.hmode) { if (o.minX != null) o.minMouseX = e.clientX - x + o.minX; if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX; } else { if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x; if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x; } if (o.vmode) { if (o.minY != null) o.minMouseY = e.clientY - y + o.minY; if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY; } else { if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y; if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y; } document.onmousemove = Drag.drag; document.onmouseup = Drag.end; return false;},drag : function(e){ e = Drag.fixE(e); var o = Drag.obj; var ey = e.clientY; var ex = e.clientX; var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); var nx, ny; if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX); if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX); if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY); if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY); nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1)); ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1)); if (o.xMapper) nx = o.xMapper(y) else if (o.yMapper) ny = o.yMapper(x) Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px"; Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px"; Drag.obj.lastMouseX = ex; Drag.obj.lastMouseY = ey; Drag.obj.root.onDrag(nx, ny); return false;},end : function(){ document.onmousemove = null; document.onmouseup = null; Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), parseInt(Drag.obj.root.style[Drag.obj.vmode ?"top" : "bottom"])); Drag.obj = null;},fixE : function(e){ if (typeof e == 'undefined') e = window.event; if (typeof e.layerX == 'undefined') e.layerX = e.offsetX; if (typeof e.layerY == 'undefined') e.layerY = e.offsetY; return e;}};

I looked days before finding this one....

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>

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.

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");

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

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

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

OUCH!!!!!

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>

Don't understand: I click under my user name and it has "My Content" and clicking on it shows nothing; have to use "Content | Follow" and I don't know if I am getting all my content or not - sure I am not. I have tried using "Search" and "Advanced Search" and I have never see any results. I have tried searching for my user name with no result. Is there some setting that I have to make or something?

Is there a way to resize a css popup in IE similar to resize:both in real browsers?

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

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.

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

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?

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?

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

The image is in the path using "setAttibute". No errors from IE or FF. IE shows a distored image and FF does the same if I remove DTD checking from the header; otherwise FF show nothing.

this is one line in the above script that is using "setAttribute" that I want to change to "style" and it isn't working: mycurrent_image.style.backgroundImage= "url('images/x11_close.gif')";