Show a div only when visitor see a page for the first time?

Question

I need to show a #IE only on first load of page,I dont want it on refresh ,I tried this,but it wont work for me... I explicitly need this to work with localStorage,not with session or session storage ,regarding this link: https://stackoverflow.com/a/5523174/8735029

HTML:

<p id="IE">You are not using MS browsers! Good Job!<span>x</span></p>

JS

<script>
    // detect IE8 and above, and Edge
    if (document.documentMode || /Edge/.test(navigator.userAgent)) {
        document.getElementById('IE').innerHTML = "You are using a MS browser,please consider using Chrome or Firefox for better experience!<span>x</span>"
    }
</script>

JQuery:

<script>


       $(document).ready(function () {
    if (localStorage.getItem('wasVisited') !== undefined) {
        $("#IE").fadeIn("slow").css("display": "flex");
    } else {
        localStorage.setItem('wasVisited', 1);
        $("#IE span").click(function(){
            $("#IE").fadeOut("slow");
        });
    }
});
</script>

Looks good. But is `localStorage` really supported by IE ?! :) — Jonas Wilms, Nov 19 '17 at 19:57
Why there's `else` in this condition? If the flag is undefined show the message and save a flag (And the above comment makes a lot of sense!) — Alon Eitan, Nov 19 '17 at 19:57
Possible duplicate of [Pop up oncer per session/ visit](https://stackoverflow.com/questions/47376332/pop-up-oncer-per-session-visit) — Muhammad Omer Aslam, Nov 19 '17 at 20:44

score 1 · Answer 1 · answered Nov 19 '17 at 19:57

1

You have checked the localstorage item as !==undefined for the first time. It should be == undefined as the item will be undefined for the first time when the page opens.

answered Nov 19 '17 at 19:57

girish

302
1
5
17

Muhammad Usman · Accepted Answer · 2017-11-19T20:47:42.327

1

$("#IE").fadeOut("slow"); is inside click function. That's why you don't get it hidden on page refresh. Move this out and rest should work like

  $(document).ready(function () {
   if (localStorage.getItem('wasVisited') == undefined) {
    $("#IE").fadeIn("slow").css("display" , "flex");
    localStorage.setItem('wasVisited', 1);
   }
      $("#IE span").click(function(){
        $("#IE").fadeOut("slow");
    });
});

Edit

Change localStorage.getItem('wasVisited') !== undefined to localStorage.getItem('wasVisited') == undefined

and

$("#IE").fadeIn("slow").css("display": "flex"); to $("#IE").fadeIn("slow").css("display" , "flex");

edited Nov 19 '17 at 20:47

answered Nov 19 '17 at 19:57

Muhammad Usman

10,039
22
39

I get this in my console: "SyntaxError: missing ) after argument list" on this line: $("#IE").fadeIn("slow").css("display": "flex"); – Nov 19 '17 at 20:36
Sorry for the typo. Change `css("display" : "flex");` to `css("display" , "flex");` and please see the updated code. Copy and paste it in your file and that should work fine this time :) – Muhammad Usman Nov 19 '17 at 20:44
still not working...please look at the answer I provided – Nov 19 '17 at 21:00
sorry,your answer works... thanks... I havent seen all edits you made... – Nov 19 '17 at 21:08

Show a div only when visitor see a page for the first time?

2 Answers2