1

Necesito poder usar los tres valores de la variable DocHeight obedeciendo a la propiedad del tamaño de la fuente en css, el error está en los if pero no sé como hacerlos funcionar a la vez; independientemente lo hacen.

if ($(".basic_unit").css("fontSize", 2)){ var DocHeight= 11000;};
if ($(".basic_unit").css("fontSize", 6)){ var DocHeight= 32500;};
if ($(".basic_unit").css("fontSize", 8)){ var DocHeight= 48500;};
var variableXXX = false;
$(window).scroll(function() {
	
    var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
	
     if ( scrollPercent >= 5 && variableXXX == false){
        variableXXX = true;
          alert($(document).scrollTop()); 
      }
});
var variableXX = false;
$(window).scroll(function() {
	
    var scrollPercent = 100 * $(window).scrollTop() / DocHeight;
	
     if ( scrollPercent >= 5 && variableXX == false){
        variableXX = true;
         $(".onscroll5").fadeIn(0); 
      }
	  else if ( scrollPercent < 5 && variableXX == true){
         variableXX = false;
         $(".onscroll5").fadeIn(0); 
     }
});
body{ margin:0; padding:0;}
#header{width:100%; border-bottom:red 1px solid; position:fixed; height:30px;z-index:1000;  margin-top:0;}
#wraper{width:100%;  padding-top:30px; text-align:center; }
.basic_unit{width:800px; height:1300px; border:rgba(0,0,0,1.00) solid 1px; margin:auto;}

.basic2{width:200px; height:200px; background:red; display:none;}
.fixed {position:fixed;}
.center_center{ display:inline-block;z-index:100;}
#container{overflow:hidden; background:rgba(255,0,234,0.20); display:inline-block; }
.left { margin-left:0;  }
.right { right:0;  }
.left_total {left:0;}
.right_total {right:0;}
.center { left:50%; transform:translate(-50%, 0); }
.top { top:30px;; }
.bottom { bottom:0; }
.middle { top:50%; transform:translate(0, -50%); }
.center.middle { transform:translate(-50%, -50%); }
#right_wraper{ float:right; border: 1px black solid; width:300px; text-align:right;}
.intime{width:200px; height:200px; background:blue; display:none;}
.inscroll{width:20px; height:20px; background:yellow; display:none;}
.triggers{ background:rgba(0,255,252,1.00); width:40px; height:40px;}
@media  (max-width: 700px) {
    .basic_unit {
		font-size:2px;
    }
}
@media (min-width:701px) and (max-width : 1200px) {
    .basic_unit {
		font-size:6px;
    }
}
@media (min-width : 1201px) {
    .basic_unit {
		font-size:8px;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
</div>

<div id="wraper">
<div id="container">
<div id="right_wraper">
<!--IN SCROLL--> 
<div class="inscroll fontbig1 onscroll5 fixed middle outtime2 "></div>
</div>


<!--IN SCROLL--> 
<div class="inscroll fontmedium3 onscroll10 fixed bottom center outscroll25 right_left" style="border: solid black 50px"></div>

<!--TRIGGERS--> 
<div class="triggers fixed top left_total">
</div>
<div class="triggers fixed bottom left_total">
</div>
<div class="triggers fixed top right_total">
</div>
<div class="triggers fixed bottom right_total">
</div>
<div class="basic_unit">
A <p style="font-size:6px;">A</p><p style="font-size:8px;">A</p><p style="font-size:2px;">A</p>
</div>

<div class="basic_unit">

</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>


</div>
</div>

2
  • 1
    Java !== JavaScript
    – user227
    Commented el 27 mar. 2016 a las 20:14
  • Pudieras aclarar lo que quieres decir con: "no sé como hacerlos funcionar a la vez; independientemente lo hacen", creo que no entendí esta parte. Creo que no hay nada que evalúe las condiciones una vez que se cargó la página, solo lo va a evaluar la primera vez. Commented el 28 mar. 2016 a las 6:32

1 respuesta 1

1

Estas usando mal el método .css de jQuery

Obtiene el valor de una propiedad de estilo computada para el primer elemento en el conjunto de elementos seleccionados o establece una o más propiedades en cada elemento seleccionado.

Básicamente

// getter: obtiene el valor de la propiedad como string
var valor = $('selector').css('font-size'); // => retorna 3px o 5px o 10px etc

// setter: establece la propiedad a un valor (10px en este caso) en todos los elementos
// y devuelve el selector jQuery para hacer encadenamiento
var valor = $('selector').css('font-size', 10); // => retorna $('selector')

¿Qué significa que la propiedad de estilo sea computada? Significa que el navegador, dependiendo de qué tipo de propiedad sea, va a aplicarle al elemento todos los estilos que le corresponde usando las distintas reglas del lenguaje CSS (como especificidad, herencia, el modelo de caja, etc.) hasta que llegue a lo que se conoce como valor calculado (El navegador puede seguir haciendo cálculos dependiendo de la propiedad hasta llegar al valor usado y valor resuelto). Puedes encontrar más información sobre cómo se calculan las propiedades en la documentación de MDN

https://developer.mozilla.org/es/docs/Web/CSS/used_value

https://developer.mozilla.org/es/docs/Web/API/Window/getComputedStyle

Ejemplo de propiedad computada

El método correcto que debes usar .css('propiedad') devuelve una cadena con el formato <tamaño><unidad> en tu caso, ya que font-size devuelve una dimensión. Ten en cuenta lo siguiente

Debe tenerse en cuenta que el estilo computado de un elemento puede no ser el mismo que el valor especificado para ese elemento en una hoja de estilos. Por ejemplo, los estilos computados de dimensiones casi siempre están en pixeles, pero pueden haber sido especificados con em, ex, px o % en una hoja de estilos. Los diferentes navegadores pueden retornar valores de color equivalentes pero que no son idénticos textualmente, e.j., #FFF, #ffffff, y rgb(255,255,255).

Tu ejemplo puede ser corregido usando

var DocHeight;
var fuente = $(".basic_unit").css("fontSize");
switch (fuente) {
    case '2px': 
        DocHeight= 11000;
        break;
    case '6px':
        DocHeight= 32500;
        break;
    case '8px':
        DocHeight= 48500;
        break;
    default:
        // Aquí pones un valor por defecto
        DocHeight= 48500;
        break;
}

En caso que quieras obtener el valor numérico puedes usar parseInt

var DocHeight;
var fuente = $(".basic_unit").css("fontSize");
switch (fuente) {
  case '2px':
    DocHeight = 11000;
    break;
  case '6px':
    DocHeight = 32500;
    break;
  case '8px':
    DocHeight = 48500;
    break;
  default:
    // Aquí pones un valor por defecto
    DocHeight = 48500;
    break;
}
var variableXX = false;
$(window).scroll(function() {

  var scrollPercent = 100 * $(window).scrollTop() / DocHeight;

  if (scrollPercent >= 5 && variableXX == false) {
    variableXX = true;
    alert($(document).scrollTop());
    $(".onscroll5").fadeIn(0);
  } else if (scrollPercent < 5 && variableXX == true) {
    variableXX = false;
    $(".onscroll5").fadeIn(0);
  }
});
body {
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  border-bottom: red 1px solid;
  position: fixed;
  height: 30px;
  z-index: 1000;
  margin-top: 0;
}
#wraper {
  width: 100%;
  padding-top: 30px;
  text-align: center;
}
.basic_unit {
  width: 800px;
  height: 1300px;
  border: rgba(0, 0, 0, 1.00) solid 1px;
  margin: auto;
}
.basic2 {
  width: 200px;
  height: 200px;
  background: red;
  display: none;
}
.fixed {
  position: fixed;
}
.center_center {
  display: inline-block;
  z-index: 100;
}
#container {
  overflow: hidden;
  background: rgba(255, 0, 234, 0.20);
  display: inline-block;
}
.left {
  margin-left: 0;
}
.right {
  right: 0;
}
.left_total {
  left: 0;
}
.right_total {
  right: 0;
}
.center {
  left: 50%;
  transform: translate(-50%, 0);
}
.top {
  top: 30px;
  ;
}
.bottom {
  bottom: 0;
}
.middle {
  top: 50%;
  transform: translate(0, -50%);
}
.center.middle {
  transform: translate(-50%, -50%);
}
#right_wraper {
  float: right;
  border: 1px black solid;
  width: 300px;
  text-align: right;
}
.intime {
  width: 200px;
  height: 200px;
  background: blue;
  display: none;
}
.inscroll {
  width: 20px;
  height: 20px;
  background: yellow;
  display: none;
}
.triggers {
  background: rgba(0, 255, 252, 1.00);
  width: 40px;
  height: 40px;
}
@media (max-width: 700px) {
  .basic_unit {
    font-size: 2px;
  }
}
@media (min-width: 701px) and (max-width: 1200px) {
  .basic_unit {
    font-size: 6px;
  }
}
@media (min-width: 1201px) {
  .basic_unit {
    font-size: 8px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
</div>

<div id="wraper">
  <div id="container">
    <div id="right_wraper">
      <!--IN SCROLL-->
      <div class="inscroll fontbig1 onscroll5 fixed middle outtime2 "></div>
    </div>


    <!--IN SCROLL-->
    <div class="inscroll fontmedium3 onscroll10 fixed bottom center outscroll25 right_left" style="border: solid black 50px"></div>

    <!--TRIGGERS-->
    <div class="triggers fixed top left_total">
    </div>
    <div class="triggers fixed bottom left_total">
    </div>
    <div class="triggers fixed top right_total">
    </div>
    <div class="triggers fixed bottom right_total">
    </div>
    <div class="basic_unit">
      A
      <p style="font-size:6px;">A</p>
      <p style="font-size:8px;">A</p>
      <p style="font-size:2px;">A</p>
    </div>

    <div class="basic_unit">

    </div>
    <div class="basic_unit">
    </div>
    <div class="basic_unit">
    </div>
    <div class="basic_unit">
    </div>
    <div class="basic_unit">
    </div>


  </div>
</div>

8
  • Muchas gracias por la completa respuesta, he leído la documentación que me pasas y he aplicado el código que sugieres pero continúa sin funcionar. Puede ser que continúe estando mal el $(".basic_unit").css("fontSize") porque no analiza el valor del fontSize después de aplicar los cálculos de @media sobre el tamaño de la ventana?
    – Ivan Soler
    Commented el 28 mar. 2016 a las 14:54
  • @IvanSoler Yo reproduje tu código y la variable fuente se asigna correctamente a 8px en una resolución grande y a 2px en una pequeña. Los media-queries son parte de las reglas que se aplican antes de obtener el valor computado. Si no funciona es porque tienes otro bug en el código (yo eliminé código duplicado que habías puesto en la pregunta). Incluye un console.log(DocHeight); o un alert(DocHeight) para que veas que tiene el valor correcto.
    – devconcept
    Commented el 28 mar. 2016 a las 15:07
  • He copiado todo tu código en una nueva hoja y agregando un botón para saber el DocHeight en cada momento éste no cambia cuando el cambio del tamaño de la ventana dispara el cambio del tamaño de la fuente @devconcept se te ocurre algo? Todo funciona menos el cambio de valor de DocHeight...En su lugar permanece invariable el valor por defecto de DocHeight
    – Ivan Soler
    Commented el 28 mar. 2016 a las 15:12
  • Ahhh bueno, eso es otra cosa! Si quieres actualizar la variable DocHeight al redimensionar la pantalla tienes que volver a efectuar los cálculos dentro de un evento resize algo así como $(window).on('resize', function() { /* calcular de nuevo y actualizar */})
    – devconcept
    Commented el 28 mar. 2016 a las 15:17
  • Si te refieres a meter "switch" sustituyendo "calcular de nuevo y actualizar" tampoco me está dando resultado... Con esa estrategia el DocHeight aparece como Undefined.
    – Ivan Soler
    Commented el 28 mar. 2016 a las 15:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.