I need to hide a div if the url of the page contains a certain word. Thanks to this site I have been able to successfully find if the url contains the word. This code works:

<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
alert("your url contains bar ends");
}
</script>

but for some reason it will not work to hide a div, like this:

<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
</script>

<div id="notBarEnds">this is not bar ends</div>

Anyone have any idea what is wrong with this code? Any help is greatly appreciated Thanks

I need to hide a div if the url of the page contains a certain word. Thanks to this site I have been able to successfully find if the url contains the word. This code works:

<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
alert("your url contains bar ends");
}
</script>

but for some reason it will not work to hide a div, like this:

<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
</script>

<div id="notBarEnds">this is not bar ends</div>

Anyone have any idea what is wrong with this code? Any help is greatly appreciated Thanks

• javascript
• jquery
• url
• hide
• contains

• 1 Defer the execution of that snippet, because the element does not exist (yet) when the script is evaluated. – Rob W Commented Jul 11, 2012 at 15:55
• Based on what you've provided, you're not invoking this code on DOM ready, therefore the element $('#notBarEnds') is not prepared and you cannot invoke events against it. wrap this in $(function(){ //code }) – Ohgodwhy Commented Jul 11, 2012 at 15:55
• 1 I think you can also put a $(document).ready() around the js and it will work – Matt Hintzke Commented Jul 11, 2012 at 15:56

4 Answers 4

Notice the reorder:

<div id="notBarEnds">this is not bar ends</div>

<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
</script>

Or

<script type="text/javascript">
$(document).ready(function () {
    if (window.location.href.indexOf("Bar-Ends") != -1) {
        $("#notBarEnds").hide();
    }
}
</script>

Waiting for the entire document to be "ready"

Try:

$(document).ready(function () {
  if (window.location.href.indexOf("Bar-Ends") != -1) {
    $("#notBarEnds").hide();
  }
});

Your div hasn't necessarily loaded yet when the script runs.

You're running an inline script as the HTML is being constructed, there isn't a div named #notBarEnds at the time that the script runs, you need to run it as a function after the document has loaded.

i write it without checking it, if doesn't work change de regex :D

$(document).on('ready', function()
{
    if(window.location.href.match(/Bar\-Ends/i))
        $("#notBarEnds").hide();
});