0

I want to create something like this:

Clicking a "button" in an HTML page will direct the user to another HTML page, and make a "hidden div" in that other page shows.

How to make this with jQuery?

Here is my code:

• PAGE01.html (where the "button" resides): (HTML code & jQuery code): http://jsfiddle.net/pDpeN/

• PAGE02.html (where the user will be directed and the "hidden div" resides): (HTML code): http://jsfiddle.net/kdHrh/

Thank you in advance.

Bayu
  • 437
  • 2
  • 10
  • 19

3 Answers3

1

Best I can think off based on your example is to make call to second page with anchor

document.location.href='PAGE02.html#'+x;

Second page will be than PAGE02.html#hiddenDiv. Than parse value of hash from jQuery on second page and show div with same id. See here how: Getting URL hash location, and using it in jQuery

Second line of your script on first page ( $('#'+x).slideDown(200);) can not in any way do that, you must do it on second page.

But I think you should rethink your approach, in your example all should be probably done in a single page.

Community
  • 1
  • 1
Ivan Ivanic
  • 2,982
  • 1
  • 20
  • 21
  • I need them in 2 pages... How to get the "#" value in PAGE01.html? I tried this but doesn't work: $(document).ready(function() { if ($.url.attr('anchor') == 'hiddenDiv'){ $('#' + 'hiddenDiv').show(); } }); – Bayu Jul 10 '11 at 12:53
  • Thanks Ivan, I combined your answer with Abdullah's, and managed to create dynamic condition to show and hide any divs in PAGE01.html. Unfortunately I'm unable vote up for your answer due to the lack of my reputation in this site. – Bayu Jul 11 '11 at 05:30
  • No problem :) Glad that you make it. – Ivan Ivanic Jul 11 '11 at 19:26
1

You can just pass a parameter to URL (e.g. www.example.com/?loaddiv=1) and then check for loaddiv=1 using simple jquery code on the next page (Search on Google).

ashvagan
  • 43
  • 2
  • 8
  • I'm sorry, I don't get it, because I know very little about jQuery. How to get the URL parameter in PAGE02.html and implement it to show the "hidden div"? Like if(URLParameter == 1){ hiddenDiv.show() } ? – Bayu Jul 10 '11 at 12:48
  • yes, something like it. Just pass the value for that particular URL parameter and on the next page, check that value and then show the div. – ashvagan Jul 10 '11 at 15:36
  • Could you please give me the example code for PAGE01.html? Because I tried to get the URL Variable in PAGE01.html with JQuery URL Parser plugin, but no luck... – Bayu Jul 11 '11 at 03:55
0

This will open the redirect url:

<a href="javascript:q=(document.location.href);void(open('http://example.com/#redirect,'_self','resizable,location,menubar,toolbar,scrollbars,status'));">click here
</a>

for second window:

$(function(){
   if(window.location.hash.replace('#','') == 'redirect'){
        $('#hiddenDiv').slideDown();
   }
});

here i use a hashing when the url is visited by button.

thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
  • @Bayu this will open a new link in same window. if u dont want this just remove `'_self'` – thecodeparadox Jul 10 '11 at 12:18
  • This will show the "hidden div" on PAGE02.html. But when the user opens PAGE02.html directly without clicking the "button" on PAGE01.html first, the "hidden div" will show by default. How to make: if the user clicks the "button" on PAGE01.html, show "hidden div" on PAGE02.html? – Bayu Jul 10 '11 at 12:52
  • @Bayu check this solution, please. – thecodeparadox Jul 10 '11 at 17:36
  • Thanks Abdullah, I combined your answer with Ivan's, and managed to create dynamic condition to show and hide any divs in PAGE01.html – Bayu Jul 11 '11 at 05:30