Tips for triggering the .click() function upon returning to index.html after visiting a different page

I'm in the process of creating a portfolio website where the index.html page features a sliding navigation bar that displays a collection of projects. Each project is linked to a separate work.html page. I would like the sliding nav to automatically open upon returning from a work.html page to the index.html page.

I appreciate any assistance with this!

The code snippet 

document.querySelector(".work").click()
successfully opens the sliding nav, but I am unsure of how to specifically trigger this action only when returning from a project or work.html page.

Below is the navigation markup found on both the index.html and work.html pages:

<ul class="nav-list">
    <li class="nav-item">
        <a class="nav-link work" href=# onclick="openNav();showButton()">work</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="...">experience</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="..." rel="noopener noreferrer" target="_blank">blog</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">about</a>
    </li>
</ul>

Upon returning to index.html, the '.work' link will automatically trigger the opening of the sliding nav.

javascripthtmlcss

Answer №1

Check out the code snippet below.

window.addEventListener('load', (event) => {
    if (document.referrer.indexOf('work') > -1) {
    //Execute necessary action
  }
});

document.referrer provides the URL of the previous page.

Answer №2

In case you are working with React, consider placing the function in componentDidUpdate(). If you are working without any framework, maintain a list to track the user's navigation to your index page. Utilize window.location for this purpose. While it may not be the optimal solution, experiment with it to observe the outcomes.

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

swapping between two lines within a div

i'm developing a new music app and I am in need of the following chord progression: Am F G Am Ab Gdim A# Hello these are just placeholder lyrics for demonstration purposes, hey hey hello which should look li ...

htmlcss

Encountering an issue with Angular's absence while attempting to minify the files

I utilized grunt along with usemin to merge and compress the following code: <!-- build:js /assets/vendor.js --> <script src="../public/bower_components/angular/angular.min.js"></script> <script src="../public/bower_components/angular ...

javascriptangularjsgruntjsuglifyjs

The specified container is not a valid DOM element. (Utilizing Ant Design carousel component in React.js)

Here is a snippet of my code where I am having an issue with my carousel. It seems to be giving me an error message "Target container is not a DOM element" when I try to run the server. I have divided my code into two parts - the first part containing the ...

javascriptreactjsant-design-pro

Opening the Gmail app from a link using JavaScript

What is the best way to open the Gmail app from a hyperlink? This link opens WhatsApp <a href="https://wa.me/">whatsapp</a> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a1f190f ...

javascripthtmlreactjsangular

The navbar in mobile view is not affected by the z-index property

Having created a navbar with scroll effect, I am encountering an issue with the mobile responsive view. Can someone please assist me in solving this problem? I would like to position the bottom nav-list below the navbar in the mobile view when clicking on ...

css

Creating an additional webpage other than index.html

I recently set up my own VPS and launched a web server using NGINX. Right now, I have an index.html page live on my website. However, I'm unsure of how to go about creating additional pages like an About page that can be accessed at www.my-domain-name ...

htmlexpressnginxforever

What steps can I take to alter this situation?

I am working on creating an API Code. Here is the code I have written: When we run the code, it displays as follows: website <?php include('simple_html_dom.php'); $url = 'https://www.g2g.com/wow-us/gold-2299-19249?&server=30805&a ...

phphtmlweb-scraping

Tips for shrinking the circumference of a circle

Currently, I have a circular div that has been styled using CSS animations. My goal is to keep the size of the circle consistent when it moves to the bottom, but reduce its size when it bounces back to the top. I am uncertain if this can be achieved solely ...

javascriptjqueryhtmlcss

Ways to extract a Bearer Token from an Authorization Header using JavaScript (Angular 2/4)

When working with JavaScript, I have successfully implemented a method for authenticating to my server using an http post request. Upon receiving a response from the server, it includes a JWT in an Authorization header like this: Authorization: Bearer my ...

javascriptangularheaderjwt

HTML - What steps can I take to ensure my website displays appropriately on various screen sizes?

Currently, I'm having some trouble with the appearance of my website. Let me explain: I've written some basic code (Please note that this code includes margins. I'm not sure if this is causing the issue) but the content doesn't display ...

htmlcss

Is there a way to transform a complex nested class object into a simple object without losing its methods

Is there a way to convert a deeply nested class object into a plain Object type while still retaining methods like getters and setters? class A { id = ""; data = { sync: {} }; } class SyncService { syncResultServiceA = { ...

javascripttypescriptobjectecmascript-6

JavaScript function to add or subtract

I need to include additional inputs for "+ and -" 60mm and 120mm in my function. How can I achieve this without turning all of them into separate functions? <template> <card class="card"> <h2>Measurement</h2> <form&g ...

javascriptvue.js

Tips for utilizing global functions in VUE 2 CLI crowd

I have multiple components that require the same functions. Is there a way to avoid duplicating the code in each component and instead use it globally...? Even if I put the function in the App.vue, it still isn't accessible in the components. ...

javascriptvue.js

If the span id includes PHP data that contains a certain phrase

Hey there, it's my first time posting and I'm in a bit of a bind with this script... Let me give you some background information first I am trying to create a click function for a register button that will check the span id (e.g. $("#username_r ...

javascriptphpjqueryhtml

Preload-webpack-plugin does not support pre-fetching files

I have a query about prefetching and preloading content. In my vue app, I noticed that after building, I have duplicate files loaded in my dist/index.html file. Here is an example: Additionally, the "scripts" are not being preloaded/prefetched as expec ...

javascripthtmlvue.jswebpackvue-cli

Adding retrieved ejs elements

Aim: I am struggling with a button that triggers a function to fetch more items from my Mongoose DataBase and display them in a table row dynamically. I am using the get method to retrieve data from the server side. Despite referring to advice from this po ...

javascriptexpressappendejsfetch-api

Building a Many-to-Many Relationship in Node.js Using Sequelize.js

As I utilize the sequelize node.js module to structure schema in Postgres SQL, I have defined two schemas for Project and my users. Project Schema module.exports = function(sequelize, DataTypes) { var project = sequelize.define('project', { ...

javascriptnode.jspostgresqlsequelize.js

The XMLHttpRequest's readystate gets stuck at 1 stage

Feeling a bit out of practice here - used to work with AJAX directly, but then spent a few years on a jQuery site and now my native JS skills are rusty. I've simplified my code as much as possible, but it's still not functioning: var rawfile = ...

javascriptajax

Stopping setTimeout when leaving the current page: Is it possible?

Good evening, I am looking for advice on how to cancel a setTimeout function when a user navigates to other pages (for example, by clicking other links or pressing the back button in the browser, but not by changing tabs). I have attempted to use the windo ...

javascripthtmlcssreactjssettimeout

What are some ways to enhance mobile browsing with CSS?

I'm facing a challenge with optimizing my webpage for different mobile resolutions in my beginner HTML/CSS course. Whenever I use a website resolution simulator to test, the layout doesn't look right on certain settings. Is there a method to aut ...

htmlcssmobile