Geek Answers Handbook

How to dynamically position and scale an iframe when scaling a browser

Problem

The user can choose to create an iframe by inserting an iframe or URL into their code. When the window is resized, the iframe should remain in the middle and bottom of the page. I got an iframe to stay in the middle and bottom of the page for the most part. But when the window size changes (the user enlarges (150%, etc.) or outside (50%, etc.)), the iframe itself becomes larger when the user is scaled and smaller when the user is scaled. Since I cannot target the content in the iframe, I tried to figure out how to apply the scale to the iframe so that it looks the same in size and in the same position. I'm having problems dynamically calculating iframe scale when resizing a window.

Javascript

boot event

                jQuery('#iframe_wrapper iframe').attr('id','iframe');
                jQuery( "#iframe" ).load(function() {
                    jQuery('#adhesion_iframe').css('-webkit-transform', 'scale(1)');
                });

Position

ratio = $('#iframe').width() / ($('#iframe').height() + ($('#close_btn')close.length>0 ? 0 : 20));


 if (window.innerWidth > window.innerHeight) {
                        var width = window.innerWidth / 1.5 / 1.5;
                        $('#iframe_wrapper').css({
                            width: width + "px",
                            height: window.innerWidth / ratio / 1.5 + "px",
                            left: parseInt((window.pageXOffset + window.innerWidth / 2) - (width / 2)) + "px",
                            top: parseInt(window.innerHeight + window.pageYOffset - window.innerWidth / ratio / 1.5 / 1.5) + "px"
                        });

iframe

if($('#iframe').length >0 ){

                    jQuery.fn.center = function(){
                        this.css("position","absolute");
                        this.css("top","60%");
                        this.css("left","50%");
                        this.css("margin-top","-"+(this.height()/2)+"px");
                        this.css("margin-left","-"+(this.width()/2)+"px");
                        return this;}

                    $('#iframe').center();

                $('iframe').css({
                    '-webkit-transform': 'scale('+(document.body.offsetWidth * scale / initial_width )
                });

                }

, โ€‹โ€‹ 1. , - , '- webkit-transform': 'scale (' + ( document.body.offsetWidth * scale/initial_width). , 150%, - 0.-, 50%, 2. - .. , , iframe ( iframe ). , iframe, 300 50, , 600 100 ..

+4
1

, . iframe css:

iframe {
   width: 400px;
   height: 300px; 
}
-1

More articles:


All Articles