simple n00b setTimeout or onload problem

vezquex

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

Subscribe Reply

2129

vezquex

Hmm. It works in IE7.

Mar 28 '06 #2

vezquex

OMG it was the doctype!

Mar 28 '06 #3

RobG

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

Similar topics

17267

settimeout problem

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...

Javascript

5338

Using window.setTimeout with dynamic parameter

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...

Javascript

2157

setTimeOut

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...

Javascript

1451

setTimeout()??

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...

Javascript

5205

javascript setTimeout does not work

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...

ASP.NET

1436

settimeout problem...

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. ...

Javascript

3747

setTimeout( ) javascript question

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...

Javascript

2774

IE events expire (typeof = unknown) after callStack finishes. (featuring: setTimeout scoping)

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...

Javascript

6904

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7034

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7076

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

6732

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

5324

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

2990

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

1294

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

558

php

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

174

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General