Ok.. I'm trying to get a dual layers navigation to work.. everything is cool but the jquery that sets the class "current" to the right A element according to what the URL is. But not even the alert is working, and I'm not sure why.. new to jquery..
as it currently is:
http://gulfinsight.obmon.com
the html:
the html:
- <div id="nav_container">
<ul id="top_nav"></li><li><a class="home" href="/home/all">HOME</a></li><li><a class="the-gcc" href="/the-gcc/all">THE GCC</a></li><li><a class="arts-and-culture" href="/arts-and-culture/all">GULF ARTS & CULTURE</a></li><li><a class="gulf-society" href="/gulf-society/all">GULF SOCIETY</a></li><li><a class="world-stories" href="/world-stories/all">WORLD STORIES</a></li><li><a class="the-arabic-language" href="/the-arabic-language/all">THE ARABIC LANGUAGE</a></li></ul><div class="clear"></div> </div>
<div id="nav_container" class="filter">
<div id="filter_desc"><span>FILTER</span> BY COUNTRY</div>
<div id="filter_container">
<ul id="filter_nav"></li><li><a class="all" href="/home/all">ALL Countries</a></li><li><a class="bh" href="/home/bh">Bahrain</a></li><li><a class="kw" href="/home/kw">Kuwait</a></li><li><a class="om" href="/home/om">Oman</a></li><li><a class="qt" href="/home/qt">Qatar</a></li><li><a class="sa" href="/home/sa">Saudi Arabia</a></li><li><a class="uae" href="/home/uae">UAE</a></li></ul><div class="clear"></div> </div>
</div>
</div>
$(document).ready(function(){ // url var $path = location.pathname.split("/"); var $topnav_path = path[1]; var $filternav_path = path[2]; // current page var $test = "the category is: " + $topnav_path + " AND the filter is: " + $filternav_path; alert($test); // navigation $(function() { // set link to current page if ( $path[1] ) { $('#top_nav a[class$="' + $topnav_path + '"]').toggleClass('current'); } // if link is root, set first child (home) if ( !$path[1] ) { $('#top_nav a:first').toggleClass('current'); } // set filter to current filter if ( $path[2] ) { $('#filter_nav a[class$="' + $filternav_path + '"]').toggleClass('current'); } // if link is root, set first child (home) if ( !$path[2] ) { $('#filter_nav a:first').toggleClass('current'); } }); });
The following, as per someone else's suggestion also don't work (with or without the function call):
$(document).ready(function(){ // url var path = location.pathname.split("/"), topnav_path = path[1] != undefined ? path[1] : false, filternav_path = path[2] != undefined ? path[2] : false; // test url var test = "the category is: " + topnav_path + " AND the filter is: " + filternav_path; alert(test); // navigation // set top nav to current category or home if ( path[1] ) { $('#top_nav a[class$="' + topnav_path + '"]').toggleClass('current'); }else{ $('#top_nav a:first').toggleClass('current'); } // set filter nav to current filter or all if ( path[2] ) { $('#filter_nav a[class$="' + filternav_path + '"]').toggleClass('current'); }else{ $('#filter_nav a:first').toggleClass('current'); } });
$(document).ready(function(){ // url var path = location.pathname.split("/"), topnav_path = path[1] != undefined ? path[1] : false, filternav_path = path[2] != undefined ? path[2] : false; // test url var test = "the category is: " + topnav_path + " AND the filter is: " + filternav_path; alert(test); // navigation $(function() { // set top nav to current category or home if ( path[1] ) { $('#top_nav a[class$="' + topnav_path + '"]').toggleClass('current'); }else{ $('#top_nav a:first').toggleClass('current'); } // set filter nav to current filter or all if ( path[2] ) { $('#filter_nav a[class$="' + filternav_path + '"]').toggleClass('current'); }else{ $('#filter_nav a:first').toggleClass('current'); } }); });