Solved

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

Posted on 2013-01-22
8
263 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 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
pass foreach data in php into jquery ajax 10 76
Jquery Bold 3 specific words in a paragraph 5 40
how to use jquery variable in mysql query 20 77
CSS (jquiry mobile) question 3 34
DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
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)

734 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