entre Desarrolladores

Question

Tengo un Pop-up, que después de rellenar un formulario, aparece una cuenta atrás y a cada numero que sale, va disminuyendo su font-size, hasta que llega al 0 y el pop-up se cierra, hasta aquí todo bien.

Para cambiar el tamaño de la fuente, entres otras cosas, utilizo jQuery, el problema es que al ir disminuyendo el tamaño, el numero se va desplazando hacía arriba y yo quisiera que se quede fijo en una posición, os pego el código y al final un enlace a Codepen, para que veáis el código en acción:

HTML

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<link href='css/estilo-ventana-externa.css' rel='stylesheet' type="text/css">
</head>
<body>

<div id="pop-lugares">
  <div id="cierre">
    <h3 id="cierre">
    </h3>
  </div>
</div>

</body>
</html>

CSS

html, body {
    font-family: Helvetica, serif, sans-serif; 
    font-size: 14px;
    width: 100%;    
    box-sizing: content-box; 
    overflow-x: hidden;
}

body {
        background-color: #E0E0E0;
}

div#pop-lugares {
    margin: 0;
    padding: 0; 
}

a:link, a:active, a:visited {
    color: black;
    text-decoration: none;
}

a[href^="https://"]:hover, a[href^="http://"]:hover, a:not(div.social-icons):hover {
    text-decoration: underline;
}
.enlaceblanco:link, .enlaceblanco:hover, .enlaceblanco:visited {
    color: white;
    text-decoration: none
}

a.disablelink {
    pointer-events: none;
    cursor: default;    
}

div#pop-lugares div#cierre{
    position: fixed;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    text-align: center;
    vertical-align: middle;

    top: 50%;
   transform: translateY(0, -50%);
    -webkit-transform: translateY(0, -50%);
   -moz-transform: translateY(0, -50%);
   -o-transform: translateY(0, -50%);    
   -ms-transform: translateY(0, -50%);
}

div#pop-lugares div#cierre h3#cierre {
    font-size: 10em;
    font-weight: 900;
    text-align: center;
}

jQuery

$(document).ready(function() {
        if ($('div#cierre').length) {           
            var contador = 3;
         var elemento = $("h3#cierre");

         elemento.text(contador);
         setInterval(function() {           
            elemento.text(contador);
            var tamActual = elemento.css("font-size");           
             var tamActualNum = parseFloat(tamActual, 10);
             //alert(tamActualNum);
                var nuevotamano = tamActualNum / 1.2;               
                //alert(nuevotamano);
             elemento.css("font-size", nuevotamano);    

            if (--contador == 0) {                                  
                    close();        
            }       
        }, 1000);
        }

    });

Codepen código

Answer 1

1 Respuestas

bichomen · Answer 2 · 2017-03-29T14:31:33+0000

2votos

Leonardo-Tadei Puntos227320

Hola @bichomen,

tu HTML es inválido: no se pueden tener dos elementos con el mismo ID.

Luego de solucionado esto, bastaría con que al H del contador lo sitúes en una posición fija, y que al texto le pongas vertical-align: bottom;

De todas maneras, lo de "fijo en una posición" siempre será relativo, porque al achicar la fuente, puede mantenerse la línea superior como ahora, pueden mantenerse la línea de abajo como te propongo, o puede mantenerse la línea central del caracter, todo esto manejado desde el vertical-align, pero de alguna manera se verá "moverse".

Saludos cordiales

respondido por Leonardo-Tadei (227.320 puntos) Mar 29, 2017

seleccionada por bichomen Mar 31, 2017

0voto

bichomen comentado Mar 30, 2017

Hola @Leonardo-Tadei,

Hice algunas modificaciones, según me indicas, pero no acaba de funcionar del todo:

HTML

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<link href='css/estilo-ventana-externa.css' rel='stylesheet' type="text/css">
</head>
<body>

<div id="pop-lugares">
  <div id="cie">
    <h3 id="cierre"> </h3>
  </div>
</div>

</body>
</html>

CSS

html, body {
    font-family: Helvetica, serif, sans-serif; 
    font-size: 14px;
    width: 100%;    
    box-sizing: content-box; 
    overflow-x: hidden;
}

body {
        background-color: #E0E0E0;
}

div#pop-lugares {
    margin: 0;
    padding: 0; 
}

a:link, a:active, a:visited {
    color: black;
    text-decoration: none;
}

a[href^="https://"]:hover, a[href^="http://"]:hover, a:not(div.social-icons):hover {
    text-decoration: underline;
}
.enlaceblanco:link, .enlaceblanco:hover, .enlaceblanco:visited {
    color: white;
    text-decoration: none
}

a.disablelink {
    pointer-events: none;
    cursor: default;    
}

div#pop-lugares div#cie {
  position: absolute;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;  
}

div#pop-lugares div#cie h3#cierre {
  position: fixed;  
    font-size: 15em;
    font-weight: 900;
    text-align: center;
  vertical-align: middle;

  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);    
  -ms-transform: translate(-50%, -50%);
}

jQuery

$(document).ready(function() {
        if ($('div#cie').length) {          
            var contador = 3;
         var elemento = $("h3#cierre");

         elemento.text(contador);
         setInterval(function() {           
            elemento.text(contador);
            var tamActual = elemento.css("font-size");           
             var tamActualNum = parseFloat(tamActual, 10);
             var nuevotamano = tamActualNum / 1.5;              
                elemento.css("font-size", nuevotamano); 

            if (--contador == 0) {                                  
                    close();        
            }       
        }, 1000);
        }

    });

Codigo en Codepen

comentado por bichomen (2.770 puntos) Mar 30, 2017

1voto

Leonardo-Tadei comentado Mar 30, 2017

Hola @bichomen,

saqué parte del código inncesario (los DIV y los H son ambos elementos de bloque y no hacen falta ambos para lo mismo) y quedó así:

HTML

<body>
<div id="pop-lugares">
    <h3 id="cierre"> </h3>
</div>
</body>

CSS

html, body {
    font-family: Helvetica, serif, sans-serif; 
    font-size: 14px;
    width: 100%;    
    box-sizing: content-box; 
    overflow-x: hidden;
}

body {
        background-color: #E0E0E0;
}

a:link, a:active, a:visited {
    color: black;
    text-decoration: none;
}

a[href^="https://"]:hover, a[href^="http://"]:hover, a:not(div.social-icons):hover {
    text-decoration: underline;
}
div#cie {
  border: 1px solid green;
  height: 80px;
}
div#pop-lugares {
  position: fixed;
  height: 160px;
  width: 220px;
  border: 1px solid black;
  left: 20%; 
  top: 25%;
  margin: 0;
    padding: 0; 
}

h3#cierre {
  margin:0;
  padding:0;
  height:160px;
  border: 1px solid red;
    font-size: 14em;
    font-weight: 900;
    text-align: center;

  vertical-align: text-bottom;
  line-height: 160px;
}

JavaScript

$(document).ready(function() {
            var contador = 10;
         var elemento = $("h3#cierre");

         elemento.text(contador);
         setInterval(function() {           
            elemento.text(contador);
            var tamActual = elemento.css("font-size");           
             var tamActualNum = parseFloat(tamActual, 10);
             var nuevotamano = tamActualNum / 1.5;              
                elemento.css("font-size", nuevotamano); 

            if (--contador == 0) {                                  
                    close();        
            }       
        }, 1000);
});

Funcionando se ve así

Los bordes son inncesarios, pero los puse para que puedas ver lo que ocupa cada elemento.

Saludos cordiales

comentado por Leonardo-Tadei (227.320 puntos) Mar 30, 2017

1voto

bichomen comentado Mar 31, 2017

Hola @Leonardo-Tadei,

Gracias, hubiera preferido no poner tamaño fijos, para que se pueda adaptar a diferentes dispositivos, pero bueno.

He modificado una linea del jQuery porque el primer numero se duplicaba.

HTML

<div id="pop-lugares">
  <div id="cie">
    <h3 id="cierre"> </h3>
  </div>
</div>

CSS

div#pop-lugares div#cie {
  position: fixed;
  height: 160px;
  width: 220px;
  margin: 0;
    padding: 0; 

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);    
    -ms-transform: translate(-50%, -50%);

}

div#pop-lugares div#cie h3#cierre {
  margin:0;
  padding:0;
  height:160px;
    font-size: 14em;
    font-weight: 900;
    text-align: center;

  vertical-align: text-top;
  line-height: 160px;
}

jQuery

$(document).ready(function() {
        if ($('div#cie').length) {          
            var contador = 3;
      var elemento = $("h3#cierre");

      setInterval(function() {
        elemento.text(contador);
        var tamActual = elemento.css("font-size");           
          var tamActualNum = parseFloat(tamActual, 10);
          var nuevotamano = tamActualNum / 1.5;             
              elemento.css("font-size", nuevotamano);   

        if (--contador == 0) {                                  
                close();        
        }       
      }, 1000);
        }
});

Demo en Codepen

comentado por bichomen (2.770 puntos) Mar 31, 2017

0voto

Leonardo-Tadei comentado Mar 31, 2017

Me alegra que te sirviera!

La idea debería ser aplicable también a un DIV que no esté fixed... hay que trabajarla un rato más.

Saludos cordiales!

comentado por Leonardo-Tadei (227.320 puntos) Mar 31, 2017

Pregunta

Cambiar tamaño de letra sin desplazamiento

Por favor, accede o regístrate para añadir un comentario.

1 Respuesta

bichomen comentado Mar 30, 2017

Leonardo-Tadei comentado Mar 30, 2017

bichomen comentado Mar 31, 2017

Leonardo-Tadei comentado Mar 31, 2017

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para responder a esta pregunta.

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta