A div on click redirect to another HTML page and call a javascript to show a particular div
Solution 1
You could try something like this:
Add this to FIRST.html
$(document).ready(function() {
$('div').click(function () {
id = $(this).attr('id').substring(1);
window.location = 'SECOND.html?id=' + id;
});
var getVar = location.search.replace('?', '').split('=');
$('div[id$=' + getVar[1] + ']')[0].scrollIntoView();
});
Add this to SECOND.html
$(document).ready(function() {
$('div').click(function () {
id = $(this).attr('id').substring(1);
window.location = 'FIRST.html?id=' + id;
});
var getVar = location.search.replace('?', '').split('=');
$('div[id$=' + getVar[1] + ']')[0].scrollIntoView();
});
Solution 2
//FIRST.html
$("#A10").click(function () {
document.location.href = "SECOND.html?id=B10";
})
//SECOND.html
$(function () {
//Prepare the parameters
var q = document.location.search;
var qp = q.replace("?", "").split("&");
var params = {};
$(qp).each(function (i, kv) {
var p = kv.split("=");
params[p[0]] = p[1];
});
var idToOpen = params["id"]
$("#" + idToOpen).show();
})
//You can add some other parameters
document.location.href = "SECOND.html?id=B10&message=SomeMessage";
//Get it like this
$(function () {
//Prepare the parameters
var q = document.location.search;
var qp = q.replace("?", "").split("&");
var params = {};
$(qp).each(function (i, kv) {
var p = kv.split("=");
params[p[0]] = p[1];
});
var idToOpen = params["id"]
var message = params["message"]
$("#" + idToOpen).show();
alert("message")
})
Solution 3
in FIRST.html put this code
$('div').click(function() {
var someId = $(this).attr("id");
window.open('SECOND.html/#'+someId);
});
Or you can use your full URL path instead SECOND.html/#. Its just an idea, not tested, but you can try it. P.S. Those are two different pages, so you can put same ID's on both to try this example. It's not pure JavaScript but Jquery.
Comments
-
LINGS over 1 year
I have two html files namely FIRST.html and SECOND.html
FIRST.html has DIVs with IDs A1 to A100, SECOND.html has DIVs with IDs B1 to B100
On clicking a particular DIV in FIRST.html, I want to redirect the user to SECOND.html and show the corresponding DIV.
For example, if a user clicks DIV id=A10 in FIRST.html, he should be redirected to SECOND.html and be shown the DIV id=B10.
I need thoughts on how this could be done, I would like to know if we could pass some parameters from one page to another and then call a javascript using those parameters.
Thank you!
-
ama2 over 11 yearsyou could store the number in localStorage or sessionStorage using javascript and then look for it in the second page and ....
-
Fredrik Sundmyhr over 11 yearsDo you want that the page should be scrolled down to the div? And are you going to use jQuery?
-
LINGS over 11 years@ama2 - thank you for your comment, i have no idea about it, should look into it.
-
LINGS over 11 years@FredrikSundmyhr - yes! i need to scroll down to the div in the new page, i have the javascripts to reach to that location. It is all about passing the ID number to the next page
-
ama2 over 11 yearsthis could help you with storage: developer.mozilla.org/en/DOM/Storage , if you need IE 7,8 support you might want to include code.google.com/p/sessionstorage
-
Fredrik Sundmyhr over 11 yearsYou could also send the number/id as a get variable and get it using javascript.
-