Adding CSS class based on URL string through JQuery

Question

I have some JQuery written which is intended so when a user navigates to 'page/2/' in Wordpress, an image appears in the sidebar. It's CSS is set to display:none; initially, then I have JQuery change it to display:block; if that URL string is present. The code I wrote has it backwards... so it does this to every page BUT '/page/2/'.

$(document).ready(function() {

var url = window.location.pathname;
if(url.indexOf('/page/2/')){
    $('.sidebarimage').css("display","block");
}});

I always thought if there was no condition set in an If statement, it treats it as true, and anything else as false. Should I put a = 1 or something here? What am I missing?

Many thanks SO

JaredPar · Accepted Answer · 2012-01-21 21:36:05Z

4

The if block will be entered if the value of the condition is convertible to true. In Javascript any non-zero number is true and the return value of indexOf when the string is not found is -1. Hence any time it's not there it gives back -1 which is seen as true and the if block is entered.

Change the conditional to be explicit to what you're looking for

if (url.indexOf('/page/2/') !== -1) {
  $('.sidebarimage').css("display","block");
}

answered Jan 21, 2012 at 21:36

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

RCNeil Over a year ago

So before, when it DID find the /page/2/ string, it returned a 0 (false) instead of a 1? That was only time the true statement didn't actually carry through. Wouldn't it carry through for all tests then?

JaredPar Over a year ago

@RCNeil, It would carry through for every case except where the string began with "/page/2/"

RCNeil Over a year ago

So what # does that if-statement (my original) return when it does contain "/page/2/"? That's what I'm asking. I would think it would be 1, a non-zero #, and in turn, would have the TRUE statement carry through. It was not working when it contained "/page/2/" which makes me wonder what indexOf returns when it finds something....

JaredPar Over a year ago

@RCNeil it would return the index in the string where '/page/2/' begins.

RCNeil Over a year ago

ahhhhhhhhhhh, that clearly shows how little I know about some of the functions I'm using in JQuery. My head is still in PHP. Thanks for clearing that up.

Suraj Sharma · Accepted Answer · 2014-10-17 07:23:06Z

0

This Jquery Code will work only for home page

 $(document).ready(function() {

    var x = location.href;
    var y = location.hostname;
    var z = 'http://' + y + '/';

        if(x == z ){
        $('.class').css("display","block");
    }
        else{
        $('.class').css("display","none");
        }
    });

edited Oct 17, 2014 at 7:23

answered Oct 17, 2014 at 7:10

Suraj Sharma

11 bronze badge

Collectives™ on Stack Overflow

Adding CSS class based on URL string through JQuery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related