What are the signs that an element was visible on screen prior to navigation?

Question

What are the signs that an element was visible on screen prior to navigation?

Recently, I incorporated SlideUp and SlideDown jquery animations into my website. You can check it out by visiting (click the >>>). However, I noticed a small issue where when users navigate to a new page, they have to re-SlideUp the element that was slid up on the previous page. Is there a way to detect if the element was visible before navigation?


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

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

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

javascript jquery html css

Answer 1

Answer №1

Have you considered utilizing localStorage for this task?

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

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

Upon loading the new page, check for the stored value

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

Answer 2

Have you considered utilizing localStorage for this task?

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

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

Upon loading the new page, check for the stored value

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

Answer 3

Answer №2

Implementing this feature with JavaScript may not be the most straightforward task, and there are likely more efficient methods available than the one I'm about to suggest. Consider exploring front-end frameworks like Angular to manage your views, ensuring that your header remains static without needing to reload and maintaining state across pages.

To achieve this functionality through a workaround, you can utilize the CSS :target pseudo-selector along with some JavaScript. Essentially, upon clicking the "show" link, you would use JavaScript to add a hash to each navigation URL. When these links are clicked, the new page will load with a corresponding hash at the end. If this hash matches an element ID on the page (representing the content to show/hide), you can leverage the CSS :target pseudo-selector to hide it using display: none.

Here's a basic example (demonstrated in CodePen, but requires actual HTML pages to function properly):

HTML

<!-- HTML code omitted for brevity -->

CSS

#headerHidden:target {
  display: none;
}

JavaScript (using jQuery)

// JavaScript code snippet provided above

This approach may seem somewhat unconventional, but it presents an interesting solution to your problem. One potential drawback is the browser may scroll to the element corresponding to the hash in the URL. In this case, as the element is at the top of the page, this should not pose a significant issue.

While my markup differs from yours, I trust that you grasp the concept and extract any useful elements from this explanation!

Answer 4

Implementing this feature with JavaScript may not be the most straightforward task, and there are likely more efficient methods available than the one I'm about to suggest. Consider exploring front-end frameworks like Angular to manage your views, ensuring that your header remains static without needing to reload and maintaining state across pages.

To achieve this functionality through a workaround, you can utilize the CSS :target pseudo-selector along with some JavaScript. Essentially, upon clicking the "show" link, you would use JavaScript to add a hash to each navigation URL. When these links are clicked, the new page will load with a corresponding hash at the end. If this hash matches an element ID on the page (representing the content to show/hide), you can leverage the CSS :target pseudo-selector to hide it using display: none.

Here's a basic example (demonstrated in CodePen, but requires actual HTML pages to function properly):

HTML

<!-- HTML code omitted for brevity -->

CSS

#headerHidden:target {
  display: none;
}

JavaScript (using jQuery)

// JavaScript code snippet provided above

This approach may seem somewhat unconventional, but it presents an interesting solution to your problem. One potential drawback is the browser may scroll to the element corresponding to the hash in the URL. In this case, as the element is at the top of the page, this should not pose a significant issue.

While my markup differs from yours, I trust that you grasp the concept and extract any useful elements from this explanation!

What are the signs that an element was visible on screen prior to navigation?

Answer №1

Answer №2

Similar questions

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

What is the best way to obtain the SearchIDs for various searchNames using JavaScript?

Discovering the unique identifier of an item in Node.js is simple with these steps

When mousing over a subitem of the Image menu, ensure that the Image menu

Is it possible to create a button function in HTML that can alter the CSS image tag?

What is the best way to assign a unique ID to every element in this situation?

Is it possible to locate and eliminate the apostrophe along with the preceding letter?

Images Centerfold Team

Passing parameters in a callback function using $.getJSON in Javascript

`Resolving CORS error when setting up an AWS Lambda function with API Gateway on AWS`

The message "jest command not recognized" appears

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

What is the solution to having a div move along with window resizing without displacing adjacent divs?

RadAjaxNamespace is not found within the codebase

Ajax call encounters 404 error but successfully executes upon manual page refresh (F5)

The Ajax response is not providing the expected HTML object in jQuery

A pair of buttons each displaying a unique div block

Reorganize items that extend beyond the list into the next column using Bootstrap

Using Javascript/JQuery to extract numbers from a URL with regex or alternative methods

Regain focus after selecting a date with Bootstrap datepicker