entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Cambiar tamaño de letra sin desplazamiento

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

1 Respuesta

2votos

Leonardo-Tadei Puntos214700

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

bichomen comentado Mar 30

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

Leonardo-Tadei comentado Mar 30

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

bichomen comentado Mar 31

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

Leonardo-Tadei comentado Mar 31

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!

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

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta