Help With Javascript & Css Styles

**lawmaker** · 04-11-2007, 09:07 PM

Hello All,

I have a header w/ a navigation, and each navigation button is an <li>.
Now based on which page you are on (lets say the Home page) that specififc <li> has a class on it
I.E.: <li class="selected">Home</li>
and if you are on the contact page the class will be on the contact <li> and not the home one

so here is where it gets tricky

using JavaScript (and a URL paramter), how would I get it to be where the JS will know what <li> to put the class on
so basically I want 1 header file, and then 1 class to go between the <li>'s based on the page ur on and I can control which one has the class by a URL param

I.E.:

<a href="blah.html?button=contact"> then we would go to blah.html and the contact <li> would have the class on it (and no other li's would have the class).

Another example:

<a href="test.html?button=about"> then we would go to test.html and the about <li> would look like <li class="selected">about</li> (and no other li's would have a class).

Any and all help would be VERY much apprecaited.

Thank you in advance,
LawMaker

**techno_race** · 04-12-2007, 01:24 AM

to use: http://...?... you need PHP.
However, this can be done with JavaScript. I haven't tested this, but it should work.
Add the following to your stylesheet:
Remove all copies of class="selected" and add this code to the <li>s:

Code:

 id="contact"

Add this in the <head> of your page:

HTML Code:

<script type="text/javascript">
var place = window.location;

then copy this however many times needed.

Code:

if (place == "http://www.mysite.com/contact.html") {
     var contact = '<a class="selected">Contact</a>'
     document.getElementById("contact").firstChild.nodeValue = contact;
}

then do:

HTML Code:

</script>

It's the best I can do, it isn't valid markup (probably), it's not good structure, and it probably won't work. However, I did my best. I repeat, I doubt it'll work, and I haven't tested it.

**jscheuer1** · 04-12-2007, 05:11 AM

menu_li.htm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
li {
display:block;
float:left;
width:5em;
text-align:center;
border:1px solid black;
}
.selected {
font-weight:bold;
background-color:yellow;
}
</style>
<script type="text/javascript">
function setClass(){
var lis=document.getElementsByTagName('li');
var regex=new RegExp(get('button'));
for (var i_tem = 0; i_tem < lis.length; i_tem++)
if(regex.test(lis[i_tem].innerHTML.toLowerCase()))
lis[i_tem].className='selected';
}
function get(key_str) {
var query = window.location.search.substr(1);
var pairs = query.split("&");
for(var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split("=");
if(unescape(pair[0]) == key_str)
return unescape(pair[1]);
}
return null;
}
if(get('button')){
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", setClass, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", setClass );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            setClass();
        };
    }
    else
        window.onload = setClass;
}
}

</script>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>

Link to the above page as:

HTML Code:

<a href="menu_li.htm?button=home">Home</a>
<a href="menu_li.htm?button=about">About</a>
<a href="menu_li.htm?button=contact">Contact</a>

**lawmaker** · 04-12-2007, 03:13 PM

John, This is PERFECT, thank you SO much.

LawMaker

**lawmaker** · 04-12-2007, 03:27 PM

John,

This does work perfectly but the slight bug is when I put an href around the name in the <li>

I.E. <li><a href="contact.html">Contact</li>

and i do the url menu_li.html?button=contact it doesnt work, but if I take the href's out it works again.

Do you think its possible to get this to work with the href's?

**NXArmada** · 04-12-2007, 03:33 PM

Check this out:

Setting the current menu state with CSS

**jscheuer1** · 04-12-2007, 03:42 PM

It should work with anchor links. However, this:

Code:

<li><a href="contact.html">Contact</li>

isn't an anchor link, it is invalid code. If you write a valid tag, it should work:

Code:

<li><a href="contact.html">Contact</a></li>

Testing this locally though, I couldn't get it to not work but, that could be because my demo page has no other links on it and/or it could be browser specific. There could be other problems, depending upon just what you are doing in your code. If you continue to have problems, post a link to the problem page and let me know what browsers you are testing in. Do not test in an editor.

Also, as I hope you are aware, this will only work in browsers with javascript enabled.

One other thing, styles for the a tag on your page may be overriding the select class.

**lawmaker** · 04-12-2007, 03:44 PM

John,

Im sorry there are </a> tags. here is exactly what I have for menu_li.html, If you notice the HOME works if the url is menu_li.html?button=home, but if I hcange the url to be something like menu_li.html?button=about, it doesnt work

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.nav_selected
{ background: url(../images/nav_bg_over.gif) repeat-x; font-family:Arial,Helvetica;font-size:12px;font-weight:bold;color:#ff0000;text-decoration: none; }
.nav_selected A:link {color:#ff0000;text-decoration: none;}
.nav_selected A:visited {color:#ff0000;text-decoration: none;}
.nav_selected A:active {color:#ff0000;text-decoration: none;}
.nav_selected A:hover {color:#ff0000;text-decoration: none;}

#nav
{
margin: 0;
font-family:Arial,Helvetica;font-size:12px;font-weight:bold;color:#22364D;text-decoration: none;
background-color: #996;
padding: 0px;
width: 748px;
height: 111px;
background: url(../images/logo_top.gif) no-repeat;
vertical-align: bottom; /* This fixes the IE5 Win gap! */
}

#nav li
{
display: inline;
margin-top: 75px;
float: left;
list-style-type: none;
padding-left: 0px;
height: 31px;
background: url(../images/nav_bg.gif) repeat-x;
vertical-align: bottom; /* This fixes the IE5 Win gap! */
}

#nav a:link, #nav a:visited, #nav a:active
{
color: #123549;
padding-top: 8px;
padding-left: 15px;
padding-right: 15px;
float: left;
display: block;
text-decoration: none;
height: 31px;
}

#nav a:hover
{
color: #ffffff;
float: left;
background-color: #663;
height: 31px;
background: url(../images/nav_bg_over.gif) repeat-x;
}
</style>

<script type="text/javascript">
function setClass(){
var lis=document.getElementsByTagName('li');
var regex=new RegExp(get('button'));
for (var i_tem = 0; i_tem < lis.length; i_tem++)
if(regex.test(lis[i_tem].innerHTML.toLowerCase()))
lis[i_tem].className='nav_selected';
}
function get(key_str) {
var query = window.location.search.substr(1);
var pairs = query.split("&");
for(var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split("=");
if(unescape(pair[0]) == key_str)
return unescape(pair[1]);
}
return null;
}
if(get('button')){
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", setClass, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", setClass );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
setClass();
};
}
else
window.onload = setClass;
}
}

</script>
</head>
<body>

<table width="748" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="111">
<ul id="nav">
<li>HOME</li>
<li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
<li><a href="about.html">ABOUT</a></li>
<li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
<li><a href="services.html">SERVICES</a></li>
<li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
<li><a href="contact.html">CONTACT</a></li>
<li><img src="images/nav_div.gif" height="31" width="2" border="0" alt="" /></li>
</ul>

</td>
</tr>
</table>

<br><br><br><br><br><br><br><br>

This is a test of other lists
<ul>
<li>test
</ul>

</body>
</html>

**lawmaker** · 04-12-2007, 04:11 PM

OMG, NXArmada's url worked perfectly,

So simple yet I feel like such a brain dead moron right now =0(

John, my appologies for all of this, your code is amazing, but it is so much easier then I ever thought possible.

**jscheuer1** · 04-12-2007, 04:49 PM

That's great if it works out for you. I found the problem with your other setup. You need to include the id as, otherwise id takes precedence over class:

Code:

#nav .nav_selected
{ background: url(../images/nav_bg_over.gif) repeat-x; font-family:Arial,Helvetica;font-size:12px;font-weight:bold;color:#ff0000;text-decoration: none; }
#nav .nav_selected A:link {color:#ff0000;text-decoration: none;}
#nav .nav_selected A:visited {color:#ff0000;text-decoration: none;}
#nav .nav_selected A:active {color:#ff0000;text-decoration: none;}
#nav .nav_selected A:hover {color:#ff0000;text-decoration: none;}

Thread: Help With Javascript & Css Styles

Thread Tools

Search Thread

Help With Javascript & Css Styles

Thank You So Much

Found a slight bug

Bookmarks

Bookmarks

Posting Permissions