inasiopo inasiopo - 4 months ago 7
jQuery Question

Run JQuery in when new page loads using variable from the initial page

I have made a page with two divs that cover the whole page, but using them one by one, by hiding and showing them in request.

In other words, I only see the one page, and when clicking button 1 some things hide and some others show, when clicking button 2 the opposite.

My code:

$(function() {
$('.boxes').click(function() {
var e = $(this).attr('id');
if(e == 'Button1') {
else if(e == 'Button2') {

That works fine.

Now the problem is that this is not my landing page. I have a landing (home) page where someone can click a button depending on what he wants to see. And I would like to load the page with those divs but with the correct div showing.

Basically what I need is the same process, but with the buttons (button1 & button2) being in a different page. So the click loads the page and runs the script to load (show) the correct Div.

I was thinking that if I can get a variable (variable e) to get value when button click and pass that variable to the next page when loaded that would work. Any idea on how to do that?

Or any idea on a different way to make this work?


You can actually grab the url on any given page by

var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

So what I would do is the following. On the landing page when you press the button pass a url with an extra parameter:

On the other pages onload() function simply find the url and grab the divName. Then have both divs start as opacity:0 (css) and fade the correct div in.

Hope this helps!