Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-01-22
8
Medium Priority
?
269 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
[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
  • 4
  • 4
8 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 

Author Comment

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

http://www.fairhavenpianolessons.com/jquery/test.html
0
 
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

Quick Start: DOCKER

Sometimes you just need a Quick Start on a topic in order to begin using it.. this is just what you need to know to get up and running with Docker!

Question has a verified solution.

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

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…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
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)

730 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