Scrolling background repeat with JScript

JavaScript
1

Hi,

Very new to JScript and am having a go at adding a little trick to my mock portfolio site here http://www.cusodesign.com. The idea is to have the blue line underneath the header to smooth scroll different colours.

I found this tut http://www.kudoswebsolutions.com/web-design-blog/jquery-randomised-background-scrolling-effect-tutorial

I had an error on line 12 of the JScript code at step 4 so nothing worked:( .But seeing as i just want to scroll through different colours do i even need this much code? I don’t think i need two Divs do i? Just the first one with relative position.

Is there another way to achieve this effect with JScript and do the experts think the Tut above is a good script worth following?

Sorry for the noob post, but this is the first time i have gotten my feet wet with JScript. Just wanted to get something working on screen.

Appreciate any advice

2

Hi West,

I am not much of a programmer either but here is a samll sample in javascript that seems to give the scrolling background

<html>
<head>
<style type=“text/css”>
#backgroundRel {
background-image:url(“http://www.cusodesign.com/Images/scrollbackground.jpg”);
height:40px;
left:0;
position:relative;
top:95px;
width:990px;
background-position:0%0%;
}
</style>
<script>
var y = 0;
var t;

        function move(){
            var back = document.getElementById("backgroundRel");
            y = y + 1; 
            back.style.backgroundPosition = "0% "+y+"%";
            t=setTimeout("move()",200);   
        }
   &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;div id="backgroundRel"&gt;
        &lt;h1&gt;Hello World&lt;/h1&gt;
   &lt;/div&gt;
   &lt;a href="#" onclick="move()"&gt;Click Here&lt;/a&gt;
&lt;/body&gt;

</html>

Click on the link “click here” to activate the background scrolling. Hope this helps.

3

Hey Johnny, wow thanks for that code. Think i had it going, then playing around it stopped. Certainly helped in getting my head round how it works. Not sure if i will use it on the portfolio site but will definitely come in handy down the line.

Cheers mate:cool:

4

Glad to help mate