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
  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
    9,176
    Thanks
    6
    Thanked 1,081 Times in 1,053 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,546
    Thanks
    205
    Thanked 2,585 Times in 2,563 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,578
    Thanks
    11
    Thanked 613 Times in 593 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 03:50 PM.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,546
    Thanks
    205
    Thanked 2,585 Times in 2,563 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.

    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
    29,353
    Thanks
    83
    Thanked 4,904 Times in 4,865 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>
    Be yourself. No one else is as qualified.

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,578
    Thanks
    11
    Thanked 613 Times in 593 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
    29,353
    Thanks
    83
    Thanked 4,904 Times in 4,865 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.
    Be yourself. No one else is as qualified.


  •  

    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
    •