Problems with the responsive JavaScript and jQuery

Question

Problems with the responsive JavaScript and jQuery

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have a responsive problem on a web page. What happens is that I am adding a sandbox and therein a iframe and I get cut, that is, it is not displayed completely.

This is the code:

<!DOCTYPE HTML>
<html lang="es">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.contentWindow.min.js"></script>

</head>

<body style="margin: 0px;">
  <p id="callback"></p>
  <iframe src="https://www.strategis.mx/Glocator/" name="mainaccFrame" onload="window.parent.scrollTo(0,0);" id="mainaccFrame" frameborder="0" width="100%" height="100px" scrolling="no" sandbox="allow-modals allow-top-navigation allow-forms allow-same-origin allow-scripts allow-popups"></iframe>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.min.js"></script>
  <script>
    iFrameResize({
      log: true, // Enable console logging
      enablePublicMethods: true, // Enable methods within iframe hosted page
    });

    function resizeIframe(obj) {
      console.log("datos funcion\n " + obj);
      obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
    }
    $(document).ready(function() {
      jQuery(window).resize(function() {
        var viewportheight;
        $('#mainaccFrame').attr('height', viewportheight * .95 + "px");
      });

    });
  </script>
</body>

</html>

And so it looks cut:

javascript jquery iframe

asked by JUAN JOSE BUSTAMANTE SOLIS 12.06.2017 в 16:52

source

3 answers

Query does not recognize variables in Codeigniter Validations with Data Annotations in the Entity framework do not work

score 0 · Answer 1

I recommend you use measures like vw - v iewport w idth or vh - v iewport h eight who are responsive or the famous %

That way you do not have to use neither px nor Jquery nor JS for responsive

However I saw that, by your code, you know this so I guess what you want to do with JQuery and here it goes (by the way the width and height attributes are already a bit obsolete, the W3C recommends changing them to style):

<!DOCTYPE HTML>
<html lang="es">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.contentWindow.min.js"></script>
</head>
<body style="margin: 0px;">
  <p id="callback"></p>
  <iframe src="https://www.strategis.mx/Glocator/" name="mainaccFrame" onload="window.parent.scrollTo(0,0);" id="mainaccFrame" frameborder="0" scrolling="no" style="width: 100%;" sandbox="allow-modals allow-top-navigation allow-forms allow-same-origin allow-scripts allow-popups"></iframe>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.min.js"></script>
  <script>
iFrameResize({
  log: true, // Enable console logging
  enablePublicMethods: true, // Enable methods within iframe hosted page
});

function resizeIframe(obj) {
  console.log("datos funcion\n " + obj);
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
}
$(document).ready(function() {
  jQuery(window).resize(function() {
    var viewportheight = window.innerHeight;
    $('#mainaccFrame').height(viewportheight * .5 + "px");
  });

});
</script>
</body>
</html>

A value was needed for the viewportheight variable, it was declared but had no value

The only thing you would need is that you do not become responsive until you call resize, so you could use the measures mentioned above or put another function with body onload="funcion()" that does exactly the same as resize.

Or you could also put a window.document.onload() as you want.

score 0 · Answer 2

And here it is with css and vh

<!DOCTYPE HTML>
<html lang="es">
<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin: 0px;">
  <p id="callback"></p>
  <iframe src="https://www.strategis.mx/Glocator/" name="mainaccFrame" onload="window.parent.scrollTo(0,0);" id="mainaccFrame" frameborder="0" scrolling="no" style="width: 100%; height: 60vh;" sandbox="allow-modals allow-top-navigation allow-forms allow-same-origin allow-scripts allow-popups"></iframe>
  </body>
  </html>

score 0 · Answer 3

Thanks for your answers, at the end my co-workers left this code:

<!DOCTYPE HTML>
<html lang="es">
<head>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/comun/js/iframeResizer.contentWindow.min.js"></script>




<!--<script type="text/javascript" src="js/jquery.min.js"></script>-->


<!-- CSS -->
<!--<link href="estilos-responsive/css/bootstrap.min.css" rel="stylesheet" />-->
<!--<link href="estilos-responsive/css/bootstrap.css" rel="stylesheet" />-->
<!--<link href="estilos-responsive/css/lightbox-responsive.css" rel="stylesheet" />-->


</head>





<!-- ======== JS ======== -->
<script  src="/comun/js/jquery.min.js"></script>
<script  src="/comun/js/bootstrap.min.js"></script>
<script  src="/comun/js/bootstrap.min.js"></script>


<body style="margin: 0px;">
<!--<p id="callback"></p>-->
<p id="callback"></p>
<iframe src="https://www.strategis.mx/Glocator/" name="iframe_re" onload="window.parent.scrollTo(0,0);" id="iframe_re" frameborder="0" scrolling="no" style="100%"></iframe>

<script src="/comun/js/jquery.min.js"></script>
<script type="text/javascript" src="/comun/js/iframeResizer.min.js"></script>   

<script>
var viewportheight = window.innerHeight;
$('#iframe_re').css('height', viewportheight*.95+"px");
iFrameResize({
                log                     : true,                  // Enable console logging
                enablePublicMethods     : true,                  // Enable methods within iframe hosted page
            });

function resizeIframe(obj)
{
    console.log("datos funcion\n "+ obj);
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
}
$( document ).ready(function() {
    jQuery(window).resize(function() {
        var viewportheight = window.innerHeight;
        $('#iframe_re').css('height', viewportheight*.95+"px");
    });

    $(window).on("orientationchange",function(){
        if(window.orientation==0)
        {
            popup-content(){
                //Me quede aqui


            }
        }



  alert("The orientation has changed!");
});
});








</script>



 </body>
 </html>

The desired goal was not reached, since the problem was that of the content manager that would be Tridion, and then I left them my contribution of the code.

In advance, I send you a cordial greeting.