Jump to content

Drag popup multiples


rogerio
 Share

Recommended Posts

The code below works for a single popup and I would like to make it work for multiples. In other words, I would like to be able to feed a 'ID' to the script rather than enter the 'ID' into it the way it works now. The problem is bolded and red in the "CODE". thanks...

<?xml  version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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></head><body><style type='text/css'>.dragme{ cursor: move; }</style><script type='text/javascript'>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;   [color=#ff0000][b]dobj = document.getElementById("styled_popup");[/b][/color]   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(id){   document.getElementById(id).style.display = "none";}[color=#ff0000][b]document.onmousedown=selectmouse;[/b][/color]document.onmouseup=new Function("isdrag=false");</script><div id='styled_popup'name='styled_popup'style='width: 380px;height: 300px;display:none;position: absolute;top: 150px;left: 50px;'><table width='380' cellpadding='0' cellspacing='0' border='0'>  <tr>   <td>    <img height='23' width='356' src='images/x11_title.gif' class='dragme'>   </td>   <td>    <!-- Need to add "id" -->    <a href='javascript:styledPopupClose("styled_popup");'>	 <img height='23' width='24' src='images/x11_close.gif' border='0'>    </a>   </td>  </tr>  <tr>   <td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left;   width: 380px; height: 277px;'>   Drag my window title to see me moving :-)   </td>  </tr></table></div><!-- change "styled_popup" to match each popup --><input type='submit' onClick='document.getElementById("styled_popup").style.display="block"' value=' Fire! '></body></html>

Link to comment
Share on other sites

If all popup boxes will have the same HTML structure, then in the selectmouse function once you find the dragme element you can go up in the tree a few times to get the div. In the example above the div is 4 parents above the dragme image. That would let you get a reference to the div without using the ID, but all popups will need to have a similar structure.

Link to comment
Share on other sites

All of this:

once you find the dragme element you can go up in the tree a few times to get the div. In the example above the div is 4 parents above the dragme image. That would let you get a reference to the div without using the ID, but all popups will need to have a similar structure.
Link to comment
Share on other sites

DOM elements have a property called parentNode that refers to the parent of the element. So that code ends up with the variable fobj being set to the element with the class "dragme", which is an img element. The parentNode of the img is the td, the parentNode of the td is the tr, the parentNode of the tr is table, and the parentNode of the table is the div that you want to target. So you can use the parentNode properties to set the dobj variable to the correct element instead of getting it by its ID. dobj = fobj.parentNode.parentNode.parentNode.parentNode; That's only going to work if the img is nested 4 levels deeper than the div.

Link to comment
Share on other sites

I understand the "parentNode" that you are speaking of now is the table; that was my hangup. The HTML structure will pretty much have to remain the same in order to get the "titlebar" of the popup to work. Gone to give it a try - thanks...

Link to comment
Share on other sites

Tried, but something is amiss. I also broke it back through all the "parentNode"s. I assume you were talking about replacing: dobj = document.getElementById("styled_popup"); with: dobj = fobj.parentNode.parentNode.parentNode.parentNode; I noticed that you are using class="dragme" instead of id="styled_popup" as the orginal script has.??

Link to comment
Share on other sites

I'm just explaining what the code is doing. This loop:

while (fobj.tagName != topelement && fobj.className != "dragme"){fobj = nn6 ? fobj.parentNode : fobj.parentElement; }

stops when it gets to either the top-level element, or an element with the class "dragme". That is what fobj gets set to, the element with the class "dragme". That's going to be the img element. So if you go up in the DOM 4 levels you'll get to the div that you want to refer to.

Link to comment
Share on other sites

One more question on this code: There are 2 images at the top (1 for dragging and the other for closing), is there a way to make the the text below the images scroll without moving those at the top? I cannot get "overflow:auto" in any position in the table without scrolling the top images out of view. to work. thanks... EDIT: Finally got it working....

Edited by rogerio
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...