Results 1 to 3 of 3

Thread: CSS Menu properties changed w/ JS?

  1. #1
    Join Date
    Mar 2008
    Location
    Atlanta, GA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question CSS Menu properties changed w/ JS?

    Hey there Scriptors.
    I saw the Glossy Horizontal (CSS) Menu and have decided to use it for my friend's site. My problem is, as you may see on the live site, that when you click on the tabs, the tabs will properly highlight on mouse over and it will load the content into the IFrame window below just fine, but the CSS menu will not change the highlighted tab to the corresponding page. It just stays on the "Home" tab the entire time, even if we were on the "Product" page in the IFrame below.
    I understand the complication that since the outer-frame(containing the CSS menu) does not change then the CSS menu does not change, but I was wondering if there was a way to remedy that.
    Is there a way to dynamically change a CSS property onClick? I've looked and looked, but nothing is specific enough to answer my question. As far as I know, there is no way to change a CSS property, but even with javascript? The CSS guys couldn't make heads nor tails of it, hopefully someone in this forum will have the knowledge.

    Is there a way to change the "current" class (in the ordered list tags) using Javascript?

    Thanks to you guys who do the research and take the time to spread the know-how.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Remove the class=current declaration in the list, and add the pseudo active declaration in your CSS.
    Code:
    .glossymenu li.current a, .glossymenu li a:hover, .glossymenu li a:active
    ..Also this one:
    Code:
    .glossymenu li.current a b, .glossymenu li a:hover b, .glossymenu li a:active b
    That code above works perfectly with IE, however, not with FF. For FF, if you'll wish, let's just make it underlined when it is onclick
    Add this script:
    Code:
    <script type="text/javascript">
    window.onload=function() 
    {
       var accept=document.getElementById('nav').getElementsByTagName('a');
    for(var start=0;start<accept.length;start++)
    {
       accept[start].onclick=function() 
       {
    	for(var start=0;start<accept.length;start++) 
    	{
    	accept[start].style.textDecoration='none';
    		{
    		this.style.textDecoration='underline';
    		}
        }
       }
      }
     }
    </script>
    ...add id="nav" in your <ul> tag


    See if it helps
    Last edited by rangana; 04-01-2008 at 04:28 AM. Reason: Provided the JS
    Learn how to code at 02geek

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

  3. The Following User Says Thank You to rangana For This Useful Post:

    utlimaotiar (04-03-2008)

  4. #3
    Join Date
    Mar 2008
    Location
    Atlanta, GA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That's great! It really does work in IE, and it was so simple too. Wow. Now if only there was a way to fake it in Mozilla browsers. (After all, I am a Firefox user myself.)

    Can anyone else expound on that?

Bookmarks

Posting Permissions

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