Can I hide a div based on whether the URL contains a string such as "page="

Question

I am working with a SAAS CMS and there is no variable for me to grab if I am on a section landing page or a paginated page. I need to be able to hide a div if I am on a page that contains "?page=" in the URL. Is there any successful way to do this with jQuery? I have tried several solutions offered up on SO, but none of the solutions I have tried works for my situation.

Just adding another note here. URLs out of the CMS that need to be targeted are looking like this foo?page= or bar?page= so I am just trying to detect the ?page= portion and hide the div if that is present. Thanks!

Have tried:

$(document).ready( function() {
if (/\/?page=\//.test(window.location)) {
    $('#collection-description').hide();
    }
 });

and

$(document).ready( function() {
       if ($('a[href*=page']).size() > 0) {
      $('#collection-description').hide(); 
   }
});

Any other directions to try would be awesome. Thanks!

Saying "if I am on a page that contains "?page=" in the URL", did you mean you want to check URL of the page where you are or to check if there are any links that have such parts in URL? — RReverser, Jul 16 '11 at 14:33
I need to check if I am actually on a URL that contains "page=" in the address. — Jamie, Jul 16 '11 at 16:02

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

Try taking a look at these pages:

Get current URL in JavaScript?

https://developer.mozilla.org/en/DOM/window.location

You should be able to to use window.location.search to break out the elements you need. All major browsers should support this, though I haven't tested them myself.

So you could try something like this for the detection:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
  <title></title>
  <script type="text/javascript" src="jquery-1.6.2.min.js"></script>

  <script type="text/javascript">
  function matchSearchLocation(key) {
     var list = window.location.search.split("&");

     for (var i=0;i<list.length;i++) {
       var item = list[i].split("=")[0];
       if (i === 0) 
         item = item.substr(1,item.length - 1);

       if (item === key) return true;
     }
    return false;
  }

  $(document).ready(function(){
    if (matchSearchLocation("page"))
      $(".container").hide();    
    else
      $(".container").show();
  })

  </script>

  <style type="text/css">
    .container {
      background-color:#000;
      width:100px;
      height:100px;
    }
  </style>
  </head>
  <body>
   <div class="container">
   </div>
  </body>
</html>

edited May 23 '17 at 12:23

Community

1
1

answered Jul 16 '11 at 14:41

unscene

186
1
9

He knows how to get an URL. His problem is breaking it out. – Lightness Races in Orbit Jul 16 '11 at 14:47
Updated my comment with solution :D – unscene Jul 16 '11 at 14:57
@unscene What do you mean by just call var found = matchSearchLocation("path")? – Jamie Jul 16 '11 at 15:48
Run that check and if it passes call hide on your selector – unscene Jul 16 '11 at 16:32
@Jamie I just tested this and it works for me. Though I am not using toggle. – unscene Jul 17 '11 at 18:16
Sorry for the late follow up. Had to take a day away from the computer. This works perfectly. I had your method mostly working and really went back and forth between your answer and Gert's. The advantage here is I can use any method on the container after the script runs, though I have learned something from both. I changed your code above to run .addClass() to the container and it works great. Thanks for taking your valuable time to follow up with me I really appreciate it a lot. – Jamie Jul 18 '11 at 13:01
@unscene what if I want to hide a div based on the parameter value? Example ?page=test .. So, if the URL parameter of ?page contains the value "test", hide certain div. – iceiceicy Nov 02 '20 at 23:42

Gert Grenander · Answer 2 · 2011-07-18T11:45:43.110

1

The back button is always a pain. You could probably check it like this:

<script type="text/javascript">
  var showHideDone=false,
      checkState=setInterval(function() {
        if (!showHideDone) { // Has the initation of the show/hide been done?
          showHideContainer(); // Let's show/hide the container
        }
      },100); // Every 100ms, check if the show/hide has been done

  function showHideContainer() {
    var SplitURL=document.location.href.split('?'), // First we split the URL into its major pieces
        URLHasPage=SplitURL.length>1 && 
                   SplitURL[1].substr(0,5)==='page='; // Then we check if the URL has a query string and if 'yes', we check if it starts with 'page='

    $("#collection-description").toggle(!URLHasPage);

    showHideDone=true;
  };
</script>

I'm using the toggle() function, since it allows for a boolean value. If you use hide(), you'll use the approach you're already using (the if statement).

edited Jul 18 '11 at 11:45

answered Jul 16 '11 at 15:24

Gert Grenander

16,866
6
40
43

Thanks Gert! Trying this now. – Jamie Jul 16 '11 at 15:33
So this is giving me no love with toggle :/ With .hide it works but only once when I go back to the url that does not contain "page=" I'm still hidden. – Jamie Jul 16 '11 at 15:46
Thanks for the update Gert! So close now :-) It's working great but only in reverse now, showing on page= and hiding on the root. Fiddling with it now. – Jamie Jul 16 '11 at 17:16
Stumped. Not the greatest at this, but usually I can noodle through and get it through trial and error. I cannot figure out why this is working in reverse. Any additional pointers you may benevolent enough to provide will bring you great karma :D – Jamie Jul 16 '11 at 19:49
Sorry for the late reply. The answer is to negate (in other words, saying "not") the toggle, like this: `$("#collection-description").toggle(!URLHasPage);`. The `!` is the "not". I've updated the code above. – Gert Grenander Jul 18 '11 at 11:50
Hi Gert! Thanks for the follow up. I had to take a day away from work. I really went back and forth on these and learned a bit from both. Thanks for the clarification on why this was running in reverse without the explicit not "!URLHasPage". In this situation the toggle method was adding too much delay at page load and I was still getting a peek at the container. I will definitely keep this in the toolbox and really appreciate you taking the time to explain the method you have outlined. I can see this coming in hand in the future and for anyone else who hits this thread. Thanks! – Jamie Jul 18 '11 at 13:05

score 0 · Answer 3 · answered May 14 '14 at 00:09

EDIT swop the display block with hidden for vice versa.

What about straight CSS?

CSS

#hidden {display:none;}

body form[action="someurl.html?1234"] #hidden {display:block;}

HTML

<a href="someurl.html?1234">some page</a>

<div id="hidden">

And if you need to change the action URL dynamically just put the CSS in the page head and Bob's someone's uncle :)

score 0 · Answer 4 · answered Jul 18 '11 at 11:50

0

The simple way to fetch url is

$(document).ready(function() {
    var href = $(location).attr('href');
var substr = href.split('/');
});

Split on / and then check if there is page in it.

answered Jul 18 '11 at 11:50

samir chauhan

1,543
1
17
42

Can I hide a div based on whether the URL contains a string such as "page="

4 Answers4