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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    need help creating themes

    I am new to javascript, and I am trying to create a drop down menu that will allow you to change the some of the css on the page, so that they can select different themes.

    I am not sure how to create the function that does this. Here is what I have:

    <html>
    <head><title>Changing Page theme</title>
    <script type="text/javascript">

    function changeTheme();{

    }

    var theme1 = new Object(bgcolor,h2Color,h1Color)
    {
    bgcolor = "blue"
    h2Color = "green"
    h1Color = "orange"
    }

    var theme2 = new Object(bgcolor,h2Color,h1Color)
    {
    bgcolor = "red"
    h2Color = "black"
    h1Color = "white"
    }


    </script>
    </head>
    <body>
    <form name="select_theme">
    <p>
    Choose a theme for this page. <br />
    <select name="theme" onChange="changeTheme();">
    <option value="theme1">Theme1</option>
    <option value="theme2">Theme2</option>
    </select>
    </p>
    </form>

    </body>

    </html>


    Any help is greatly appreciated!

  • #2
    New Coder
    Join Date
    Nov 2008
    Location
    In a house
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know not much about Javascript but you could give this a try,

    Replace
    Code:
    <body>
    <form name="select_theme">
    <p>
    Choose a theme for this page. <br />
    <select name="theme" onChange="changeTheme();">
    <option value="theme1">Theme1</option>
    <option value="theme2">Theme2</option>
    </select>
    </p>
    </form>
    
    </body>


    With
    Code:
    <body>
    <form name="select_theme">
    <p>
    Choose a theme for this page. <br />
    <option onChange="changeTheme(); value="theme1">Theme1</option>
    <option onChange="changeTheme(); value="theme2">Theme2</option>
    </select>
    </p>
    </form>
    
    </body>
    See if that works.

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    @NickolasM.,

    That's erroneous.

    option tag don't have onchange event.

    For further reading:
    http://www.w3schools.com/TAGS/tag_option.asp
    http://www.w3.org/TR/html401/interac...ml#edef-OPTION




    @katz42,

    You had typo:
    Code:
    function changeTheme();{
    Also, I don't seem to understand what you are doing.

    Where's the Object object? What's your goal BTW ?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What I am trying to do, is to create a menu that when you select Theme 1, the javascript will call the css of that theme and change the background color and the colors of the h1 and h2 tags on the page. Then when you select Theme 2, those same properties change again to the theme2 css. It just needs to be something simple.

    As I said before, I am new to javascript, so I don't get on you mean by "Where's the Object object?"

    I think all I need is the code for the changeTheme function to call the themes from the select menu. I just don't know how to do this.

  • #5
    New Coder
    Join Date
    Nov 2008
    Location
    In a house
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by NickolasM. View Post
    I know not much about Javascript but you could give this a try,

    Replace
    Code:
    <body>
    <form name="select_theme">
    <p>
    Choose a theme for this page. <br />
    <select name="theme" onChange="changeTheme();">
    <option value="theme1">Theme1</option>
    <option value="theme2">Theme2</option>
    </select>
    </p>
    </form>
    
    </body>


    With
    Code:
    <body>
    <form name="select_theme">
    <p>
    Choose a theme for this page. <br />
    <option onChange="changeTheme(); value="theme1">Theme1</option>
    <option onChange="changeTheme(); value="theme2">Theme2</option>
    </select>
    </p>
    </form>
    
    </body>
    See if that works.
    I thought I saw it like that somewhere, I do not do Javascript. Tried to help.
    Are you a DJ? Want to Set up a Shoutcast or Icecast Stream? Need a Voice Over? Need to Find a Stream Host? Want Help Setting up a stream? Need Some Stream Discounts? What about Stream Reviews? Want Need a DJ Panel? Need help setting one up? Need Some New Gear? Find all this plus more at: Broadcasting World

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

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