0

I have a one-page scrolling webpage which, using jQuery, attaches a class to the body depending on which 'page' is being viewing. For example, scrolling to the third page adds <body class="main-viewing-page-2">.

This is how I call my animation on elements for these pages, when the user scrolls to that 'page' the class changes and my animation runs. I have achieved this by using the css:

.main-viewing-page-2 #whatevertheelement {
      -webkit-animation: fadeInUp 0.5s; 
      animation: fadeInUp 0.5s;}

(I'm not sure if this is the most effective way to do this but it seems to work, any advice appreciated!)

On the third 'page' I have an iFrame. This is on the same domain and completely controlled by me.

I need to be able to trigger animation on a div inside the iFrame when the parent container has the class <body class="main-viewing-page-3">.

I'm not sure how to make the iFrame 'listen' for when the class is created in the parent. I have tried to use the css below but it doesn't work.

.main-viewing-page-3 #iframediv {
      -webkit-animation: fadeInUp 0.5s; 
      animation: fadeInUp 0.5s;}

I have seen reference to $("#myid", top.document); but I'm not sure how to implement this.

I'm a bit of a novice so apologies in advance.

Joe
  • 65
  • 1
  • 8
  • Check this question/answers ... http://stackoverflow.com/q/3991146/2827823 – Asons Sep 20 '15 at 15:53
  • I've looked through and tried to understand it but I still can't seem to get my head around it. There seems to be a lot of parts involved in this and I feel like I may not be seeing the most efficient. I'm thinking JS/JQuery in the parent to detect page scroll, then check if the class "main-viewing-page-3" exists, if so, then add a class to the div inside the iframe which will run the animation. Seem logical? – Joe Sep 20 '15 at 16:11
  • Spot on my friend! .. and with this you have the same way of triggering the animation, whether it's in an iframe or not, making maintenance simpler – Asons Sep 20 '15 at 16:13
  • Glad I'm on the right track. So all the JS needs to be on the parent then I assume. Any idea on what to use to make this work? I think I can figure out up to the point of passing the instruction through the iframe to add the class to that div. thanks in advance – Joe Sep 20 '15 at 18:01
  • I suggest that the page in the iframe has its own JS/CSS it needs (maybe a subset of the parents) and then from the parent you target the iframe's body element as you do with the parent's body .. keeping your logic the same as much as possible. – Asons Sep 20 '15 at 19:35

0 Answers0