SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to blind myself (jk) with background color change

    //this is a personal page, so i won't be assulting anyone else with an annoying flashing background//


    What I'm trying to do is this:

    page loads and the bgcolor is white for 10 sec
    then turns red for 20 sec
    then white for 10
    then red for 20
    and so on for eight total repititions ending in red
    then it turns black for 60 sec
    then it starts all over at white for 10 sec
    I need it to do the total cycle 4 times

    the code below doesn't work but should give you masters 'o' java an idea what i'm trying to do

    Code:
    <html>
    <head>
    <script>
    function colorchange(){
    cycle=0;
    intrvl=0;
    for(nCycles=0;nCycles<4;nCycles++)(
    for(nTimes=0;nTimes<8;nTimes++){
    intrvl += 10000;
    setTimeout("document.bgColor='#FF0000';",intrvl);
    intrvl += 20000;
    setTimeout("document.bgColor='#FFFFFF';",intrvl);
    }
    cycle += 60000;
    setTimeout("document.bgColor='#000000';",cycle);
    )}
    </script>
    </head>
    <body onload="colorchange(0)">
    <table>
    <tr>
    <td>
    </td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function bgColor(col, delay) {
    var colDelay = delay || 0;
    setTimeout(function() {document.body.style.backgroundColor = col;}, colDelay);
    }
    window.onload = function() {
    for (var j = 0; j < 4; j++) {
    for (var i = 0; i < 8; i++) {
    bgColor("#fff", j * 300000 + i * 30000);
    bgColor("#f00", j * 300000 + i * 30000 + 10000);
    }
    bgColor("#000", j * 300000 + 240000);
    }
    }

    I hope that makes sense.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    R51, you are awesome!! Just one more question: Can you tell me why this works in Opera but not IE?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function bgColor(col, delay) {
    var colDelay = delay || 0;
    setTimeout(function() {document.body.style.backgroundColor = col;}, colDelay);
    }
    window.onload = function() { 
    for (var j = 0; j < 4; j++) {
    for (var i = 0; i < 8; i++) {
    bgColor("#fff", j * 300000 + i * 30000);
    bgColor("#f00", j * 300000 + i * 30000 + 10000);
    }
    bgColor("#000", j * 300000 + 240000); 
    }
    }
    </script>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original: Robert Bui (astrogate@hotmail.com) -->
    <!-- Web Site: http://astrogate.virtualave.net -->
    
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- Begin
    var interval = 300; // delay between rotating images (in seconds)
    var random_display = 1; // 0 = no, 1 = yes
    interval *= 1000;
    
    var image_index = 0;
    image_list = new Array(); 
    image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
    image_list[image_index++] = new imageItem(" http://javascript.internet.com/img/image-cycler/02.jpg");
    image_list[image_index++] = new imageItem(" http://javascript.internet.com/img/image-cycler/03.jpg");
    image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg ");
    var number_of_image = image_list.length;
    function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    }
    function get_ImageItemLocation(imageObj) { 
    return(imageObj.image_item.src)
    }
    function generate(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
    }
    function getNextImage() {
    if (random_display) {
    image_index = generate(0, number_of_image-1); 
    }
    else {
    image_index = (image_index+1) &#37; number_of_image;
    }
    var new_image = get_ImageItemLocation(image_list[image_index]);
    return(new_image);
    }
    function rotateImage(place) {
    var new_image = getNextImage(); 
    document[place].src = new_image;
    var recur_call = "rotateImage('"+place+"')";
    setTimeout(recur_call, interval);
    }
    // End -->
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td>
    <img name="rImage" src="http://javascript.internet.com/img/image-cycler/01.jpg"> 
    </td>
    </tr>
    </table>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It also works in firefox!?!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •