I have created a header that can slide in and out of view with a toggle function. However, I want the header to be in the down position by default, without requiring users to click the toggle every time a new page loads. I have limited knowledge of JavaScript but I have managed to achieve the desired functionality using the following code:
<div id="headtoggle" onclick="headertoggle()"></div>
<script>
function headertoggle() {
var top;
var pagetop;
if (document.getElementById("page-header").style.top === "-210px") {
top = "-11px";
pagetop = "275px";
} else {
top = "-210px";
pagetop = "80px";
}
document.getElementById("page-header").style.top = top;
document.getElementById("page-body").style.top = pagetop;
}
</script>
I am now looking for a way to modify the code so that it can remember the last setting for each user. I am open to using jQuery as well. Any guidance for a beginner coder like myself would be greatly appreciated.
Thank you, Dylan
EDIT2: I made some changes to the code provided and encountered a new issue.
<div id="headtoggle" onclick="headertoggle()" onload="topposition()"></div>
<script>
function topposition() {
var top;
var pagetop;
if (localStorage.getItem("headerDown") == "false") {
top = "-11px";
pagetop = "275px";
} else {
top = "-210px";
pagetop = "80px";
}
document.getElementById("page-header").style.top = top;
document.getElementById("page-body").style.top = pagetop;
}
</script>
<script>
function headertoggle() {
var top;
var pagetop;
if (document.getElementById("page-header").style.top === "-210px") {
localStorage.setItem("headerDown", false);
top = "-11px";
pagetop = "275px";
} else {
localStorage.setItem("headerDown", true);
top = "-210px";
pagetop = "80px";
}
document.getElementById("page-header").style.top = top;
document.getElementById("page-body").style.top = pagetop;
}
</script>
The toggle functionality is working correctly, but when I execute "function topposition()" in the Firefox console, I receive the following error:
SyntaxError: expected expression, got end of script data:,/* EXPRESSION EVALUATED USING THE FIREBUG COMMAND LINE: */%0A%09function%20topposition() Line 2