Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    37
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question background color

    Hi! all

    I have a js which change the background color onclick event. This is the code

    Code:
    function changeBackground2() {
       document.body.style.backgroundColor = '#C6DB2B';
       document.getElementById("logo").style.backgroundColor = '#2299EE';
       document.getElementById("nav_bar").style.backgroundColor = '#C6DB2B';
       document.getElementById("current-ex3").style.backgroundColor = '#2299EE';
       document.getElementById("foot").style.backgroundColor = '#2299EE';
       document.getElementById("ahead").style.backgroundColor = '#C6DB2B';
    }
    but i want it to occur slowly like in 3 seconds. I think it can be done with animate but not know how i am not a js expert.

    Thanks for your help.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Add this to the js:
    Code:
    function timeMsg()
    {
    var t=setTimeout("changeBackground2()",3000);
    }
    and have the onclick="timeMsg()"

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    37
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your reply but i want to change the background color slowly in the 3 sec time span for example visit http://moozedesign.com/ and click a link. I know they are using jquery but is there any solution in js?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    can be done simply enough with css3 (with the usual warnings about IE, which the page you link to refuses to work with at all[!]):

    http://www.w3schools.com/css3/css3_transitions.asp

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    37
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks,

    but i can change the color of that element where css is applied but is there any way to change the color of body?

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css"> 
    body
    {
    background:red;
    transition-property: background-color;
    transition-duration: 2s;
    -moz-transition-property: background-color; /* Firefox 4 */
    -moz-transition-duration: 2s; /* Firefox 4 */
    -webkit-transition-property: background-color; /* Safari and Chrome */
    -webkit-transition-duration: 2s; /* Safari and Chrome */
    -o-transition-property: background-color; /* Opera */
    -o-transition-duration: 2s; /* Opera */
    }
    
    </style>
    </head>
    <body>
    <input type="button" onclick="changeBg()" value="change">
    
    <script>
    function  changeBg(){
    document.body.style.backgroundColor = 'blue';
    }
    </script>
    
    </body>
    
    </html>
    Last edited by xelawho; 12-27-2011 at 06:33 PM. Reason: cross browser stuff

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    37
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your help............
    I am working on it and will see what i can do with it.

    Thanks again.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    This code should work in all browsers back as far as MSIE 5.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function Fademe( obj, start, finish )
    {
        this.object = obj;
        this.first  = start;
        this.last   = finish;
        this.r = ( (finish & 0xff0000) - (start & 0xff0000) ) / 300;
        this.g = ( (finish & 0x00ff00) - (start & 0x00ff00) ) / 300;
        this.b = ( (finish & 0x0000ff) - (start & 0x0000ff) ) / 300;
    }
    
    var changeCount;
    var timer;
    var fadethem = [];
    
    function startChange()
    {
       fadethem = [
            new Fademe( document.body, 0x333333, 0xC6DB2B ),
            new Fademe( document.getElementById("logo"), 0x999999, 0x2299EE ),
            new Fademe( document.getElementById("ahead"), 0x0000FF, 0xFF0000 )
       ];
       changeCount = 0;
       timer = setInterval( change, 10 ); 
    }
    
    function change( )
    {
        ++changeCount;
        if ( changeCount > 300 )
        {
            clearInterval(timer);
            return;
        }
        for ( var f = 0; f < fadethem.length; ++f )
        {
            var me = fadethem[f];
            var red   = Math.floor( changeCount * me.r ) & 0xff0000;
            var green = Math.floor( changeCount * me.g ) & 0x00ff00;
            var blue  = Math.floor( changeCount * me.b ) & 0x0000ff;
            var color = 0x1000000 + me.first + red + green + blue;
            color = color.toString(16).substring(1);
            me.object.style.backgroundColor = "#" + color;
            // uncomment next line to see how it works
            // if ( f != 0 ) me.object.innerHTML = "#" + color;
        }
    }
    </script>
    </head>
    <body style="background-color: #333333;">
    <h1 id="logo" style="background-color: #999999;">THIS IS THE LOGO<h1>
    <h2 id="ahead" style="background-color: #0000FF;">This is element 'ahead'</h2>
    <hr/>
    <input type="button" value="try it" onclick="startChange()"/>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    xelawho (01-07-2012)

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    It's not perfect, because of rounding errors. For example, the final color for "ahead" there comes out as #FF0100 instead of #FF0000, but it's so close the human eye won't see it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Jul 2011
    Posts
    37
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you very very much everyone for your superb help.
    I am very delightful.......................


  •  

    Posting Permissions

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