jquery detect change in display or visibility

Question

Is there a way for me to detect if the style attribute of a class changes, for example, a change in display or visibility?

The situation I have is that I have a Podio webform embedded on my site via iframe and that has a hidden thank you message in .webforms__success-message > p and I want to scroll to the success message when it appears on the page.

I'm not 100% sure you can even get to the content of a remote URL in an iframe via jquery, I could be wrong though but the security implications would be horrendous! — Dale, Dec 30 '16 at 17:49
I am able to trigger a DOM event using the class so I would guess yes — Sandra Willford, Dec 30 '16 at 17:50
http://stackoverflow.com/questions/3083112/jquery-cross-domain-iframe-scripting — Dale, Dec 30 '16 at 17:51
@SandraWillford I flagged this as duplicate, take a look at the previous discussion. — Serg Chernata, Dec 30 '16 at 17:51
@Dale is on point - you can't access an iFrame's content via javascript. Browsers prevent this for security purposes. — random_user_name, Dec 30 '16 at 17:51
The form does not belong to OP. It's from **Podio**, which is a service on another domain. — random_user_name, Dec 30 '16 at 17:52
@SandraWillford Sorry, looks like you'll need to think of another approach! — Dale, Dec 30 '16 at 17:54
@cale_b I've never been refered to as on point before, thank you :) — Dale, Dec 30 '16 at 17:56
Have you looked at an integration that doesn't use the iframe? For example, have you read the Podio api developer docs? — Snowmonkey, Dec 30 '16 at 17:56
@SandraWillford what do you mean by "I am able to trigger a DOM event using the class" — Shanimal, Dec 30 '16 at 17:58

Miguel Coder · Answer 1 · 2016-12-30T18:03:39.280

I would recommend VueJS instead of jQuery. It's faster because it uses a virtual dom and it doesn't have to traverse the dom in order to detect changes. You simply create an action and then emit that action as an event. Then you can call whichever jQuery functions you would like.

<div id="app">
   <iframe v-show="isShowing" src="http://www.weather.gov/" 
        frameborder="0"
        ></iframe>
  <button @click="isShowing ^= true">Click Me</button>
</div>

CSS

iframe {
  display:block;
  margin-top: 20px;
  margin-left: 200px;
  width:850px;
  height:300px;
}

JS

var vue = new Vue({
  el:"#app",
  data: {
    isShowing:false,
  }
})

check out this Codepen

Not in an iFrame... – random_user_name Dec 30 '16 at 17:52 — random_user_name, Dec 30 '16 at 17:52

jquery detect change in display or visibility

1 Answers1