Solved

Use JQuery to take image map select and expand accordion element

Posted on 2014-03-21
9
1,373 Views
Last Modified: 2014-03-26
Wondering if you could help me with this bit of JavaScript.. The challenge is to identify the region selected on the image map (I added ID tags but any code I’ve tried only returns the ID of the <map> and not the <area> tag.  The second task is to change whatever accordion element currently has aria-expanded=’true’ to false and tabindex from 0 to -1.  Then based on the region select on map change the corresponding accordion element to aria-expanded = true and tabindex to 0.
 
I found some articles that explain approaches but I can’t get the proper id tag from the map to be shown let alone work with the aria and tabindex elements.
<LINK REMOVED> check why here
 
Any help you can give will be greatly appreciated.
 
//IMAGE MAP
<p>
<img alt="" contenteditable="false" src="http://www.hhs.gov/iea/images/regionsmap.jpg" style=" border: 0;" usemap="#Map">
<map id="Map" name="Map">
<area alt="Region 1" id="region-1" contenteditable="false" coords="581,157,604,113,625,117,637,143,613,198,591,211,589,179" href="#" shape="poly">
<area alt="Region 3" id="region-3" contenteditable="false" coords="552,235" href="#" shape="poly">
<area alt="Region 4" id="region-4" contenteditable="false" coords="503,280,496,269,474,268,434,299,416,341,418,378,432,392,509,395,547,454,559,433,526,378,529,357,583,294,577,284,495,296" href="#" shape="poly">
<area alt="Region 5" id="region-5" contenteditable="false" coords="345,130,353,202,400,204,414,225,404,250,429,292,440,290,443,281,458,276,471,261,498,261,508,248,511,217,482,217,492,206,472,167,463,152" href="#" shape="poly">
<area alt="Region 6" id="region-6" contenteditable="false" coords="212,298,204,379,215,380,218,373,231,374,264,413,274,401,317,449,338,462,333,433,342,421,361,409,371,400,389,401,408,405,431,404,421,388,400,385,407,376,409,360,408,345,418,311,369,310,327,306" href="#" shape="poly">
<area alt="Region 7" id="region-7" contenteditable="false" coords="273,218,270,237,292,243,293,294,364,298,373,304,414,301,411,308,423,308,425,299,401,246,404,221,398,210,353,209,349,219" href="#" shape="poly">
<area alt="Region 8" id="region-8" contenteditable="false" coords="165,112,163,130,169,151,173,152,172,166,187,185,200,185,200,224,170,216,155,283,212,293,285,295,288,244,265,240,268,214,311,213,346,215,340,133" href="#" shape="poly">
<area alt="Region 9" id="region-9" contenteditable="false" coords="66,192,65,204,60,214,61,241,74,305,50,365,81,421,135,421,141,404,106,337,174,370,196,374,206,300,149,284,163,218" href="#" shape="poly">
<area alt="Region 10" id="region-10" contenteditable="false" coords="57,5,34,18,32,41,35,80,53,87,51,107,66,100,78,100,83,110,66,189,196,218,198,188,177,179,165,161,166,151,157,135,156,110,167,105,141,106,107,97,114,66,97,8" href="#" shape="poly">
<area alt="Region 2" id="region-2" contenteditable="false" coords="573,161,559,165,552,178,532,191,523,208,568,199,575,218,578,223,574,237,585,240,588,208,582,203,584,177" href="#" shape="poly">
<area alt="Region 2" id="region-2" contenteditable="false" coords="612,235,606,249,602,321,668,323,701,239" href="#" shape="poly">
<area alt="Region 3" id="region-3" contenteditable="false" coords="514,213,519,229,515,247,505,266,510,276,505,289,576,279,579,256,569,236,570,214,562,209,546,211" href="#" shape="poly">
</map>
</p>
 

Open in new window

//ACCORDION CODE (REDUCED TO 5 ELEMENTS FOR DEMO PURPOSES)
 
<div class="view-content ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
        <div class="views-row views-row-1 views-row-odd views-row-first">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span>        <span class="field-content"><a href="#map-panel_pane_1-0">Region 1</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/40" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Connecticut</a></li>
<li><a href="/peerta/taxonomy/term/41" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Maine</a></li>
<li><a href="/peerta/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Massachusetts</a></li>
<li><a href="/peerta/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">New Hampshire</a></li>
<li><a href="/peerta/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Rhode Island</a></li>
<li class="last"><a href="/peerta/taxonomy/term/45" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Vermont</a></li>
</ul></div></div>  </div></div>  </div>
  <div class="views-row views-row-2 views-row-even">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span>        <span class="field-content"><a href="#map-panel_pane_1-1">Region 2</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">New Jersey</a></li>
<li><a href="/peerta/taxonomy/term/47" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">New York</a></li>
<li><a href="/peerta/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Puerto Rico</a></li>
<li class="last"><a href="/peerta/taxonomy/term/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Virgin Islands</a></li>
</ul></div></div>  </div></div>  </div>
  <div class="views-row views-row-3 views-row-odd">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span>        <span class="field-content"><a href="#map-panel_pane_1-2">Region 3</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/50" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Delaware</a></li>
<li><a href="/peerta/taxonomy/term/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">District of Columbia</a></li>
<li><a href="/peerta/taxonomy/term/52" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Maryland</a></li>
<li><a href="/peerta/taxonomy/term/53" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Pennsylvania</a></li>
<li><a href="/peerta/taxonomy/term/54" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Virginia</a></li>
<li class="last"><a href="/peerta/taxonomy/term/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">West Virginia</a></li>
</ul></div></div>  </div></div>  </div>
  <div class="views-row views-row-4 views-row-even">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span>        <span class="field-content"><a href="#map-panel_pane_1-3">Region 4</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/56" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Alabama</a></li>
<li><a href="/peerta/taxonomy/term/57" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Florida</a></li>
<li><a href="/peerta/taxonomy/term/58" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Georgia</a></li>
<li><a href="/peerta/taxonomy/term/59" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Kentucky</a></li>
<li><a href="/peerta/taxonomy/term/60" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Mississippi</a></li>
<li><a href="/peerta/taxonomy/term/61" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">North Carolina</a></li>
<li><a href="/peerta/taxonomy/term/62" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">South Carolina</a></li>
<li class="last"><a href="/peerta/taxonomy/term/63" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Tennessee</a></li>
</ul></div></div>  </div></div>  </div>  
    </div>

Open in new window

0
Comment
Question by:rjjigg
[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
  • 6
  • 3
9 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39946456
You don't  really need and ID but you can use zero based index instead.
Test page : http://jsfiddle.net/76Zhf/1/

    $("#Map area").click(function() {
        var id = $(this).attr("id");
        alert("you clicked on area " + id);
    });

Open in new window

0
 

Author Comment

by:rjjigg
ID: 39946489
Awesome, what about the second part of my question?  How do you take id attribute say 2, close whatever is currently expanded in the accordion (Region 1 in the demo code provided) and expand Region 2?  

I know we need to change the aria-expanded and noindex values but I dont know how to do that.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39946513
    $("#Map area").click(function() {
        var id = $(this).attr("id");
        accordion_number = id.replace(/\D/, "") * 1 - 1;
        $("#accordion").accordion({"active": 2}); // accordion is the ID of your accordion, I did not find one on the HTML you post...
    });

Open in new window


If you need more help, setup a working page (on complete mine) on jsfiddle
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rjjigg
ID: 39946552
It's drupal code so may not be clear, see stripped version below.  

This is the first accordion selection where the header says "Region 1", you can see the aria-expanded and tabindex element in the second div; this one is expanded:

<div class="views-row views-row-1 views-row-odd views-row-first">      
<div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span><span class="field-content"><a href="#map-panel_pane_1-0">Region 1</a></span>
</div>  
</div>

Open in new window


This is Region 2, not expanded:
<div class="views-row views-row-2 views-row-even">      
<div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1">
<span class="ui-icon ui-icon-triangle-1-e"></span><span class="field-content"><a href="#map-panel_pane_1-1">Region 2</a></span>
</div>
</div>

Open in new window


So when you click on Region 2 on the map, aria-expanded on region 1 in the html above needs to change to false and tabindex to -1 AND region 2 in the html above needs aria-expanded set to true and tabindex to 0.

I'll try setting up a working page.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39946554
I was thnking you're using jQUeyr Accordion...
http://jqueryui.com/accordion/
0
 

Author Comment

by:rjjigg
ID: 39946745
That's exactly what we're using.. within Drupal.  I'll post replacing aria and noindex in another post, but first the accordion_number based on your code alerts NaN.  Can you fix the regex to work?

$("#Map area", context).click(function() { 
          var id = $(this).attr('id');
          var accordion_number = id.replace(/\D/, "") * 1 - 1;
          alert(accordion_number);

Open in new window

0
 

Assisted Solution

by:rjjigg
rjjigg earned 0 total points
ID: 39946770
This did the trick:
$(".view-display-id-panel_pane_1 > .view-content").accordion({active: 2});

Open in new window


If you would be so kind as to help fix that regex, we're done!!!  Thank you so much.
0
 

Author Comment

by:rjjigg
ID: 39946779
Nevermind, this solved it..  Thanks again.

var accordion_number = id.replace("region-", "") * 1 - 1;

Open in new window

0
 

Author Closing Comment

by:rjjigg
ID: 39955482
leakim971 got the hard part out of the way and pointed me in the right direction to finish, a little bit of digging and all is solved!  Thank you.
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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 how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

737 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