Customize URL based on selected button

My question may be a bit unclear, but I want to generate dynamic URLs that redirect users to specific pages based on the link clicked. For example:

  1. Parent page with links (a, b, c, x, y)
  2. User clicks on 'b'
  3. User is taken to a Node Page that plays a video and then automatically redirects to Page 'b' (using JS to simulate click)

Is there a way for the Node Page to detect which link was clicked on the parent page and direct the user accordingly? See Image below - https://i.sstatic.net/sJZdD.png

I have already implemented a script on the Node Page that automatically progresses to the next page after 15.5 seconds:

<script>
    $("document").ready(function() {
        setTimeout(function() {
            $(".proceed").trigger('click');
        },15500);
    });
</script>

I would like to know if the Node Page can determine the next destination based on the link clicked on the parent page.

This HTML package will be used on an e-detailing platform running on iOS for iPad, supporting HTML, CSS & JS/jQuery.

Thank you in advance!

javascriptjqueryhtmlcss

Answer №1

Give this a try!

<a class="special-link" data-url="x.html">X</a>
<a class="special-link" data-url="y.html">Y</a>

<script>
var link = "";
$(".special-link").click(function(){
link=$(this).data("url");

//Function to start video
startVideo();
});

//Function triggered when video finishes
function videoFinished()
{
   if(link!="")
      window.location.href=link;

}

</script>

Answer №2

You can easily achieve this by implementing a JavaScript switch statement (check here) and passing the case value through the URL clicked by the user (find more info here).

Create the switch statement within the node page, which will then redirect you to the desired destination page using JavaScript.

Answer №3

One way to accomplish this is by utilizing global variables and assigning values to them. 

var currentURL = window.location.href;

Next, on the node page, you can compare the value of the currentURL variable and navigate accordingly. Alternatively, you can also utilize document.referrer to retrieve the previous URL and perform the necessary checks based on it.

var prevURL = document.referrer;

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

Data-bind knockout select knockout bind data

Hello! I am a beginner at using knockout and I have encountered an issue with data-binds and the "option" binding. My goal is to display two drop downs populated with data from my database. Surprisingly, I have managed to get the first drop down working pe ...

javascripthtmlajaxknockout.jsbootstrap-4

Is there a way to compel the browser or JavaScript to delete/disregard a cached file?

I've encountered an issue with my Javascript program that extracts data from a text file and displays it in a table. The problem arises when I update the text file - the changes don't reflect on the table because the browser is caching the file. ...

javascripthtmlcaching

The origin of the distribution file diverges from the source path of the development

Currently, I have implemented a task runner with Gulp to export all my folders into a distribution folder. However, an issue arises when exporting images to the distribution folder as the path name differs from what is specified in my source files. For ins ...

htmlimagenpmgulp

Can I create a div with a rounded right side?

Is there a way to give a div a slightly rounded right side using CSS? If so, can you show me how in this fiddle template: http://jsfiddle.net/z2hejemu/ HTML <div class="rounded-side"> <p>By default, this div is rectangular. I would like t ...

htmlcss

The Art of Ajax: Mastering Communication in Web Development

I am currently working on a project that involves two files, A .js and a .php. The .php file is responsible for connecting to the MySQL database, while the .js file serves as the frontend of the system. I am in the process of setting it up so that it sends ...

phpjqueryajax

Tips for efficiently organizing and maintaining a selection of JavaScript variables by easily adding and removing them as needed

I am currently developing items that will be shown on a webpage. I achieve this by utilizing the following code: var popup = "something..." Is there a method to keep track of all the created popup variables and control them efficiently using: adding a ...

javascriptjquery

Incorporate the xml2js JavaScript library with Angular 2 for enhanced functionality

I've been attempting to utilize xml2js as an XML parser within my Angular 2 (RC 1 with TypeScript) web application. Unfortunately, I've encountered several errors without finding a solution that works. Here is the detailed process I followed: ...

javascriptangularjsnode.jstypescriptangular

Automatically numbering text boxes upon pressing the enter key

Is there a way to automatically number textboxes when I type "1" and hit enter in one of them? For example, if I have 3 textboxes and I type "1" in the first one, can the other textboxes be numbered as 2 and 3 accordingly? <input type="text&qu ...

javascripthtml

Is it possible to write CSS 3 rows without using the :not() selector for improved efficiency?

Consider using CSS code like the following in some cases: input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border:1px solid #fff; background-color:#f3f4f5; } <div><input type="text" name="alpha" /&g ...

htmlcssattributescss-selectors

Capable of generating accounts using Postman, experiencing difficulties with creating accounts from React

Currently, I am working on a project that utilizes a React/Spring Boot/MYSQL stack and I have encountered an error message stating "POST 415: SyntaxError: Unexpected end of input at line 67". Line 67 is as follows: }).then(res => res.json()) This sect ...

javascriptmysqljsonreactjsspring-boot

Issues with Java Spring jQuery ajax functionality not functioning as expected

I am currently working with the following code snippet: var email = document.getElementById("email").value; $.post("/valid",{emailadd: email},function(data){ alert(data); }); In my server-side code, I have the following: @RequestMapping( ...

jqueryajaxspring-mvc

Trigger a jQuery alert when a row containing a specific attribute is clicked

I am trying to work with an HTML table that looks like the one below: <table id='messagelist'> <tr id="rcmrowMTM" class="message selected" aria-selected="true"> <td class="threads"><span class="threads"></span&g ...

jqueryhtml

Leveraging the package.json file to execute a separate script within the package.json file

Within my project's package.json file, I have a script called npm run script1. Additionally, my project includes a private npm package as a dependency, which contains its own set of scripts in its package.json file, including one named script2. My goa ...

javascriptnode.jsreactjsnpm

The table dynamically adjusts based on the JSON data

My goal is to design a table that displays a JSON-object with multiple levels. The challenge is to showcase all the data in one row, even when it shows as [object object] like the Id in the plnkr example. ResultData=[ { "First_name": "xx", ...

htmljsonangular

Altering the text field's content when the dropdown menu is modified

I have been attempting to modify the content of 5 text boxes whenever one of the 5 dropdown menus is altered. However, my current approach does not seem to be working as expected. All I want to do is transfer the selected value from the dropdown menu int ...

jqueryfunctiondrop-down-menuonchangeselect-menu

The function window.addEventListener('load') functions properly on desktop computers, but does not work on mobile devices

After developing a react website, I noticed that it functions correctly on PC but not on Mobile devices. componentDidMount() { window.addEventListener('scroll', this.onScroll); // This event works fine window.addEventListener('load&a ...

javascriptreactjsdomaddeventlistener

Having trouble importing Angular flex-layout into my feature module

I'm facing an issue with Angular flex-layout in one of my modules. It works perfectly fine when I import flex-layout in the app module, but only for the app component. However, when I import flex-layout in another module, it doesn't seem to work ...

javascriptangularangular-materialangular-flex-layout

Reducing the amount of text displayed on ion-text to a minimum

HTML: <ion-list *ngFor="let message of messages"> <ion-item lines="none" type="button" button="true"> <ion-grid> <ion-row> <ion-col class="message"> <ion-text> ...

htmlcssangulartypescriptionic-framework

Activate SVG graphics upon entering the window (scroll)

Can anyone assist me with a challenging issue? I have numerous SVG graphics on certain pages of my website that start playing when the page loads. However, since many of them are located below the fold, I would like them to only begin playing (and play onc ...

javascripthtmlcsssvg

Using addClass and fadeIn simultaneously when hovering over an element

After writing JavaScript code that utilizes the JQuery library to swap classes on hover, I noticed that the transition between background images was quite abrupt. The code functions as intended, but I would prefer to incorporate a fadeIn and fadeOut effect ...

javascriptjquery