Scripting: confused about moving a div blockstarted by Jwmpc on Jul 20, 2004 — RSS Feed
"missing ; before statement
Source File: movetest.html
Line: 33, Column: 27
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:
running = 0;
running = setTimeout("run()", speed);
var thebox = document.getElementById("mask"
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.
This is all wrong, wherever it came from.
"" 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
Have you delared the variables at the top of the script outside the functions? Look ate the actual source code of the examples.
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:
the newsticker example and:
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.
the 'film strip' rollover footnote and:
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.
Okay, i've put a little demo up at
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...
or a string
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.
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.
I'm having a bit of trouble altering the code you gave me. Here is an example of what I'm doing
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.
As you have three objects, they need to be treated separately. The best way to do that is with arrays...
So, you have thebox, thebox and thebox. Also bx,bx and bx - time, time and time
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!
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.
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?
Square brackets are used for array dimension. They are not interchangeable.
var v = new Array();
I need to make three arrays:
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.
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
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);
index=108; // the initial left position
for (i=0;i<=369;i++) // set a loop of 369 steps
Now I can see adding three definitions to the array like this:
var bx = new Array(3)
bx = ?;
bx = ?;
bx = ?;
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.
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.
As an aside, the doctype declaration my code editor uses (Pagespinner) has a bit in it that completely breaks the moveBox functions. It is:
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.
You must login to reply