?
Solved

How do I make a JQuery function work across iframes? (animate divs/iframes nested inside iframes)

Posted on 2011-05-08
10
Medium Priority
?
1,169 Views
Last Modified: 2012-05-11
I am attaching 5 files here which when downloaded go in the same folder:

* index.html - main file
* one.html - index.html loads this file in an iframe
* two.html - one.html loads this file in an iframe
* jquery.animation.easing.js
* jquery-1.5.2.js

When you load the index.html you see an iframe loaded inside the div #first
Inside this iframe (#primo) there is a button which if you click the div#containerzuenellibasic inside it slides up 450px.
At this point comes into view another iframe (positioned below the div#contentzuenellibasic) called #iframezuenellibasicA
Inside this iframe is loaded two.html which looks exactly the same as the one.html.

What I would like to do is:
1) click the button inside two.html (with text "CLICK ME: 2 ") and slide the div#containerzuenellibasic  inside its parent (one.html) down by 450px (or to position top: 0px) - basically animate the parent.containerzuenellibasic

2) click the link with text "TEST" on the main page and make the div#containerzuenellibasic inside iframe#primo slide up 450px (position top:-450px) - basically what happens when you click on the buttone "CLICK ME: 1" inside the iframe#primo.

At the present I am trying to achieve the (2) from above with this code in index.html:
 
$(document).ready(function(){
	$("#item-1 a").click(function(){
		/*$("#containerzuenellibasic").stop();*/
		$("#primo").contents().find('#containerzuenellibasic').animate({"top": "-450px"},{ queue:false, duration:800, easing:"quartEaseInOut"});
	});
});

Open in new window


But it does not seem to work.
Please help!
Thanks in advance

 index.html
 one.html
 two.html
 jquery-1.5.2.js
 jquery.animation.easing.js
0
Comment
Question by:badwolfff
  • 4
  • 3
7 Comments
 
LVL 23

Expert Comment

by:cmalakar
ID: 35734717
>> $("#primo").contents().


When you search for $("#primo"), you need to pass an extra argument to the JQUERY Saying, which frame to search for. like

$("#primo", window.frames[0].document).contents(....

In case of two.html, in the on click event handler of "CLICK ME: 2" button, you need to invoke like

$("#primo", window.parent.frames[0].document).contents(....
0
 

Author Comment

by:badwolfff
ID: 35735263
Thanks Cmalakar for your reply.

In index.html I tried this:

$("#primo", window.frames[0].document).contents().find('#containerzuenellibasic').animate({"top": "-450px"},{ queue:false, duration:800, easing:"quartEaseInOut"});

and in two.html I tried this:

$("#primo", window.parent.frames[0].document).contents().find('#containerzuenellibasic').animate({"top": "-450px"},{ queue:false, duration:800, easing:"quartEaseInOut"});

still not working - what am I doing wrong?

thanks again in advance
0
 
LVL 23

Accepted Solution

by:
cmalakar earned 2000 total points
ID: 35874156
badwolfff,

Apologies, I completely missed this.

Here is the solution for your two problems.

>> 1) click the button inside two.html (with text "CLICK ME: 2 ") and slide the div#containerzuenellibasic  inside its parent (one.html) down by 450px (or to position top: 0px) - basically animate the parent.containerzuenellibasic

You need to use attached script in two.html (replace with what you have)

>>2) click the link with text "TEST" on the main page and make the div#containerzuenellibasic inside iframe#primo slide up 450px (position top:-450px) - basically what happens when you click on the buttone "CLICK ME: 1" inside the iframe#primo.

communication between frames will happen only when the frames are loaded from same domain.(otherwise browser wont allow, considering that to be an XSS attack). Try putting your files on a web server, "CLICK ME: 1" should work properly. I verified it, its working.
<script type="text/javascript">
<!--
	$(document).ready(function(){
		$("#pv2off a").click(function(){ 	//pv
			$("#containerzuenellibasic", parent.document).stop();
			$("#containerzuenellibasic",parent.document).animate({"top": "0px"},{ queue:false, duration:800, easing:"quartEaseInOut"});
		});
	});
-->
</script>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:badwolfff
ID: 35889963
Hi Cmalakar,

thanks for your reply. I tested your solution and put it on a webserver.

click here to test

The link outside called "TEST CLICK ME: 1" works now
The link inside one.html works
The link inside two.html (corresponding to the code you have pasted above) does not still work.
Could you please test and tell me where I might be going wrong?

thanks again
0
 
LVL 23

Expert Comment

by:cmalakar
ID: 35891616
>><script type="text/javascript" src="jquery-1.5.2.js"></script>

This is jquery mentioned in two.html

Do you have it ? in one.html you have mentioned some other version. Use the same version in all.
0
 

Author Comment

by:badwolfff
ID: 35891741
excellent! You are a genius.
I posted this on several fora and you are the only one to have found a working solutin to this. Not even the Jquery forum guys could solve it!
0
 
LVL 23

Expert Comment

by:cmalakar
ID: 35891748
thank you ;-)
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question