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 Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Option buttons and background

    I am trying to make some option buttons that will change the background of the document.I have already styled the body with an image using
    document.body.style.background

    I am now trying to make some option buttons that will make the background repeat or be placed to the center.

    Here are the buttons:

    Code:
    <select>
      <option type="button" selected="selected" onclick="tile()">Tile</option>
      <option type = "button" onclick = "center()" >Center</option>
    </select>
    And the functions:

    Code:
    function tile() {
    document.body.style.backgroundRepeat="repeat";
    }
    
    function center() {
    document.body.style.backgroundRepeat="no-repeat";
    document.body.style.backgroundPosition="center";
    }

    However it doenst work

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by ubuntu View Post
    I am trying to make some option buttons that will change the background of the document.I have already styled the body with an image using
    document.body.style.background

    I am now trying to make some option buttons that will make the background repeat or be placed to the center.

    Here are the buttons:

    Code:
    <select>
      <option type="button" selected="selected" onclick="tile()">Tile</option>
      <option type = "button" onclick = "center()" >Center</option>
    </select>

    However it doenst work

    No surprise, as that is not valid HTML. You cannot have buttons within a <select>, and there is no such thing as an "option button".


    If you want a select list, you are looking for something like this:-

    Code:
    <select id = "sel1" onchange = "changeBG()">
    <option value = "0" >Select background ....</option>
    <option value = "1">Tile</option>
    <option value = "2">Center</option>
    </select>
    
    <script type = "text/javascript">
    
    function changeBG() {
    var val = document.getElementById("sel1").value;
    if (val == 0) { //  what to do if no selection
    }
    if (val ==1)  {
    document.body.style.backgroundRepeat="repeat";
    }
    if (val == 2) {
    document.body.style.backgroundRepeat="no-repeat";
    document.body.style.backgroundPosition="center";
    }
    
    }
    
    </script>
    Or if you just want buttons:-

    Code:
    <input type = "button" value  = "Tile" onclick  = "tile()">
    <input type = "button" value = "Center" onclick = "center()" >
    But be careful - center may be a reserved word.



    The older I grow the more I distrust the familiar doctrine that age brings wisdom. - H.L. Mencken 1880-1956, American Editor, Author, Critic, Humorist
    Last edited by Philip M; 12-23-2011 at 01:04 PM. Reason: Typo

    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.

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,773
    Thanks
    19
    Thanked 155 Times in 146 Posts
    well Phillip kind of beat me to it, but here is how i'd do it anyway:

    Code:
    <?xml version="1.1" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>TITLE</title>
    <style type="text/css">
        body
        {
            background: url('http://www.codingforums.com/img/logo.gif') no-repeat;
        }
    </style>
    </head>
    <body>
    
    <select onchange="changeBg(this)">
      <option value="default">Default</option>
      <option value="tile">Tile</option>
      <option value="center">Center</option>
    </select>
    
    <script type="text/javascript">
    function changeBg(menuObj)
    {
        var styleBase = "url('http://www.codingforums.com/img/logo.gif')";
        switch (menuObj.value)
        {
            case "default":
                document.body.style.background = styleBase + " no-repeat";
                break;
            case "tile":
                document.body.style.background = styleBase;
                break;
            case "center":
                document.body.style.background = styleBase + " center no-repeat";
        }
    }
    </script>
    
    </body>
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for your help.I got the <select> tag from w3schools

    However i still see no effect .Just in case it may help,im using html5 file choose to style the background ( document.body.style.background = 'url(' + e.target.result + ')';

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,773
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Why don't you post all of your code instead of just the bits that you think are relevant...Post all the the code and let us decide what is and isn't relevant...Clearly there is more to your problem than just what you are telling/showing us.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by chump2877 View Post
    Why don't you post all of your code instead of just the bits that you think are relevant...Post all the the code and let us decide what is and isn't relevant...Clearly there is more to your problem than just what you are telling/showing us.
    to make it clear,i have also tried the code you gave to me (both html and javascript) and didnt work even as stand alone.

    here it is:
    http://jsfiddle.net/XsYSe/
    Last edited by ubuntu; 12-23-2011 at 03:36 PM.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by ubuntu View Post
    to make it clear,i have also tried the code you gave to me (both html and javascript) and didnt work even as stand alone.

    here it is:
    http://jsfiddle.net/XsYSe/
    Well, chump2877's code works just fine for me!

    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
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,773
    Thanks
    19
    Thanked 155 Times in 146 Posts
    That isn't my code.

    And are you trying to have the user upload a background image as well? Or is the image already on the server?

    (Per your PM, you indicate that you are using the new HTML5 features to read a local file with javascript -- for those that are confused :S)

    Also per your PM, you indicated that you did not want to post your full code for private reasons. JS code is client side and therefore inherently "not" private (unless you obfuscate it). So unless you are working on some secret proprietary, commercial software, I say paste all of your code here for everyone to see. The more eyes you have on your code, the more likely it is that someone will assist you with a solution.
    Last edited by chump2877; 12-23-2011 at 03:57 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by chump2877 View Post
    That isn't my code.

    And are you trying to have the user upload a background image as well? Or is the image already on the server?
    no forget my pm.

    The jsfiddle link i posted i s from phillip and it doenst seem to work.Both chump's code doesnt work.Suggestions?

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by ubuntu View Post
    no forget my pm.

    The jsfiddle link i posted i s from phillip and it doenst seem to work.Both chump's code doesnt work.Suggestions?
    Well, as I say, both the scripts you have been given work just fine for me! The fault, dear Brutus, lies not in the stars but .........
    Last edited by Philip M; 12-23-2011 at 04:28 PM.

    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.

  • #11
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Well, as I say, both the scripts you have given work just fine for me!
    i dont understand,they work when i create them as a single html file but in jsfiddle they dont..hmmm...


    Thanks you both though! (:


  •  

    Posting Permissions

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