Comunidad de diseño web y desarrollo en internet online

Cómo dar dos eventos en un sólo click (jquery)

Citar            
MensajeEscrito el 13 Sep 2009 05:41 pm
Hola a todos!!!!!!!!!
Estoy experimentando en jquery y si bien tengo cierto conocimiento de js no soy experta. Lo que quiero hacer es muy simple (para alguien entendido): tengo un btn "call" y dos <div id> una se llama "log" y la otra "menu". Ambas div están situadas en la misma posición. Entonces, sólo quiero que al pulsar "call" la div "log" desaparezca suavemente mientras aparece "menu", al estilo "cortina". Logré hacer lo que les pongo abajo, pero en ie desaparece y aparece desde la esquina superior izquierda y en Mozilla, me hace el efecto del "menú", pero el "log" simplemente desaparece sin efecto alguno. Se supone que jquery es compatible con todos los navegadores ¡no?
esto es lo que tengo y lo que les digo que hace y no funciona bien:

Código :

<script type="text/javascript">
$(document).ready(function(){
   $("#call").click(function(event){
   event.preventDefault();
   $("#MD_logo").hide("slow");
   });
   
   $("#call").click(function(event){
   event.preventDefault();
   $("#menu-platsen").show(2000);
   });
});
</script>

Por favor, si alguien me ayuda, le estaré inmensamente agradecida. De paso, hago otra pregunta, dentro de "menu" tengo (claro) un menú <ul> todos los ítems llevan a una página diferente excepto uno. Cómo puedo hacer con ese ítem (<li>) para distingirlo del resto y hacerque me ejecute un lightbox? mil gracias desde ya.

Por al_di

65 de clabLevel



Genero:Femenino  

msie8
Citar            
MensajeEscrito el 15 Sep 2009 01:50 pm
El problema con tu codigo es que te faltan algunos parametros para que haga lo que quieres exactamente, en este caso al momento que indicas show o hide debes invocar también que tipo de de animación realizarán, esto es opcional obviamente.

Código Javascript :

<script language="javascript" type="text/javascript">
$(document).ready(function(){
   $("#call").click(function(){
     $("#log").fadeOut("slow");
     $("#menu").show('blind',2000);
   });
});
</script>

Ahora en cuanto al item de tu menu que quieres que se vea diferente, asignale una clase y a esta clase dale estilo mediante css y javascript, adicional a eso ingresa el código para abrir tu lightbox en dentro del evento click para dicho selector, aqui un ejemplo:

Código Javascript :

$(document).ready(function(){
   $('li.clase_para_distinguirlo')
      .css({'propiedad-1':'valor1','propiedad-2':'valor2',...,'propiedad-n:'valorn',})
      .click(function(){
         alert ("Reemplaza esta linea por el codigo para tu lightbox");
      });
});

Notese varias cosas:
[*] Que cuando vamos a establecer más de un valor css, los colocamos dentro de llave "{ }" separados por comas, cada valor entre comillas simples " ' ' " y las parejas propiedad-valor unidas por los dos puntos " : ", otra forma de estableer propiedades CSS es de una en una bajo la sintaxis $(selector).css(propiedad,valor); observese que no usamos llaves y esta ves el par propiedad-valor va unido por la coma.
[*] No es necesario llamar al selector cada vez que queremos ejecutar uno de sus eventos o establecer sus propiedades, en este caso en particular usamos el selector una sola vez "li.clase_para_distinguirlo" y establecimos las propiedades CSS mediante ".css( )" y las acciones para el evento click mediante "click(function( ){ })", asi mismo no es necesario que cada una de estas este en la misma linea del selector, podemos añadir saltos de linea a nuestro código para que se vea más ordenado y sea entendible, ya que los mismos serán desechados por el interprete al momento de ejecutar el código, OJO: si se colocan saltos de linea dentro de una cadena de texto estos serán interpretados como una Constante de Cadena sin terminar lo cual anulara nuestro script por tanto atenta a esto.

Espero que te sea de ayuda y nos cuentas como te fue

Por NeoCesar

Claber

1415 de clabLevel

14 tutoriales

Genero:Masculino  

Algun lugar dentro de la Matrix (Lima - Perú)

msie8
Citar            
MensajeEscrito el 15 Sep 2009 02:06 pm
Para empezar, no sabes cuánto te agradezco esta respuesta. Brillantemente clara y detallada. Una vez que pruebe tu consejo, sin dudas voy a contestarte. UN MILLON DE GRACIAS!!!!!!!!!!

Por M_o_n_i_c

25 de clabLevel



Genero:Femenino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.