www.webdeveloper.com
Results 1 to 3 of 3

Thread: Trying to hide a div based on parameter in URL

  1. #1
    Join Date
    Feb 2014
    Posts
    1

    Trying to hide a div based on parameter in URL

    Hi guys, first time posting... :-)

    I'm trying to hide a div based on parameter in my URL. I can't seem to get it to work. I've tried different approaches, which I will show below... can someone help me figure out why all of these don't work? I know that the evaluation of the URL parameter is working, because the correct "URL parameter found" and "URL parameter not found" displays each time... however the actual code to hide the div doesn't work. Any suggestions? I'm open to anything. Well... almost anything. :-) haha!

    All of these assumes that I have a div called "canam": <div id="canam">
    APPROACH 1 - Using JQuery - Note: Yes, I am trying to hide the div in both conditions... only for testing, because I just wanted to see if I could get it to work anywhere. Obviously, I will be removing it from the else area once this works:
    Code:
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    // jQuery Show / Hide Div based on URL parameter
    if(window.location.href.indexOf("&Manufacturer=18&") > -1){
      document.write("<h1>URL Parameter Found</h1>");
      $('#canam').hide();
    } else {
      document.write("<h1>URL Parameter Not Found</h1>");
      $('#canam').hide();
    }
    </script>
    APPROACH 2 - Note: Yes, I am trying to hide the div in both conditions... only for testing, because I just wanted to see if I could get it to work anywhere. Obviously, I will be removing it from the else area once this works:
    Code:
    <script language="javascript" type="text/javascript">
    if(window.location.href.indexOf("&Manufacturer=18&") > -1){
      document.write("<h1>URL Parameter Found</h1>");
      document.getElementById('canam').style.display = "hidden"; // hide body div tag
    } else {
      document.write("<h1>URL Parameter Not Found</h1>");
      document.getElementById('canam').style.display = "hidden"; // hide body div tag
    }
    </script>
    APPROACH 3 - Note: This time, I commented out the div tag line ( <div id="canam"> ) so that it would not be in the code. Then I had this code above it, to try to dynamically create the div tag:
    Code:
    <script language="javascript" type="text/javascript">
    if(window.location.href.indexOf("&Manufacturer=18&") > -1){
      document.write("<h1>URL Parameter Found</h1>");
      document.write("<div id=\"canam\" style=\"display:hidden;\">");
    } else {
      document.write("<h1>URL Parameter Not Found</h1>");
      document.write("<div id=\"canam\">");
    }
    </script>
    I would so appreciate any kind assistance. I'm not very experienced in javascript, so I do something idiotic, please bare with me.

  2. #2
    Join Date
    Mar 2014
    Posts
    1
    Not an javascript expert either but found moving the script below the div worked with some slight changes.

    Code:
    <div id="canam">test</div>
    <script language="javascript" type="text/javascript">
    if(window.location.href.indexOf("&Manufacturer=18&") > -1){
      document.write("<h1>URL Parameter Found</h1>");
      document.getElementById("canam").style.display = 'block';
    } else {
      document.write("<h1>URL Parameter Not Found</h1>");
      document.getElementById("canam").style.display = 'none';
    }
    </script>

  3. #3
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    986
    wwviper essentially hit on two things what might be problems here.

    The first would be making sure this script executes after the <div> has been created. You could either put the script directly after the <div> or place it at the end of your body (right before the closing </body> tag).

    The second thing was you were using a value of 'hidden' for the display property, which is invalid. 'none' would be the correct value to hide the element and 'block' would be the default for a visible <div> element. Though I'm not sure what was wrong with the jQuery version, assuming the code runs after the <div> element is created on the page.

    Anyway, regardless of how you have things organized I would just use the window's load event to trigger your code so that it will always run after the <div> element is ready and should work every time. And I'll throw in a nice little url argument/parameter parser function I've been using to simplify things:
    Code:
    <script>
    function $_URL() {
      var vars = {};
      var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; });
      return vars;
    }
    var $_GET = $_URL();
    (function(){
    	if($_GET["Manufacturer"] !== undefined && $_GET["Manufacturer"] == "18"){
    		document.write("<h1>URL Parameter Found</h1>");
    		document.getElementById('canam').style.display = "none";
    	} else {
    		document.write("<h1>URL Parameter Not Found</h1>");
    		document.getElementById('canam').style.display = "none";
    	}
    })();
    </script>
    Also, I don't know if that document.write() line is just for testing purposes or not. If it is you should use console.log() instead and just press F12 and check the console tab. Otherwise you have to be careful with the document.write() function as it shouldn't be called in scripts in your <head> tag (I don't really know where you have your script located in the source code).
    Last edited by Sup3rkirby; 03-21-2014 at 02:02 PM.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles