Anchor Tags in Countdown Story Map

3982
5
Jump to solution
04-09-2015 06:34 AM
MarkMcCart
Occasional Contributor

Ultimately I want to create a unique URL for each li element created in the loadList function from this template and have the browser scroll and select the li element based on numberDiv class created.

I am having trouble setting anchor tags for each element that is created in the Countdown Story Map template. I have Anchor Tags being created in the the loadList function. However, my browser isn't honoring the anchor tag from the URL string. I'm wondering if I am putting the anchor tag in the wrong place or if there is a better way to tackle this problem. Or do I need to simulate an onclick function? If so, I don't know how or where I should put it.

Here's my modified code from the function loadList from the Countdown Story Map Template:

function loadList()

{

  var numDiv;

  var nameDiv;

  var li;

  var spec = _lutIconSpecs.normal;

  $.each(_locations, function(index, value) {

  value.setSymbol(new esri.symbol.PictureMarkerSymbol(

  ICON_BLUE_PREFIX+value.attributes.getValueCI(_configOptions.fieldName_Rank)+ICON_BLUE_SUFFIX,

  spec.getWidth(),

  spec.getHeight()).setOffset(spec.getOffsetX(), spec.getOffsetY())

  );

    numDiv = $("<a href='#"+value.attributes.getValueCI(_configOptions.fieldName_Rank)+"'><div class='numberDiv'>"+value.attributes.getValueCI(_configOptions.fieldName_Rank)+"</div></a>");

    $(numDiv).attr("title", "#"+value.attributes.getValueCI(_configOptions.fieldName_Rank)+": "+value.attributes.getValueCI(_configOptions.fieldName_Name));

    nameDiv = $("<div class='nameDiv'><span style='margin-left:20px'>"+value.attributes.getValueCI(_configOptions.fieldName_Name)+"</span></div>");

    li = $("<li></li>");

    $(li).append(numDiv);

    $(li).append(nameDiv);

    $("#thelist").append(li);

  });

}

Here's the output:

<li><a href="#4" title="#4: I-280 Grading, Paving &amp; Bridge Project (US 6 to Mississippi River)"><div class="numberDiv">4</div></a><div class="nameDiv" style="width: 310px;"><span style="margin-left:20px">I-280 Grading, Paving &amp; Bridge Project (US 6 to Mississippi River)</span></div></li>

Each li element is getting a unique URL but Chrome is not honoring that anchor tag. Here's the URL created for each li element: http://testiowadot/roadconstruction/.../index#4

Any suggestions?

0 Kudos
1 Solution

Accepted Solutions
MarkMcCart
Occasional Contributor

It's not the most elegant solution, but we got it working using this code in the main.js file:

setTimeout(function() {

  if(window.location.hash) {

  var index = Number(window.location.hash.substring(1))-1;

  //alert(index);

  preSelection();

  _selected = _locations[index];

  if (_counter == 0) switchMaps();

  postSelection();

  highlightTab(this);

  if (_currentState != STATE_INFO) changeState(STATE_INFO);

   }

},6000);

View solution in original post

0 Kudos
5 Replies
ChrisSergent
Regular Contributor III

Are you able to provide the entire page's code which you can paste here: JS Bin - Collaborative JavaScript Debugging  or do you have a public location for this site?

0 Kudos
MarkMcCart
Occasional Contributor

Unfortunately, some of the data hasn't been vetted for public use yet. However, I am just using the ESRI Countdown Map Story Template. A working example is here: http://storymaps.esri.com/stories/2013/airports/

Ultimately, I want to create either an 'a' anchor or cursor pointer to allow the user to scroll to a specific <li> element. For example, I would like the URL to be something like: storymaps.esri.com/stories/2013/airports/#4 and it automatically scrolls to number 4 on the list and invokes the 'scrollToPage' function that is found in the main.js file (URL: http://storymaps.esri.com/stories/2013/airports/app/main.js).

0 Kudos
ChrisSergent
Regular Contributor III

I am not sure if this will help, but I do know that anchor tags usually require an id. I noticed the Esri example does not have IDs for the list items. Have you considered that?

0 Kudos
KenBuja
MVP Esteemed Contributor

I was trying to solve this issue with the Playlist story map. In exploring this issue at the Developer Summit with one of the story map team members, this code (found in core.js in the source code) would select item #6 if put into the console.

$(".playlist-item[object-id='6']").trigger('click');

This code gets the index from the url (using "?index=6" appended to the end of the url) and assigns it to a variable

if (urlObject.query.index)
{
  index = urlObject.query.index;
}

In the appReady function, you should be able to use this code to open that infoWindow

$(".playlist-item[object-id='" + index + "']").trigger('click');

However, I still haven't gotten it working quite properly with the build version, but I haven't spent much time on it.

0 Kudos
MarkMcCart
Occasional Contributor

It's not the most elegant solution, but we got it working using this code in the main.js file:

setTimeout(function() {

  if(window.location.hash) {

  var index = Number(window.location.hash.substring(1))-1;

  //alert(index);

  preSelection();

  _selected = _locations[index];

  if (_counter == 0) switchMaps();

  postSelection();

  highlightTab(this);

  if (_currentState != STATE_INFO) changeState(STATE_INFO);

   }

},6000);

0 Kudos