Tharkis Posted June 3, 2008 Share Posted June 3, 2008 Ok, here's what I want to accomplish. I have written a script which queries a database and pulls back information. The loop then puts the data in a certain format in a nest of hidden divs. It then displays links with a number and a description. Once I click on these links, a bit of javascript un-hides the data corresponding to the number. This all works well, but I find it rather annoying as it changes the length of the page every time one of these things hide or show. What I would like to do is have them display in a floating div, similar to what is displayed here: http://www.dhtmlgoodies.com/scripts/floating_window/floating_window.html My problem is I don't even remotely know how to go about doing it. In a nutshell what I want is for someone to click on a link from a list. That link will generate a floating window with the data relevant to that link. Any help, pointers, links and all out source code would help.. but I'd prefer to try to understand it and build it myself if possible. Thanks Quote Link to comment Share on other sites More sharing options...
markjoe Posted June 3, 2008 Share Posted June 3, 2008 The most important key to start with is CSS: "position:absolute;". <div id="B1" style="position:absolute;left:300;top:200;width:200;height:300;z-index:9;border-style:solid;border-width:10px 2px 2px 2px;border-color:solid #444444;">Some content</div> The left, top, width and height will give you complete control of the box and can be manipulated with Javascript. Z-index is the 'stacking' order of the various elements on the page. Where you go from there depends on if you want the boxes moveable, how many boxes will be open at once and how they fit into the rest of the page. Keep in mind that a simple DIV box will NOT cover a drop down menu in IE6 (I think IE7 also). For that you need to use an iframe. For just about eveything you need to know about CSS try this place: http://w3schools.com/. Quote Link to comment Share on other sites More sharing options...
Tharkis Posted June 3, 2008 Author Share Posted June 3, 2008 Yeah I'll want it to be movable, and have a little button to close it. I only need 1 open at a time.. I'll have to take a look at the script to see if I can modify it in some way to use those features.. Thanks for the link Markjoe, I'll take a look at it. Quote Link to comment Share on other sites More sharing options...
markjoe Posted June 4, 2008 Share Posted June 4, 2008 Here, this is the best I can throw together off the top of my head. I am currently without my development laptop and books. I only checked in Firefox, I tried to get some IE stuff in there, just can't test it in IE right now. This is by no means perfect, but it's a start. Usually I put a table in the div to shade the first row as the drag bar, float an image in the bar as the close button, and such. When using a table to make a pseudo-window, I find it best to include "border-collapse:collapse" in the CSS/style. <script type="text/javascript"> function grab(e){ if(!e){ var e=window.event; } handle=e.target || event.srcElement; Xoffset=e.clientX-getOffsetLeft(handle); Yoffset=e.clientY-getOffsetTop(handle); document.body.style.cursor='move'; document.body.onmousemove=drag; document.body.onmouseup=drop; } function drag(e){ if(handle){ var X=e.pageX || event.pageX; var Y=e.clientY || event.clientY; handle.style.left=(X-Xoffset); handle.style.top=(Y-Yoffset); } } function drop(){ handle=null; document.body.onmousemove=null; document.body.onmouseup=null; document.body.style.cursor='auto'; } function getOffsetTop(theElement){ theOffset=0; while(theElement!=null){theOffset+=theElement.offsetTop;theElement=theElement.offsetParent} return theOffset; } function getOffsetLeft(theElement){ theOffset=0; while(theElement!=null){theOffset+=theElement.offsetLeft;theElement=theElement.offsetParent} return theOffset; } </script> <html> <body style="width:95%;height:95%;"> <div id="B1" onmousedown="grab(event)" style="position:absolute;left:300;top:200;width:200;height:300;z-index:9;border-style:solid;border-width:10px 2px 2px 2px;border-color:#444444;"> <div style="float:right;cursor:pointer;" onclick="document.getElementById('B1').style.display='none;'">close</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.