CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2756554
user2756554

Reputation:

Hide div permanently until next visit

I have the following div with class "fullscreen"

<div class="fullscreen">
</div>

Inside that div, there is a button that once clicked, it will scroll down to anther div that has an ID of "#page".

The question is, how do I permanently hide the div with the class "fullscreen" once scrolled to "#page" and settled down? It has not to show again at all until the website has been visited again, even if navigated away from the page and went back to it.

Please find the live example here, as it will clarify everything: http://loaistudio.com/anita/

The HTML code of the button: <a href="#header">Find Out How</a>

The JS:

//Smooth Scroll
   $('a').click(function(){
      $('html, body').animate({
         scrollTop: $( $(this).attr('href') ).offset().top
      }, 1500);
      return false;
   });

Upvotes: 1

Views: 1875

Answers (2)

binaryatrocity
binaryatrocity

Reputation: 976

Final Update: I have outlined how to store a value with cookies, localStorage, or server-side sessions below. This is how I would implement these solutions with your posted code:

 //Smooth Scroll
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 1500);
        /* We have animated, lets set the variable to never do this again */
        if(supports_storage()) localStorage['nofullscreen'] = true;
        return false;
    });

Above, we are setting our localStorage variable (i've named it 'nofullscreen', feel free to replace with whatever makes sense to you) to true, so we know the user has seen our fullscreen already. Now, when the page loads, we want to check for the variable, and act accordingly:

 $( document ).ready(function() {
     if(localStorage['nofullscreen'] == 'true') $('.fullscreen').hide();
 });

This should hide the div with class "fullscreen" on page load, if the storage variable exists and is 'true'.

You'll want to store a cookie on the users machine to know they have visited in the past. You can do so with basic Javascript, like so: 

document.cookie="nofullscreen=true";

The line above will create a cookie in local storage, run this once you've scrolled to #page.

function doFullscreen(){
    var name = "nofullscreen=";
    var cookies = document.cookies.split(';');
    cookies.forEach(function(n){
        var c = cookies[i].trim();
        if(c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return false;
    });

The function above can run on page load, it will return True if the user has been here before and you should go right to #page, or false if its a new user and you should display the fullscreen div.

UPDATE: Others have suggested using localStorage, this is also a good idea. here is a small example of that.

Checking for compatibility:

function supports_storage(){
    try{
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

Writing to storage:

if(supports_storage()) localStorage['sitename.nofullscreen'] = true;

Checking the storage:

 if(localStorage['sitename.nofullscreen'] == "true"){
      //go right to #page
 }

Update #2: PHP Session Storage You've explained in the comments that your using PHP as well. I feel like either of the above solutions would work just as well, but I'll add some PHP code here for completeness.

First, you'll need to start the session:

 <?php session_start() ?>

You are now able to write to the session with PHP like so:

 <?php $_SESSION['nofullscreen']='true'; ?>

And check if the session variable is set later with:

 <?php if($_SESSION['nofullscreen'] == 'true') { //print css rules to hide #fullscreen here? } ?>

If you need to clear the session variable, you can use unset:

 <?php unset($_SESSION['nofullscreen']) ?>

Hope this helps!

Upvotes: 4

Hans Roerdinkholder
Hans Roerdinkholder

Reputation: 3000

Since you mention the requirement 'even if navigated away from the page and went back to it', you need a way to store state.

There are a few options:

  • sessions
  • cookies
  • local storage (might not work on older browsers)

Take your pick :)

In this case I would probably go with session storage

Upvotes: 4

Related Questions