Toggle picture panel in Map tour

JayThakur — Mon, 05 Oct 2015 20:25:16 GMT

Hi,

We are using MapTour stoytelling with integrated setting and would like to have a toggle for the picture panel on the right when the user wants (as it covers nearly 1/3 of the map (and almost 1/2 using a 32" screen).

I tried to integrate a button and successfully toggle the picture panel for the first time with the following code in crossfader.js file:

var _toggle1;

_toggle1 = $("<div id='toggle'></div>");

$("#picturePanel").append(_toggle1);

$(_toggle1).fastClick(function() {

$(_toggle1).toggleClass('closed', $(#picturePanel).css('display') != 'none');

$(#picturePanel).slideToggle();

});

It works to remove the picture panel completely, i mean once i click on the toggle it removes everything and the picture panel cannot be retained in that session again and also the picture panel doesn't appear even if i click other icons, untill and unless the map is refreshed.

I thought it would work as how the description toggle works, but not, I don't have any clue if i am missing something else in the code functionality.

Any help would be appreciated.

Thanks,

Akshara Chukkannagari

UIZ, Germany

Neue Grünstraße 38,

10179, Berlin, Germany

Re: Toggle picture panel in Map tour

GregoryL_Azou — Tue, 06 Oct 2015 15:33:22 GMT

Hi,

Looks like you are adding the slide button inside the picture panel and toggling the picture panel main container. So when the picture panel is not visible, the button won't be visible. You need to add the button outside of the picture panel so that it remains visible or display another button (probably the most simple) when you are toggling the picture panel off.

I would try that way: add a new div in index.html after the picture panel ; add css so that that button is positioned absolutely ; toggle that button on and off depending of the picture panel state.

Hope this helps

topic Re: Toggle picture panel in Map tour in Classic Esri Story Maps Questions

Toggle picture panel in Map tour

Re: Toggle picture panel in Map tour