CODEWITHSUNDEEP
javascript
Sam
Sam

Reputation: 23

Using Javascript to highlight current page in navbar

I wanted to make a dynamic navigation bar that could identify the current page by highlighting the image buttons border that is related to the page it is on. For example, on the index.html the homeButton.jpg is highlighted. I would like this to be dynamic and not statically coded. I am using templates I would like the main content to be the only thing editable.

This is my HTML code for the navigation bar:

<ul id="navbar">
  <li><a href="../index.html" ><img id="theImg" src="../images/Buttons/homeBtn.jpg" name="homebtn" alt="Home" border="0" /></a></li>
  <li><a href="../pages/about.html"><img src="../images/Buttons/aboutBtn.jpg" alt="About" border="0" /></a></li>
  <li><a href="../pages/mediapages/media.html"><img src="../images/Buttons/mediaBtn.jpg" alt="Media" border="0" /></a></li>
  <li><a href="../pages/downloads.html"><img src="../images/Buttons/downloadBtn.jpg" alt="Download"  border="0" /></a></li>
  <li><a href="../pages/contactpages/contacts.html"><img src="../images/Buttons/contactBtn.jpg" alt="contact"  border="0" /></a></li>
  <li><a href="../pages/blog.html" target="_blank"><img src="../images/Buttons/blogBtn.jpg" alt="blog" border="0" /></a></li>
</ul>

and the JavaScript code:

var examplehtml = [['http://example.com/'],['http://www.example.com/']];
var navRoot = document.getElementById("navbar").getElementsByTagName("img");
var currentpage = document.location.href; 
if(currentpage == examplehtml [0] || currentpage == examplehtml [1] ){
  navRoot[0].src = "../images/Buttons/homeBtn2.jpg";
  return;
}

var indexpage = currentpage.search(/index.html/);
var aboutpage = currentpage.search(/about.html/)
var mediapage = currentpage.search(/mediapages/);
var downloadpage = currentpage.search(/downloads.html/);
var contactpage = currentpage.search(/contacts.html/);
var commentsentpage = currentpage.search(/comment_sent.html/);


if(indexpage>-1){navRoot[0].src = "../images/Buttons/homeBtn2.jpg";return;}
if(aboutpage>-1){navRoot[1].style.border='1px solid #fff';return;}
else if(mediapage>-1){navRoot[2].style.border='1px solid #fff';return;}
else if(downloadpage>-1){navRoot[3].style.border = '1px solid #fff';return;}
else if(contactpage>-1){navRoot[4].style.border='1px solid #fff';return;}
else if(commentsentpage>-1){navRoot[4].style.border = '1px solid #fff';return;}
}
window.onload = Getcurrentpage;

I was wondering is there a better way of doing this or anything I can do to improve performance?

Upvotes: 2

Views: 16404

Answers (4)

Muhammad Kashif
Muhammad Kashif

Reputation: 93

HTML

<nav class="topnav">
    <a href="index.html">Home</a>
    <a href="jobs.html">Jobs</a>
    <a href="apply.html">Apply</a>
    <a href="about.html">About</a>
</nav>

JS

for (var i = 0; i < document.links.length; i++) {
   if (document.links[i].href === document.URL) {
       document.links[i].className = 'current';
   }
}

Upvotes: 0

elad silver
elad silver

Reputation: 9665

This did the trick for me:

  var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
  var domain_index =  window.location.href.indexOf(domain);
  var long_app_name = window.location.href.slice(domain_index+domain.length+1); 
  // this turns http://www.example.com/whatever/whatever to whatever/whatever
  app_name = long_app_name.slice(0, long_app_name.indexOf('/')); 
  //now you are left off with just whatever

then you use jquery to add class active 

$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');

and of course the css:

.active{background:red;}

this works if you have your html like this:

<ul><li><a href="ee">ee</a></li><li><a href="dd">dd</a></li></ul>

this will atumatically add class active using the page url and color your background to red if your in www.somesite.com/ee thaen ee is the 'app' and it will be active

Upvotes: 0

Thomas Shields
Thomas Shields

Reputation: 8942

Keep your JS and CSS separate; first off put that styling in the CSS: CSS:

  .current {
    color:red; 
    border:1px solid red;
  }

HTML: 

<nav>
  <a href="home.html">Home</a>
  <a href="products.html">Products</a>
  <a href="about.html">About</a>
  </nav>

JS: 

var url = "http://example.com/products.html".split("/"); //replace string with location.href
var navLinks = document.getElementsByTagName("nav")[0].getElementsByTagName("a");
//naturally you could use something other than the <nav> element
var i=0;
var currentPage = url[url.length - 1];
for(i;i<navLinks.length;i++){
  var lb = navLinks[i].href.split("/");
  if(lb[lb.length-1] == currentPage) {
   navLinks[i].className = "current";

  }
  }

Here's a live example.

Upvotes: 5

eddyrolo
eddyrolo

Reputation: 347

You shouldn't have presentational markup (e.g. borders) in your html.

You can use a unique id on each link and a matching class identifier on your body element and use CSS to apply the border style.

Although it's not exactly dynamic, something like:

HTML: 

<body class="home">



<a href="home.html" id="home">


CSS:

.home a#home {

     border-color: red;
}

Your main challenge is getting the current page filename. It can get a bit sticky if you are/plan on using server-side scripting and have variables appended to your URL e.g ?p=45252463&x=234

I found this, should help:

http://www.richnetapps.com/automatically_highlight_current_page_in/

Upvotes: 2

Related Questions