We Keep Coding

Javascript show div on load

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!

I was able to easily solve this by adding the follow to the top of my Javascript.
$(document).ready(openAlerts());

If you want pure JavaScript then use this
document.addEventListener('DOMContentLoaded', openAlerts, false);

Semantic-ui pop up z-index?

http://semantic-ui.com/modules/popup.html#/examples
I have used the pop up described above and it works well. The only thing I see that I have a blue coloured page header div (width 100%, height 200px, z-index:9998).
I have a series of images below that on the page. The pop up triggers when an image is clicked. However for some reason the pop up window is popping up under the page header div when an image near the top of the page is clicked.
How can I make the pop up appear over the top of that header div?
If I need to set the z-index of the div, where do I set it and on which element/class?

I guess you need this, like document says: https://semantic-ui.com/modules/popup.html#/settings
set this attibute to false -> movePopup: false
$('#button_event_trigger').popup({
popup: $('.custom.popup'),
movePopup: false, //this here
on: 'click'
});
In my case, I had a button inside a sidebar, that needs trigger the popup, then popup appears inside the container with overflow hidden, and css z-index was not working.

Search for 1190 in semantic-UI.css. Override the value.

JS: Is there a way to call a scroll function within a click function, or combine both?

My page has a sticky navbar whose 'stickiness' works fine, however the behaviour of the 2 main internal elements* of the navbar aren't seguing. The 2 main internal elements are the logo and the slide-out navbar(activated on click). The intended behaviour is as follows:
The logo(at center of orange bar) must 'hide' by default and only
become visible when the user scrolls down 80px from the top (or
scrolls upto 80px from the top) of the document.
The logo must hide as soon the user scrolls within 80px of the top of
the document.
The logo must, however, never be visible at the same time the slide-out navbar is active.; the moment the navbar is inactive however, it must become visible again.
Unlike the logo, the navbar icon must always always be visible, and
like the logo, it must be sticky.
In the jsfiddle, all of the intended behaviour plays out, but only on scroll, not on click. ie. After scrolling down more than 80px, the logo will be visible (which is fine), but does not hide when the navbar icon is clicked to the active state (unless the nav element was already in the active state). This issue is resolved the moment I scroll, but not at the moment of click which is what I want happening.
I know why this happening, it's because while I've taken care of all these conditions in $(window).scroll(function (), I haven't in the $("#menu-opener").click(function() simply because I couldn't use scrollTop() there, neither could I successfully combine the two functions.
How then, can I resolve this issue, whether through combining the functions, calling scrollTop() in the clickfunction, or anything else? Would appreciate any help.
Pls note: while I say '2 main internal elements of the navbar', in fact I've placed the logo and slide-out navbar in seperate divs and would like it to remain that way

So why couldn't you use scrollTop there ?
isn't this the expected behaviour:
https://jsfiddle.net/91gxLvbb/4/
You can check the scrolltop with:
if($(window).scrollTop() > 80)

https://jsfiddle.net/91gxLvbb/6/
I added #menulogo:
$("#menu-opener").click(function(){
$("#menu-opener, #menu-opener-inner, #menu, #menulogo").toggleClass("active");
});
And to the css:
#menulogo.active #logoflag{display:none}

Scroll div before body

I have scrollable div. I want scroll the box on scrolldown or keydown but I have to click on the div to make it possible. Because when I try scroll it after page load then scrolled is the body.
What should I make to first scroll the div and after that body?

Try setting the focus on the div.
With jQuery something like $("#myDiv").focus();.

Append URLs with #content

I am trying to customize a photo gallery in Squarespace. A test gallery can be found here - http://dzrtgrls.squarespace.com/gallery/test-2/4011897 . What I would like is to have the next or previous images load so that the prev - / + next navigation is at the top of the browser window. So it seems I need to somehow append each url with #content so the content div is at the top of the window whenever the previous or next links are used. Is there a way to do this with javascript or jquery?

Do you mean you want to make the content div scroll so that it's at the top of the page? You can do that with scrollIntoView:
document.getElementById('content').scrollIntoView();