I have some custom buttons overlayed on a Google Map. When you click on one of the buttons it slides the map div right 360px and slides in a 360px wide div on the left in the place where the map vacated. When I click the button on the map it works as designed and slides the map over and div in like it should and when you click the close button on the div it slides out of focus and the map goes back to where it was before.
My issue is I am trying to have this div that slides in to show on load. My solutions I have tried haven't quite worked and I am not great with Javascript. If I use CSS z-index 1 it will load when the page loads but it shows it on top of the map instead of the map sliding over 350px. So a CSS solution won't work in this case because the div overlays on the map instead of sliding it over and covers the map which has a logo in the top left corner.
This is how I open and close the div.
HTML
<button id="alertBtn" class="map__control_icon" onclick="openAlerts();"><i class="fa fa-exclamation-triangle"></i></button>
Javascript
function openAlerts() {
document.getElementById("alert-list").style.minWidth = "360px";
document.getElementById("map-wrapper").style.marginLeft = "360px";
document.getElementById("mapButtons").style.marginLeft = "-360px";
}
function closeAlerts() {
document.getElementById("alert-list").style.width = "0";
document.getElementById("map-wrapper").style.marginLeft= "0";
document.getElementById("mapButtons").style.marginLeft = "0";
}
So how can I have this show by default when the page loads but slide the map over like it does when you click the button? Also is there someway to get the width .style.marginLeft to auto so it slides over based on the size of the div that slides in as sometimes the content is dynamic but if I set a hard set margin then there is extra space when the div isn't filling the full width. Hench why "alert-list" is set with a minWidth.
-Thanks!
