PDA

View Full Version : CSS Menu properties changed w/ JS?



utlimaotiar
04-01-2008, 01:06 AM
Hey there Scriptors.
I saw the Glossy Horizontal (CSS) Menu (http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/) and have decided to use it for my friend's site (http://www.beawaresigns.com). 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.

rangana
04-01-2008, 03:06 AM
Remove the class=current declaration in the list, and add the pseudo active declaration in your CSS.


.glossymenu li.current a, .glossymenu li a:hover, .glossymenu li a:active


..Also this one:


.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:


<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 ;)

utlimaotiar
04-03-2008, 10:51 PM
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?