2

I have this index page with an iframe on it. In the iframe I have some links like:

<a href="home.html" target="content">Who we are</a>

When I click on this link I would like to perform a jQuery action like sliding a div on the index page with this code.

$(window).load(function () {
$(".link_in_Iframe").click(function(){
$('.sliding_div_on_index_page').animate({'top': '-190px'}, 1000);
});

I know it is not possible to add/bind a click function to an iframe itself but could this be made possible with a link inside the iframe?

I managed the get the script working by replacing the click function by a hover function so basicly it works fine but I need to do this with a click function.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
easy rider
  • 182
  • 2
  • 11

1 Answers1

6

You could

$('#iFrameID').contents().find('#linkID').click(function(){
$('.sliding_div_on_index_page').animate({'top': '-190px'}, 1000);
}); );

Replace linkID with the ID of the link in the iframe that you want to trigger the click and iFrameID with the ID of the iframe that contains the link.

For example, that code would work in the following HTML:

The page with the iframe:

<iframe id = 'iFrameID' src = 'yourPage.html' />

yourPage.html or src of the iframe:

<a id = 'linkID'>Click Me</a>
Cilan
  • 13,101
  • 3
  • 34
  • 51
  • Thanks Man of Snow. Tryed this offline and it did notwork. Do I need to upload the html first? the index and iframe page are of the same domain so this should be no problem. – easy rider Jan 03 '14 at 17:58
  • @easyrider Can you post the page? Also, does it work online? Also, see what happens if the HTML is uploaded/check if the page isn't saved. Also, do the IDs match? – Cilan Jan 03 '14 at 17:59
  • I could post the page but it is very large so I showed a very small bit. No, your code did not work offline. – easy rider Jan 03 '14 at 18:02
  • @easyrider I know it didnt work offline, but did it work online? – Cilan Jan 03 '14 at 18:04
  • @easyrider Change `Who we are` **to** `Who we are`. Also, make your iFrame's ID **`iFrameID`.** – Cilan Jan 03 '14 at 18:05
  • @easyrider It might be a problem with security to access `document`, use `try` and `catch` to see. – Cilan Jan 03 '14 at 18:11
  • I use ID. I think I need to loadup the pages and see what happens. – easy rider Jan 03 '14 at 18:13
  • @easyrider Right, use `window.load = function()`. – Cilan Jan 03 '14 at 18:15
  • I use window.load = function() to. Maybe you are right about the security issue. I am going to put the html online in a few days and see. many thanks dough. – easy rider Jan 03 '14 at 18:18
  • @easyrider You're probably right, you can see with `try` and `catch`. So do you mind accepting my answer as a 'Thanks'? – Cilan Jan 03 '14 at 18:19
  • I installed a local server. Put the HTML in the root and the script worked fine. Thanks again Man of Snow. – easy rider Jan 03 '14 at 21:32