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="">)?
    "I have no special talent. I am only passionately curious." Albert Einstein

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,154
    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)?


    .
    "I have no special talent. I am only passionately curious." Albert Einstein

  4. #4
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,154
    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.

    When you have eliminated the impossible, whatever remains, however improbable, must be the truth !


    [Sir Arthur Conan Doyle]

  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.
    "I have no special talent. I am only passionately curious." Albert Einstein

  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-23-2006 at 11:25 PM.
    We are Linux, you will be assimilated, you will be liberated, you will be confused by our version numbers and installation procedures, resistance is futile...

    Trying to optimize a Web page/site for a particular browser is like trying to optimize Tokyo for Godzilla. It's just not going to work.

  8. #8
    Join Date
    May 2006
    Location
    North of the South Pole
    Posts
    590
    Wow! Thanks!
    "I have no special talent. I am only passionately curious." Albert Einstein

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