How to set the current page Nav button - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
June 19, 2014 at 10:18 pm #173215
cyclingg
Participant
Why is it every time I spend quite a bit of time writing my post, it gets deleted when I hit the submit button? It’s frustrating when I worded it just right and now I know I will miss something. Well, here goes; again.

I created a navigation bar using javaScript. All the buttons work as far as the images change as you mouse over the buttons. The codePen below shows how this works.

http://codepen.io/cyclingg/pen/DktcK

I am now trying to have the button on the current page stay depressed and the depressed.png image displays. Everything I tried did not work so far.

Here is what I tried:
1. I added this function to the bottom on my .js file.
//display correct image for current page
function setCurrent()
{
//get all tags in the HTML document as an array
var anchorArray = document.getElementsByTagName(“a”);
//loop through the array and bind the setCurrent events
for (var j = 0; j < anchorArray.length; j++)
{
var anchor = anchorArray[j];
}
}
window.onload = setCurrent;
The current page button did stay depressed; but, it also stayed on the default.png image. Also, all the other buttons did not change their image when the cursor moved over them.
1. function setCurrent()
  {
  var img;
  var anchor = document.getElementsByTagName(“a”);
  
  if (img.id === “homeBtn” && anchor.id === “current”)
  {
  img.src = “images/nav/home-pressed.png”;
  }
  else if (img.id === “dealsBtn” && anchor.id === “current”)
  {
  img.src = “images/nav/deals-pressed.png”;
  }
  }
  I added this function to the <body> tag like this: <body onload = setCurrent>.
  This did nothing.
2. This one I tried at the very beginning.
  I set the image for the current page in the CSS file like this:
  #nav a#current
  {
  color: #fff; background: #904429; background-image: url(“images/nav/home-pressed.png”);
  cursor: default;
  }
  This also did not work.
Am I close to what I want to do? I think I need to have the function compare the url to the current pages url and set the image that way; but, cannot get this part done. Any help would be appreciated.

Cross my fingers this posts this time.

Thanks.
June 20, 2014 at 1:42 am #173223

Paulie_D
Member

If you try an inclue too many links or the dread words ESS EEE OHH…or you don’t get the code indented right…CSS-Tricks will put the post ‘on hold’.

I’ll go through and delete any copies.

I’ve seen a script for current page = link somewhere I’ll try and dig it up,

Also, a search on Stack Overflow will turn something up, I’m sure.

June 20, 2014 at 1:46 am #173228
Paulie_D
Member
OK…

Using Jquery
```
$(function(){

    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);

    $('nav ul li a').each(function() {
    if ($(this).attr('href') == pathname)
    {
        $(this).addClass('current');
    }
    });
});
```
As I understand it…this looks looks for a link in your menu with the same href as through the current window pathname and the applies a class to that link.

Then you can just style the .current link anyway you want to basic CSS.
June 20, 2014 at 2:14 am #173231

cyclingg
Participant

I need my code to be javaScript; I am learning javaScript at the moment.

I looked for a search option in this forum and did not see one. Is there a search option?

I Googled this and all answers I saw were in jQuery. There has to be a way to do this in javaScript. I will have to keep trying things out tomorrow.

June 20, 2014 at 2:24 am #173234

Paulie_D
Member

I looked for a search option in this forum and did not see one. Is there a search option?

See the magnifying glass under the logo…?

Type next to it.

June 20, 2014 at 9:29 am #173297

cyclingg
Participant

You know, I did not notice that. I was looking in the forum, where “favorite” and “unsubscribe” are.

Thanks for pointing it out for me.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘JavaScript’ is closed to new topics and replies.