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 11 of 11
Like Tree2Likes
  • 1 Post By rnd me
  • 1 Post By Philip M

Thread: Looking for simple HTML code to change background colors

  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Looking for simple HTML code to change background colors

    Looking for simple code to change background colors.

    With a push of a button I would like to be able to change background colors on a website, with Javscript or HTML code. 2 or 3 colors

    Dont think they allow CSS where I am trying to install it.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Do you want the colours to stay permanently that colour the end user has selected? If so this is a PHP request and will need to be moved, you will need PHP and SQL and CSS, HTML.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    like to be able to switch back, just switch between "dark and light" or " Lights on and off " button, just 2 colours white and black or grey

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    HTML isn’t adding or changing colors at all. For the colors themselves CSS is required and for the changing (functionality) you need JavaScript or a server-side language (e. g. PHP). I suppose, however, that JS is the preferred way here, so I’ve moved the thread to the JS forum.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Code:
    <input type = "button" value = "Switch Background to red" onclick = "changeBackground('red')">
    <br>
    <input type = "button" value = "Switch Background to blue" onclick = "changeBackground('blue')">
    
    <script type = "text/javascript">
    function changeBackground(color) {
       document.body.style.background = color;
    }
    </script>

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    adding permanence to this nice simple code is a snap (not sure what php would have to do with it):
    Code:
    <input type="button" value="Switch Background to red" onclick="changeBackground('red')">
    <br>
    <input type="button" value="Switch Background to blue" onclick="changeBackground('blue')">
    
    <script type = "text/javascript">
    function changeBackground(color) {
       localStorage.color = document.body.style.background = color;
    }
    
    changeBackground(localStorage.color);
    </script>
    Last edited by rnd me; 02-26-2014 at 04:50 PM.
    outhor likes this.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by rnd me View Post
    adding permanence to this nice simple code is a snap (not sure what php would have to do with it):
    Code:
    <input type="button" value="Switch Background to red" onclick="changeBackground('red')">
    <br>
    <input type="button" value="Switch Background to blue" onclick="changeBackground('blue')">
    
    <script type = "text/javascript">
    function changeBackground(color) {
       localStorage.color = document.body.style.background = color;
    }
    
    changeBackground(localStorage.color);
    </script>

    Be aware that IE does not support local storage of local files. In other words, it will only work in IE on line.

    Also, be aware that local storage doesn’t work cross-browser. In other words, data written to local storage by a page running in Firefox can’t be read by the same page running in Chrome, and vice versa.
    outhor likes this.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New to the CF scene
    Join Date
    Sep 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is just what I need for my website. Now, I would like to know how to change back background value (which is none/default) when you click again on same element (something similar to jQuery toggle but with local storage) . Can the code above be improved for something like that? I was playing around with it, but seems like I don't have solution.. Thank you

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    ??? In what way does that answer not do what you asked for?

    Do you mean you want to change BACK to no background color?

    So you only want one button? Below is tested and works if local storage is supported.
    Code:
    <html>
    <body>
    <input type="button" value="Switch Background" id="changeBG" />
    <br>
    
    <script type = "text/javascript">
    document.getElementById("changeBG").onclick = function()
    {
        var bg = document.body.style.backgroundColor;
        bg = ( bg.toLowerCase().indexOf("red") >= 0 ) ? "" : "red";
        localStorage.color = document.body.style.backgroundColor = bg;
    }
    
    document.body.style.backgroundColor = localStorage.color;
    </script>
    </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.

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by Old Pedant View Post
    Below is tested and works if local storage is supported.
    what do you mean by "if local storage is supported" ?
    the last semi-popular browser not to support it was IE7, which is now well under half a percent of users.

    i don't expect it to work in incognito or from files, but nobody uses that much anyway, and i wouldn't want it to work in incognito anyway.
    all i'm saying is that the customary disclaimer about support for localStrorage no longer makes sense.

    if it's [].map() or something else non-IE8, it's arguably a judgement call at this point, but let's not worry about 5 versions back browsers and 7-year old devices when issuing such disclaimers.

    nothing is perfect, but i'll bet localStorage coverage is about as high as JS itself.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Your half percent is my 7 percent. Truly, 7 percent of our users are still using MSIE 7. Probably because of corporate policies and a reluctance to upgrade (K know, foolishly, but there it is).

    So I think I have at least a year to go before I can use local storage on all my pages. Unfortunately.
    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.


  •  

    LinkBacks (?)

    1. 02-26-2014, 03:41 PM

    Tags for this Thread

    Posting Permissions

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