www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] table with a flashing background

  1. #1
    Join Date
    May 2006
    Location
    North of the South Pole
    Posts
    590

    resolved [RESOLVED] table with a flashing background

    How do you make a table with a flashing background using only CSS and transitional xhtml (preferably if it could fit into <table bgcolor="">)?

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,633
    Either via using an animated GIF as the background image, or by using JavaScript to toggle the background color.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    May 2006
    Location
    North of the South Pole
    Posts
    590
    So, there's no CSS option (like text-decoration:blink for text)?


    .

  4. #4
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,633
    Nope.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  5. #5
    Join Date
    Aug 2005
    Location
    The Hill Ch' Hill
    Posts
    381
    there is a an option with javasript however, if your interested.

  6. #6
    Join Date
    May 2006
    Location
    North of the South Pole
    Posts
    590
    You mean with setInterval()? Okay, but how do you dynamically set styles? document.f.bgcolor="" doesn't work.

  7. #7
    Join Date
    Apr 2003
    Posts
    240
    Use this. The table (or table cell) you want to use has to be given a unique ID though.
    Code:
    // Set global variables
    var totalCycles = 0;
    var currColor = 0;
    var colors, intervalID;
    // Build array of color names
    function init( ) {
        colors = ["#C3F","#90C"];
    }
    // Cycle through the two colors
    function cycleColors( ) {
        // reset counter to 0 when it reaches 1
        currColor = (currColor == 1) ? 0 : ++currColor;
        // set style color to new color from array
        document.getElementById("news").style.backgroundColor = colors[currColor];
        // invoke this function again until total = 12 so it ends on #C3F
        if (totalCycles++ < 12) {
            intervalID = setTimeout("cycleColors( )", 500);
        } else {
            clearTimeout(intervalID);
        }
    }
    In your <body> tag, place the following before the closing bracket.
    Code:
    onload="init(); cycleColors( );"
    Your <body> tag should look like this:
    HTML Code:
    <body onload="init(); cycleColors( );">
    All you need to change are the color values (this example uses two shades of purple) and the element ID that is referenced (in this case it is "news" however it can be whatever you want it to be).

    Here's an example (granted, I'm using a <div> for the container, but like I said, it could just as easily be a table cell):
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Blinking Background Test</title>
    <style type="text/css">
        body {
    	background-color: #fff;
    	color: #000;
        }
        #bgBlink {
    	background-color: #90C;
    	color: #eeddff;
    	width: 250px;
    	height: 100px;
    	border: 5px ridge #84a;
        }
        p {
        	margin-top: 15%;
        	margin-right: auto;
        	margin-bottom: 15%;
        	margin-left: auto;
        	text-align: center;
        }
    </style>
    <script type="text/javascript">
    // Set global variables
    var totalCycles = 0;
    var currColor = 0;
    var colors, intervalID;
    // Build array of color names
    function init( ) {
        colors = ["#C3F","#90C"];
    }
    // Cycle through the two colors
    function cycleColors( ) {
        // reset counter to 0 when it reaches 1
        currColor = (currColor == 1) ? 0 : ++currColor;
        // set style color to new color from array
        document.getElementById("bgBlink").style.backgroundColor = colors[currColor];
        // invoke this function again until total = 12 so it ends on #C3F
        if (totalCycles++ < 12) {
            intervalID = setTimeout("cycleColors( )", 500);
        } else {
            clearTimeout(intervalID);
        }
    }
    </script>
    </head>
    <body onload="init(); cycleColors( );">
    <div id="bgBlink">
    	<p>Help me, I&acute;m blinking!</p>
    </div>
    </body>
    </html>
    (note: I always put my scripts into an external global.js file. I left it in here for the sake of example. Unless you use PCDATA comments, please put your script into an external file)
    Last edited by Albatross; 07-24-2006 at 12:25 AM.

  8. #8
    Join Date
    May 2006
    Location
    North of the South Pole
    Posts
    590
    Wow! Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles