rogerio Posted July 23, 2012 Share Posted July 23, 2012 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 More sharing options...
justsomeguy Posted July 23, 2012 Share Posted July 23, 2012 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 More sharing options...
rogerio Posted July 23, 2012 Author Share Posted July 23, 2012 You lost me... Link to comment Share on other sites More sharing options...
justsomeguy Posted July 23, 2012 Share Posted July 23, 2012 At which point? Link to comment Share on other sites More sharing options...
rogerio Posted July 23, 2012 Author Share Posted July 23, 2012 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 More sharing options...
justsomeguy Posted July 23, 2012 Share Posted July 23, 2012 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 More sharing options...
rogerio Posted July 23, 2012 Author Share Posted July 23, 2012 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 More sharing options...
rogerio Posted July 23, 2012 Author Share Posted July 23, 2012 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 More sharing options...
justsomeguy Posted July 23, 2012 Share Posted July 23, 2012 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 More sharing options...
rogerio Posted July 23, 2012 Author Share Posted July 23, 2012 Got it working thanks to you; just added one more parentNode. appreciate it... Link to comment Share on other sites More sharing options...
rogerio Posted July 24, 2012 Author Share Posted July 24, 2012 (edited) 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 July 24, 2012 by rogerio Link to comment Share on other sites More sharing options...
justsomeguy Posted July 24, 2012 Share Posted July 24, 2012 You should be able to put the overflow style on the text container and only that will scroll. Link to comment Share on other sites More sharing options...
rogerio Posted July 24, 2012 Author Share Posted July 24, 2012 I had to:<td><div>text</div></td> Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now