Pass onclick from another page - javascript

I have a page showing a list of events with anchors which trigger popups onclick. How can I trigger these modal popups when an anchor is clicked on another page?
How can I pass the values on, I suppose, and trigger the click?
For example, anchor on event page I'd like to trigger a popup for from another page:
<a class="event " href="#" data-onclick="popup" data-color="#000" data-event-id="3">
<div class="event-inner" data-event-id="3"></div>
</a>

Your webpage and Javascript won't have any knowledge of the anchor tags if they aren't on the current page (or even in another tab, for that matter). If you really need that information available on the second page, you can try passing it through the query string like this.
Otherwise, you can save JSON data for your events on the server and retrieve them for every page that needs them. If you're not familiar with JSON and AJAX, you can find a tutorial here. If you're using jquery, it has a great API for AJAX calls.

Related

How to get a specific link from external webpage and automatically apply clickable event on it with javascript?

Suppose i have an URL example.com, i want read the source of that page and get a particular link like example1.com and make a clickable event on it ,means that represents user had click the link from that URL example.com to example1.com.
You will need to first make an ajax call to that page to get the content to parse, then parse the webpage content with the link in your case example.com then go to the page (with or without click event).
Requesting Webpage
You will need some sort of ajax call to get the contents of the webpage for parsing.
See jQuery Ajax
Parsing
Get the #id or .class where the link you need is located (within the parsing function).
see jQuery Parsing
Redirecting
Click event isn't necessarly needed if you can just redirect to that link when you get it but this answer here has both information you need about click/redirecting with JS.
Good luck.

Reacting differently to links leading to the same page with vanilla JS

I have two html pages, linking to each other with tags. However, the behavior of the opened page needs to be different, based on which link is clicked to get there.
Example: One of the links is in a drop down header menu, and the new window should start with this menu open and then retract it.
The other link is in a blurb on the front page, and the opened page should therefore not start with the header dropdown opened and then retract it.
Is there a way to modify behaviour of the opened page, based on which link is used to get there?
Cheers.
Pass data to another page as href value. Grab this data using PHP and change the behaviour of new page depending upon different values of this data.
Some reference : Passing values to another php page using anchor tag

Determine which link (on same page) was used?

I have a page with two links to an introduction/registration page. We want to show different content based on which link the user uses. They appear in different contexts on the same page, and we would like to tailor the message on the registration page to that context. For SEO purposes I was told not to change the URL.
I'm using rails. Since the incoming user will have the same referrer regardless of which link was clicked, what is the best way to know which link was used to get to my page? Is it possible in a practical way without altering the URL?
I would change the href on click like described in How to change href of <a> tag on button click through javascript
But I would not change the whole url. I would only append a parameter. This should not influence SEO.

Back button / bfcache: Object hidden in DOM via jquery is visible again when going back?

I have a webpage with a box that appears on the first visit.
In other parts of the site, there are 'back' buttons, and also, of course, the browser back button.
However, the when using the back button (browser or html), the box is visible again.
Is there a way to ensure that the box will not be displayed again when going back? Even removing the object completely with .remove() doesn't work.
I've made an example jsbin here:
http://jsbin.com/losilu/2/
First, click the link to hide the box, then click the second link to go forward.
HTML:
<div id="hide-on-back">
Make this go away
</div>
1. Click First To Hide<br/>
<br/>
2. Go Forward
JS:
$(document).ready(function(){
$('a#hide-box').click(function(e){
e.preventDefault();
$('#hide-on-back').fadeOut();
});
});
HTML/JS (Back Button):
<a id="go-back" href="#" onclick="function(){history.go(-1);}">Go Back</a>
As soon as you reload the page any modification you've done to the dom via javascript gets reset to its initial state. So, either you use ajax (e.g. with jquery.load I believe) to avoid getting the whole page reloaded or you provide a url parameter which you can check for via jquery (Get url parameter jquery Or How to Get Query String Values In js)
Last solution would be saving the information using cookies.

Javascript as a link

I am making a website. In this the contents of a particular div has changes using Javascript and json when the user selects a link.
The problem I am facing is that that I am not able to use the back button since all my links for changing the div contents are like:
<a href=" **some javascript function**">
How should I change this as to use the default back/forward buttons effectively.
I know that it can be used to navigate to divs by using #, but the problem is that all my links are in the same div.
Is there any way the back button can execute a previously executed javascript?
You are looking for history.js. Also <a href="javascript:…"> is a really bad practice. Use <a> to reference other documents / files, not (directly) invoke javascript functions.

Categories

Resources