0

https://i.stack.imgur.com/Q9OMB.png

Here's a little problem of mine. Basically I'm doing a theme for Ghost CMS but I've ran into a problem that has been bugging me for a few hours now and I can't solve this myself and haven't found a source of same kind of problem from google/sof neither.

My goal is to make a active page styling with different styles per page(home being red, about being blue etc) using jquery as I couldn't accomplish it in Ghost itself because it wants to rotate a single loop with same styles for all links.

Jquery Code so far

$(function(){  
  $('a').each(function() {
      if ($(this).prop('href') == window.location.href) {
      $(this).addClass('homeCurrent');}
      });  
});

Relevant HTML of navbar

<ul class= "nav navbar-nav navbar-left">
<li id="home" class="home hvr-sweep-to-top-home "><a href="/">Home</a></li>
<li id="about" class="about hvr-sweep-to-top-about"><a href="/page-about/">About</a></li>
</ul>

I've tried running different kinds of IF-statements with jquery but without success.

The logic of the code would go like :

if page is home = li style is homeCurrent

<ul class= "nav navbar-nav navbar-left">
<li id="home" class="home hvr-sweep-to-top-home homeCurrent"><a href="/">Home</a></li>
<li id="about" class="about hvr-sweep-to-top-about "><a href="/page-about/">About</a></li>
</ul>

if page is about = li style is aboutCurrent

<ul class= "nav navbar-nav navbar-left">
<li id="home" class="home hvr-sweep-to-top-home"><a href="/">Home</a></li>
<li id="about" class="about hvr-sweep-to-top-about aboutCurrent"><a href="/page-about/">About</a></li>
</ul>

Anyone?

Hopefully I included everything relevant.

Tony A
  • 3
  • 1

2 Answers2

0

Try with a switch statement:

$(function () {
    $('a').each(function () {
        var link = $(this).prop('href');
        if (link == window.location.href) {

            switch (link) {
                case "home":
                    $(this).addClass('homeCurrent');
                    break;
                case "about":
                    $(this).addClass('aboutCurrent');
                    break;
                default:
                    $(this).addClass('nothingactive');
            }
        }
    });
});

Edit*

If you really want to stick with this method of checking up the URL you could go for something like this:

$(function () {
    $('a').each(function () {
        var base = "http://www.yourdomain.com/";
        var link = base + $(this).prop('href');
        if (link == window.location.href) {

            switch (link) {
                case "http://www.yourdomain.com/home" :
                    $(this).addClass('homeCurrent');
                    break;
                case "http://www.yourdomain.com/about" :
                    $(this).addClass('aboutCurrent');
                    break;
                default:
                    $(this).addClass('nothingActive');
            }
        }
    });
});
Michelangelo
  • 5,888
  • 5
  • 31
  • 50
  • Wonderful piece of code!0 Didn't think about switch statement at all. That should work in theory but it's exporting class="nothingactive" all the time now for some reason. – Tony A Jul 04 '15 at 22:22
  • That is because it fails the cases. `window.location.href` will return you URL like: `window.location.href = 'http://www.google.com';` So it does not match any case probably and run the default. This is just an example by the way and you should modify it to your needs. – Michelangelo Jul 04 '15 at 22:38
0

Honestly, I would avoid using window.location.href comparisons as it just screams potential for problems to me.

What I would personally do would be to add to the CONTENT of the about page:

$(document).ready(function () {
   $('.about').addClass('aboutCurrent');
});

You add that code to each page you wish to have a xxxCurrent class added.

This avoids you having to dynamically do it as above which will run into problems depending on the url and browsers

Carl K
  • 974
  • 7
  • 18
  • Thanks for your answer Carl. I thought of doing that manually in CSS before but the structure of Ghost makes it impossible / very hard. It's because ghost has this "default.hbs" page, which has the basic static layout without the dynamic elements for every page and this includes the menu / footer n stuff . http://themes.ghost.org/v0.6.4/docs/structure – Tony A Jul 04 '15 at 22:27
  • @TonyA But the content of your "about" page should be unique only to the about page. If you added it to the content of the about page, it will only do that there. – Carl K Jul 04 '15 at 22:30
  • @TonyA also if you rely on `window.location.href` then any deviation, ie `about.html?post=true` will mean the about no longer will get the class – Carl K Jul 04 '15 at 22:36
  • @CarlK I agree with you, but maybe OP can't modify the structure. – Michelangelo Jul 04 '15 at 22:42
  • @Mikey the structure? – Carl K Jul 04 '15 at 22:45
  • @CarlK Yes, the html structure I mean including adding extra classes and ID's. OP is working with Ghost so I don't know if that is a template or something else. I think OP is limited. – Michelangelo Jul 04 '15 at 22:49
  • @Mikey but he notes at the top the existing html which already has the class specified. Nothing is being changed in the header so the structure should be fine – Carl K Jul 04 '15 at 22:53
  • This would work only if I had the own template for this static page. I could trying to inject it after the text inside the Ghost's text editor, but I would like to keep the actual writing / code away from each other. But It really seems like injecting it inside the text editor would be my only chance atm. OR change my navigation styling. http://themes.ghost.org/v0.6.4/docs/page-context There is a way to make a own template for the specific static pages but I haven't gotten this working – Tony A Jul 04 '15 at 22:54
  • @CarlK Ah missed that one. Yes I see it is an existing class now :) – Michelangelo Jul 04 '15 at 22:55
  • @TonyA , yes, if you are stuck to this template and system, then adding the code in the body of the page is the most efficient way of doing it. – Carl K Jul 04 '15 at 22:58