Results 1 to 5 of 5

Thread: background color changes automatically

  1. #1
    Join Date
    Feb 2007
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default background color changes automatically

    Hi,
    I search for a script that changes a background color of a div automatically each millisecond or so. It should loop all the colors used with the hexacode. IS that possible and can somebody help me? It would be great to get an answer.
    Thank you.
    Immi

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,370
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #autocolor{
    	width: 5em;
    	height: 2em;
    	padding: 0.75em 0.5em 0;
    	text-align: center;
    	border: 1px solid black;
    	margin: 3em auto 0;
    	font: bold 90% sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="autocolor">
    Wow!
    </div>
    <script type="text/javascript">
    (function(){
    	var hexacode = ['#ffff00', '#ff0000', '#00ff00', '#0000ff', '#ffffff'],
    	el = document.getElementById('autocolor').style,
    	counter = -1,
    	hexalen = hexacode.length;
    	function auto(){
    		el.backgroundColor = hexacode[counter = ++counter % hexalen];
    	}
    	setInterval(auto, 20);
    })();
    </script>
    </body>
    </html>
    Note: You may add/change as many hexacodes as you like. They don't even have to be hexadecimal values. They can also be valid css color name values or valid css decimal rgb values.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2007
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Well, I added a few more colors. But thanks a lot for the script!


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #autocolor{
    	width: 1000px;
    	height: 700px;
    	padding: 0.75em 0.5em 0;
    	text-align: center;
    	border: 1px solid black;
    	margin: 3em auto 0;
    	font: bold 90% sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="autocolor">
    Wow!
    </div>
    <script type="text/javascript">
    (function(){
    	var hexacode = [
    
    '#ff0000',
    '#ff0400',
    '#ff0800',
    '#ff0d00',
    '#ff1100',
    '#ff1500',
    '#ff1900',
    '#ff1e00',
    '#ff2200',
    '#ff2600',
    '#ff2a00',
    '#ff2f00',
    '#ff3300',
    '#ff3700',
    '#ff3c00',
    '#ff4000',
    '#ff4400',
    '#ff4800',
    '#ff4d00',
    '#ff5100',
    '#ff5500',
    '#ff5900',
    '#ff5e00',
    '#ff6200',
    '#ff6600',
    '#ff6a00',
    '#ff6e00',
    '#ff7300',
    '#ff7700',
    '#ff7b00',
    '#ff7f00',
    '#ff8400',
    '#ff8800',
    '#ff8c00',
    '#ff9100',
    '#ff9500',
    '#ff9900',
    '#ff9d00',
    '#ffa200',
    '#ffa600',
    '#ffaa00',
    '#ffae00',
    '#ffb300',
    '#ffb700',
    '#ffbb00',
    '#ffbf00',
    '#ffc300',
    '#ffc800',
    '#ffcc00',
    '#ffd000',
    '#ffd400',
    '#ffd900',
    '#ffdd00',
    '#ffe100',
    '#ffe500',
    '#ffea00',
    '#ffee00',
    '#fff200',
    '#fff700',
    '#fffb00',
    '#ffff00',
    '#fbff00',
    '#f6ff00',
    '#f2ff00',
    '#eeff00',
    '#eaff00',
    '#e5ff00',
    '#e1ff00',
    '#ddff00',
    '#d9ff00',
    '#d5ff00',
    '#d0ff00',
    '#ccff00',
    '#c8ff00',
    '#c4ff00',
    '#bfff00',
    '#bbff00',
    '#b7ff00',
    '#b3ff00',
    '#aeff00',
    '#aaff00',
    '#a6ff00',
    '#a1ff00',
    '#9dff00',
    '#99ff00',
    '#95ff00',
    '#90ff00',
    '#8cff00',
    '#88ff00',
    '#84ff00',
    '#80ff00',
    '#7bff00',
    '#77ff00',
    '#73ff00',
    '#6fff00',
    '#6aff00',
    '#66ff00',
    '#62ff00',
    '#5eff00',
    '#59ff00',
    '#55ff00',
    '#51ff00',
    '#4cff00',
    '#48ff00',
    '#44ff00',
    '#40ff00',
    '#3bff00',
    '#37ff00',
    '#33ff00',
    '#2fff00',
    '#2aff00',
    '#26ff00',
    '#22ff00',
    '#1eff00',
    '#1aff00',
    '#15ff00',
    '#11ff00',
    '#0dff00',
    '#09ff00',
    '#04ff00',
    '#00ff00',
    '#00ff04',
    '#00ff08',
    '#00ff0d',
    '#00ff11',
    '#00ff15',
    '#00ff1a',
    '#00ff1e',
    '#00ff22',
    '#00ff26',
    '#00ff2b',
    '#00ff2f',
    '#00ff33',
    '#00ff37',
    '#00ff3c',
    '#00ff40',
    '#00ff44',
    '#00ff48',
    '#00ff4c',
    '#00ff51',
    '#00ff55',
    '#00ff59',
    '#00ff5d',
    '#00ff62',
    '#00ff66',
    '#00ff6a',
    '#00ff6e',
    '#00ff73',
    '#00ff77',
    '#00ff7b',
    '#00ff80',
    '#00ff84',
    '#00ff88',
    '#00ff8c',
    '#00ff91',
    '#00ff95',
    '#00ff99',
    '#00ff9d',
    '#00ffa1',
    '#00ffa6',
    '#00ffaa',
    '#00ffae',
    '#00ffb2',
    '#00ffb7',
    '#00ffbb',
    '#00ffbf',
    '#00ffc3',
    '#00ffc8',
    '#00ffcc',
    '#00ffd0',
    '#00ffd5',
    '#00ffd9',
    '#00ffdd',
    '#00ffe1',
    '#00ffe6',
    '#00ffea',
    '#00ffee',
    '#00fff2',
    '#00fff7',
    '#00fffb',
    '#00ffff',
    '#00fbff',
    '#00f7ff',
    '#00f2ff',
    '#00eeff',
    '#00eaff',
    '#00e6ff',
    '#00e1ff',
    '#00ddff',
    '#00d9ff',
    '#00d5ff',
    '#00d0ff',
    '#00ccff',
    '#00c8ff',
    '#00c3ff',
    '#00bfff',
    '#00bbff',
    '#00b7ff',
    '#00b2ff',
    '#00aeff',
    '#00aaff',
    '#00a6ff',
    '#00a1ff',
    '#009dff',
    '#0099ff',
    '#0095ff',
    '#0091ff',
    '#008cff',
    '#0088ff',
    '#0084ff',
    '#0080ff',
    '#007bff',
    '#0077ff',
    '#0073ff',
    '#006eff',
    '#006aff',
    '#0066ff',
    '#0062ff',
    '#005dff',
    '#0059ff',
    '#0055ff',
    '#0051ff',
    '#004cff',
    '#0048ff',
    '#0044ff',
    '#0040ff',
    '#003cff',
    '#0037ff',
    '#0033ff',
    '#002fff',
    '#002bff',
    '#0026ff',
    '#0022ff',
    '#001eff',
    '#001aff',
    '#0015ff',
    '#0011ff',
    '#000dff',
    '#0008ff',
    '#0004ff',
    '#0000ff',
    '#0400ff',
    '#0900ff',
    '#0d00ff',
    '#1100ff',
    '#1500ff',
    '#1900ff',
    '#1e00ff',
    '#2200ff',
    '#2600ff',
    '#2a00ff',
    '#2f00ff',
    '#3300ff',
    '#3700ff',
    '#3c00ff',
    '#4000ff',
    '#4400ff',
    '#4800ff',
    '#4d00ff',
    '#5100ff',
    '#5500ff',
    '#5900ff',
    '#5e00ff',
    '#6200ff',
    '#6600ff',
    '#6a00ff',
    '#6e00ff',
    '#7300ff',
    '#7700ff',
    '#7b00ff',
    '#7f00ff',
    '#8400ff',
    '#8800ff',
    '#8c00ff',
    '#9100ff',
    '#9500ff',
    '#9900ff',
    '#9d00ff',
    '#a200ff',
    '#a600ff',
    '#aa00ff',
    '#ae00ff',
    '#b300ff',
    '#b700ff',
    '#bb00ff',
    '#bf00ff',
    '#c300ff',
    '#c800ff',
    '#cc00ff',
    '#d000ff',
    '#d400ff',
    '#d900ff',
    '#dd00ff',
    '#e100ff',
    '#e500ff',
    '#ea00ff',
    '#ee00ff',
    '#f200ff',
    '#f700ff',
    '#fb00ff',
    '#ff00ff',
    '#ff00fb',
    '#ff00f7',
    '#ff00f2',
    '#ff00ee',
    '#ff00ea',
    '#ff00e5',
    '#ff00e1',
    '#ff00dd',
    '#ff00d9',
    '#ff00d4',
    '#ff00d0',
    '#ff00cc',
    '#ff00c8',
    '#ff00c3',
    '#ff00bf',
    '#ff00bb',
    '#ff00b7',
    '#ff00b3',
    '#ff00ae',
    '#ff00aa',
    '#ff00a6',
    '#ff00a1',
    '#ff009d',
    '#ff0099',
    '#ff0095',
    '#ff0091',
    '#ff008c',
    '#ff0088',
    '#ff0084',
    '#ff007f',
    '#ff007b',
    '#ff0077',
    '#ff0073',
    '#ff006e',
    '#ff006a',
    '#ff0066',
    '#ff0062',
    '#ff005e',
    '#ff0059',
    '#ff0055',
    '#ff0051',
    '#ff004d',
    '#ff0048',
    '#ff0044',
    '#ff0040',
    '#ff003c',
    '#ff0037',
    '#ff0033',
    '#ff002f',
    '#ff002a',
    '#ff0026',
    '#ff0022',
    '#ff001e',
    '#ff0019',
    '#ff0015',
    '#ff0011',
    '#ff000d',
    '#ff0008',
    '#ff0004'
    ],
    	el = document.getElementById('autocolor').style,
    	counter = -1,
    	hexalen = hexacode.length;
    	function auto(){
    		el.backgroundColor = hexacode[counter = ++counter % hexalen];
    	}
    	setInterval(auto, 20);
    })();
    </script>
    </body>
    </html>
    Last edited by jscheuer1; 11-22-2010 at 09:06 PM. Reason: format code

  4. #4
    Join Date
    Mar 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's cool, do you think it would be possible to edit this so it changes the background image automatically instead of just colors?
    Last edited by jscheuer1; 04-28-2016 at 03:27 PM. Reason: excessive quoting

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,370
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Sure, but as this is a little off topic and such an old post, please start a new thread if you're still interested. I can tell you it would be a little more complicated than just substituting images and then using the backgrounImage property, because images would have to be preloaded and even rotated behind each other using CSS 2 multiple backgrounds to avoid too jarring of a transition. I thin DD also may already have such a slideshow.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •