Super simple example.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Super simple example.

Post 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.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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...
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I meant something more or less like:



POP-UP
handle
Content

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

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
Last edited by JellyFish on Wed Oct 25, 2006 2:34 am, edited 3 times in total.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Bump duhduh buh
Post Reply