Denis L. Denis L. - 1 month ago 13
Javascript Question

Show a div on first page load only

I have a div that serves of container for a css animation that appears over the entire website's home page... a text and background that opens like curtains, revealing the website under it. It's like an intro landing page. The thing is I need it to appear only on first page load. I don't want it to appear on page refresh or if someone navigates thru the site and comes back to home page.

Can someone please show me how I would have to code this because I've search a lot on the web and didn't find any clear explanations for my particular case.

Here is the code for the div:



<div id="landContainer">
<div class="left-half" id="leftP"><article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article></div>
<div class="right-half" id="RightP"><article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article></div>
</div>





So the div I must display only on first page load would be the one with the ID landContainer, that contains a couple of other divs.

Since I'm new to this type of coding, I would need a complete example of the code I need to use with my div.




For Ian... here is the content of my index.html file...



<!DOCTYPE html>
<html>
<head>
<title>Landing page v2</title>
<link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
</head>
<body>
<div id="landContainer">
<div class="left-half" id="leftP">
<article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
</div>
<div class="right-half" id="RightP">
<article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
</div>
</div>
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
}
localStorage.setItem("pageloadcount", "1");
});
</script>
</body>
</html>




Answer
    <!DOCTYPE html>
<html>
    <head>
        <title>Landing page v2</title>
        <link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
$( document ).ready(function() {
if (localStorage.getItem("pageloadcount")) { $("#landContainer").hide();
} 
  localStorage.setItem("pageloadcount", "1");
});
        </script>
    </head>
    <body>
<div id="landContainer">
  <div class="left-half" id="leftP">
    <article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
  </div>
  <div class="right-half" id="RightP">
    <article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
  </div>
</div>

    </body>
</html>