0

I'm sure this sounds a little odd, but here's the background...

We utilize a company that loads their chat program, so we can support our customers, into our page. This is done via javascript and jquery, and creates a structure like this:

<div id="myid" style="...; right: 0px;..."><div><iframe></iframe></div></div>

There's a WHOLE lot more to that, but those are the important parts. Now the tool allows us to put custom scripting, which will be placed in the iframe. My goal is to just remove the "right: 0px", which I have done via the below code, but I don't want to put that code on every page that this tool integrates with. I would like to load it into the tool, and have it run when the iframe and divs are created.

working code on parent:

$(document).ready(function() {
  function checkPos() {
    $('#myId').each(function() {
      var oldstyle = $('#myId').attr('style');
      var newstyle = oldstyle.replace(' right: 0px;','');
      $('#myId').attr('style', newstyle);
    });
    setTimeout(checkPos, 100);
  };
  $(document).ready(function() {
    setTimeout(checkPos, 100);
  });
});

Once placed in the code include method they provide, I have trouble having it wait until the div tag actually has the "right: 0px;" in its style tag. the only thing I need to run is the three lines in the $('#myId').each(function()

Basically, I need help with having the script in the iframe target the div that the iframe is nested in.

Sean Keough
  • 13
  • 4

1 Answers1

0

Assuming that whatever tool your using actually lets you pass in a custom script to the content rendered in the iframe (seems fishy to me), a better way of modifying the style in jquery is to use the css function:

$('#myId').css('right', '0px');

Notice I removed the $.each function as well. You are targeting an element with an id, so there isn't any need to iterate.

Edit:

Anyways, back to the problem of delaying execution to when the target, #myId, actually exists. If they are really injecting your javascript into their page (again, seems fishy), then attaching the above code to the $(document).ready() event should do the trick, as long as this listener is attached to their document.

If all else fails, try to use the waitUntilExists plugin, here:

Source:

https://gist.github.com/buu700/4200601

Relevant question:

How to wait until an element exists?

Community
  • 1
  • 1
foxygen
  • 1,368
  • 1
  • 11
  • 22
  • The real problem is that the Div's style and id is not actually populated immediately, it is created first, then the element's style tag is added later, not much later, mind you, but later enough to where merely running the three commands that do work outside the iframe, don't work within. – Sean Keough Oct 29 '14 at 19:42
  • `$(document).ready()` function is the first thing I tried. I couldn't even get an `alert('Hello World')` to pop. If I put `alert('Hello World')` by itself, that does pop. – Sean Keough Oct 29 '14 at 19:49
  • I'll try the waitUntilExists plugin – Sean Keough Oct 29 '14 at 19:52
  • That works, and since it shrinks it down so much, I am more willing to put it in across the site. – Sean Keough Oct 30 '14 at 11:31