Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Uso de la funcion Live

Estas en el tema de Uso de la funcion Live en el foro de Frameworks JS en Foros del Web. Tengo una ventana modal, que carga contenido HTML con la func. ".load()" . Hasta ahí todo perfecto... La cuestión es que dentro de este HTML, ...
  #1 (permalink)  
Antiguo 14/06/2011, 18:40
Avatar de valenti77  
Fecha de Ingreso: julio-2008
Ubicación: Berisso, Buenos Aires
Mensajes: 244
Antigüedad: 12 años, 3 meses
Puntos: 4
Pregunta Uso de la funcion Live

Tengo una ventana modal, que carga contenido HTML con la func. ".load()". Hasta ahí todo perfecto...

La cuestión es que dentro de este HTML, hay una galeria de imágenes, y las miniaturas que son links, al hacer .click() tienen que cargar la imagen en grande en un contenedor superior, pero esto obviamente no funciona.

Tendría que usar la función .live() no? ya que el HTML si lo saco del modal, y no lo llamo con AJAX, es decir, link comun, anda bien. El problema es que nose cuando debo poner la funcion live, si en el HTML que contiene el modal, en el modal, o donde sea.

Espero sus respuestas, muchas gracias!
  #2 (permalink)  
Antiguo 14/06/2011, 22:50
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 14 años, 11 meses
Puntos: 87
Respuesta: Uso de la funcion Live

.load() es Ajax. Lo que tiene que hacer es asignar los eventos en el Callback

Código Javascript:
Ver original
  1. .load("pag.html",function(){
  2.     //Asignar eventos (agrandar imagenes, lo que sea)
  3. })
  #3 (permalink)  
Antiguo 15/06/2011, 04:19
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 12 años, 9 meses
Puntos: 845
Respuesta: Uso de la funcion Live

Para esto es que existe justamente live, con poner el código dentro del ready debería suficiente, lo has probado y no te funciona ?, en caso afirmativo postea el codigo js y html.

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #4 (permalink)  
Antiguo 18/06/2011, 09:53
Avatar de valenti77  
Fecha de Ingreso: julio-2008
Ubicación: Berisso, Buenos Aires
Mensajes: 244
Antigüedad: 12 años, 3 meses
Puntos: 4
Respuesta: Uso de la funcion Live

Gracias muchachos, me anduvo la funcion live, tambien tenia un problema con las ID que tambien lo solucioné.

Lo que me está pasando ahora es que al abrir el Modal Popup por primera vez todo perfecto.

Ahora cuando cierro, y abro otro item, el popup no aparece. Cambie el css de
Código CSS:
Ver original
  1. position:fixed;
a
Código CSS:
Ver original
  1. position:absolute
para ver que pasaba, y se muestra abajo de toda la pagina. Si vuelvo a
Código CSS:
Ver original
  1. position:fixed;
no se ve y no se permite el Scroll.

Para mi es un tema de las variables de posición que toma el javascript:
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.         //parametros principales
  3.        
  4.         var contenidoHTML = '<p>Tu contenido HTML aqui</p><button onclick=\"closeModal()\">Cerrar</button>';
  5.        
  6.         var ancho = 600;
  7.         var alto = 250;
  8.  
  9.         $('#button').click(function(){
  10.                 // fondo transparente
  11.                 // creamos un div nuevo, con dos atributos
  12.                 var bgdiv = $('<div>').attr({
  13.                                         className: 'bgtransparent',
  14.                                         id: 'bgtransparent'
  15.                                         });
  16.                
  17.                 // agregamos nuevo div a la pagina
  18.                 $('body').append(bgdiv);
  19.                
  20.                 // obtenemos ancho y alto de la ventana del explorer
  21.                 var wscr = $(window).width();
  22.                 var hscr = $(window).height();
  23.                
  24.                 //establecemos las dimensiones del fondo
  25.                 $('#bgtransparent').css("width", wscr);
  26.                 $('#bgtransparent').css("height", hscr);
  27.                
  28.                
  29.                 // ventana modal
  30.                 // creamos otro div para la ventana modal y dos atributos
  31.                 var moddiv = $('<div>').attr({
  32.                                         className: 'bgmodal',
  33.                                         id: 'bgmodal'
  34.                                         });    
  35.                
  36.                 // agregamos div a la pagina
  37.                 $('body').append(moddiv);
  38.  
  39.                 // agregamos contenido HTML a la ventana modal
  40.                 $('#bgmodal').append(contenidoHTML);
  41.                
  42.                 // redimensionamos para que se ajuste al centro y mas
  43.                 $(window).resize();
  44.         });
  45.  
  46.         $(window).resize(function(){
  47.                 // dimensiones de la ventana del explorer
  48.                 var wscr = $(window).width();
  49.                 var hscr = $(window).height();
  50.  
  51.                 // estableciendo dimensiones de fondo
  52.                 $('#bgtransparent').css("width", wscr);
  53.                 $('#bgtransparent').css("height", hscr);
  54.                
  55.                 // estableciendo tamaño de la ventana modal
  56.                 $('#bgmodal').css("width", ancho+'px');
  57.                 $('#bgmodal').css("height", alto+'px');
  58.                
  59.                 // obtiendo tamaño de la ventana modal
  60.                 var wcnt = $('#bgmodal').width();
  61.                 var hcnt = $('#bgmodal').height();
  62.                
  63.                 // obtener posicion central
  64.                 var mleft = ( wscr - wcnt ) / 2;
  65.                 var mtop = ( hscr - hcnt ) / 2;
  66.                
  67.                 // estableciendo ventana modal en el centro
  68.                 $('#bgmodal').css("left", mleft+'px');
  69.                 $('#bgmodal').css("top", mtop+'px');
  70.         });
  71.        
  72.  });
  73.        
  74. function closeModal(){
  75.         // removemos divs creados
  76.         $('#bgmodal').remove();
  77.         $('#bgtransparent').remove();
  78. }

Esto pasa solo en mozilla y en Chrome. En IE todo bien hasta que a un punto se deja de ver lo que hay bajo el modal.

PD: EL lunes edito bien la función ya que no tengo acceso ahora, y como no recuerdo muy bien cuales fueron los cambios que le hice, prefiero tenerlos enfrente a arriesgarme a escribir la función en este momento, disculpen.

Etiquetas: ajax, html, jquery, live, modal
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 16:53.