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

Having difficulty initializing jQuery DataTables upon button click with an Ajax request

Checking for the presence of an element prior to moving forward in a selenium and python script

Guide to updating the value of an input field with Selenium in Python

Yet another query about jQuery validation

Sequence of HTML elements arranged in a stack

The alignment issue persists in HTML/CSS despite troubleshooting efforts

Setting Up AdminLTE Using Bower

elevate the div with a floating effect

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

The jQuery function is not functioning correctly

transmitting a JSON object to the JSONResult controller in ASP.NET MVC

cordova and nodejs causing a communication problem

What is the best way to create a line break in a React caption without it being visible to the user?

Error: The request does not have the 'Access-Control-Allow-Origin' header

Is there a way to securely store my JWT Token within my application's state?

A guide to showing JSON data in reverse order on a Vue.js HTML page

What is the best approach for addressing null values within my sorting function?

What is the process by which node.js synchronously delivers a response to a REST web service?

Tips for preventing a bootstrap modal from being dragged beyond its parent container

What is the best way to compare JavaScript arrays with the same items but in a different order?