Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How do you show a div based on a URL parameter and have an "active" state part of an <a href> tag?

Posted on 2014-08-20
7
Medium Priority
?
244 Views
Last Modified: 2014-08-22
Hi,
 I have a Jquery function (thanks to Gary!).

I got it to work with some Idoc script and Java beans on the back end but now it is not quite doing what its supposed to do.

For some reason when you load the page and click one of the links the "contact info" div is the first one that always appears ( regardless of what you clicked).

Also I would like the active state to match the hover state (with the link turning black).

and finally, the corresponding div should automatically show when the parameter matches it. ( i.e. with there is a "?recipientId=5" then the Agent Info div should automatically show.

It's so close!!

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function() { 
  $("div a").click(function() {
        $("#ForMembers,#Coverage,#GenInfo").removeClass("active")
        $(this).closest("div").addClass("active")
        var v = $(this).attr("id");
        $("#recipientId").val(v);
		   lhash=location.hash
		if(lhash==""){
			lhash="#div6"
		}

		$("a[href='"+lhash+"']").closest("div").addClass("active");
		$(lhash).show();
		if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
	$("#contactForm").show();
		}
	else {
		$("#contactForm").hide ();
	}		
$('.show').click(function () {
    $('.label_copy').hide();
    $('#div' + $(this).attr('target')).show();
});

$('.hide').click(function () {
    $('.label_copy').hide();
});
  });
});
</script>

<script>
$(document).ready(function() { 
url = window.location.search.substring(1);  
urlvars = url.split('&');  
for (i = 0; i < urlvars.length; i++){  
    param = urlvars[i].split('=');  
    if (param[0] == "subjectId"){  
        $("#recipientId").val(param[1]) 
    }  
}
})
</script>



<style>
a.active { 
color:black;
 }
 .link.active { 
color:black;
 }

.ForMembers a {
	font-size:12px;
	font-family:Georgia, "Times New Roman", Times, serif;
}
.MemCovInfo.active {
background-color:#CCC;
width:685px;
}
.MemCovInfo {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:180px;
	height:95px;
	margin-top:-20px;
	    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;
	} 
	
	.MemCovInfo a {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    cursor:pointer;
	}
.MemCovInfo a:hover {
color:#000;
}
.MemCovInfo a.active {
color:#000;
}


.MemCovInfo:hover {
background-color:#CCC;
 color:#000;
 cursor:pointer;
}

.show.active {
color:#000;
}



#ForMembers {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:180px;
	height:95px;
	margin-top:-20px;
	    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;
	} 
	
	#ForMembers a {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    cursor:pointer;
	}
#ForMembers a:hover {
color:#000;
}
#ForMembers a.active {
color:#000;
}
#ForMembers.active {
background-color:#CCC;
}

#ForMembers:hover {
background-color:#CCC;
 color:#000;
 cursor:pointer;
}

	#Coverage {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
    width:200px;
	height:95px;	
	margin-left:205px;
	margin-top:-105px;
	   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;	
	}
	#Coverage:hover {
background-color:#CCC;
 cursor:pointer;
}
	#Coverage a  {	
	 font-family:Georgia, "Times New Roman", Times, serif;
   font-size:20px;
   color:#FFF;
	}
	
	#Coverage a.active {
color:#000;
}
#Coverage.active {
	background-color:#CCC;
}
	#Coverage a:hover  {
   color:#000;
	}	
	#GenInfo {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:190px;
	height:95px;
	font-size:14px;
	margin-left:430px;
	margin-top:-105px;
	   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;	
	}
	
	#GenInfo:hover {
	background-color:#CCC;
 cursor:pointer;
 }	
#GenInfo a  {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
  font-size:20px;
	}
		#GenInfo a.active {
color:#000;
}
#GenInfo.active {
	background-color:#CCC;
}
	#GenInfo a:hover {
	color:#000;
	}
	#contactForm {
		display:none;
	}
	
	.label_copy {
	display:none;
	}
</style>
</head>

<body>
<div id="ForMembers" class="MemCovInfo" style="margin-top:40px;" >
    <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
  
   <a id="1" class="link show" target="1" style="font-size:12px;">Report</a><br/>

 <a id="7" class="link show" target="7" style="font-size:12px;">Member </a><br/>
 
  <a id="8" class="link show" target="8" style="font-size:12px;">Patient </a>
  </div>
    	<div id="Coverage" class="MemCovInfo">
    	
    	  <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>
   	 
   	  <a id="3" class="link show" target="3" style="font-size:12px;">Get a Quote</a><br/>
   
    <a id="4" class="link show" target="4"  style="font-size:12px;">Apply for Coverage</a><br/>
    	   
    	   <a id="5" class="link show" target="5"  style="font-size:12px;">Find an Agent</a>
  	    
    	</div>
    	
    	<div id="GenInfo" class="MemCovInfo">
    <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
    	
    	 <a id="6" class="link show" target="6" style="font-size:12px;">Contact us by email</a>
    	
    	</div>
  
<div id="div1" class="label_copy">
<p>claim info</p>
</div>



  
   <div id="div7" class="label_copy">
  <p>member info</p>
 </div>
  
 
<div id="div8" class="label_copy">
<p>Patient info</p>
</div>


<div id="div3" class="label_copy">
<p>Quote info</p>
</div>


<div id="div4" class="label_copy">
<p>Coverage info</p>
</div>

<div id="div5" class="label_copy">
<p>Agent info</p>
</div>

<div id="div6" class="label_copy">
<p>contact info</p>
</div>

<form id="contactForm" name="contactForm" method="post" encType="multipart/form-data" />
 
        <input type="hidden" value="<!--$ssServerRelativeSiteRoot-->ContactUs/Form/index.htm?formSubmitted=1" name="RedirectUrl">
      
        <input type="hidden" id="recipientId" name="recipientId" value=""/>
    

  		<!-- Subject ------------------->
    	<div style="margin-bottom:10px;">
    	  <label for="emailSubject">Subject:</label><br />
          <input class="text" maxlength="80" size="40" type="text" name="emailSubject" id="emailSubject" />

        </div>
        
        <!-- Email ------------------->
		<div style="margin-bottom:10px;">
        	<label for="emailAddress">E-mail:</label><br />
    
        	<input class="text" size="30" type="text" name="emailAddress" id="emailAddress" maxlength="50" />

        </div> 
        
        <!-- Message ------------------->
		<div style="margin-bottom:10px;">
        	<label for="txt_Message">Message:</label><br />
       	<textarea id="txt_Message" name="txt_Message" rows="4" wrap="virtual" cols="42" maxlength="400"></textarea>
        </div>
</body>
</html>

Open in new window

0
Comment
Question by:smfmetro10
  • 3
  • 3
7 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40275949
If I'm understanding correctly what you are trying to accomplish, this version works. I added an else condition, moved a line and commented out two lines.
<script>
$(document).ready(function() { 
  $("div a").click(function() {
        $("#ForMembers,#Coverage,#GenInfo").removeClass("active")
        $(this).closest("div").addClass("active")
        var v = $(this).attr("id");console.log('anchor clicked, Id: ' + $(this).attr("id"));
        $("#recipientId").val(v);
		   lhash=location.hash;
		if(lhash!==""){
			$(lhash).show();
			//lhash="#div6";
		}else{			
			$('#div' + $(this).attr('target')).show();
		}

		$("a[href='"+lhash+"']").closest("div").addClass("active");
		//$(lhash).show();
		if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
	        $("#contactForm").show();
		}else {
		    $("#contactForm").hide ();
	}		
	$('.show').click(function () {
		$('.label_copy').hide();
		$('#div' + $(this).attr('target')).show();
	});
	
	$('.hide').click(function () {
		$('.label_copy').hide();
	});
  });
});
</script>

Open in new window

0
 
LVL 11

Accepted Solution

by:
Murfur earned 2000 total points
ID: 40276053
The contact info is the first to appear because you told it to (lines 16 & 17) and this is because have you base HTML wrong.

Each A link has no HREF attribute i.e. the destination anchor name, page or site address.
Each A link has an illegal TARGET attribute - should be _self (this page), _blank (a blank page) etc.

So location.href will always be blank in your jQuery line 16 hence lhash.show() always shows #div6, the contact info.

Secondly, using location.href will get the #ID from the URL so if you change your mind and click on a different link you will always get the same value, so possibly better to get attributes from the link itself.

$("a[href='"+lhash+"']").closest won't do anything because you don't have any A tags with the attribute HREF

Not quite sure what you were trying to achieve with the $('.show').click function but because all the links have class 'show' this also fires when you click a link, undermining the work in the previous function.

I've modified your code and it works as best as I can figure your logic (!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
	$(document).ready(function() {
	
		$("div a").click(function() {

			$("#ForMembers,#Coverage,#GenInfo").removeClass("active");
			$(this).closest("div").addClass("active");

			var v = $(this).attr("id");

			$("#recipientId").val(v);

		//	lhash = location.hash;
			lhash = $(this).attr("href").substring(1);

			if(lhash==""){
				lhash="6"
			}
	
			$("a[href='#"+lhash+"']").closest("div").addClass("active");

			$('.label_copy').hide();
			$('#div'+lhash).show();

			if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
				$("#contactForm").show();
			}
			else {
				$("#contactForm").hide ();
			}		

//			$('.show').click(function () {
//				$('.label_copy').hide();
//				$('#div' + $(this).attr('href')).show();
//			});
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});

	});
</script>

<script>
	$(document).ready(function() {

		url = window.location.search.substring(1);
		urlvars = url.split('&');

		for (i = 0; i < urlvars.length; i++){  
			param = urlvars[i].split('=');  

			if (param[0] == "subjectId"){  
				$("#recipientId").val(param[1]) 
			}  
		}
	})
</script>

<style>
	a.active { 
		color:black;
	}
	.link.active { 
		color:black;
	}
	
	.ForMembers a {
		font-size:12px;
		font-family:Georgia, "Times New Roman", Times, serif;
	}

	.MemCovInfo.active {
		background-color:#CCC;
		width:685px;
	}

	.MemCovInfo {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:180px;
		height:95px;
		margin-top:-20px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;
	} 
	
	.MemCovInfo a {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size: 20px;
		cursor:pointer;
	}

	.MemCovInfo a:hover {
		color:#000;
	}

	.MemCovInfo a.active {
		color:#000;
	}

	.MemCovInfo:hover {
		background-color:#CCC;
		color:#000;
		cursor:pointer;
	}
	
	.show.active {
		color:#000;
	}

	#ForMembers {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:180px;
		height:95px;
		margin-top:-20px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;
	} 
	
	#ForMembers a {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size: 20px;
		cursor:pointer;
	}

	#ForMembers a:hover {
		color:#000;
	}

	#ForMembers a.active {
		color:#000;
	}

	#ForMembers.active {
		background-color:#CCC;
	}
	
	#ForMembers:hover {
		background-color:#CCC;
		color:#000;
		cursor:pointer;
	}
	
	#Coverage {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:200px;
		height:95px;	
		margin-left:205px;
		margin-top:-105px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}

	#Coverage:hover {
	background-color:#CCC;
	cursor:pointer;
	}

	#Coverage a  {	
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:20px;
		color:#FFF;
	}
	
	#Coverage a.active {
		color:#000;
	}

	#Coverage.active {
		background-color:#CCC;
	}

	#Coverage a:hover  {
		color:#000;
	}	

	#GenInfo {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:190px;
		height:95px;
		font-size:14px;
		margin-left:430px;
		margin-top:-105px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}
	
	#GenInfo:hover {
		background-color:#CCC;
		cursor:pointer;
	}	
	#GenInfo a  {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:20px;
	}

	#GenInfo a.active {
		color:#000;
	}

	#GenInfo.active {
		background-color:#CCC;
	}

	#GenInfo a:hover {
		color:#000;
	}

	#contactForm {
		display:none;
	}
	
	.label_copy {
		display:none;
	}
</style>

</head>

<body>

	<div id="ForMembers" class="MemCovInfo" style="margin-top:40px;" >
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
	
		<a id="1" href="#1" target="_self" class="link show" style="font-size:12px;">Report</a><br/>
		<a id="7" href="#7" target="_self" class="link show" style="font-size:12px;">Member </a><br/>
		<a id="8" href="#8" target="_self" class="link show" style="font-size:12px;">Patient </a>

	</div>

	<div id="Coverage" class="MemCovInfo">
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>

		<a id="3" href="#3" target="_self" class="link show" style="font-size:12px;">Get a Quote</a><br/>
		<a id="4" href="#4" target="_self" class="link show" style="font-size:12px;">Apply for Coverage</a><br/>
		<a id="5" href="#5" target="_self" class="link show" style="font-size:12px;">Find an Agent</a>
	
	</div>
	
	<div id="GenInfo" class="MemCovInfo">

		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
	
		<a id="6" href="#6" target="_self" class="link show" style="font-size:12px;">Contact us by email</a>
	
	</div>

	<div id="div1" class="label_copy">
		<h2>claim info</h2>
	</div>

	<div id="div7" class="label_copy">
		<h2>member info</h2>
	</div>

	<div id="div8" class="label_copy">
		<h2>Patient info</h2>
	</div>

	<div id="div3" class="label_copy">
		<h2>Quote info</h2>
	</div>

	<div id="div4" class="label_copy">
		<h2>Coverage info</h2>
	</div>

	<div id="div5" class="label_copy">
		<h2>Agent info</h2>
	</div>

	<div id="div6" class="label_copy">
		<h2>contact info</h2>
	</div>

	<form id="contactForm" name="contactForm" method="post" encType="multipart/form-data" />

        <input type="hidden" value="<!--$ssServerRelativeSiteRoot-->ContactUs/Form/index.htm?formSubmitted=1" name="RedirectUrl" />
        <input type="hidden" id="recipientId" name="recipientId" value="" />

  		<!-- Subject -->
    	<div style="margin-bottom:10px;">

			<label for="emailSubject">Subject:</label><br />
			<input class="text" maxlength="80" size="40" type="text" name="emailSubject" id="emailSubject" />

        </div>

        <!-- Email -->
		<div style="margin-bottom:10px;">

			<label for="emailAddress">E-mail:</label><br />
			<input class="text" size="30" type="text" name="emailAddress" id="emailAddress" maxlength="50" />

        </div> 

        <!-- Message -->
		<div style="margin-bottom:10px;">

			<label for="txt_Message">Message:</label><br />
			<textarea id="txt_Message" name="txt_Message" rows="4" wrap="virtual" cols="42" maxlength="400"></textarea>

        </div>
        
	</form>

</body>
</html>

Open in new window



References FYI:
http://www.w3schools.com/tags/tag_a.asp
http://www.w3schools.com/tags/att_a_target.asp
0
 

Author Comment

by:smfmetro10
ID: 40279329
Murfur, Thanks for the reply.

Is it possible to automatically show a div based on the url parameter... if the url has ?recipientId=6 then the contact info will show. and the active state match the hover state?

The link that was clicked will stay black?

Thanks!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:Murfur
ID: 40279583
Yes, under $(document).ready(function() { the first line should be  $("#contactForm").show(); i.e. OUTSIDE the click function
0
 

Author Comment

by:smfmetro10
ID: 40279611
hmm... I dont think I have explained the question well enough.
 What I'm trying to do is show the corresponding div based on the URL.  For example if the URL has "?recipientId=8"  then "Patient info" will show
0
 
LVL 11

Expert Comment

by:Murfur
ID: 40279656
Ah, in that case here's a query plugin I found somewhere a few months ago and have used since:

(function($) {
    $.QueryString = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

Open in new window

Then you reference it thus:
var recipient = $.QueryString["recipientId"];
if(recipient == "8") {
    $("#contactForm").show();
}

Open in new window

0
 

Author Closing Comment

by:smfmetro10
ID: 40279722
Thanks!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question