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);
    }); 
});

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

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!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with joining tables in query on Cordova Mobile app

I have 2 queries that will return results which I plan to use in JSON format. The first query is $query = "SELECT * FROM info_location WHERE location_id=".$id.""; and the second query $query = "SELECT t1.location_id,t1.street,t1 ...

Challenges encountered while using Selenium WebDriver to upload images

I'm having trouble adding an image as a normal attachment to an email (not as an inline image). When inspecting the HTML DOM with Firebug, I noticed there are two elements with xpath //input@type='file', which is due to the presence of two b ...

What is the best method to substitute a comma and period with just a period in a textarea

Creating a text area with auto-replacing characters like straight quotes, double dashes to em dash, and double spaces to single space was simple. However, I'm facing difficulty in adding a script for replacing certain characters: word . as word. wor ...

Navigating Divs Using jQuery

I am working with a class that has multiple divs, each with a unique id attached to it. I am using jQuery to dynamically cycle through these divs. This is a snippet of my HTML code: <div id ="result">RESULT GOES HERE</div> ...

Troubleshooting unexpected issues with jquery's slideToggle functionality

I have implemented a simple toggle feature, but for some reason it triggers when I click anywhere on the page. Below is the jquery code I am using: $(document).on('click', $('#create_customer'), function(){ $('#create_custome ...

Utilizing the <style scoped> feature within my Angular template

When adding CSS styles in the specified htm file's templateUrl while loading a directive, I wonder if this is a bad idea. Will it be repeated every time the template is instantiated on the rendered page, or does Angular handle this differently? By usi ...

Send the result of a successful AJAX request to a partial view

I have added these lines of code, where the success function returns data in the form of [object Object], with attributes like Name, Category, and Description. $.ajax({ url: rootUrl + 'Admin/EditRSS', type: "GET", data: { ...

A PHP drop-down menu maintains a fixed position

I have set up a database called pogoda with a city table containing columns for city and cityid. Using PHP, I am creating a dynamic list and submitting the chosen value into subsequent code. To ensure that the drop-down list has a default starting positio ...

Using JQuery to nest a header tag within a div element

Having trouble adding a header to a div element. The h1 tag just shows 'loading' and I'm not sure why. <div data-role="page" id="addviewtask"> <div id="header" data-role="header" data-theme="a" data-position="fixed"> ...

What are the steps to generate two unique instances from a single class?

Is there a way to output two instances of the class Cat : Skitty, 9 years and Pixel, 6 years, in the console? (() => { class Cat { constructor(name, age) { this.name = name; this.age = age; } } docume ...

Using an action code to retrieve the current user from firebase: A step-by-step guide

I am in the process of designing 2 registration pages for users. The initial page prompts the user to input their email address only. After they submit this information, the following code is executed: await createUserWithEmailAndPassword(auth, email.value ...

Error Encountered: Module Missing Following NPM Installation

I just started using Node and ran into an issue after setting up a new node project with NPM init. I tried installing lodash by running the command: npm install lodash --save However, the command resulted in the following error: npm ERR! code MODULE_NOT ...

Fade effect on content in Bootstrap carousel

I am currently making some updates to the website mcelroymotors.com. One issue I have encountered while working on the homepage carousel is that the caption only pops up on the first slide, and does not appear on any of the subsequent slides. I would lik ...

Encountering an issue with the history module when utilizing the webpack dev server

I am encountering an issue while trying to run webpack dev server. The history functionality was working fine until I started using the webpack module. A warning message appeared in my console: WARNING in ./src/history.js 2:15-35 export 'createBrows ...

What is the process for editing or importing CSS within a React project?

I'm a beginner in React and I am encountering an issue with CSS not loading properly. I followed the tutorial for importing it, but it seems like there might be a better way to do it now as the tutorial is outdated. Below is my code, I would appreciat ...

Sorting data in AngularJS using the OrderBy filter in ascending

I am using ng-repeat in my code: <label ng-repeat="atp in Keywords | unique:'atp'"> {{atp}} </label> The values in atp are as follows: client animal zoo boat I want the final output to be: animal boat client zoo Thank you for ...

"An issue with preventing default behavior when clicking on a jQuery element

I need some assistance preventing a JQuery onclick function from scrolling the page to the top. I have tried using preventDefault() without success. You can find the code on this website: Below is the code snippet that I am currently using: $( document ...

I have written code in JavaScript, but now I am interested in converting it to jQuery

What is the best way to convert this to jQuery? showDish("balkandish1") function showDish(dishName) { var i; $(".city").css('display', 'none'); $("#" + dishName).css('display', 'block'); } ...

Creating a bordered triangle using only CSS

Looking to create a message holder with a triangular tip bordered shape? I've successfully crafted the tip using two triangles: #triangle-border { width: 0px; height: 0px; border-style: solid; border-width: 0 100px 80px 100px; bor ...

ms-card malfunctioning due to data issues

I'm facing difficulties in transferring the data to the template. Although I can access the data in HTML using vm.maquinas and maquina, I am unable to pass it to the TEMPLATE through ng-model. Information about ms-cards was not abundant. Module ang ...