Funzione mouseover Javascript

[Marco_88]

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

<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>

 

[flameseeker]

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:

$(document).ready();

Di conseguenza, tutto il tuo blocco di verifica del caricamento va impostato in questa maniera:

//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..

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:

//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:

//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:

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();
    });
});

 

[Marco_88]

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

 

[flameseeker]

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..

    $('#right-banner').mouseover(function() {
        // qualcosa..
    });

..in javascript nativo equivarrebbe a questo:

    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()