Links

Lists

Latest Updates

Ruby On Rails List
Python list
Advanced Java
The JavaScript List
Apache Users
Full Disclosure
Linux Security

Search the archives!
Having a development problem? Ask eDevelopment.org forums!

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[JavaScript] Scrolling image on header

  • From: LaurentM at london.virgin.net (Laurent Muchacho)
  • Subject: [JavaScript] Scrolling image on header
  • Date: Wed Aug 18 08:10:49 2004
Hi Scott

The thing you need to add is the id in the element you want the background
to scroll.
If you look closely on your first examples with the DIV there is an id
called layer0 and after the function rollBackground you do call this same
function with the id of the specifique div if you reproduce this logic with
any other element this should work.

Laurent

<head>
<script language="JavaScript"  type="text/JavaScript"
src="CSSHScroller.js"></script>

<script language="JavaScript"  type="text/JavaScript">
rollBackground('myh5element',-5,0,50)
</script>

<style>
<!--
h5 {background:url('toptest_files/scroller.jpg') repeat-x;}
-->
</style>
</head>
<body>
<h5 id="myh5element">Some Text</h5>
</body>

ps : if you declare your css this way remember that all h5 will have the
same background image but only the on with id will then scroll

I will recommend you to do this 

<style>
<!--
#myh5element {background:url('toptest_files/scroller.jpg') repeat-x;}
-->
</style>



-----Original Message-----
From: Scott Hamm [mailto:ScottHam@xxxxxxxxxxxxxxx]
Sent: 18 August 2004 13:42
To: [JavaScript List] (E-mail)
Subject: [Javascript] Scrolling image on header


Using the existing code in my html:

<div id=layer0 style="background:url('toptest_files/scroller.jpg')
repeat-x;"></div>
<script language="JavaScript"  type="text/javascript"
src="CSSHScroller.js"></script>

And in CSSHScroller.js:

function rollBackground(id, x, y, t)
{
  obj = document.getElementById(id)
  if (obj.style)
  { bgPos = obj.style.backgroundPosition.split(' ');
    X     = parseInt(bgPos[0]);
    Y     = parseInt(bgPos[1]);
    obj.style.backgroundPosition = (X+x)+"px "+(Y+y)+"px";
  }

  setTimeout("rollBackground('"+id+"', "+x+", "+y+", "+t+")", t);
}
rollBackground('layer0',-5,0,50)


I've been trying to figure out a way to change javascript to run scrolling
image on h1, h2, h3 and so on like so:

<h5style="background:url('toptest_files/scroller.jpg') repeat-x;">Text</h5>
<script language="JavaScript"  type="text/javascript"
src="CSSHScroller.js"></script>

Or if anyone have better idea, I would love to hear them! If possible use
only this in html:


<head>
<script language="JavaScript"  type="text/javascript"
src="CSSHScroller.js"></script>
<style>
<!--
h5 {background:url('toptest_files/scroller.jpg') repeat-x;}
-->
</style>
</head>
<body>
<h5>Some Text</h5>
</body>

Would be appreciated! :)


_______________________________________________
Javascript mailing list
Javascript@xxxxxxxxxx
https://lists.LaTech.edu/mailman/listinfo/javascript


This E-mail and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed.  If you have received this E-mail in error please notify the system manager.  This message contains confidential information and is intended only for the individual named.  If you are not the named addressee you should not disseminate, distribute or copy this E-mail.