Comunidad de diseño web y desarrollo en internet online

Problema de posicionamiento de página con aplicación de Tabs.

Citar            
MensajeEscrito el 23 Ago 2012 04:04 pm
Hola! Vuelvo a ingresar a este foro para pedir sus tips acerca de este nuevo problema que tengo.
Dentro del sitio que estoy desarrollando (en Joomla v2.5) tengo una aplicación de tabs dentro de un articulo que me muestra contenido por medio de fadeIn (en Jquery), todo en la aplicación esta bien, el problema es que al hacerle click a alguno de los tabs, la página se reposiciona (brinca) hasta el inicio de esta misma.

Que solución me podrian recomendar para que la posision de la pagina no cambie al hacerle click a los tabs.

Por su ayuda les agradeceré n_n

Saludos!! =)

Por greenselves

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 23 Ago 2012 07:51 pm
Si "brinca" al hacer click es porque está haciendo lo que debería por efecto, tienes dos soluciones, ambas a aplicar en el evento click:

  1. Usar preventDefault() al principio del código. Por ejemplo:

    Código Javascript :

    $('#mi_link').on('click', function(e){
        e.preventDefault();
        //El resto del código aquí
    })
    

  2. Usar return false al final del código. Por ejemplo:

    Código Javascript :

    $('#mi_link').on('click', function(e){
        //El código aquí
        return false;
    })
    

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 24 Ago 2012 04:22 pm
Hola The Fricky!, de antemano gracias por contestar a mi pregunta. He probado los códigos que me sugeriste, pero de inicio al testear:

Código :

jQuery(".tabmenu, #link2").on('click', function(e){

e.preventDefault();

   jQuery(".active").removeClass("active");
   ... mas codigo

});


Pero dentro de mi navegador me aparece error "on click no es una función".
Lo probé con el codigo que tengo:

Código :

jQuery(".tabmenu, #link2").click(function(e) { 

e.preventDefault();

   ... mas codigo

});


Pero tampoco funciona. Ojo que utilizo la etiqueta "jQuery" en vez de "$".

Saludos, de nuevo gracias

Por greenselves

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 26 Ago 2012 01:10 am
No puedo darte una respuesta directa porque no conozco tu código, pero acá tienes la documentación -con ejemplos- de preventDefault(), consúltala para que veas mejor cómo puedes aplicarla a tu código

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 26 Ago 2012 03:55 am
hola, metiste el codigo que te pasaron en el document.ready?

o hiciste un console.log para ver que pasaba cn el evento?

y lo de .on("click") es de jquery 1.8, q version usas vos¿?

Por skaterseba

Claber

170 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Ago 2012 12:09 am
Gracias skaterseba por contestar.

Efectivamente mi còdigo esta dentro de document.ready:

Código :


jQuery(document).ready(function() {   

jQuery(".tabmenu, #link2").click(function() { 
   ... codigo de tabs
});

});



Estoy utilizando javascrpt v1.4.2

Por greenselves

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Ago 2012 03:25 pm
bueno entonces primero, a menos q requieras especificamente la version 1.4.2 usa la 1.7.2
cambia el jquery por $ y por un alert dentro del click, sino sale es xq algo en el evento esta mal, y ahora q veo bien, la seleccion tabmenu link 2
por q no dejas solo un id y te aseguro q andara :D

Por skaterseba

Claber

170 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Sep 2012 04:31 pm
Hola skaterseba, el problema ya fue resuelto, más bien fue un conflicto que ocurria con librerias ya que estaba repitiendo librerias de Jquery con otro módulo, este modulo al fin de cuentas era el que me estaba provocando este problema. Gracias por sus respuestas!. Saludos :)

Por greenselves

4 de clabLevel



 

chrome

 

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