plugin creating empty space below HTML when resizing screen

Question

plugin creating empty space below HTML when resizing screen

Navigation

#1 by (1 votes)

0

On the page below:

link

I'm using the plugin jquery.ez-plus.js . which gives zoom to images .

Everything works fine.

But when I resize the navegador by clicking on the redimensionador above the X side to close the browser, I realize that at the bottom of the page or html , or body they are with the altura huge and when I go to see are exactly the codes created at the end of the page by the plugin

Is there a way to fix this? That is, resizing the browser does not show that huge blank pate below the html ?

Follow below:

<?php require_once "config.php"; ?>
<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title><?php echo $constantes->getTituloSite(); ?></title>
    <?php  require_once("_global/_meta/meta.ini"); ?>
    <link rel="shortcut icon" type="image/x-icon" href="_img/favicon.ico">
    <link type="text/css" rel="stylesheet" href="_global/_css/estilos.css" />
    <link type="text/css" rel="stylesheet" href="_global/_css/estiloSite.css" />
    <link type="text/css" rel="stylesheet" href="_global/_css/menuSite.css" />
    <script type="text/javascript" src="_global/_js/jquery.js"></script>
    <script type="text/javascript" src="_global/_js/jquery.ez-plus.js"></script>
    <script> 

      $(window).on("load resize", function(){

        $('.elevate-image').ezPlus({
        zoomType: 'lens',
        lensShape: 'round',
        lensSize: 200
        });    

      });

    </script>      
    <script type="text/javascript" src="_global/_js/menu.js"></script>
    <script type="text/javascript" src="_global/_js/cabecalho.js"></script>
  </head>

  <body>

    <div class="cabecalho"><?php require_once "_requeridos/cabecalho.php"; ?></div>
    <div class="menu"><?php require_once "_requeridos/menu.php"; ?></div>
    <div class="showRoom"><?php require_once "showroomConteudo.php"; ?></div>
    <div class="base"><?php require_once "_requeridos/base.php"; ?></div>
    <div class="final"><?php require_once "_requeridos/final.php"; ?></div>

  </body>

</html>

showroomConteudo.php

<label class="titulos">Show Room</label>

<div class="fotosPlanos">

  <?php
     $planos = $planosDao->pesquisaPlanos();

     foreach ($planos as $plano) :

        echo $phpUtil->sucesso($plano->getNome());

        $fotos = $fotosDao->pesquisaFotosPlano($plano->getIdPlano());

        if ($fotos == NULL) {

            echo "<h2>Sem fotos</h2>";

        } else {

            foreach ($fotos as $foto) :
               echo "
                   <div class='blocos'>
                      <img class='elevate-image' src='_img/_fotos/".$foto->getFoto()."' data-zoom-image='_img/_fotos/".$foto->getFoto()."'  />
                   </div>
                   ";

            endforeach;
        }

     endforeach;
  ?>

</div>

Note, I have already put the below, down to </html> and gives the same problem.

<script> 

  $(window).on("load resize", function(){

    $('.elevate-image').ezPlus({
    zoomType: 'lens',
    lensShape: 'round',
    lensSize: 200
    });    

  });

</script>

javascript jquery

asked by anonymous 31.05.2018 / 13:33

1 answer

Update or insert with data from another table Oracle - DBMS_APPLICATION_INFO.set_client_info - What is it and when to use

score 1 · Accepted Answer

The plugin is positioning the% s of zooms so that they are in a position that exceeds the height limit of the site, creating that huge white space at the bottom of the site.

A palliative would be to use:

$(window).on("resize", function(){
    $(".zoomContainer").css("top","0");
});

This will position all% s of% s. div on top without affecting the plugin's operation, and avoiding white space.