Funzione mouseover Javascript

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
Ciao ragazzi, perdonatemi se vi bombardo di nuove discussioni ma è veramente frustrante studiare tanto per poi non riuscire a fare cose semplici.
Queste funzioni puntano tutte al div "right-banner" e vorrei che lo scroller automatico si disattivasse al mouseover.
Grazie, come sempre :)


HTML:
<script>


//variabili
var div = document.getElementById('right-banner');
    butUp = document.getElementById('scroll-up');
    butDown = document.getElementById('scroll-down');
    bodyOnload = window.onload('right-banner');
var scrollLength = 50;

//Pulsante scroll up
butUp.onclick = function() {
    div.scrollTop -= scrollLength;
};

//Pulsante scroll down
butDown.onclick = function() {
    div.scrollTop += scrollLength;
};	

//Al caricamento pagina avvio l'autoscroller
if (bodyOnload = true) {

	//Auto scroll attivo
$(document).ready(function(){
    $('#right-banner').animate({
        scrollTop: $('#right-banner')[0].scrollHeight}, 300000);
});	 

    //Auto scroll che si disattiva all'hover sull elemento
}
else {
	bodyOnload = null;
}
		
</script>
 
Ultima modifica:
Allora, per verificare che la pagina ha caricato tutti gli elementi al suo interno ed è pronta a lanciare codice javascript, basta semplicemente sfruttare l'istruzione:
Codice:
$(document).ready();

Di conseguenza, tutto il tuo blocco di verifica del caricamento va impostato in questa maniera:
Codice:
//Al caricamento pagina..
$(document).ready(function(){

    // avvio l'autoscroller
    $('#right-banner').animate({scrollTop: $('#right-banner')[0].scrollHeight}, 300000);


});

Ora, javascript funziona ad eventi, il tuo controllo originario così impostato..
Codice:
if (bodyOnload = true) {

        // ....

	//Auto scroll che si disattiva all'hover sull elemento
} else {
	bodyOnload = null;
}
..oltre a non disporre di nessun comando per fermare l'animazione, viene eseguito un unica volta all'apertura della pagina di conseguenza non risponde a nessun evento.

Per configurare l'evento hover sull'elemento dobbiamo farlo sempre a DOM caricato, quindi:
Codice:
//Al caricamento pagina..
$(document).ready(function(){

    // avvio l'autoscroller
    $('#right-banner').animate({scrollTop: $('#right-banner')[0].scrollHeight}, 300000);

    // hover elemento
    $('#right-banner').mouseover(function() {
        // ferma l'animazione
        $(this).stop();
    });
});

A questo punto però quando spostiamo il mouse fuori dall'elemento l'animazione rimane ferma, dovremo quindi comunicare anche che sull'evento di uscita del mouse l'animazione deve ricominciare:
Codice:
//Al caricamento pagina..
$(document).ready(function(){

    // avvio l'autoscroller
    $('#right-banner').animate({scrollTop: $('#right-banner')[0].scrollHeight}, 300000);

    // hover elemento
    $('#right-banner').mouseover(function() {
        // ferma l'animazione
        $(this).stop();
    });

    // mouse out
    $('#right-banner').mouseout(function() {
        // ferma l'animazione
        $('#right-banner').animate({scrollTop: $('#right-banner')[0].scrollHeight}, 300000);
    });
});

Ecco, ora ci siamo.
Ora cerchiamo di pulire un pochino il codice e di gestire il comando di animazione da un unico punto, in questo modo il codice sarà più semplice da aggiornare/mantenere in futuro:
Codice:
function rightBannerAnimate() {
    $('#right-banner').animate({scrollTop: $('#right-banner')[0].scrollHeight}, 300000);
}

//Al caricamento pagina..
$(document).ready(function(){

    // avvio l'autoscroller
    rightBannerAnimate();

    // hover elemento
    $('#right-banner').mouseover(function() {
        // ferma l'animazione
        $(this).stop();
    });

    // mouse out
    $('#right-banner').mouseout(function() {
        // riavvia l'animazione
        rightBannerAnimate();
    });
});
 
Chiarissimo come sempre, grazie mille. Una curiosità: se è vero che javascript gestisce gli eventi, l'evento .animate è nativo di javascript o è una nuova funzione appartenente a jquery?? Tnx
 
Quando utilizzi un selettore jQuery ($) molto probabilmente stai usando funzionalità implementate dalla libreria.
Anche .mouseout() e .mouseover() sono delle funzioni jquery, le quali poi internamente rimandano all'istruzione nativa di javascript per assegnare l'evento.

Per esempio, l'assegnazione dell'evento sull'hover che ti ho esposto nello script..
Codice:
    $('#right-banner').mouseover(function() {
        // qualcosa..
    });

..in javascript nativo equivarrebbe a questo:
Codice:
    document.getElementById('right-banner').onMouseOver = function() {
        // qualcosa..
    };


Un modo molto semplice per vedere se si tratta di una funzionalità jQuery comunque è di fare una ricerca nella documentazione ufficiale delle funzioni: http://api.jquery.com/?s=.animate()
 

Discussioni simili