Foros del Web » Programando para Internet » Jquery »

Seleccionar Div a abrir con jquery

Estas en el tema de Seleccionar Div a abrir con jquery en el foro de Jquery en Foros del Web. Buenas, mi problema es que tengo un panel de noticias y para cada noticia tengo un div creado en el que hay la información ampliada ...
  #1 (permalink)  
Antiguo 18/02/2011, 18:56
 
Fecha de Ingreso: febrero-2011
Mensajes: 5
Antigüedad: 13 años, 9 meses
Puntos: 0
Pregunta Seleccionar Div a abrir con jquery

Buenas, mi problema es que tengo un panel de noticias y para cada noticia tengo un div creado en el que hay la información ampliada de la noticia. Toda la información la saco de una bbdd en php. El problema és que cuando llamo a la función siempre me abre el mismo div (en este caso "popUpDiv") y me gustaria pasarle una variable con el nombre del div a abrir. És decir que me abriera el div que quisiera (popUpDiv o popUpDiv2).
Pongo el codigo :

Los DIV
Código HTML:
 <div id="capaPopUp"></div> //El que hace la opacidad del fondo

    <div id="popUpDiv">
        <div id="capaContent">
            <div>Información expanida noticia 1</div>
            <a href="javascript:void(0);" title="Cerrar" id="cerrar">Cerrar</a>
	</div>
    </div>

    <div id="popUpDiv2">
        <div id="capaContent">
            <div>Información expanida noticia 2</div>
            <a href="javascript:void(0);" title="Cerrar" id="cerrar">Cerrar</a>
	</div>
    </div> 

HTML que uso para abrir el div
Código HTML:
<a href="javascript:void(0);" title="Abrir PopUp" id="abrirPop"><img src="pics/home/kk.jpg" width="950" height="250" border="0" /></a> 

Código Javascript:
Ver original
  1. //Variable que almacenará la posición del scroll, por defecto tiene valor 0.
  2. var scrollCachePosition = 0;
  3.  
  4. $(function() {
  5.     $("#abrirPop").click(function(event) {
  6.         var nom_pop = "popUpDiv";
  7.         scrollCachePosition = $(window).scrollTop();
  8.         //Envío el scroll a la posición 0 (left), 0 (top), es decir, arriba de todo.
  9.         window.top.scroll(0,0);
  10.  
  11.         //Si el body es mas grande que la capa 'wrapper' incrementa la altura del body a la capa 'capaPopUp'.
  12.         if ($("body").outerHeight()>$("#wrapper").outerHeight()){
  13.             var altura=$("body").outerHeight();
  14.         }else{
  15.         //Si la capa 'wrapper' es más grande que el body incrementa la altura de la capa 'wrapper' a la capa 'capaPopUp'.
  16.             var altura=$("#wrapper").outerHeight();
  17.         }
  18.         window.document.getElementById("capaPopUp").style.height=altura+"px";
  19.         event.preventDefault();
  20.         //Muestro la capa con el efecto 'slideToggle'.
  21.         $("#capaPopUp").slideToggle();
  22.  
  23.         //Calculo la altura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
  24.         var altura=$(popUpDiv).outerHeight();
  25.         $(popUpDiv).css("margin-top","-"+parseInt(altura/2)+"px");
  26.        
  27.         //Calculo la anchura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
  28.         var anchura=$(popUpDiv).outerWidth();
  29.         $(popUpDiv).css("margin-left","-"+parseInt(anchura/2)+"px");
  30.        
  31.         //Muestro la capa con el efecto 'slideToggle'.
  32.         $(popUpDiv).slideToggle();
  33.     });
  34.     $("#cerrar").click(function(event) {
  35.         event.preventDefault();
  36.         //Cierro las capas con el efecto 'slideToggle'.
  37.         $("#capaPopUp").slideToggle();
  38.         $(popUpDiv).slideToggle();
  39.         //Si la variable scrollCachePosition es mayor que 0 incrementará la posición del scroll al valor que se almacenó.
  40.         if (scrollCachePosition > 0) {
  41.             window.top.scroll(0,scrollCachePosition);
  42.             //Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces sea necesario.
  43.             scrollCachePosition = 0;
  44.         }
  45.     });
  46. });
  #2 (permalink)  
Antiguo 18/02/2011, 20:03
 
Fecha de Ingreso: diciembre-2010
Ubicación: valencia
Mensajes: 203
Antigüedad: 13 años, 11 meses
Puntos: 11
Respuesta: Seleccionar Div a abrir con jquery

hace poco tratamos un tema similar, dale un ojo a este hilo
  #3 (permalink)  
Antiguo 19/02/2011, 07:28
 
Fecha de Ingreso: febrero-2011
Mensajes: 5
Antigüedad: 13 años, 9 meses
Puntos: 0
Pregunta Respuesta: Seleccionar Div a abrir con jquery

Perdona, pero no entendí el linc que me mandastes (soy inexperto en programación con javascript).
En definitiva lo unico que necesitaria es que la variable que hay en la linea 6 de codigo javascript "nom_pop" la pudiera mandar des de el linc.
Código HTML:
<a href="#" title="Abrir PopUp" id="abrirPop">Abrir PopUp</a> 
Muchas gracias
  #4 (permalink)  
Antiguo 19/02/2011, 07:57
 
Fecha de Ingreso: diciembre-2010
Ubicación: valencia
Mensajes: 203
Antigüedad: 13 años, 11 meses
Puntos: 11
Respuesta: Seleccionar Div a abrir con jquery

lo que quiero decir es que la estructura de noticia1 y noticia2 es la misma, no es necesario que uses un id por cada noticia o cuando lleges a 200 te vas a volver loco. entonces te puse el enlace ya que haciendo uso de this en la funcion y teniendo claro el concepto de padre hijo, puedes con el mismo codigo mostrar tantas noticias como necesites sin tener que pasar parametros.

Etiquetas: seleccionar
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:27.