1. Inicio
  2. Pregunta y respuesta
  3. jQuery: fireing método público de un plugin después de los cambios de la segunda complemento

jQuery: fireing método público de un plugin después de los cambios de la segunda complemento

2010-11-12 7 views
8

Hola .. necesito un consejo de nuevo :)jQuery: fireing método público de un plugin después de los cambios de la segunda complemento

Estoy trabajando en un proyecto con una cartera filtrable [basada en este enlace plugin: www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours.

los elementos de la cartera se muestran en un control deslizante horizontal que está agregando áreas de desplazamiento (puntos calientes) en el lado izquierdo y derecho de la ventana del navegador.

aquí viene mi problema:

el ancho de la barra deslizante se calcula en el plug-in de smoothdivscroller www.smoothdivscroll.com. pero cuando cambio el contenido del control deslizante a través del filtro de navegación, el ancho total del control deslizante cambia, pero el complemento smoothdivscroller no se da cuenta.

puedo tener un simplificada example en jsFiddle para usted y usted puede experimentar todo el problema aquí kuemmel-schnur.de/projekte: cuando se muestran todos los proyectos (Alle) y se desplaza hacia la derecha y luego cambiar a la categoría "Lehrprojekte" que ganó' Ver proyectos porque están en el extremo izquierdo y no se vuelve a calcular el ancho total del contenedor.

para arreglar esto tengo tres ideas en las que necesito ayuda seria.

1) el enchufe en smoothdivscroll ofrece un método público para volver a calcular el ancho del contenedor como

$("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea");

la que necesito para disparar cada vez que después se hace clic portfolio-list a. y tengo que combinar esto con el método en el que el cursor cambia automáticamente al primer elemento del contenido actual

$("#makeMeScrollable").smoothDivScroll("moveToElement", "first");

2) Mi segunda idea - porque yo no sé si o cómo 1) funciona - es compruebe si la URL cambia y luego inicie el recálculo. el filtro usa un hash para abordar el contenido. así que pensé que podría leer la URL y cada vez que la parte directamente después del hash cambia podría disparar el método.

3) que podía unir el plug-in filtrable a la smoothDivScroll plug-in con algo como (cuidado con código completamente equivocado :)

$('#portfolio-list').filterable(); 
$('#portfolio-filter a').click(function(){ 
     $('#makeMeScrollable').smoothDivScroll("moveToElement", "first")("recalculateScrollableArea"); 
});

así .. ¿qué te parece? de nuevo el enlace jsfiddle: jsfiddle.net/tobiasmay/QudtF/

gracias, tobi.

ps. habría configurado correctamente los enlaces, pero necesito 1 punto de reputación más para publicar más de 1 enlace;)

Fuente

2010-11-12 tobiasmay

+0

es mi pregunta es demasiado larga o demasiado complicada? luego lo desmontaré. – tobiasmay

+0

No estoy seguro de que jsfiddle esté actualizado - 'TypeError no detectado: Objeto # no tiene ningún método 'filtrable'. –

+0

De hecho, el enlace del recurso a filterable.js (y jquery.ba-hashchange.min.js) no es válido. – JimmiTh

Respuesta

2

Puede escuchar el evento filterportfolio y recalcular/mover aElemento desde allí.

$("body").bind("filterportfolio", function() 
{ 
    var 
     interval = 50, 
     duration = 1000; 

    var intervalId = setInterval(function() 
    { 
     $("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea"); 

     duration -= interval; 

     if(duration <= 0) 
     { 
      clearInterval(intervalId); 
     } 
    }, interval); 

    $("#makeMeScrollable").smoothDivScroll("moveToElement", "first"); 
});

parecía funcionar cuando se juega con él en la consola de JavaScript on the live site. Agregue el bloque de código al aks.js o pruébelo en Chrome: vaya al sitio, abra la consola, pegue el código y presione enter. Debe funcionar de inmediato al reproducir los pasos de la pregunta: desplácese hacia la derecha, haga clic en un filtro.

Editar: debido a las animaciones en el filtrado, .smoothDivScroll(...) tiene que ser llamado después de las animaciones se realizan. Como las animaciones pueden parecer un poco feas si solo se llama una vez, los recálculos se realizarán varias veces durante duration milisegundos con interval milisegundos en el medio.

Fuente

2012-02-05 16:00:37

+0

Parece que se rompe tan pronto como hace clic en "Todo" después de eso; tampoco quita el indicador de desplazamiento en el primer clic. Supongo que no funciona porque 'filterportfolio' se activa * antes * de la animación de filtrado, y' recalculateScrollableArea' luego se calcula en función del ancho actual necesario (donde los elementos del filtro aún no se han eliminado o agregado). Tendría que activarse * después de * la animación de filtrado, pero eso requeriría la modificación de filtertering.js, por lo que puedo decir en este momento. – JimmiTh

+0

Sí, lo noté. No se expande al ancho completo, ya que no es necesario hasta después de que la animación lo haya llenado con elementos. Voy a intentar retrasar o repetir la llamada de función después de que se activó 'filterportfolio'. –

+0

... o un truco que implica esperar mics de velocidad de animación (+ tolerancia) antes de llamar a 'recalcularScrollableArea'. – JimmiTh

0

Aquí está mi punto de vista para este problema.

Puede probar su segunda opción: el cambio de eventos de captura de hash

$('window').hashChange(function() { 
    $('portfolio-list').filterable(); 
});

único punto negativo de este enfoque es: Internet Explorer 7 no son compatibles de forma nativa hashChange evento.

Fuente

2012-02-05 16:15:08

1

Es posible utilizar evento personalizado jQuery: cuando cambia el contenido de la corredera, se ejecuta

$(document).trigger('contentChange');

y en el complemento se establece un controlador de este evento

$(document).bind('contentChange', function(){//here the code that changes the width of slider});

Fuente

2012-03-27 05:20:02

Cuestiones relacionadas

 Cuestiones relacionadas