[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


How do I animate a div inside an iframe using Jquery?

Posted on 2011-05-09
Medium Priority
Last Modified: 2012-08-14
I have a main page and on it I have a button and an iframe. Inside the iframe I have an external html page with a div on it. Using the button on the main page how do I animate the div inside the iframe?

I have tried something like this:
            $("#iFrameID").contents().find("#divID").animate({"top": "-450px"},{ queue:false, duration:800, easing:"quartEaseInOut"});

This does not work. Could anyone show me how to fix this code?
I am attaching a test project here. test.zip
Question by:badwolfff
  • 3

Expert Comment

ID: 35718272
You can reload the iframe, with some parameters, for it to animate. <iframe src='externalpage.html?animate=1'>

and ofcourse make the externalpage.html, trigger the script on the GET animate = 1

Author Comment

ID: 35722999
sorry could you please illustrate with an example?
I didn't really understand your explanation.

Accepted Solution

badwolfff earned 0 total points
ID: 35758921

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying 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

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 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