?
Solved

"mailto" link in clickable div disappears when clicked.

Posted on 2014-09-18
4
Medium Priority
?
328 Views
Last Modified: 2014-09-18
Hi,

I have a "mailto" link in a clickable div. The link actually brings up a mail client but it makes the text in the div disappear.

I have an example here:

http://thelocalized.com/matt/contact.html

If you click on "apply for coverage" it brings up a mailto link. Clicking the link makes the text in the div disappear.

Thanks for the help!


 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
    $("div a").click(function() {
        $("#Coverage").removeClass("active")
        $(this).closest("div").addClass("active")
        var v = $(this).attr("id");
        $("#recipientId").val(v);
    });
});
</script>
<script>
	$(document).ready(function () {	
			    $("div a:not(.button)").click(function () {			
			var v = $(this).attr("id");
			$("#recipientId").val(v);
		
			var 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 ();
			}
			$(".active").removeClass("active"); 
			if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");// do you mean that does'nt work
			$("#" + recipID).parent("div").addClass("active");// do you mean that does'nt work
		}
else {
   			$("#div6").show();
 			$("#6").addClass("active"); // please not 6 is not a valid id
			$("#6").parent("div").addClass("active"); // please not 6 is not a valid id
}
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});
          $(".active").removeClass("active");
		url = window.location.search.substring(1);
		urlvars = url.split('&');
		var recipID = '';

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

			if (param[0] == "recipientId"){  
				$("#recipientId").val(param[1]) 
				recipID = param[1];
			}  
		}
		if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");
			$("#" + recipID).parent("div").addClass("active");
			
		}
	});
</script>


<style>

	
	#Coverage {
		background-image:url(images/rectangle-med-blue-with-shadow.png);
		background-repeat:no-repeat;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 10px 5px;
		width:170px;
		height:95px;	
		margin-left:20px;
		margin-top:15px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}

	#Coverage:hover {
	background-image:url(images/rectangle-med-blue-with-shadow_H.png);
	cursor:pointer;
	}

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

	#Coverage.active {
		background-image:url(images/rectangle-dark-blue-with-shadow_B.png);
	}

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

	
	
	.label_copy {
		display:none;
	}
	#contactForm {
	width:610px;
	background-color:#F3F3F3;
	
	padding-left:20px;
	-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}
</style>

	
	
	<!--$if formSubmitted-->
			<title>The Doctors Company | Confirmation</title>
		<!--$else-->
			<title>The Doctors Company | <!--$tdcPageTitle--></title>
			<script language="JavaScript" type="text/javascript">
			function submitPage(){
				var SS= Spry.Widget.Form.validate(document.contactForm);
				document.forms["contactForm"].hdn_formaction.value="Submitted";
				document.forms["contactForm"].action="<!--$HttpCgiPath-->";
				if(SS==true){
				document.contactForm.submit();
				}
				//document.forms["contactForm"].submit()
				}
			</script>
			
			<style type="text/css">
			select	{
				font-size: 14px;
			}
			.truecaps {
				font-variant: small-caps;
				}
			fieldset	{
				margin-bottom:1em;
				padding-left:5px;
				border: 0px;
				border-top: 6px solid #5b6d82;
				border-bottom: 6px solid #5b6d82;
				background-color: #eceae9;
			}
			fieldset div {
				margin:0.5em 0;
			}
			legend	{
				display:none;
			}
			label	{
				line-height:20px;
				color:#565656;
			}
			.required	{
				color: #b41e1b;
			}
			input.text	{
				font-size: 11px;
    			/*height: 18px;*/
    			line-height: 11px;
    			margin-left: 0;
    			vertical-align: top;
    			width: 200px;
			}
			textarea {
				border: 1px solid #CCC; FONT-SIZE: 11px; MARGIN-LEFT: 0px; VERTICAL-ALIGN: top; WIDTH: 268px; LINE-HEIGHT: 11px; HEIGHT: 80px;
			}
			
			</style>


</head>

<body>

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

		<a id="3" href="#3" onClick="return false;" class="link">Get a Quote</a><br/>
		<a id="4" href="#4" onClick="return false;" class="link">Apply for Coverage</a><br/>
		<a id="5" href="#5" onClick="return false;" class="link">Find an Agent</a>
	
	</div>

	<div id="div1" class="label_copy">
<p>claims specialist</p>
	</div>

	<div id="div7" class="label_copy">
<p>Members</p>
	</div>

	<div id="div8" class="label_copy">
	<p>A patient safety/risk manager</p>
	</div>

	<div id="div3" class="label_copy">
		<p>Complete our simple form </p>
	</div>

	<div id="div4" class="label_copy">
			<a href="mailto:smfmetro@gmail.com"> Contact Us </a> Here is some text..It shouldn't disappear Here is some text..It shouldn't disappear Here is some text..It shouldn't disappearHere is some text..It shouldn't disappear Here is some text..It shouldn't disappearHere is some text..It shouldn't disappearHere is some text..It shouldn't disappearHere is some text..It shouldn't disappear Here is some text..It shouldn't disappear
	</div>

	<div id="div5" class="label_copy">
	<p>Apply for coverage</p>
	</div>

	
	<br/>
	                          

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

Open in new window

0
Comment
Question by:smfmetro10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40331547
In this function
$("div a:not(.button)").click(function () {...}

You hide everything with a class of .label_copy
0
 

Author Comment

by:smfmetro10
ID: 40331577
Ah- yes.
Is there a way to hide the div when the page loads but once it's open and you click the mailto link the text still stays....until another div is opened?
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40331592
Change this
$("div a:not(.button)").click(function () {      

to
$("#Coverage a:not(.button)").click(function () {      
0
 

Author Closing Comment

by:smfmetro10
ID: 40331608
Thank You!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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

770 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