Super simple example.
Moderator: General Moderators
Super simple example.
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.
Thanks for reading this short post. I'd appreciate this example.
-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
*** un-tested ***
This won't move it around, but it'll hide and show...
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>
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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.
POP-UP
Contenthandle
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.
-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
this is what I got so far, It aint' working:
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?
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>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?
-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
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...
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
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>
Notice the obj argument I added to your function as well as passing 'this' to the function...
Try that, see what happens
I got:
Why is it that dragOffsetX and dragOffsetY become NaN one the second drag and there after?
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>
Last edited by JellyFish on Wed Oct 25, 2006 2:34 am, edited 3 times in total.