advanced code snippet search

Posted By

leodruker on 03/19/13


Tagged

iframe php resize


Versions (?)

iframe dynamic resize

 / Published in: JavaScript
 

URL: javascript, jquery, iframe

JavaScript code to facilitate dynamic re-sizing of an iframe at the same time as the browser window is re-sized, as well as making sure that the frame scales proportionally to its width and height.

Expand | Embed | Plain Text 
  1. <script type="text/javascript">
  2.  
  3. $.noConflict();
  4. jQuery(document).ready(function($) {
  5.  
  6. function adjustIframes()
  7. {
  8.   $('iframe').each(function(){
  9.     var
  10.     $this       = $(this),
  11.     proportion  = $this.data( 'proportion' ),
  12.     w           = $this.attr('width'),
  13.     actual_w    = $this.width();
  14.  
  15.     if ( ! proportion )
  16.     {
  17.         proportion = $this.attr('height') / w;
  18.         $this.data( 'proportion', proportion );
  19.     }
  20.  
  21.     if ( actual_w != w )
  22.     {
  23.         var h =  Math.round( actual_w * proportion );
  24.  
  25.         if (!isNaN(h)) {
  26.             if (console && console.log) console.log("Resizing iframe to height: " + h);
  27.             $this.css( 'height', h + 'px' );
  28.  
  29.             if ($this.get(0).contentWindow.postMessage) {
  30.                 $this.get(0).contentWindow.postMessage('resize', 'YOUR WEBSITE HERE');
  31.             }   
  32.         }
  33.     }
  34.   });
  35. }
  36. $(window).on('resize load',adjustIframes);
  37.  
  38. });
  39. </script>

Report this snippet  

You need to login to post a comment.