Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
PROBLEM Responsive iFrame
#1
Hello. I start a new thread as rightly requested by shawn_a (http://get-simple.info/forums/showthread...5#pid58215).
The problem is that if I load an iFrame, using the tool in the Advanced toolbar, this iframe is not responsive, even if the theme is responsive.
To make responsive all the iFrames, in my templates, I use this script (author Daniele Gili):

Code:
function adjustIframes(cb)
{
 $('iframe').each(function(){
   var
   $this       = $(this),
   proportion  = $this.data( 'proportion' ),
   w           = $this.attr('width'),
   actual_w    = $this.width();
   h = $this.attr("height")
   
   if ( ! proportion )
   {
       proportion = $this.attr('height') / w;
       $this.data( 'proportion', proportion );
   }
 
   if ( actual_w != w )
   {
       // h : w = x : a

       x = +h.split('px')[0] * +actual_w / +w.split('px')[0]

       // $this.css( 'height', Math.round( actual_w * proportion ) + 'px' );
       $this.css( 'height', Math.ceil(x ) + 'px' );
   }
 });

// alert('1')

if (cb) {cb()};

}

Recalled with the line:

Code:
$(window).on('load resize', function(){adjustIframes();} )

Alternatively, for a single iFrame, I made available for my users this application to configure the iFrame code:

https://github.com/jeffehobbs/embedresponsively

The new code can be put in GetSimple using a component, as explained in the old thread.

I hope this helps. There is a better way for GetSimple?
Reply




Users browsing this thread: 1 Guest(s)