Cover page on Shortlist Story Map

837
3
Jump to solution
07-18-2017 01:33 PM
deleted-user-OlpHy1NoMNug
Occasional Contributor II

Anyone know how to setup a cover page for the Shortlist Story Map similar to the one here, Carte des sportifs français - Jeux Olympiques d'été 2016 , or anyone from ESRI want give access to the full code?  It appears to mostly be using the stock template so I'm hoping it could be done fairly easily.  

Unfortunately my developer skills stop short of knowing fully what's happening but I'm well versed in following directions .

Scott

0 Kudos
1 Solution

Accepted Solutions
MarkCooney
Occasional Contributor III

Hi Scott,

Looks like this was a customization of an older version of Shortlist (version 1.4.9).  You can view the code of the app by inspecting the files using your browsers developer tools.  If you are looking to implement in the current Shortlist, the code can be found on our GitHub repo: GitHub - Esri/storymap-shortlist: The Shortlist story map application template by Esri .  The cover page should not be too difficult to implement.  You would simply need to modify the index.html file with the HTML markup you would like to use for the cover page.  Then you would need to add some JavaScript to handle the click event to animate the cover page away, and that would be placed in the custom-scripts.js file.

Mark

View solution in original post

0 Kudos
3 Replies
MarkCooney
Occasional Contributor III

Hi Scott,

Looks like this was a customization of an older version of Shortlist (version 1.4.9).  You can view the code of the app by inspecting the files using your browsers developer tools.  If you are looking to implement in the current Shortlist, the code can be found on our GitHub repo: GitHub - Esri/storymap-shortlist: The Shortlist story map application template by Esri .  The cover page should not be too difficult to implement.  You would simply need to modify the index.html file with the HTML markup you would like to use for the cover page.  Then you would need to add some JavaScript to handle the click event to animate the cover page away, and that would be placed in the custom-scripts.js file.

Mark

0 Kudos
deleted-user-OlpHy1NoMNug
Occasional Contributor II

Mark, 

Getting back around to this project and I think I can handle the HTML markup but I haven't found a sample of some JS to handle the click event.  Can you recommend anything?

0 Kudos
MarkCooney
Occasional Contributor III

Something like this should do the trick:  http://api.jquery.com/fadeout/

0 Kudos