In my web project, I have an iframe.
It holds one graph, and a table holding values of graph. (graph = google graph api, table=datatables)

Sometimes iframe content height changes by its js applications, not by reloading an html.

So I need to detect those changes originating from js’s and increase i-frame size.

How can I detect those changes?

Here is my function that increases i-frame size. (For your reference)

  function update_height() {
            $  ('#iframe-1').load( function() {
            var $  ifbody = $  (this).contents().find( 'body' );
            $  ifbody.css( 'height','auto' );
            $  (this).height( $  ifbody.height() );
    });
   };

newest questions tagged jquery – Stack Overflow

Hello I have a problem when I modify the input of a iframe that is open with SimpleModalWindow Plugin.

I have the code:

 $  ("#imgTab").click(function(){
    $  ("#iframeNode").contents().find("input[name='objParent']").val('val1');
    $  ("#modalWindow").modal({
    opacity:80,
    overlayCss: {backgroundColor:"#fff"}
    });
});

the iframe is in a div

    <div id="modalWindow" style="display:none;background-color:#FFFFFF">
    <iframe src="biblioteca.php" height="600px" width="900px" id="iframeNode" name="iframeNode"></iframe>
</div>

And the element to modify into the iframe is:

<input type="text" name="objParent" id="objParent"/>

Thanks.

newest questions tagged jquery – Stack Overflow

I have three iframes and I set the top iframe to 50px height and I set the bottom iframe to 50px, but I want the middle iframe to exand to fill the rest of the space. Is there a technique I can use to do this for any window screen size?
thanks.

example:

<iframe style="width:100%; height:50px;" src="headerstuff.asp" %></iframe>
<iframe style="width:100%; height:100%;" src="Content.asp" %></iframe>  <!-- height needs to fill -->
<iframe style="width:100%; height:50px;" src="footerstuff.asp" %></iframe>

newest questions tagged jquery – Stack Overflow

Would like to run some Javascript in the iFrame which changes the height and width of the prettyPhoto lightbox window that it is in.

This is an example of lightbox in action:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

http://jsfiddle.net/txchou/GBmTL/

This is how to close the window:
window.parent.$ .prettyPhoto.close();

newest questions tagged jquery – Stack Overflow

I have a page that contains the colorbox plugin and it also has an iframe that contains a youtube embedded video.

In FF my colorbox appears above the flash video only in chrome my iframes appear above the colorbox if this makes sense?

I’ve tried adding wmode=transparency to my flash videos and giving my colorbox a much higher z-index which both havent helped, is it possible to lay objects over an iframe?

newest questions tagged jquery – Stack Overflow

I am creating a form using Jquery-ui. Buttons are in parent page and codes are in another page, which is embeded into parent page through iframe. can anyone tell me how can I invoke dialog function of Jquery-ui from parent page’s button.

newest questions tagged jquery – Stack Overflow

Is this even possible with jquery only with no bulky plugins?

I know there are lots of plugins and alternatives, i’m searching for the shortest & most cleanest (preferably relying on jquery)

Here basic jsfiddle to tryout your thoughts:
http://jsfiddle.net/3vPJd/

newest questions tagged jquery – Stack Overflow

I’m using jQuery Fancybox to display forms in a modal window. I’m using the following code:

$  ("a.iframe").fancybox({
'padding': 0,
'width': 650,
'showCloseButton': false,
'hideOnContentClick': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'onComplete': function () {
  $  ('#fancybox-frame').load(function () {
    $  ('#fancybox-content').height($  (this).contents().find('body').height() + 20);
  });
}
});

With the additional onComplete function, I’m able to adjust the height of the iframe accordingly to the height of the contents inside.

However, I’ve hidden a few elements with jQuery’s .hide() inside the iframe. Whenever I want to .show() these elements, the iframe itself doesn’t resize along with the extra height of the now visible elements.

How can I accomplish this? Thanks!

newest questions tagged jquery – Stack Overflow

Just want to say first and foremost I appreciate any help on this. I’ve been kind of stuck all day.

So what I have now (http://itsdoom.com/tumblrstylewebsite.html)

is the newest thing I have been working on. its very rough as of now. But what I am having trouble with is the image gallery. If you click on ‘work’ it will scroll you down and you can see what I’m talking about. I wanted to have multiple albums so I placed the “Galleria” in an iFrame. with obvious problems. As I realize the way i have it setup now the Galleria / iframe is at 420px (h) x 820px (w), which looks good on the screen i’m working on now 1280×800, but if a user had a higher screen resolution, it would look too small, and with no ability to fullscreen the galleria, its a problem.

so I have a couple questions..

1. Is there anyway to make the Galleria fullscreen not only in the iframe but in the whole browser?

2. Is there anyway to either resize the iframe // content (Galleria) to reflect a users screen resolution?

If theres a way to fullscreen that would be the best option because someone with a higher resolution screen would just be able to hit that. if not, hopefully the other option is possible.

thanks again for the help.

newest questions tagged jquery – Stack Overflow

I have an iframe loaded on my webpage. After a 30 seconds I want to change the source of the iframe to load another site. This works great using jQuery (setTimeout function) but my issue is performance. It takes 15 seconds to load the page into the iframe when I change the source. I’m stuck with a blank screen until the content is loaded. Is it possible to only change the source once the page has loaded? Is there something I can do within jQuery to preload the webpage?

newest questions tagged jquery – Stack Overflow