I use vBulletin for several or our pages within our website (home, blog, forum, gallery, tutorials and FAQ) and are currently using a lavalamp (http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/).
I have been trying, unsuccessfully, for several weeks to figure out how to dynamically set the 'current' class depending upon which page you are on. Below are a couple examples of my failed attempts--I have verified the code works, in that, I am able to get to the correct li.. but the addClass or removeClass, just isn't working. I have tried using the menu's ID as the selector, placing the script in several different places, making it a function and calling the function with the lavalamp inialization code... Any assistance would be greatly appreciated!
First Attempt:
<!--BEGIN LAVA MENU-->
<ul class="lavaLamp" id="lavaMM">
<li><a href="/">Home</a></li>
<li><a href="/market/">Market</a></li>
<li><a href="/content.php/475-the-daily-buzz">Blog</a></li>
<li><a href="/forum/forum.php">Forum</a></li>
<li><a href="/gallery/">Gallery</a></li>
<li><a href="/forum/forumdisplay.php/439-Scrap-Orchard-University">Tutorials</a></li>
<li><a href="/staff/">Staff</a></li>
<li><a href="/forum/faq.php">FAQ</a></li>
<li><a href="/market/support/">Support</a></li>
</ul>
<!--END LAVA MENU-->
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('#lavaMM').lavaLamp({
fx: 'backout',
speed: 700,
click: function(event, menuItem) {
return true;
}
});
var fullURL = document.URL;
var splitURL = fullURL.split('/', 4);
if (splitURL[3] == 'content.php') {
$('ul.lavaLamp li:eq(2)').addClass('current');
}
else if (splitURL[3] == 'forum') {
$('ul.lavaLamp li:eq(3)').addClass('current');
}
else if (splitURL[3] == 'gallery') {
$('ul.lavaLamp li:eq(4)').addClass('current');
}
});
</script>
Second Attempt:
<!--BEGIN LAVA MENU-->
<ul class="lavaLamp" id="lavaMM">
<li><a href="/">Home</a></li>
<li><a href="/market/">Market</a></li>
<li class="current"><a href="/content.php/475-the-daily-buzz">Blog</a></li>
<li class="current"><a href="/forum/forum.php">Forum</a></li>
<li class="current"><a href="/gallery/">Gallery</a></li>
<li><a href="/forum/forumdisplay.php/439-Scrap-Orchard-University">Tutorials</a></li>
<li><a href="/staff/">Staff</a></li>
<li><a href="/forum/faq.php">FAQ</a></li>
<li><a href="/market/support/">Support</a></li>
</ul>
<!--END LAVA MENU-->
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('#lavaMM').lavaLamp({
fx: 'backout',
speed: 700,
click: function(event, menuItem) {
return true;
}
});
var fullURL = document.URL;
var splitURL = fullURL.split('/', 4);
if (splitURL[3] == 'content.php') {
$('ul.lavaLamp li:eq(3)').removeClass('current');
$('ul.lavaLamp li:eq(4)').removeClass('current');
}
else if (splitURL[3] == 'forum') {
$('ul.lavaLamp li:eq(2)').removeClass('current');
$('ul.lavaLamp li:eq(4)').removeClass('current');
}
else if (splitURL[3] == 'gallery') {
$('ul.lavaLamp li:eq(2)').removeClass('current');
$('ul.lavaLamp li:eq(3)').removeClass('current');
}
});
</script>
Third Attempt:
<!--BEGIN LAVA MENU-->
<ul class="lavaLamp" id="lavaMM">
<li><a href="/">Home</a></li>
<li><a href="/market/">Market</a></li>
<li><a href="/content.php/475-the-daily-buzz">Blog</a></li>
<li><a href="/forum/forum.php">Forum</a></li>
<li><a href="/gallery/">Gallery</a></li>
<li><a href="/forum/forumdisplay.php/439-Scrap-Orchard-University">Tutorials</a></li>
<li><a href="/staff/">Staff</a></li>
<li><a href="/forum/faq.php">FAQ</a></li>
<li><a href="/market/support/">Support</a></li>
</ul>
<!--END LAVA MENU-->
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var fullURL = document.URL;
var splitURL = fullURL.split('/', 4);
if (splitURL[3] == 'content.php') {
$('ul.lavaLamp li:eq(2)').each(function() {
$(this).addClass('current');
});
}
else if (splitURL[3] == 'forum') {
$('ul.lavaLamp li:eq(3)').each(function() {
$(this).addClass('current');
});
}
else if (splitURL[3] == 'gallery') {
$('ul.lavaLamp li:eq(4)').each(function() {
$(this).addClass('current');
});
}
});
</script>