AnsweredAssumed Answered

Anchor Tags in Countdown Story Map

Question asked by mgmccart on Apr 9, 2015
Latest reply on Apr 10, 2015 by mgmccart

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?

Outcomes