Execute script when on a specific webpage AND navigating away from another specific webpage

I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from.

My desired outcome:

If I am leaving the "Biology" page and moving to "Biology → Zoology," I want only the "→ Zoology" part to fade in (which I have implemented successfully). But, if I continue to transition from "Biology → Zoology" to "Biology → Zoology → Vertebrates," I want the "→ Vertebrates" section to fade out while keeping "Biology → Zoology."

I believe the solution could look like this:

if ((window.location.pathname == 'x') && (Leaving_page == 'y')) {
            //code for fade-in/out here
}
javascriptjquerycsshtml

Answer №1

Here is the concept:

To determine the previous page visited by a user, you can utilize a script like $_SERVER['HTTP_REFERER'] in PHP or another method.

In addition, define various CSS animation effects with unique class names such as .name-slide-up, .name-fade-out.

After setting this up, implement an if statement to execute actions on your "zoology" page based on the previous page:

if (prev_page == 'http://www.example.com/biology'){
    //display    Biology <span class=".name-fade-in"> → Zoology <span>
}
else if (prev_page == 'http://www.example.com/biology/zoology/vertebrates'){
    //display    Biology → Zoology <span class=".name-fade-out"> → Vertebrates <span>
}
else{
    //display    Biology → Zoology
}

Repeat this process for all other pages to achieve similar effects.

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

When trying to use setInterval () after using clearInterval () within an onclick event, the functionality seems

Can anyone assist me with an issue I am encountering while using the setInterval() function and then trying to clear it with clearInterval()? The clearInterval() works fine, but the automatic functionality of li elements with a specific class suddenly stop ...

javascripthtmljqueryfunctionsetinterval

Exploring the World of React JS by Diving into Backend Data

Let's consider an application that consists of three pages: "HomePage" "PrivatePage" "UserManagementPage" In addition, there is a file called "BackendCommunication.js" responsible for handling communication with the backend. "Homepage.js" import Re ...

javascriptnode.jsreactjs

Is it possible that the HTTP module's deflate compression is only effective on specific CSS files and not all

I've been working on setting up mod deflate and gzip on my server, and while it's mostly functioning smoothly, I've noticed that not all files are being caught. It's not a matter of missing ALL javascript or CSS, but rather that some ar ...

cssapachecompressiongzipdeflate

Issue with JQuery integration in ListView components

My goal is to restrict certain textboxes to accept only numbers using jQuery. However, the code snippet I have below is not working when applied to a textbox inside a ListView or on another asp.net page. $(document).ready(function () { $("#<%= ...

jqueryasp.netlistview

Understanding the process of parsing an array in form-data in Node.js

https://i.stack.imgur.com/FPhX1.png I'm currently facing an issue while trying to read the image above in Node.js. I am using Express.js and have attempted to debug req.body, but it is returning an empty object {}. Even though I am using app.use(bod ...

javascriptnode.jsexpress

Issue with React.js: The formData is empty when trying to add a value from a file using material-ui-dropzone

I am currently working on integrating an upload feature using a library named material-ui-dropzone Although I believe the file upload process is functioning correctly, I encounter an issue with axios where the formData appears empty even prior to sending ...

javascriptreactjsmaterial-ui

Invoke a parent method from a nested child component in Vue

After setting up a project with vue-cli using the webpack template, I decided to incorporate a reusable bootstrap modal dialog in the App component. To achieve this, I created a method called showMessage in the App component that handles displaying the mod ...

javascriptvue.jsvue-cli

Using Jquery, Javascript, or Ajax to deactivate the iframe by clicking on it

Whenever a link in an iframe is clicked, I need to close the iframe and div elements. I have seen websites that are able to achieve this functionality, but I can't remember the specific URLs. A while ago, I copied this code from a website to detect ...

javascriptjqueryhtmlajax

Issue with fluid layout in CSS - Unable to specify height in pixels and minimum height property not functioning as expected

While working on a liquid layout, I have set all my width and height values in percentages. However, during the design process, I needed to check how my CSS was rendering so I temporarily set the height in pixels. Eventually, the height in percentage wil ...

css-floatcss

Unable to input data into the Database using an HTML Form combined with PHP

I am facing an issue with my MyPHP Database as no records are showing up when I execute these scripts. The environment I am using includes: APACHE 2.4.7 MYSQL 5.6.15 PHP 5.5.8 Let's start with the HTML Code... <html> <center> <f ...

phphtmlmysqlapacheeasyphp

How can I troubleshoot a 403 Forbidden error in Django that occurs when making a POST request using AJAX?

When using Django Console, a red error message popped up with the following log: [16/Jan/2015 01:33:34] "POST /accounts/benjamin/listview HTTP/1.1" 404 7562 Switching over to Chrome Dev Console revealed a different issue: jquery-2.1.1.min.js:4 POST http ...

jqueryajaxdjango

Having trouble updating attribute through ajax requests

How can I set attribute values using ajax-jquery? Here are some snippets of code: HTML_CODE ========================================================================== <div class="col"> <ul class="nav nav-pills justify-content-end& ...

javascripthtmljqueryajax

Using Jquery to make an Ajax request to an Asp.net Web Method

My current approach involves using a jquery method to transmit only the member identification # from the client side to the server side. On the server side, I have a traditional Web Method in place to receive the data and execute SQL queries accordingly. ...

javascriptjqueryasp.netajaxwebmethod

"Looping through each item in a list using Angular

I have a setup for an HTTP request that will return the list of products once all promises are fulfilled. My objective is to initially set the opacity of these products to 0, and then use a forEach loop to add a class that sets their opacity to 1. While ...

javascriptangularjsionic-framework

Leveraging jQuery's .when and .then methods allows for

I'm attempting to utilize a shared ajax function that is meant to retrieve the value returned from the PHP script. function fetchAjax(url, data, type) { result = 0; $.when( $.ajax({ type: "POST", url: url, data: data, ...

javascriptjqueryajax

When toggling between light and dark themes using the useMediaQuery hook, the Material-ui styling is being overridden

While working with next.js and material-ui, I encountered an issue where the theme would change based on user preference. However, when switching to light mode, the JSS Styles that I had set were being overwritten. This problem only seemed to occur in ligh ...

javascriptreactjsmaterial-uinext.jsjss

Create unique error messages using Vue validators

Two fields named text and email are included in my template. Below is the structure of the template: HTML <!DOCTYPE html> <html> <head> <title>Vue - Validations</title> <script src="Libraries/vue/vue.min.js&qu ...

javascriptvue.jsvalidationvue-validator

Obtain the value of an attribute and store it as a variable in Google

Hello! I currently have code on my website that retrieves the site search query stored in the 'value' attribute. Specifically, I am looking to capture the word 'disjoncteur' for a variable within Google Tag Manager (GTM). <div class= ...

csscss-selectorsgoogle-tag-manager

Integrating Facebook login into a website running on localhost

Within my index.php file, the code includes: <div id="fb-root"></div> <script type="text/javascript"> window.fbAsyncInit = function () { FB.init({ appId: '<?php echo $appId; ?>', cookie: true, ...

phpjqueryajaxfacebookfacebook-php-sdk

What is the reason for the .foo a:link, .foo a:visited {} selector taking precedence over the a:hover, a:active {} selector in CSS?

Sample code: http://jsfiddle.net/RuQNP/ <!DOCTYPE html> <html> <head> <title>Foo</title> <style type="text/css"> a:link, a:visited { color: blue; } a:hover, a:active { ...

csscss-selectors