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
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing "Nested" CSS Styles using Javascript

    Hello, I am an occasional lurker here, but I've decided to register and ask a question to the experts since I am stuck. Here's my situation:

    I want to change the background (and text) of a rollover based on css styles.

    Here is a snippet of my CSS:

    Code:
    #navcontainer ul
    {
    padding: .3em 0;
    margin: 0;
    list-style-type: none;
    background-color: rgb(205,219,205);
    color: #FFF;
    width: 100%;
    font: normal 90% arial, helvetica, sans-serif;
    text-align: center;
    }
    
    #navcontainer li { display: inline; }
    
    #navcontainer li a
    {
    text-decoration: none;
    background-color: #92847B;
    color: #FFFFFF;
    padding: .3em 1em;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    }
    
    #navcontainer li a:hover
    {
    background-color: rgb(205,219,205);
    color: #000000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    }
    Using the following code I can change the #navcontainer background colors, but can anyone give advice on how to change the #navcontainer li a:hover background color?

    Code:
    function changeProp(elementId, property, val) {
        if (document.getElementsByTagName) {
            var element = document.getElementById(elementId);
            element.style[property] = val;
        }
    }

    Thank you for any help you can provide!!!

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why do you want to change an element's :hover style with JavaScript?

    http://www.quirksmode.org/dom/changess.html
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know it's odd, I run a website where users can signup and get a little personalized website that is built off of a basica template. My goal is to allow users to fully customize their webpages. I am creating a bare bones online css editor that allows them to change colors, positions, etc, then a custom .css will be created for their site.

    Within this tool I want them to be able to preview their site in real time. So, when they pick a different :hover color, it will update the preview so they can see what it looks like. This might not be possible and I may just have to post back to the server and recreate a preview page, or use ajax or something, but I'd like to do it through javascript if possible.

    The more I research this the more I see it's not really possible. I can easily change background colors on a normal style, but it's the nested ones that are causing problems?

    Any advice?

  • #4
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Who calls those "nested?

    Take a look at the link I posted.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #5
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What do you call them?
    I call them nested. They are nested within other CSS tags.

    -navcontainer
    --ul
    --li
    ---a

    the a:hover only applies to the li element, hence it's nested, but anyways, I'm not up to date on the proper lingo.

    I looked at the link, and what I'm seeing is that if you don't know the location of the tag you want, you're out of luck.

    This code seems to be my best option as I can hopefully get the rules, look for something that matches what I expect and change it that way.

    Code:
    var theRules = new Array();
    if (document.styleSheets[1].cssRules)
    	theRules = document.styleSheets[1].cssRules
    else if (document.styleSheets[1].rules)
    	theRules = document.styleSheets[1].rules
    I think this should work, from my code above you can see that I was going in the wrong direction, I was trying to change DHTML element properties , not CSS element properties.

  • #6
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by iambuddylee
    What do you call them?
    I call them nested. They are nested within other CSS tags.

    -navcontainer
    --ul
    --li
    ---a

    the a:hover only applies to the li element, hence it's nested, but anyways, I'm not up to date on the proper lingo.
    It's the X/HTML elements that are nested, not the CSS code. I'm not aware of a term for it.

    Quote Originally Posted by iambuddylee
    I looked at the link, and what I'm seeing is that if you don't know the location of the tag you want, you're out of luck.

    This code seems to be my best option as I can hopefully get the rules, look for something that matches what I expect and change it that way.
    Yeah, unfortunately the way it was designed makes it difficult to use.

    Quote Originally Posted by iambuddylee
    I think this should work, from my code above you can see that I was going in the wrong direction, I was trying to change DHTML element properties , not CSS element properties.
    "DHTML element"? DHTML is nothing more than a term referring to X/HTML documents styled with CSS and given some added behavior with JavaScript.

    What you were doing was changing the inline styles of the elements, which is not what you really wanted to do.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

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