Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

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

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
theideabulb
Asked:
theideabulb
  • 4
  • 4
1 Solution
 
leakim971PluritechnicianCommented:
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
 
theideabulbAuthor Commented:
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
 
leakim971PluritechnicianCommented:
please share a link to see your page
did you fix my mistake line 9 : $(this) instead $('#box1')
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
theideabulbAuthor Commented:
here is a link you can try it.  

http://www.fairhavenpianolessons.com/jquery/test.html
0
 
leakim971PluritechnicianCommented:
don't use $(this).click(..
but : $('#box1,#box2,#box3').click(...
0
 
theideabulbAuthor Commented:
ok, it seems like its working, does everything look right to you?
0
 
leakim971PluritechnicianCommented:
look fine now
0
 
theideabulbAuthor Commented:
Thank you!
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now