Page 1 of 1
Super simple example.
Posted: Sun Oct 15, 2006 7:32 pm
by JellyFish
I need a super simple example of a DHTML pop up. Have it have a handle to move the pop up around.
Thanks for reading this short post. I'd appreciate this example.
Posted: Sun Oct 15, 2006 7:41 pm
by alex.barylski
*** un-tested ***
Code: Select all
<div id="layer" style="display: none">
Some popup with content
</div>
<input type="button" value="Show Popup" onclick="showPopup()" />
<script>
function showPopup()
{
document.getElementById('layer').style.display = 'block';
}
function hidePopup()
{
document.getElementById('layer').style.display = 'none';
}
</script>
This won't move it around, but it'll hide and show...
Posted: Sun Oct 15, 2006 8:11 pm
by Chris Corbyn
~Hockey is right, but moving the popup around isn't so obvious. The idea is to use the onscroll event BUT Internet Explorer (who'd have thought it) needs special attention when reading the event data.
Posted: Sun Oct 15, 2006 8:31 pm
by JellyFish
I meant something more or less like:
POP-UP
the handle is use to move the pop up around. The problem I'm having it this.
I don't know if I should use divs or tables or if the handle should be a table or a tr? And I don't know how to select the table that is trying to be moved if I use the tr method for the handle.
Posted: Sun Oct 15, 2006 8:36 pm
by alex.barylski
I think in general, most people use a DIV and ebed whatever content inside of it (Tables, Bold, etc) and just move the container DIV around the screen.
Posted: Sun Oct 15, 2006 8:55 pm
by JellyFish
this is what I got so far, It aint' working:
Code: Select all
<html>
<head>
<script>
function handle_onclick()
{
this.parentNode.style.left = 100;
}
</script>
</head>
<body>
<div style="position:absolute; width: 300;border: 1px solid black; background-color: white;">
<div onclick="handle_onclick()" style="height: 20; background-color: #005599; color: white;">Crazy</div>
Every sence I was little, ever sence I was little it looked like fun. I'd die happy when I'm done.
</div>
</body>
</html>
Try it at
squarefree(good tester)
How do I get it to where when you click on the handle div (the one that's within the first div) it changes the first divs position?
Posted: Sun Oct 15, 2006 9:32 pm
by alex.barylski
Heh...thats a cool idea...using frames like that although you might want to consider using AJAX instead as the back/forward buttons (FF - Ubuntu) are changed on each keystroke??? Might be confusing...
ANyways...
Code: Select all
<html>
<head>
<script>
function handle_onclick(obj)
{
this.parentNode.style.left = 100;
}
</script>
</head>
<body>
<div style="position:absolute; width: 300;border: 1px solid black; background-color: white;">
<div onclick="handle_onclick(this)" style="height: 20; background-color: #005599; color: white;">Crazy</div>
Every sence I was little, ever sence I was little it looked like fun. I'd die happy when I'm done.
</div>
</body>
</html>
Your 'this' reference inside the function, it's likely being interpretted as: 'this' object...
Notice the
obj argument I added to your function as well as passing
'this' to the function...
Try that, see what happens
Posted: Sun Oct 15, 2006 9:38 pm
by JellyFish
I got:
Code: Select all
<html>
<head>
<script>
var dragOffsetX = 0;
var dragOffsetY = 0;
function handle_onmousedown(ths, e)
{
e = e || window.event;
dragOffsetX = (e.clientX - ths.parentNode.style.left);
dragOffsetY = (e.clientY - ths.parentNode.style.top);
obj = ths.parentNode;
ev = e;
document.onmousemove = handle_onmousemove;
document.onmouseup = handle_onmouseup;
}
function handle_onmousemove()
{
obj.style.left = ev.clientX;
obj.style.top = ev.clientY;
}
function handle_onmouseup()
{
document.onmousemove = new Function();
alert(dragOffsetX + " " + dragOffsetY)
dragOffsetX = 0;
dragOffsetY = 0;
}
</script>
</head>
<body>
<div style="position:absolute; width: 300;border: 1px solid black; background-color: white;">
<div onmousedown="handle_onmousedown(this, event)" style="position:absolute; height: 20; width: 100%; background-color: #005599; color: white;">Crazy</div><br>
Every sence I was little, ever sence I was little it looked like fun. I'd die happy when I'm done.
</div>
</body>
</html>
Why is it that dragOffsetX and dragOffsetY become NaN one the second drag and there after?
Posted: Wed Oct 25, 2006 2:32 am
by JellyFish
Bump duhduh buh