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 7 of 7
  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,680
    Thanks
    6
    Thanked 1,009 Times in 982 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,035
    Thanks
    203
    Thanked 2,539 Times in 2,517 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,350
    Thanks
    11
    Thanked 589 Times in 570 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,035
    Thanks
    203
    Thanked 2,539 Times in 2,517 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.


  •  

    LinkBacks (?)

    1. 02-26-2014, 02: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
    •