How to tell if an element was on screen before navigation?

Question

I added SlideUp and SlideDown jquery animations to my website, http://brianhotopp.duckdns.org/index.html (click the >>>) However, when the user navigates to a new page, they would have to re-SlideUp the element that they slid up on the last page. Is there any way to detect if the element was visible before navigation?

$(function(){ 
if (sessionStorage.getItem("tabvisible")) {
$(".jumbotron").slideDown();//display header
} else {
$("jumbotron").slideUp();//hide header
}

$('.information').hide().fadeIn('slow');


$("#expandiconup").click(function(){
$(".jumbotron").slideUp();
 sessionStorage.setItem("tabvisible", false);
});
$("#expandicondown").click(function(){
$(".jumbotron").slideDown();
sessionStorage.setItem("tabvisible", true);

}); 

Answer 1

It's not super easy to do this with JavaScript, and I'm sure there are better ways it can be done than what I'm about to show you. But if I were you I'd look into a front-end framework like Angular to handle your views so that your header never has to actually be reloaded and the state would persist throughout the pages.

Anyway, to really hack through this you could use the CSS :target pseudo-selector plus some JavaScript. Essentially, whenever you click your "show" link you would use JavaScript to append a hash to each of the URLs in your navigation. That way, when they're clicked, the new page that loads will have a hash at the end of it. Then if that hash matches an ID of an element on the page (it would be the content you are showing/hiding in this case), you could then utilize the CSS :target pseudo-selector to simply hide ( display: none ) that element.

Here's a simple example (I set this up in CodePen but it's hard to demonstrate without having actual HTML pages to link to):

HTML

<header>
  <p class="header-content" id="headerHidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac orci eros. Nunc ultrices augue in suscipit pulvinar. Morbi eget tempus sem, eget lobortis enim. Fusce scelerisque odio vel lorem ullamcorper tincidunt. Pellentesque accumsan lobortis imperdiet. Donec pharetra id enim et vestibulum. Nunc pulvinar, diam et condimentum accumsan, lacus libero sagittis erat, a accumsan risus justo nec quam. Maecenas quis accumsan velit. Suspendisse porttitor velit nec ipsum bibendum elementum. Aenean feugiat non nisi a eleifend.</p>

  <a href="#" class="hide-header-content">Hide header content</a>

  <a href="#" class="show-header-content">Show header content</a>

  <nav>
    <ul>
      <li><a href="/link1">Link 1</a>
      <li><a href="/link2">Link 2</a>
      <li><a href="/link3">Link 3</a>
      <li><a href="/link4">Link 4</a>
      <li><a href="/link5">Link 5</a>
    </ul>
  </nav>
</header>

CSS

#headerHidden:target {
  display: none;
}

JavaScript (using jQuery)

// Declare variables & cache jQuery objects
var $headerContent = $('.header-content'),
    $showContent = $('.show-header-content'),
    $hideContent = $('.hide-header-content'),
    $navLinks = $('nav a');

$hideContent.on('click', function (e) {
    e.preventDefault();
    $headerContent.slideUp();
  addHash();
});

$showContent.on('click', function (e) {
  e.preventDefault();
  $headerContent.slideDown();
  removeHash();
});

function addHash () {
  $navLinks.each(function() {
    var $this = $(this),
        navUrl = $this.attr('href');

    $this.attr('href', navUrl + '#headerHidden');
  });
}

function removeHash () {
  $navLinks.each(function() {
    var $this = $(this),
        navUrl = $this.attr('href');

    $this.attr('href', navUrl.split('#')[0]);
  });
}

This is really a hack-ish way to go about your problem, but it sounded like an interesting problem that I wanted to solve. With this method, you could run into the issue of the browser "jumping" to the element whose ID matches the hash in the URL. In your case, since it's at the top of the page, it shouldn't be an issue.

Lastly, I know my markup is not exactly yours but I hope you can at least catch my drift and pick something up that's useful here!

Answer 2

How about using localStorage ??

$("#expandiconup").click(function () {
    localStorage.setItem("tabvisible", false);
});

$("#expandicondown").click(function () {
    localStorage.setItem("tabvisible", true);
});

Then on load of the new page, verify for this value

if (localStorage.getItem("tabvisible") == true) {
    //display header
} else {
    //hide header
}