Content hide/show

Question

my goal is to hide the content of my homepage when someone visits. onClick to begin button the content should be shown. Content should stay open when user goes to other page and comes back to homepage. But it will be hidden when user closes the window and opens up the homepage again. To achieve this goal I have put the following code but it keeps the content open even when user closes and opens the window. So please help me out.

if (! localStorage.noFirstVisit) {
    // hide the element
    $("#content").hide();

    // check this flag for escaping this if block next time
    localStorage.noFirstVisit = "1";
}

Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)

$(".roll-button").click(function(){
    $("#content").show();
});

I would highly appreciate if you check website, suggest me fix or show me proper way to achieve this goal. url:iamicongroup.com

Consider using sessionStorage this will remove your flag when the tab is closed. https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage — kplates, Jul 31 '18 at 03:55

Terry Wei · Accepted Answer · 2018-07-31T04:08:28.310

1

You can totally use sessionStorage to detect whether it is new tab(window) or not.

When you first visit this page, set sessionStorage.noFirstVisit = "1";.

After you go to another page and back, sessionStorage.noFirstVisit is still "1".

But when you close the tab or browser and open the page newly again, sessionStorage.noFirstVisit will be undefined.

Documentation is here

The documentation also provide the difference between sessionStorage and localStorage.

edited Jul 31 '18 at 04:08

answered Jul 31 '18 at 04:00

Terry Wei

1,521
8
16

Thank you so much Terry. sessionStorage totally fixed the first issue. – Hasan Al Khaled Jul 31 '18 at 04:17
How about create a new question for the second issue? In stackoverflow, one post should contain only one question. – Terry Wei Jul 31 '18 at 05:15

score 0 · Answer 2 · answered Jul 31 '18 at 03:49

I would suggest reading this: Detect Close windows event by Jquery

It goes over window unloading (beforeunload), which I believe is what you're after. You can set/unset your localstorage values there based on certain criteria being met; for example:

$(window).on("beforeunload", function() { 
    if(localStorage.noFirstVisit = "1" {
        // do something
        localStorage.noFirstVisit = "[someValue]"
    }
    else {
        // do something
        localStorage.noFirstVisit = "1"
    }
})

score 0 · Answer 3 · answered Jul 31 '18 at 05:23

Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)

how about adding something like 'ng-cloak' in angular, to avoid the undesirable flicker effect caused by show/hide.

when clicking the roll-button, it prevents the divs from showing unfinished..

Content hide/show

3 Answers3