plugin creating empty space below HTML when resizes the screen

Asked

Viewed 66 times

0

In the page down below:

http://funerariasaopedro.net.br/showroom

I’m using the plugin jquery.ez-plus.js. that gives zoom at images.

Everything works fine.

But when I resize navegador clicking in the redimensionador upstairs next to X to close the browser, I realize that at the bottom of the page or html, or the body get the altura huge and when I see are exactly the codes created at the end of page for plugin.

Is there any way to fix this? That is, when resizing the browser not appear that huge blank pad below the html?

Goes 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>

Observation, I have put the section below, below until the </html> and gives the same problem.

<script> 

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

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

  });

</script>
javascript jquery

1 answer

1


The plugin is positioning the divs zoom so that they get a position that exceeds the site height limit, creating this 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 the divs .zoomContainer at the top without prejudice to the operation of the plugin, and avoiding the white space.

  • That’s right, thank you!

  • Try putting in CSS: .zoomContainer{ top: 0 !important; }

  • If it works, then you don’t even need jQuery

  • best with css right?

  • well better yes.... see if it works.

  • worked yes. obg

Show 1 more comment

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.