Solved

Use JQuery to take image map select and expand accordion element

Posted on 2014-03-21
9
1,343 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
  • 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
 

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 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

19 Experts available now in Live!

Get 1:1 Help Now