Solved

How to pass id so that i don't need mulitiple jquery calls

Posted on 2013-01-22
8
253 Views
Last Modified: 2013-01-22
Using this maphilight script, i am trying to make it so that when a user clicks the spot on a map, it stays active and lit.  I don't want to add a ton of calls for each box that can be lit.  Is there a way to call it once, by passing the id or something else.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.maphilight.min.js"></script>
	
	<script type="text/javascript">$(function() {
		
		$('.map').maphilight();
		
			
			$('#box1').click(function(e){
				//alert("#box1");
				e.preventDefault();
				var data = $('#box1').mouseout().data('maphilight') ||
				{};
				data.alwaysOn = !data.alwaysOn;
				$('#box1').data('maphilight', data).trigger('alwaysOn.maphilight');
			});
		
		
		$('#box2').click(function(e) {
            e.preventDefault();
            var data = $('#box2').mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $('#box2').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
		$('#box3').click(function(e) {
            e.preventDefault();
            var data = $('#box3').mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $('#box3').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
        
	});
	
	</script>
	
	
	<!---<cfoutput>#mapText#</cfoutput>
	<br><br>--->
	
	<script>
		<cfoutput>#mapText#</cfoutput>
	</script>

We would now like to understand in more detail what specifically, if anything, you particularly like about this information.<br><br>
Please <b>click once</b> on the concept items that you <b>like the most. (By this we mean which ones would motivate you to recommend this product).</b><br><br>
<i><font color=navy>You can click on up to 3 items. You will see <img src=http://www.mdlinx.com/mr_/survey_images/43503_2013/43503_2013_17.JPG> when scrolling over the clickable parts of the concept </font>
<p>
<img class="map" src="http://www.mdlinx.com/mr_/survey_images/43503_2013/43503_2013_9.png" width="950" height="672" border="0" usemap="#Map">
<map name="Map" id="Map">
<area id="box1" shape="rect" coords="609,538,922,597" href="#"  alt="orange box" onclick="addMapClick(this.id); return false;" />
<area id="box2" shape="rect" coords="589,284,948,538" href="#"  alt="graph" onclick="addMapClick(this.id); return false;" />
<area id="box3" shape="rect" coords="65,521,518,619"  href="#"  alt="Usage of Rice hydrolyzates for CMPA" onclick="addMapClick(this.id); return false;" />
<area id="box4" shape="rect" coords="366,396,583,521" href="#"  alt="The clinical tolerance of Aptamil RH" onclick="addMapClick(this.id); return false;" />
<area id="box5" shape="rect" coords="368,309,585,397" href="#"  alt="Therefore Aptamil RH is a perfect" onclick="addMapClick(this.id); return false;" />
<area id="box6" shape="rect" coords="26,419,302,480"  href="#"  alt="It has been clinically proven to" onclick="addMapClick(this.id); return false;" />
<area id="box7" shape="rect" coords="26,374,308,419"  href="#"  alt="Does not contain lactose" onclick="addMapClick(this.id); return false;" />
<area id="box8" shape="rect" coords="26,343,285,374"  href="#"  alt="Is cows milk and soy protein free" onclick="addMapClick(this.id); return false;" />
<area id="box9" shape="rect" coords="26,309,331,343"  href="#"  alt="Aptamil RH, designed by Nutricia" onclick="addMapClick(this.id); return false;" />
<area id="box10" shape="rect" coords="26,198,906,274"  href="#"  alt="Aptamil RH (Rice Hyrolyzate) is a new" onclick="addMapClick(this.id); return false;" />
<area id="box11" shape="rect" coords="26,145,912,198"  href="#"  alt="Many doctors have a positive opinion" onclick="addMapClick(this.id); return false;" />
<area id="box12" shape="rect" coords="26,61,710,145"   href="#"  alt="Treating Cows Milk Protein Allergy" onclick="addMapClick(this.id); return false;" />
<area id="box13" shape="rect" coords="728,29,912,133"  href="#"  alt="logo" onclick="addMapClick(this.id); return false;" />
</map>
<script>

var clickCounter
clickCounter = 0;
function addMapClick(clicktext)
{
var objectToHighlight = clicktext;
//alert(objectToHighlight);

var radioIndex = -1;

switch(clicktext)
{
case 'logo':
radioIndex = 0;
break;
case 'graph':
radioIndex = 1;
break;
case 'orange box':
radioIndex = 2;
break;
case 'Treating Cows Milk Protein Allergy':
radioIndex = 3;
break;
case 'Many doctors have a positive opinion':
radioIndex = 4;
break;
case 'Aptamil RH (Rice Hyrolyzate) is a new':
radioIndex = 5;
break;
case 'Aptamil RH, designed by Nutricia':
radioIndex = 6;
break;
case 'Is cows milk and soy protein free':
radioIndex = 7;
break;
case 'Does not contain lactose':
radioIndex = 8;
break;
case 'It has been clinically proven to':
radioIndex = 9;
break;
case 'Therefore Aptamil RH is a perfect':
radioIndex = 10;
break;
case 'The clinical tolerance of Aptamil RH':
radioIndex =11;
break;
case 'Usage of Rice hydrolyzates for CMPA':
radioIndex =12;
break;

}


if( (radioIndex!=(document.getElementById("cqhiddata4").value)-1) && (radioIndex!=(document.getElementById("cqhiddata5").value)-1) && (radioIndex!=(document.getElementById("cqhiddata6").value)-1) )
{
  clickCounter += 1;
}

if(clickCounter == 1)
{
  if( document.getElementById("cqhiddata4").value=='' )
   {
    document.getElementById("cqhiddata4").value=radioIndex+1;
    }
  else
   {
     document.getElementById("cqhiddata4").value='';
     clickCounter=clickCounter-1;
    }
}

if(clickCounter == 2)
{
  if( document.getElementById("cqhiddata5").value=='' )
   {
    document.getElementById("cqhiddata5").value=radioIndex+1;
     }
  else
   {
     document.getElementById("cqhiddata5").value='';
     clickCounter=clickCounter-1;
    }
}


if(clickCounter == 3)
{

  if( document.getElementById("cqhiddata6").value=='' )
   {
    document.getElementById("cqhiddata6").value=radioIndex+1;
    }
  else
   {
     document.getElementById("cqhiddata6").value='';
     clickCounter=clickCounter-1;
    }

}


}

</script>
<input type="hidden" name="cqhiddata4" id="cqhiddata4">
<input type="hidden" name="cqhiddata5" id="cqhiddata5">
<input type="hidden" name="cqhiddata6" id="cqhiddata6">

Open in new window

0
Comment
Question by:theideabulb
  • 4
  • 4
8 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38806341
use : $(this) :

	<script type="text/javascript">$(function() {
		
		$('.map').maphilight();
		
			
			$('#box1,#box2,#box3').click(function(e){ // or use a common class
				e.preventDefault();
				alert( $(this).attr("id") );
				var data = $('#box1').mouseout().data('maphilight') || {};
				data.alwaysOn = !data.alwaysOn;
				$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
			});
        
	});
	
	</script>

Open in new window

0
 

Author Comment

by:theideabulb
ID: 38806463
when you click to turn off the highlight, it seems to be shutting others off as well.  For example you click box 1,2,3 and then decide to unclick box 3, it's shutting of the others as well.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38806483
please share a link to see your page
did you fix my mistake line 9 : $(this) instead $('#box1')
0
 

Author Comment

by:theideabulb
ID: 38806502
here is a link you can try it.  

http://www.fairhavenpianolessons.com/jquery/test.html
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 82

Expert Comment

by:leakim971
ID: 38806514
don't use $(this).click(..
but : $('#box1,#box2,#box3').click(...
0
 

Author Comment

by:theideabulb
ID: 38806600
ok, it seems like its working, does everything look right to you?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38806622
look fine now
0
 

Author Closing Comment

by:theideabulb
ID: 38806681
Thank you!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now