Forum Moderators: open

Message Too Old, No Replies

How to move a background-image around?

JS-Solution to create a very simple panoramic view behind a corporate logo

         

davidbraun

4:48 pm on Feb 4, 2005 (gmt 0)

10+ Year Member



Hello
I'm stuck with what seems to be a very simple problem:

I try to create a horizontally scrolling panorama behind a corporate logo, by using just java-script and a <div>, but all I get is a "document.getElementById("pnrm") has no properties"-error (respectively "document.getElementById(...) is not an object" in internet explorer). I guess I am overlooking the obvious, but after staring an hour at these lines, I'm at my whits end. Can anyone of you masters help me out?

Thanks very very much already!

Here's what I am staring at:

<script type="text/javascript"><!--
var bgPos = 0;
var scrollDelay = 50;

function Scroller(){

if (document.getElementById) {
document.getElementById("pnrm").style.backgroundPositionX = bgPos + 'px';
bgPos == 773? bgPos = 0 : bgPos = bgPos + 1;
setTimeout("Scroller()", scrollDelay);
}
}
Scroller();
//--></script>

<div class="menubar" id="pnrm">
<img src="img/Logo.gif" alt="MATTERHOF" />
</div>

Bernard Marx

5:11 pm on Feb 4, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



-

[edited by: Bernard_Marx at 5:11 pm (utc) on Feb. 4, 2005]

Bernard Marx

5:11 pm on Feb 4, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Don't call Scroller until the element exists!

window.onload = Scroller;

I also have a feeling that the

backgroundPositionX
is a proprietary IE property. If so, you will have to construct the whole
backgroundPosition
string each time, even if you are moving in only one dimension.

davidbraun

5:26 pm on Feb 4, 2005 (gmt 0)

10+ Year Member



Hello Bernard

Thanks for replying so quickly!

window.onload = Scroller did the trick!

you're my hero for the next week or so : )
THANK YOU big time!

david, back on the track of happyness:

d: )

SpaceFrog

2:06 pm on Feb 7, 2005 (gmt 0)

10+ Year Member



another possibility as window.onload is becomming more and more difficult to use with more recent versions of browsers, would be to trigger scroller et end of page

just before or after </html> tag

<script type='text/javascript'>
Scroller()
</script>

Bernard Marx

2:20 pm on Feb 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



window.onload is becomming more and more difficult to use with more recent versions of browsers

The onload event is quite essential to certain ways of working.
Could you elaborate a little on that for us?
If there's a difficulty, it would be interesting to hear about it.