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:

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
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();
    });
});
 

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
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

Utente Attivo
27 Nov 2013
699
0
0
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
Autore Titolo Forum Risposte Data
C aiuto funzione mouseover Javascript 2
P Implementazione funzione FileReader Javascript 0
P Funzione copia multipla. Javascript 2
P Funzione jQuery Ajax invio file a php jQuery 1
A Funzione read URL PHP 6
F Funzione Glob - ricerca file contenente una parola PHP 1
A Mail con funzione mail() riconosciute come spam PHP 9
M Utilizzare la funzione mysql_num_rows() in PHP 5 PHP 3
A funzione iconv () non mi funziona PHP 4
D Come usare funzione php PHP 6
Y verificare condizione dopo esecuzione della funzione Programmazione 0
IClaude Funzione Javascript Javascript 8
A Funzione share come modificarla Social Media Marketing 0
L funzione onclik con seno e coseno non va Javascript 3
L funzione onclick non va Javascript 26
G modifica corretta funzione da eregi() a preg_match() PHP 3
Shyson Modificare funzione php PHP 15
L pdo (stampare un valore con ritorno a funzione) PHP 0
elpirata Funzione conversione da minuti in ore Javascript 0
@ [MS Access] Funzione Iif..is null... Database 0
F Funzione deprecata in PHP7 PHP 1
G [MS Access] Funzione ARROTONDA non definita nell'espressione MS Access 1
max1974 [Javascript] Funzione Errata procedura Javascript 2
pjtertdj Visualizzazione dati in php da mysql con funzione matematica in javascript PHP 1
Domenico_Falco1 Associare una stessa funzione get a due eventi a.click con classi differenti Ajax 6
psicomia Gestione funzione in javascript in tabella richiamare"textarea" valori preimpostati in "select" Javascript 2
L Problema funzione mail() PHP PHP 3
elpirata [Javascript] Lo script alle volte funzione altre volte no Javascript 0
V [Visual Basic] Richiamare funzione su modulo per restituire list Visual Basic 0
R [Photoshop] funzione colore automatico Photoshop 0
maxnegri [PHP]Funzione di calcolo prezzo di una camera in un range di date PHP 62
L [PHP] problema count messo in una funzione. PHP 1
Monital funzione php si ripete due volte PHP 6
GiErre [PHP] [HTML] Disabilitare un link in funzione della piattaforma PHP 7
Monital Funzione php e campo database come variabile PHP 6
M Recuperare ID e usarlo in funzione jQuery 2
M PHP - Funzione non e scrive il risultato PHP 3
R [Javascript] Rendere una funzione sempre visibile Javascript 2
M funzione mysql che ritorna i microsecondi a partire dal 1-1-1970 MySQL 3
batmanLF [MySQL] Problema funzione SUM MySQL 1
F [PHP] La funzione setcookie PHP 0
F [Photoshop] sovrapporre due immagini usando funzione batch Photoshop 0
otto9due Capire la funzione del parametro event passato alla funzione.. jQuery 1
A [Javascript] tabella dinamica e onchange su funzione Javascript 1
M Problema con connessione MySqli e funzione PHP 2
C [RISOLTO][PHP] Funzione ONclick PHP 14
A [PHP] Problema invio mail con funzione mail() PHP 3
C Creazione di una funzione per il filtraggio dei campi di un db Presentati al Forum 0
C richiamare una funzione in un altro script php PHP 1
P [Javascript] Inserire una nuova condizione in una funzione Javascript 3

Discussioni simili