CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Androbaut
Androbaut

Reputation: 409

How can I hide content on first load, but keep it revealed after ajax runs?

Right now, I have content that gets revealed after a .js library (typed.js) passes a callback function. Here's my script:

JS

$(function(){
    $("#logo-black").typed({
        strings: ["Nothing^450&Co^250.^500", "^800__^400&Co^600."],
        typeSpeed: 70,
  backSpeed: 100,
  callback: function() {
    $(".typed-cursor").css("display", "none"),
    setTimeout(function(){
      $('.main-load').toggleClass('main-load-active'),
      $('.nav-text').toggleClass('nav-text-active');
    },400),
    $('.nav-reveal').toggleClass('nav-reveal-active');
  }
    });
});

CSS

.main-load{
opacity: 0;
}
.main-load-active{
opacity: 1;
}
.main-load-transition{
-webkit-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-moz-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-o-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-ms-transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
transition: all 1s cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

After setTimeout, I toggle the class '.main-load-active', which changes the opacity of '.main-load' from 0 to 1.

My problem: If the user navigates to another page, '.main-load' gets replaced with new content via ajax. Once the user returns to the site's index, '.main-load' is invisible because it's set to 0 opacity by default in CSS.

How can I keep '.main-load' at opacity: 0 on site load/refresh, but visible after the user navigates to another page & returns?

Upvotes: 2

Views: 93

Answers (3)

Androbaut
Androbaut

Reputation: 409

Turns out I was overthinking this in a big way.

I had my '.main-load' css classes on the element that was being replaced, so instead I applied them to the container that contains the ajax'd content... and everything now works as it should. Thank you @Dan Nagle & @Ram Segev, I'll keep 'sessionStorage' & 'document.referrer' in mind for future projects.

Upvotes: 0

Dan Nagle
Dan Nagle

Reputation: 5415

You can use sessionStorage to set a key when the callback fires.

sessionStorage.setItem('key',true);

On page load if the key is in the sessionStorage, add the CSS class to the element:

$(document).ready(function () {
  if (sessionStorage.getItem('key')) {
    $('.main-load').addClass('main-load-active');
  }
});

Upvotes: 1

Ram Segev
Ram Segev

Reputation: 2571

You can try using document.referrer, this way you can check if user came from another page and change the opacity to 1 

$(document).ready(function() {
   var referrer =  document.referrer;
});

Upvotes: 2

Related Questions