Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

make a layer move 2

Status
Not open for further replies.
Sort by date Sort by votes
On what event would you like it to move?

I was just playing with a small script earlier that moves the layer with the mouse. Here it is. I have bold-faced specifically important lines.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
function moveDiv()
{
 var mousex = event.x;
 var mousey = event.y;
 window.status = "x:"+mousex+"/y:"+mousey; //sanity-check
 [b]rainbowDiv.style.left = mousex - (rainbowDiv.offsetWidth/2);
 rainbowDiv.style.top = mousey - (rainbowDiv.offsetHeight/2);[/b]
}//end rainbow

[b]document.onmousemove = moveDiv;[/b]
</script>
</head>
<body>
<div style="[b]position:absolute;[/b]width:50px;height:50px;background-color:red;" id="rainbowDiv"></div>
Hello, World!
</body>
</html>

This was for use with IE6.

'hope that helps.

--Dave
 
Upvote 0 Downvote
This isn't XHTML compliant and it only works in IE6 (that is, I only tested it in IE6), but here's something to get you started:

Code: 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
var divx;
var divy;
var increment;
var dt = 10; [b]//dt is change in time[/b]
var time = 5000; [b]//time is in milliseconds, so 5000 is 5 seconds[/b]

function moveDiv()
{
 [b]//determines how much DIV will move at each stage[/b]
 increment = Math.round((document.body.clientHeight-rainbowDiv.offsetHeight)/(time/dt));

 divx = document.body.clientWidth - rainbowDiv.offsetWidth;
 divy = document.body.clientHeight - rainbowDiv.offsetHeight;
 window.status = "x:"+divx+"/y:"+divy; //sanity-check
 rainbowDiv.style.left = divx;
 rainbowDiv.style.top = divy;

 startMoveUp();
}//end moveDiv()

var timeoutObject;
var timer = 0;
function startMoveUp()
{
 if(timer < time)
 {
  timer += dt;
  divy = divy - increment;
  window.status = "x:"+divx+"/y:"+divy; //sanity-check
  rainbowDiv.style.top = divy; [b]//moves it once[/b]
  timeoutObject = setTimeout("startMoveUp()", dt); [b]//schedules it to move again[/b]
 }//end if
 else
 {
  clearTimeout(timeoutObject);
  timer = 0;
  startMoveDown();
 }//end else
}//end startMove()

function startMoveDown()
{
 if(timer < time)
 {
  timer += dt;
  divy = divy + increment;
  window.status = "x:"+divx+"/y:"+divy; //sanity-check
  rainbowDiv.style.top = divy; [b]//moves it once[/b]
  timeoutObject = setTimeout("startMoveDown()", dt); [b]//schedules it to move again[/b]
 }//end if
 else
 {
  clearTimeout(timeoutObject);
  timer = 0;
  window.status = "Finished."; //sanity check
  [b]//NOTE:  only iterates once[/b]
 }//end else
}//end startMoveDown()
</script>
</head>
<body [b]onload='moveDiv()'[/b]>
<div style="position:absolute;width:50px;height:50px;background-color:red;" id="rainbowDiv"></div>
Hello, World!
</body>
</html>

--Dave
 
Upvote 0 Downvote
Change the line where increment is set to:

increment = 100/(time/dt);

Change the line on which startMoveDown() is called to:

pauseSlider();

And create the function pauseSlider() to be as follows:

Code: 
function pauseSlider()
{
 if(timer < time)
 {
  timer += dt;
  timeoutObject = setTimeout("pauseSlider()", dt);
 }//end if
 else
 {
  clearTimeout(timeoutObject);
  timer = 0;
  startMoveDown();
 }//end else
}//end pausesSlider()

If you have any questions about the code and how setTimeout(...) etc. work, don't hesitate to ask.

--Dave
 
Upvote 0 Downvote
martin, for future question reference: figure out what you're wanting first, these forums are to help those that have tried to help themselves first, shortest path from point a to point b is a straight line, having someone generous and courteous enough to answer your question to start with is pretty common in here, but adding changing features as you go along and having the aforementioned samaritan jump thru hoops isn't fair, i hope they will continue to post for you and get this resolved for you, but for future reference denote final outcome desires in your posts, even if they are outlandish. at least then someone can sit down and write everything out the first time.

also as for a side note, Google is an amazing search engine : JAVASCRIPT LAYER MOVE

LookingForInfo : star for you

[thumbsup2]DreX
aKa - Robert
 
Upvote 0 Downvote

I agree with Robert on this one - if you don't know what you want to start with, making it up as you go along only serves to frustrate those trying to help.

Knowing the bigger picture in advance helps you as well as us ;o)

Dan
 
Upvote 0 Downvote
Thanks Dan and Robert for those comments (and the star, Robert). That's exactly how I felt.

This last question, in particular, doesn't need me. That's when I started to feel like I was doing someone else's homework for them. If martin made an effort to understand the code at all, he could see which line would have to be changed to achieve what he wants.

HINT: it's one of the first few lines in function moveDiv().

--Dave
 
Upvote 0 Downvote
You're very welcome. This was one of the more-fun ones! I actually incorporated a version of what I wrote for you on my personal/family web site over the weekend! :)

--Dave
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa
bs6600
  • Locked
  • Question
How can I make a window wider?
Replies
1
Views
78
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
470
xwb
xwb
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
639
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top