confused about moving a div block | WPDFD.com Forums

Jwmpc said:

07/20/04, 202 48 2004 2004:%i:1090356527 16:48:47

I attempted to use some javascript from the "Dynamic CSS animation" article but it broke when I made a change. Instead of "thebox.style.backgroundPosition" in the script I used "thebox.style.left" and made "x=x-steps" into "x=x+steps" in the belief that it would move the div block in steps toward the right, as a simpler function did, but all at once. The javascript console returned an error

"missing ; before statement
Source File: movetest.html
Line: 33, Column: 27
thebox.style.left="+x+"px"";"

with a green dotted line and an arrow pointing to the last word before the equal sign, indicating I forgot to define something or completely misunderstood how to change the code. Here is the entire function:

function run()
{
if(running)
{
clearTimeout(running);
running = 0;
}

running = setTimeout("run()", speed);

if (document.getElementById)
{
x=x+steps;
var thebox = document.getElementById("mask"
thebox.style.left=""+x+"px 7px";
}
}

Can this kind of action be accomplished from this function? Or should I completely rethink the code? Eventually I intend for an "opaque" div block to move right slowly, uncovering a graphic underneath in a sort of pseudo-scroll.

Joe Gillespie said:

07/20/04, 202 11 2004 2004:%i:1090361499 18:11:39

thebox.style.left="+x+"px"";"

This is all wrong, wherever it came from.

thebox.style.left=""+x+"px 7px";

should work

"" is a blank string but makes sure that the number x is treated as a string and not a number. If x is 12 then the string would become

thebox.style.left=12px 7px;

Have you delared the variables at the top of the script outside the functions? Look ate the actual source code of the examples.

Jwmpc said:

07/20/04, 202 09 2004 2004:%i:1090368597 20:09:57

I agree that it is wrong, but I'm thinking that a loop might be a better way to approach it.

What I want is for a div block to start in one specific position horizontally, then move in gradual steps to the right until it reaches another specific position horizontally. The vertical position should be unchanged.

My basic problem is not being clear how the timer can moderate the steps so the box moves deliberately rather than all in a rush. I looked at source from two examples on the WPDFD site:

http://www.wpdfd.com/editorial/ticker.htm

the newsticker example and:

http://www.wpdfd.com/editorial/prax.html

the horserace example. Both have timers, and the horserace example seems to be the closest to the effect I need, but the complex use of arrays in it leaves me uncertain what the 'core' code is. Also, the horserace adds a random math operator to make the results variable, something which I don't need. The ticker appeared to be simpler, but obviously I'm breaking something by either leaving it out or not declaring a variable correctly.

I'm going to try and rebuild it again as simply as I can. A possible problem is that some elements of the code I posted were additional functions [stop(), kickstart(), etc.], which I really didn't need. I'll begin by defining a beginning point, an end point, and then attempt to use a timer to scroll the div block smoothly from one to the other on the horizontal axis, then stop at the end point. I believe all that can be put into one function, but since javascript is not easy for me, I'll have to do a lot of reading of references.

The reason I'm so optimistic that it can be done is that your other examples of javascript and CSS working together:

http://www.wpdfd.com/editorial/wpd0404footnote.htm

the 'film strip' rollover footnote and:

http://www.wpdfd.com/editorial/wpd0103.htm

the 'scripting the box' editorial deconstructed very easily and allowed me to do a flash-like menu that displayed a different picture each time in the same place. The timer is what's giving me fits though, and if you know of any other examples that show a timer affecting an element as I have described, I'd love to look at them.

Joe Gillespie said:

07/21/04, 203 51 2004 2004:%i:1090403509 05:51:49

Okay, i've put a little demo up at

http://www.wpdfd.com/editorial/movebox.html

and commented the script.

Timers are a bit confusing, they don't work as you would expect.

What is happening here is there is a function moveBox() which shifts the position of the box. Sorry, I didn't spot the error in the previous post but thebox.style.left should, of course, only have one value, not two like backgroundPosition. It can either be a number...

thebox.style.left=200;

or a string

thebox.style.left=""+x+"px";

Get into the habit of breaking down scripts into smaller functions that do less and less to discover what does what.

The 'move' link will just call the moveBox() function once, so you only get a single step.

The run() function is a loop which runs from 0 to 100. For each step, a timeout event is created for the timer 'time1'. The loop is programming the timer to do something 100 times with a delay of 10 (speed) milliseconds between each event. The timer is disposed of when it has fulfilled its purpose. clearTimeout(time1).

Programming the timer is almost instantaneous and it all happens before the box actually moves. That is the hard part to grasp!

Hopefully, this simple little 'building block' will get you on your way.

Jwmpc said:

07/21/04, 203 24 2004 2004:%i:1090423455 11:24:15

Yes, that's exactly the behavior I was looking for! With this example, I should be able to create the code to fit my needs. Thanks for clarifying how the timer works. Your code is far more elegant than what I had dimly blocked out in my mind. I had already created a movebox function, so the only thing I was missing was the index and timer. Adding the extra link to show how the movebox worked on its own was helpful.

Thanks for taking the time to clear the fog from my mind.

Jwmpc said:

07/29/04, 211 22 2004 2004:%i:1091103756 08:22:36

I'm having a bit of trouble altering the code you gave me. Here is an example of what I'm doing

http://jwmpc.com/nemredes/girlsof04%20copy.html

what I wanted to do was pass a variable through the run function to movebox function to move three separate boxes independently.

I tried just adding a variable to the run function, but when I tried to use that variable in the movebox function nothing happened.

Should I create three timers, and assign a separate box name for each? That produced another problem, which was the box would move to the last x position, regardless of the starting value of the variable. Does this mean I should define three global variables (x,y,z)?

I'll try that approach, but if you have another idea, I'd appreciate it.

Joe Gillespie said:

07/29/04, 211 31 2004 2004:%i:1091115090 11:31:30

As you have three objects, they need to be treated separately. The best way to do that is with arrays...

So, you have thebox[1], thebox[2] and thebox[3]. Also bx[1],bx[2] and bx[3] - time[1], time[2] and time[3]

The you can just specify which box to move by passing a parameter run(1), run(2) or run(3)

Are you with me there? You can see how arrays work in my horse race code - http://www.wpdfd.com/editorial/prax.html

Otherwise, you need three of everything with different names!

Jwmpc said:

07/29/04, 211 11 2004 2004:%i:1091131876 16:11:16

Yes, I was thinking that would be a good example to use, since it had multiple arrays. Didn't think about creating three "time" objects though, and I am unclear as to how to reset the boxes to their original position. The horserace simply says to reload the page. I'll be wrestling with this code for a while, then let you know what I discovered.

Jwmpc said:

07/29/04, 211 32 2004 2004:%i:1091136728 17:32:08

Are the square brackets you use in your reply above an indication that I should declare all of these items as global variables, or are square brackets and parentheses interchangable?

Joe Gillespie said:

07/30/04, 212 15 2004 2004:%i:1091164525 01:15:25

Square brackets are used for array dimension. They are not interchangeable.

Before you can use an array, you should declare it at the top of your JavaScript...

var v = new Array();
v[1]= -50;
v[2]= -50;
v[3]= -50;

Jwmpc said:

07/30/04, 212 25 2004 2004:%i:1091215505 15:25:05

So...

I need to make three arrays:

bx[1,2,3]
time[1,2,3]
theBox[1,2,3]

at the beginning of the javascript, outside of the function, then call the arrays...

bx[n].style.left=x;
time[n]=setTimeout('moveBox(n)',speed*i);
var bx[n]=document.getElementById("theBox[n]"

and I don't have to declare local variables with var? Should I do the same with the clearTimeout, ie clearTimeout(time[n])

Just thinking in text here, I'll try this on my own.

Joe Gillespie said:

07/30/04, 212 46 2004 2004:%i:1091216776 15:46:16

Mmm, not sure about this from the way you've written it but you do need to clear the timeouts as you suggested.

Thump the floor if you want to give up

Jwmpc said:

07/30/04, 212 01 2004 2004:%i:1091217691 16:01:31

Actually, after reading a few quick references on the web about arrays, and how they are used, I can dimly grasp what's needed. What I'm not sure about is if I have to define each element of the array. I'll show you what I have(which does precisely nothing):

var bx = new Array(3);
var theBox = new Array(3);
var time = new Array(3);

function run(n)
{
index=108; // the initial left position
for (i=0;i<=369;i++) // set a loop of 369 steps
{
time[n]=setTimeout('moveBox(n)',speed*i);
}
clearTimeout(time[n]);
}

function moveBox(n)
{
if (document.getElementById)
{
var bx[n]=document.getElementById("theBox[n]"
bx[n].style.left=x;
x++;
}
}

Now I can see adding three definitions to the array like this:

var bx = new Array(3)
bx[0] = ?;
bx[1] = ?;
bx[2] = ?;

but what value would I assign to each element? The element theBox[]?

I'm not ready to thump the floor yet, but I'm a bit frantic.

Jwmpc said:

07/30/04, 212 46 2004 2004:%i:1091220364 16:46:04

I cheated, sorry. Just created three different functions, and three global variables, then altered them for each box. It's inelegant, but it works. The array solution is just beyond my fingertips.

Jwmpc said:

07/30/04, 212 05 2004 2004:%i:1091221544 17:05:44

As an aside, the doctype declaration my code editor uses (Pagespinner) has a bit in it that completely breaks the moveBox functions. It is:

http://www.w3.org/TR/html4/loose.dtd

I discovered this when I tried to emulate your first example and it wouldn't work. After painstaking examination, the only difference I could see between your code and mine was the doctype declaration, and when I removed the offending bit, functionality returned.

I'm not sure why Pagespinner includes this, or why that dtd prevents using the moveBox() function, but that's one reason why I'm as harried as I sound right now. Hope it wasn't vital.