Foros del Web » Programando para Internet » Jquery »

Aumentar altura de capa jQuery

Estas en el tema de Aumentar altura de capa jQuery en el foro de Jquery en Foros del Web. Hola Necesito ayuda con las siguientes lineas Código HTML: $(document).ready(function(){ for (var i = 0; i < <?php echo $pocimas_roja ?> ; i++) { $(' ...
  #1 (permalink)  
Antiguo 23/02/2010, 15:00
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 15 años
Puntos: 0
Aumentar altura de capa jQuery

Hola Necesito ayuda con las siguientes lineas



Código HTML:
    $(document).ready(function(){
    
    for (var i = 0; i < <?php echo $pocimas_roja ?>; i++) {
      $('<div class="pocima_roja" title="Utilizar pocima">').appendTo(document.body);
    }
    $("div.pocima_roja").click(function () {
		$("#c_red").animate({ 
        height: "35%",}, 1500 );
      $(this).hide(500, function () {
        $(this).remove();
      });
    });
    for (var i = 0; i < <?php echo $pocimas_azul?>; i++) {
      $('<div class="pocima_azul" title="Utilizar pocima">').appendTo(document.body);
    }
    $("div.pocima_azul").click(function () {
		$("#c_blue").animate({ 
        height: "35%",}, 1500 );
      $(this).hide(500, function () {
        $(this).remove();
      });
    });

  });

<div id="apDiv1"><img src="img/backgrounds/footer_menu.png" width="770" height="155" style="position:absolute; z-index:4" />
  <div id="c_red" style="height:20px"></div>
  <div id="c_blue" style="height:20%"></div>
</div> 
Lo que tengo es unos botones que aumentan el tamaño de una capa en pixeles el codigo funciona pero por ejemplo si tengo dos o mas botones rojos no aumenta la capa, mas que una sola vez.

Lo que necesito es que si aparecen 5 botones rojos quisiera que la capa #c_red aumente 2% por cada clic.

espero su ayuda

gracias.
  #2 (permalink)  
Antiguo 23/02/2010, 17:38
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 7 meses
Puntos: 101
Respuesta: Aumentar altura de capa jQuery

Aca lo que tenes es una inserción de varios div.pocima_roja en el DOM, tras la carga de la pagina.

Cita:
for (var i = 0; i < <?php echo $pocimas_roja ?>; i++) {
$('<div class="pocima_roja" title="Utilizar pocima">').appendTo(document.body);
}
$("div.pocima_roja").click(function () {
$("#c_red").animate({
height: "35%",}, 1500 );
$(this).hide(500, function () {
$(this).remove();
});
});
El método que usas no está mal, pero usa recursos innecesariamente, porque podrías escribir el html directamente en el body con PHP, sin necesidad de utilizar jquery.

En cuanto a la función, pensá que tenés varios divs, y que entonces este selector te devolverá un array, y no un solo elemento:

$("div.pocima_roja")

Entonces, para asignar la funcionalidad "click" necesitas usar un bucle each.
  #3 (permalink)  
Antiguo 24/02/2010, 11:20
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 15 años
Puntos: 0
Respuesta: Aumentar altura de capa jQuery

Agradesco tu respuesta.

El codigo me quedo algo asi pero creo que no comprendi bien eso de hacer el
bucle each. .


Código HTML:
 <script>
$(document).ready(function(){
    
    $("div.pocima_roja").one('click', function () {
     $(this).hide(500, function () {
        $(this).remove();
      });
    });
	
	 $("div.pocima_roja").click(function () {
		$("#c_red").animate({ 
        height: "35px",}, 1500 );
		      });

    $("div.pocima_azul").one('click', function () {
     $(this).hide(500, function () {
        $(this).remove();
      });
    });
	
	 $("div.pocima_azul").click(function () {
		$("#c_blue").animate({ 
        height: "35px",}, 1500 );
		      });

});
  </script>
</head>
<body>
  <div class="pocima_roja"></div>
  <div class="pocima_roja"></div>
  <div class="pocima_azul"></div>
  <div class="pocima_roja"></div>
  <div class="pocima_roja"></div>
  <div class="pocima_roja"></div>
  <div class="pocima_azul"></div>

<div id="apDiv1">
<div id="dats" style="position: absolute; color:white; z-index:5; text-align:center; width:5%; margin:40px 0 0 390px; border:1px solid silver;"><a href="#"></a></div>
<img src="img/backgrounds/footer_menu.png" width="770" height="155" style="position:absolute; z-index:4" />
  <div id="c_red" style="height:20px"></div>
  <div id="c_blue" style="height:20%"></div>
  
</div> 
  #4 (permalink)  
Antiguo 24/02/2010, 14:47
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 7 meses
Puntos: 101
Respuesta: Aumentar altura de capa jQuery

Bueno, desconozco el uso de one(), pero en lo que se refiere a un bucle each... no tenes alguna experiencia previa? Tomando tu codigo original, sería así:
Cita:
pocimas_rojas = $("div.pocima_roja"); // esto es un array siempre y cuando haya más de un div.pocima_roja .

$.each(pocimas_rojas, function() {

$(this).click(function () {

$("#c_red").animate({ height: "35%",}, 1500 );
$(this).hide(500, function () { $(this).remove(); });

});

});
http://api.jquery.com/jQuery.each/

Se puede pulir, pero la logica es que a cada div.pocima_roja se le adjudica la función onclick. Lo importante es que entiendas la lógica del bucle.

Lo probas?

Si funciona, lo que falta es una comprobación para saber si se trata de un array o no, porque si solo tuvieses un div... entonces el each no funcionaría.

Etiquetas: altura, aumentar, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:10.