Alexander Pulido Alexander Pulido - 1 month ago 8
HTML Question

Execute function onload only first time

¡Hello! this is the question, i have a menu in the header with the following structure



$(document).ready(function(){
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

$('#entrar').click(function(e){
$('#head').slideToggle();
$(".boton").css("display","none");
$("#secciones").slideToggle();
$("#foot").slideToggle();
});
$('#entrar').click(function() {
$('html, body').animate({
scrollTop: $(".principal").offset().top + 70
}, 700);
});
});

$(document).ready(init);
function init(){
var sec = document.getElementById("secciones");
var he = document.getElementById("head");
var fo = document.getElementById("foot");
he.style.display = "none";
sec.style.display = "none";
fo.style.display = "none";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="main_wrapper">
<header id="head">
<div class="container">
<section class="row">
<article class="col-xs-3">
<h1 id="main_logo">
<a href="index.php"><img src="images/logo.png" alt=""></a>
</h1>
</article>
<article class="col-xs-9">
<ul class="nav nav-pills" id="menu">
<li class="active"><a href="index.php">INICIO</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MODELOS<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="sec_index" href="index.php#galeria">Modelos en Panamá</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="sec_index" href="index.php#blog">Últimas Entradas</a></li>
<li><a href="blog.php">Blog Chicas507</a></li>
<li><a href="glosario.php">Glosario de Términos</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">ANÚNCIATE<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="sec_index" href="index.php#paquetes">Paquetes</a></li>
<li><a href="registro.php">Regístrate</a></li>
<li><a href="recuperar.php">Recuperar Cuenta</a></li>
</ul>
</li>
<li><a class="sec_index" href="index.php#contacto">CONTACTO</a></li>
<li><a href="about.php">INFORMACIÓN</a></li>
<li><a href="login.php">INGRESA</a></li>
</ul>
</article>
</section>
</div>
</header>
<section class="principal" id="principal">
<div class="boton" id="entrar"><a href="#">ENTRAR</a></div>
<div class="boton" id="salir"><a href="#">SALIR</a></div>
</section>
<section class="secciones" id="secciones">
some sections
</section>
<footer id="foot">
</footer>
</div>
</body>





and i have various sections in the webpage, some of the links from the menu gets me to the section in the index, for example index#models. Everything works fine, but here's the thing. I have a JavaScript code that hide the sections and the header called init, i use onload in body to call the function, and a button "entrar" to display, this works, but the function is called everytime i reload the page and i want to just run the first time and when refresh, everything is show without clicking the button. Also, i dont want to load when i change to another part of the site, for example if i enter the blog and i click to home, the function loads and i have to click "entrar" again, i dont want that.

I have been trying to fix, but i can't find the solution, I aprecciate your help please!

Answer

You can set a localStorage var if you want it to persist after the browser closes:

$(function() {
    var visited = localStorage['visited'];
    if (!visited) {
       init();
       localStorage['visited'] = true;
    }

    function init() {
        var sec = document.getElementById("secciones");
        var he = document.getElementById("head");
        var fo = document.getElementById("foot");
        he.style.display = "none";
        sec.style.display = "none";
        fo.style.display = "none";
    }
});

Or sessionStorage if you want it to happen after the browser gets closed:

$(function() {
    var visited = sessionStorage['visited'];
    if (!visited) {
       init();
       sessionStorage['visited'] = true;
    }

    function init() {
        var sec = document.getElementById("secciones");
        var he = document.getElementById("head");
        var fo = document.getElementById("foot");
        he.style.display = "none";
        sec.style.display = "none";
        fo.style.display = "none";
    }
});