SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    If URL contains this string then hide div?

    How do I show/hide a div based upon a number located anywhere in the URL such as '1234'?

    Thank you

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Code:
    if (window.location.search.search(/1234/)) document.getElementById('idofthedivtohide').display = 'none'
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is the code I used:
    <script>
    if (window.location.search..search(/1234/)) document.getElementById('notBarEnds').display = 'none'
    </script>
    <div id="notBarEnds">this is not bar ends</div>

    But it doesn't seem to work. This a URL example that I used:
    http://website.com/product/s1234/martini-glass.html

    any ideas why its not working for me?

    Thanks

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    window.location.search contains only the querystring part (including the question mark) of the URL. In your case it would be blank, since you don't have a querystring at all.

    http://website.com/product/s1234/mar...html?test=1234, for instance, would work.

    There could also be a problem with using search(), since that will return the position of the first occurance of the value you're searching for. If you're searching for "1234" in a string with search() and the string you're searching in starts with "1234", the position returned would be 0, which would make the if statement return false. Probably not what you want.

    You could do it like this instead:
    Code:
    if (/1234/.test(window.location.href)) {
    	document.getElementById('notBarEnds').display = 'none';
    }

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Even once you get your code the way you need it won't work as you're targeting an element that doesn't exist in the DOM yet as fas as your JavaScript is concerned, you need to execute your <script> code after your <div> otherwise you will get undefined errors if you look in your browsers developer console.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Script tags should always go just before the </body> tag - there should never be any page content below them.

    There are a couple of exceptions where the script goes in the head but those don't interact with the content of the page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried the below code neither one worked. Any ideas?

    Code:
    <!doctype html>
    <html>
      <head>
        <title>My Uploads</title>
        <link rel="stylesheet" href="my_uploads.css" />
      </head>
      <body>
    <div id="notBarEnds">this is not bar ends</div>  
      <script>
    if (window.location.search..search(/123/)) document.getElementById('notBarEnds').display = 'none'
    </script>
    
    </body>
    </html>
    Code:
    <!doctype html>
    <html>
      <head>
        <title>My Uploads</title>
        <link rel="stylesheet" href="my_uploads.css" />
      </head>
      <body>
    <div id="notBarEnds">
    this is not bar ends
    </div>  
    
    
      <script>
    if (/1234/.test(window.location.href)) {
    	document.getElementById('notBarEnds').display = 'none';
    }
    </script>
     
    </body>
    </html>

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Code:
    document.getElementById('notBarEnds').display = 'none';
    should be
    Code:
    document.getElementById('notBarEnds').style.display = 'none';
    Don't know how I managed to get that wrong the first time. Anyhow, change that line in the second example and it should hopefully work.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @CletusSpuckler worked like a charm now. Guess it was just missing the style? But now I have one last request, how would I add multiple checks, for instance:

    if (/56722/ || /67781/.test(window.location.href)) {document.getElementById('notBarEnds').style.display = 'none';}

    The above is my attempt at saying 56722 or 67781 haha.

    In other words how can I add multiple number checks?

    Thanks for the help by the way guys.

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Code:
    if (/56722|67781/.test(window.location.href)) {

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you CletusSpuckler it worked perfect, I really appreciate it.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to do this with a span tag? I have only ever seen - getElementById & getElementsByClassName (<which doesn't seem to work for the span class)


    <span class="myClass">This is what I need to hide</span>

    Code:
    document.getElementById('notBarEnds').style.display = 'none';
    Thanks

  13. #13
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about straight CSS?

    CSS
    Code:
    #hidden {display:none;}
    
    body form[action="someurl.html?1234"] #hidden {display:block;}
    HTML
    Code:
    <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.

    Last edited by wilburlikesmith; May 13, 2014 at 17:05. Reason: Styling and spacing


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •