Most web applications today have some kind of menu build with anchor tags. The problem that the following script -- courtesy of my friend Anestis from alfasoftware.gr -- solves, is how to determine the actual link that was used to bring the user to the currently displayed page.
To use it, place it inside a script tag towards the end of your app/Views/Layout/default.ctp file (just before the closing body tag, will do just fine) and a little bit of CSS code in your appropriate style file (again app/webroot/css/cake.generic.css is a good candidate).
The CSS code is pretty easy :
a.active {
background-color: yellow; // add anything you like
}
and the javascript :
<script type="text/javascript">
// add the "active" class to the navigation link that brought us to this page
jQuery( function() {
// retrieve the relative url of the current page
var curUrl = "<?php echo (Router::url( NULL, FALSE)); ?>";
// in a cake application a relative URL is usually like
// /application/controller/action/param1/param2 ...
// so what we really need is the first three pieses of the URL
var tokens = curUrl.split("/").slice(0,4);
curUrl = tokens.join("/");
// if there is any pagination information then the word "index" also appears in the URL
// in this case we need to remove it, so it can match generated URL
var indexIndex = curUrl.indexOf('index');
if ( indexIndex > -1)
curUrl = curUrl.substring( 0, indexIndex - 1);
// for each page anchor tag
$('a').each( function() {
// retrieve the arnchor's target
var ref = $(this).attr("href");
// so if that anchor points to the current page
if(ref === curUrl){
$(this).addClass("active");
}
});
});
</script>
Enjoy!
