Immagini mobili su Bootstrap Scrollspy

Ho impostato una pagina utilizzando il bootstrap. (http://ethnoma.org/about.html) Ho una barra laterale di navigazione che è apposta (che funziona benissimo). Sto anche usando lo scrollstrap di bootstrap su questa navigazione e tutti i link nella navigazione sono all'interno della stessa pagina (usando gli ancors). Tutto funzionava perfettamente (anche con un plugin smooth-scroll aggiunto). Ho semplicemente dovuto chiamare questo script per forzare Scrollspy ad aggiornare dopo che tutti i contenuti sono stati aggiunti alla pagina (che ho inserito nello <head>).Immagini mobili su Bootstrap Scrollspy

<script type="text/javascript"> 
// ScrollSpy 
$(function() { 
    $('[data-spy="scroll"]').each(function() { 
     var $spy = $(this).scrollspy('refresh') 
    }); 
}); 
</script>

Il mio cliente mi ha quindi chiesto di aggiungere immagini alla pagina. Ho fatto in modo da utilizzare le classi di markup e CSS bootstrap come la seguente:

<a class="pull-right pad5" href="#"> 
    <img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/> 
</a>

Il che rende il genitore "a" tag float a destra (in questo caso) e rende l'img in un elemento di blocco.

Il problema è che queste immagini flottate rendono la pagina più lunga di quanto non fosse in origine. Tuttavia Scrollspy sta ancora commutando il link attivo nello stesso posto. Ciò fa sì che lo scrollspy attivi i collegamenti per i contenuti più in basso nella pagina di quanto non lo siano attualmente.

Sono in perdita per come forzare Scrollspy a prendere in considerazione le immagini floate quando si calcola la posizione dell'ID a cui il collegamento degli antenati. Qualcuno di voi ha un'idea di come potrei sistemarlo. È possibile visualizzare il problema in vigore nella seguente pagina http://ethnoma.org/about.html

fonte

2013-04-02 Guategeek

È venuto a conoscenza di questo problema mentre tentavo di utilizzare Scrollspy da Bootstrap e sembra che lo script non tenga conto dell'altezza dell'immagine durante il calcolo, quindi facendo in modo che lo Scrollspy sia preciso.

Credo che questo sia dovuto al fatto che l'immagine non ha un'altezza impostata su di esso. Ispezionando la pagina, ho trovato che le immagini fluttuanti che ho incluso nella pagina avevano l'altezza impostata su auto, e quando ho impostato un valore specifico dopo le query multimediali nel CSS, il mio Scrollspy funzionava perfettamente .

fonte

2013-09-03 08:46:57

Mi sono appena imbattuto in questo problema, quindi ho pensato di fornire alcune spiegazioni e una possibile soluzione, nel caso in cui qualcun altro si trovasse in questa situazione.

Innanzitutto, scrollspy funziona correttamente. Nel momento in cui calcola gli offset dei vari elementi sulla pagina, le immagini non sono ancora state caricate, quindi hanno un'altezza effettiva di 0. In seguito, quando le immagini vengono caricate, il browser determina le loro dimensioni native, ricalcola il layout della pagina e quindi ripristina la pagina con le immagini. Tuttavia, scrollspy non sa assolutamente che la pagina è stata ridipinta, quindi continua a utilizzare gli offset stantie.

Se si desidera aggiornare scrollspy dopo tutte le immagini caricate, si sarebbe trovato che l'offset sarebbe corretto. Quindi, la domanda è come fare questo.

Una soluzione consiste nell'associare un gestore di eventia ogni immagine, quindi aggiornare scrollspy all'interno del gestore. Un approccio semplificato potrebbe assomigliare a questo:

<script type="text/javascript"> 
    function refreshScrollspy() { 
     $('[data-spy="scroll"]').each(function() { 
      $(this).scrollspy('refresh'); 
     }); 
    } 
    $(function() { 
     refreshScrollspy(); 
    }); 
</script> 

<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>

Ecco un working jsfiddle example. Si noti che il gestore di carico dell'immagine deve essere registrato prima che l'immagine venga effettivamente caricata. Altrimenti, non verrà licenziato. Ecco perché sto usando un gestore di eventi inline qui. Una soluzione più elegante è lasciata al lettore.

fonte

2014-12-04 04:00:07

Immagini mobili su Bootstrap Scrollspy

risposta

Problemi correlati