Conceal a div element after redirecting to a different HTML page

Question

Conceal a div element after redirecting to a different HTML page

I have a dilemma with my two HTML pages - index.html and register.html. I am trying to navigate from index.html to register.html, but I want to skip the select region step and go straight to the login page. Here's the code snippet I've been attempting:

$("#lgnToProfile").on("click", function(){
    window.location.href = "register.html";
    $("#slctRgn").hide();
    $("#lgnPage").show();
});

Could someone please review this and provide guidance on how to fix it? What am I doing wrong?

I checked out some solutions suggested on Stack Overflow, specifically regarding showing a DIV or section after redirecting to an HTML page, but unfortunately, none of them have worked for me.

javascript jquery html css

Answer 1

Answer №1

To avoid altering your URL path, you can utilize "localStorage":

var currentPath = window.location.pathname;
var savedPath   = localStorage.getItem('previousPage');

// check if a page has been saved
if (typeof savedPath === 'string') {

    // condition for when the current page is "register.html" and the saved page is "index.html"
    if (currentPath.match('/register.html') && savedPath.match('/index.html')) {
        $("#slctRgn").hide();
        $("#lgnPage").show();
    }
}

// save current page
localStorage.setItem('previousPage', currentPath);

https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage

Answer 2

To avoid altering your URL path, you can utilize "localStorage":

var currentPath = window.location.pathname;
var savedPath   = localStorage.getItem('previousPage');

// check if a page has been saved
if (typeof savedPath === 'string') {

    // condition for when the current page is "register.html" and the saved page is "index.html"
    if (currentPath.match('/register.html') && savedPath.match('/index.html')) {
        $("#slctRgn").hide();
        $("#lgnPage").show();
    }
}

// save current page
localStorage.setItem('previousPage', currentPath);

https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage

Answer 3

Answer №2

After transitioning to a new webpage, any Javascript that was executed on the previous page becomes ineffective.

To address this, you must somehow communicate to register.html that it should hide the select region div and then proceed to conceal the div using a script within register.html.

For instance, in index.html, you can append a query string parameter to notify register.html.

$("#lgnToProfile").on("click", function() {
    window.location.href = "register.html?hideSlctRgn=1";
}

Subsequently, in register.html, upon document readiness, verify if the parameter is present and hide the div accordingly.

$(function() {
    if ( window.location.search.indexOf('hideSlctRgn=1') != -1 ) {
        $("#slctRgn").hide();
        $("#lgnPage").show();
    }
})

There exist alternative (and preferable) methods for detecting the presence of a query string parameter, but the above serves as a straightforward approach. Instead of a query string parameter, you could also utilize a cookie or explore the option of utilizing local storage.

Answer 4

After transitioning to a new webpage, any Javascript that was executed on the previous page becomes ineffective.

To address this, you must somehow communicate to register.html that it should hide the select region div and then proceed to conceal the div using a script within register.html.

For instance, in index.html, you can append a query string parameter to notify register.html.

$("#lgnToProfile").on("click", function() {
    window.location.href = "register.html?hideSlctRgn=1";
}

Subsequently, in register.html, upon document readiness, verify if the parameter is present and hide the div accordingly.

$(function() {
    if ( window.location.search.indexOf('hideSlctRgn=1') != -1 ) {
        $("#slctRgn").hide();
        $("#lgnPage").show();
    }
})

There exist alternative (and preferable) methods for detecting the presence of a query string parameter, but the above serves as a straightforward approach. Instead of a query string parameter, you could also utilize a cookie or explore the option of utilizing local storage.

Answer 5

Answer №3

In order to proceed to the next page, it is important to examine the referer page. Since JavaScript lacks access to the referer page, one can achieve this by utilizing an anchor or hash to verify the referer and display/ conceal the necessary elements.

Simply add a link on index.html without requiring a click event in jQuery, directing to the registration page with an appended hash name: register.html#referer. The term referer can be customized as needed.

Upon reaching register.html, one must assess the value of the hash:

$(document).ready(function() {

    // retrieve the hash value
    var hash = window.location.hash;

    // check if the hash exists and corresponds to “referer” (the chosen hash value)
    if(hash == "#referer") {

        // implement your code to display or hide elements

    }

});

Answer 6

In order to proceed to the next page, it is important to examine the referer page. Since JavaScript lacks access to the referer page, one can achieve this by utilizing an anchor or hash to verify the referer and display/ conceal the necessary elements.

Simply add a link on index.html without requiring a click event in jQuery, directing to the registration page with an appended hash name: register.html#referer. The term referer can be customized as needed.

Upon reaching register.html, one must assess the value of the hash:

$(document).ready(function() {

    // retrieve the hash value
    var hash = window.location.hash;

    // check if the hash exists and corresponds to “referer” (the chosen hash value)
    if(hash == "#referer") {

        // implement your code to display or hide elements

    }

});

Conceal a div element after redirecting to a different HTML page

Answer №1

Answer №2

Answer №3

Similar questions

Show a toast message and reset the form upon submission

Why is it that when drawing rectangles with HTML 5 canvas using pixel size, a black rectangle appears instead of blue?

Modify CSS to switch body background image when a DIV is hovered

What is the best way to keep the heights of two divs in sync?

Transform the appearance of several elements using querySelectorAll

Leveraging JavaScript to create a horizontal divider

Developing a notification system using a combination of ajax, jquery, and Iframe

Issues with window.location.href on iOS devices are causing functionality problems

Having trouble setting the background of a div in CSS

Image not located: 404 error in JavaScript

Utilizing Promises in the apply function

Interacting with JQuery UI Button causes it to shift position on mouseover

How can I apply styling to Angular 2 component selector tags?

When using the Google Maps API fetch() method, the response is empty. However, when accessing the same

Convert a tuple into a JSON string

The issue of data not being transmitted when an ajax jquery form is modified

Injecting Vibrant Lines into Browser Using three.js

Need help implementing the disableGutters property on MTableToolbar?

How to ensure NodeJS waits for a response before returning a value

Converting a database query result into a JavaScript variable: A step-by-step guide