nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Anchor Tags in Countdown Story Map

MarkMcCart

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 & 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 & 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?

Trouver plus de publications taguées avec

Accepted answers

MarkMcCart

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);

All comments

MarkMcCart

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);

kenbuja

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.

ChrisSergent

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?

MarkMcCart

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).

ChrisSergent

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?

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.