jonsan32
Junior Poster in Training
53 posts since Aug 2010
Reputation Points: 10
Solved Threads: 0
Hi Jonsan,
Things are made slighly tricky by the scripts already on the page and we need to ensure that we don't hijack their onload handlers.
I think this will do what you want but it's untested.Delete onload="....." from the body tag.
Add id="spannav" to the tag that currently has class="spannav"
Change the "Events" nav link to be the same as all the others (ie with mouseover and mouseout handlers for image swapping).
Add the following script to each page, and set the variable pageID to:Events: 0
3on3: 1
Clinics: 2
Workouts: 3
Forum: 4
Membership: 5
pageID = 3;//On each of the six pages, set this value to 0|1|2|3|4|5.
function setNavHighlight(){
var spannav = document.getElementById('spannav');
if(spannav) {
var navLinks = spannav.getElementsByTagName('a');
var pageLink = navLinks[pageID];
if(pageLink){
pageLink.onMouseover();//trigger the mouseover event
pageLink.onMouseout = null;//remove the mouseout event
pageLink.href = null;//remove the hyperlink action
}
}
}
addEventListener ? addEventListener("load", setNavHighlight, false) : attachEvent('onload', setNavHighlight);
You can put this inside its own or any of the existing tags (preferably in the document head).
As I say, it's untested so may need debugging.Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
jonsan32
Junior Poster in Training
53 posts since Aug 2010
Reputation Points: 10
Solved Threads: 0
And PS, I just now switched the
jonsan32
Junior Poster in Training
53 posts since Aug 2010
Reputation Points: 10
Solved Threads: 0
Jonsan,
Try setting alerts in the function to see if it is called and if so, how far it gets.
Let me know the result.
Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Ok, sir. How about this alternative. I've learned a lot over the past days of searching for this and this is what I've come up with. This is for another site, btw.
I have the code below setup. I'm wondering if I can apply id tags to each li link, then with a "body id=" link on any given page, I can switch that link's id from class=select to class=current. Would that work?
Here's the code, including the stylesheet
<style type="text/css">
.nav {
height:35px;
background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_0.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:14px;
width:1000px;
z-index:500;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_0.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#ddd;
}
.nav .current a {
display:block;
height:35px;
float:left;
background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_2.gif);
padding:0 0 0 15px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a b {
display:block;
padding:0 30px 0 15px;
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_2.gif) right top;
}
.nav .select a:hover,
.nav .select li:hover a {
background: url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_1.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#fff;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/pro_line_1.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#f00;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:1000px;
top:35px;
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/back_0.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#444;
}
.nav .current .sub li.sub_show a {
color:#088;
cursor:default;
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/back_1.gif);
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#088;
background:url(http://dl.dropbox.com/u/5739741/Dropline%20Menus/cssplay.co.uk/back_1.gif);
}
</style>
<div class="nav">
<div class="table">
<div class="row">
<ul class="current"><li><a href="#nogo"><b>J.A.M. Basketball</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
<ul class="sub">
<li class="sub_show"><a href="#nogo">News & Registration</a></li>
<li><a href="#nogo">J.A.M. Newsletters</a></li>
<li><a href="#nogo">Camps & Clinics</a></li>
<li><a href="#nogo">Schedules</a></li>
<li><a href="#nogo">Standings</a></li>
<li><a href="#nogo">Tournaments</a></li>
<li><a href="#nogo">Contact List Signup</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select"><li><a href="#nogo"><b>Community</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">Forum</a></li>
<li><a href="#nogo">Local Event</a></li>
<li><a href="#nogo">J.A.M. Photos</a></li>
<li><a href="#nogo">Club Teams</a></li>
<li><a href="#nogo">Daily Workouts</a></li>
<li><a href="#nogo">Team Fundraisers</a></li>
<li><a href="#nogo">Sponsors</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select"><li><a href="#nogo"><b>Team Management</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">Write-up Contest</a></li>
<li><a href="#nogo">Download Central</a></li>
<li><a href="#nogo">Random Payment</a></li>
<li><a href="#nogo">Uniform Purchase</a></li>
<li><a href="#nogo">Facility Usage</a></li>
<li><a href="#nogo">Hardships</a></li>
<li><a href="#nogo">Cancellations</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select"><li><a href="#nogo"><b>Extra Information</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">Are You New?</a></li>
<li><a href="#nogo">FAQs</a></li>
<li><a href="#nogo">Driving Directions</a></li>
<li><a href="#nogo">League Rules</a></li>
<li><a href="#nogo">Company Info</a></li>
<li><a href="#nogo">Terms of Service</a></li>
<li><a href="#nogo">Past Champions</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select"><li><a href="#nogo"><b>Customer Relations</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">Contact Us</a></li>
<li><a href="#nogo">Referees</a></li>
<li><a href="#nogo">Feedback</a></li>
<li><a href="#nogo">Tips & Advice</a></li>
<li><a href="#nogo">Advertising</a></li>
<li><a href="#nogo">Donations</a></li>
<li><a href="#nogo">Website Tour</a></li>
</ul>
</div></li></ul></div>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
Thank you!
jonsan32
Junior Poster in Training
53 posts since Aug 2010
Reputation Points: 10
Solved Threads: 0
jonsan32
Junior Poster in Training
53 posts since Aug 2010
Reputation Points: 10
Solved Threads: 0
Jonsan,
Yes, it could be done with class-switching but only if the link is built in the right way. Remember that class-switching can only affect those aspects that are put in place with CSS. In the case of your nav links, they would need to be reformulated each to have a background images. Foreground images are put in place by HTML, not CSS.
Going back to my first idea, I wonder if recasting the code in jQuery would help. It's certainly simpler:
$(function(){
$('.spannav a').eq(3).attr('href',null).mouseout(null).onmouseover();
});
With this, you don't even need to add id="spannav" because jQuery can address elements by classname. As long as class="spannav" is used just once, then the above jQuery should work with no chance of inadvertently affecting anything else on the page.
Just make sure jQuery is installed (with ) on every page and that the 3 in .eq(3) is changed to 0|1|2|3|4|5 on each of the pages to correspond with the index of the appropriate nav link.Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Much thanks! I will get on this. Appreciate your help once again. You and Muhammad Ali... The Greatest! :-)
jonsan32
Junior Poster in Training
53 posts since Aug 2010
Reputation Points: 10
Solved Threads: 0
