473,287 Members | 1,426 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

simple n00b setTimeout or onload problem

What I want is an element with a shifting background image:

<html><head>
<script type="text/javascript">
var x = 0
var y = 0
inc = 4
function bgWander(el){
x = x + Math.round(2*inc*Math.random())-inc
y = y + Math.round(2*inc*Math.random())-inc
el.style.backgroundPosition = x + 'px ' + y + 'px'
setTimeout('bgWander(el)',200)
}
</script></head><body>

<a onLoad="bgWander(this)" href=""
style="background:url(images/bgbar.png)">Link</a>

</body></html>

Can you show me the error of my ways?

Mar 28 '06 #1
3 2124
Hmm. It works in IE7.

Mar 28 '06 #2
OMG it was the doctype!

Mar 28 '06 #3
ve*****@gmail.com said on 28/03/2006 12:34 PM AEST:
What I want is an element with a shifting background image:
Firstly, I hate such things and since you have an interval of 200ms it
will 'jiggle' rather than 'shift'. But anyhow...


<html><head>
<script type="text/javascript">
var x = 0
var y = 0
inc = 4
User var here too. Don't rely on automatic semicolon insertion, do it
yourself. Also, indent/block code properly, the easier you make life
for others the more likely they are to help you.

function bgWander(el){
Presuming the onload event fires, (see below), el will be a reference
to the A element, and...

x = x + Math.round(2*inc*Math.random())-inc
y = y + Math.round(2*inc*Math.random())-inc
el.style.backgroundPosition = x + 'px ' + y + 'px'
setTimeout('bgWander(el)',200)
.... 'el' is a local variable to bgWander. When setTimeout runs and
attempts to evaluate 'el' (bgWander() will be called from the global
scope and besides, the original variable has been destroyed), it can't
find it and will error.

Your choices for fixes are: make el global (not recommended), hard-code
the reference to el say using getElementById (not recommended either),
store el elsewhere (OK but not really the best option here) or use a
function statement as the first parameter of setTimeout:

setTimeout(function(){bgWander(el)};,200)
it's not supported by some (very) old browsers. It creates a closure
back to bgWander so the variables aren't destroyed.

Since el is passed to the function, why not pass x, y and inc and get
rid of all the globals?

<script type="text/javascript">

function bgWander(el, x, y, inc)
{
x = x + Math.round(2*inc*Math.random()) - inc;
y = y + Math.round(2*inc*Math.random()) - inc;
el.style.backgroundPosition = x + 'px ' + y + 'px';
setTimeout(function(){bgWander(el, x, y, inc);}, 200)
}
</script>

<a onload="bgWander(this, 0, 0, 4)" ... >Link</a>

}
</script></head><body>

<a onLoad="bgWander(this)" href=""
The onload attribute is not supported for A elements in all browsers.
The HTML 4 specification defines an onload attribute for frameset and
body elements only.

But keep it as onload, that way only people using browsers that support
onload for A elements will be annoyed by it.

style="background:url(images/bgbar.png)">Link</a>

</body></html>

Can you show me the error of my ways?


Don't jiggle images. :-)
--
Rob
Mar 28 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Gordan | last post by:
hi i want to have a "close" button that user can click but that will also "click itself after 10 sec" so heres what i did function auto_close(x) { if(x>0){ document.form.button.value="CLOSE...
2
by: Randell D. | last post by:
HELP! Its taken me ages - I'm a newbie and I've compiled bits of code that I've read in this newsgroup over time to create one of my most intricate functions to date... Basically, the script...
18
by: Frances Del Rio | last post by:
this code is supposed to flip imgs at intervals of one second, but it flipps them much faster, it seems it flips them all in that first second, the more seconds the faster it flips them, instead of...
3
by: Bruce D | last post by:
I have some really bizarre behavior...and I'm wondering if its because I don't fully understand setTimeout(). I have a web page that calls a function on the Onload. This function calls two...
4
by: E | last post by:
I am having trouble with setTimeout working on a second call to the setTimeout function from a second page which is an html page. Here is the scenario. I have a web page and onload it calls a...
1
by: sencomenco | last post by:
Hello, I have a problem with settimeout. When I call the initCountDown method on body's onLoad event. If I call the initCountDown on body's load, the button's code works fine afterwards. ...
15
by: nikki_herring | last post by:
I am using setTimeout( ) to continuously call a function that randomly rotates/displays 2 images on a page. The part I need help with is the second image should rotate 3 seconds after the first...
3
by: phocis | last post by:
I wrote a pair of functions to enable scoped or referenced setTimeout calls. I did this because I have an object factory that creates multiple objects and those objects need to delay a few calls on...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.