Stato di :hover su dispositivi Touch-Screen

andreto

Utente Attivo
5 Dic 2012
88
0
0
Ciao a tutti,
sto cercando di simulare uno stato di hover su dispositivi Touch-Screen.

Ad esempio con questo codice,
quando il puntatore del mouse si trova sul box esso aumenta di dimensione, uscendo fuori dal box questo ritorna alla dimensione iniziale.
HTML:
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Vorrei creare lo stesso effetto su un dispositivo Touch-Screen, possibilmente cambiando solo lo stato di hover con qualche altro stato.

Vorrei che mantenendo premuto sul box il box aumenti di dimensione e quando tolgo il dito dallo schermo il box torni ad essere com'era prima.

Si può fare?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, con javascript
tramite l'evento onmousedown() puoi assegnare un azione e con onmouseup() ne assegni un altra dovrebbe funzionare
 

andreto

Utente Attivo
5 Dic 2012
88
0
0
Ciao, con javascript
tramite l'evento onmousedown() puoi assegnare un azione e con onmouseup() ne assegni un altra dovrebbe funzionare

onmousedown() e onmouseup() non funzionano su touchscreen.

Ho trovato in rete e provato ontouchend e ontouchstart che invece funzionano.

Però non riesco a metterlo in pratica, adesso ho scritto questo ma non va:

HTML:
<!DOCTYPE html>
<html>
<head>

<style> 
div
{
width:100px;
height:100px;
background:red;
}
</style>

<script>
function myFunction(espandi)
{
var elem = document.getElementById("box");
elem.style.width = 300px;
}

function myFunction(ritorna)
{
var elem = document.getElementById("box");
elem.style.width = 100px;
elem.style.height = 100px;
elem.style.Transition = 'width 2s';
elem.style.WebkitTransition = 'width 2s';
}
</script>

</head>
<body>

<div id="box" ontouchend="myFunction(ritorna)" ontouchstart="myFunction(espandi)"></div>

</body>
</html>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
strano a me su un asus eee top funziona
HTML:
<script>
    function big(el) {
        el.style.width = "400px";
        el.style.height = "400px";
    }
    function normal(el) {
        el.style.width = "200px";
        el.style.height = "200px";
    }
</script>
<style>
    div {
        border: 2px solid red;
        width: 200px;
        height:200px;
    }
</style>
<div onmousedown="big(this)" onmouseup="normal(this)">

</div>
 

andreto

Utente Attivo
5 Dic 2012
88
0
0
strano a me su un asus eee top funziona

A me purtroppo non funziona, mentre questo si:

HTML:
<!DOCTYPE html>
<html>
<head>

<style> 
div
{
width:100px;
height:100px;
background:red;
transition: width 2s;
-webkit-transition: width 2s;
}
</style>

<script>
function espandi(el)
{
el.style.width = "300px";
}

function riduci(el)
{
el.style.width = "100px";
}
</script>

</head>
<body>

<div ontouchend="riduci(this)" ontouchstart="espandi(this)"></div>

</body>
</html>

Puoi provare questo e dirmi se a te funziona?

Che sistema operativo ha il tuo tablet?

Grazie
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
no non mi funziona
ma non ho un tablet sto provando su un monitor touch dell'asus
 

andreto

Utente Attivo
5 Dic 2012
88
0
0
Ok, ho capito.

il codice da me postato funziona sia su iPhone 5 che su Samsung con Android.
 
Discussioni simili
Autore Titolo Forum Risposte Data
L non duplicare dati in stato "aggiornamento" PHP 6
L input (controllo se è stato modificato o no). PHP 1
G cerco profilo facebook ...che sia stato creato da almeno 3 anni... che sia già verificato e autentic Vendere e Acquistare pubblicita' online 0
F [Gratuito][Cerco]Front End pagina web dinamica dinamica stato attuale Offerte e Richieste di Lavoro e/o Collaborazione 1
M [Visual Basic] Cambiare lo stato in checked delle checkbox richiamando dati dal database Visual Basic 6
G [Javascript] Test se un radio è stato checked Javascript 1
R PROBLEMA INVIO EMAIL AL CAMBIO DI STATO ORDINE E-Commerce 1
felino [Windows 10] Barra di stato bloccata: tasto start e menu start Windows e Software 4
M Capire che web editor è stato utilizzato HTML e CSS 4
felino [Scheda Madre] Qual modello è stato installato? Hardware 14
L Aiuto messaggio di stato PHP 1
A SEO e SERP Come scoprire lo stato di indicizzazione di una vecchia pagina specifica? SEO e Posizionamento 2
otto9due get_browser per sapere dettagli sullo stato del javascript del browser utente PHP 7
Nik Tab in jquery: aggiungere classe allo stato inattivo jQuery 1
neo996sps Cambiare stato di un pulsante PHP 3
filippino Rating stato d'animo degli utenti a fine post WordPress 1
C Dovrei creare un piccolo script che mi comunichi che questo è stato eseguito PHP 4
U aggiornamento stato persone HTML e CSS 6
D Animazioni - perchè torna nel suo stato iniziale??? HTML e CSS 2
U Controllare all'interno di un file incluso se un altro file è stato incluso... PHP 7
borgo italia se non è un segreto di stato Discussioni Varie 5
R stato riparazioni tramite IMEI PHP 7
G barra di navigazione: come è stata fatta? [era: come è stato fatto?] Webdesign e Grafica 2
D Menu con Stato Corrente e Blocco Link PHP 2
L errore:stato della chiamata 0. MA PERCHE??? Ajax 0
alessandro1997 L'accesso al tuo conto è stato limitato Discussioni Varie 8
V Vendo server usati in ottimo stato Altri Annunci 1
B disinformazione allo stato puro Discussioni Varie 4
J Come mantenere lo stato del "creator"? Javascript 0
PoLe 11 Settembre - Pentagono - E' stato veramente un aereo? Discussioni Varie 9
peppoweb Sul sito della Polizia di Stato una guida contro le truffe online Discussioni Varie 0
peppoweb Stato Mentale del Venerdì pomeriggio ..... Discussioni Varie 12
peppoweb Commercio elettronico: lo stato del B2C in Italia Discussioni Varie 0
P modifica colore A Hover link website . WordPress 2
amaranthinemess [HTML] :target e :hover HTML e CSS 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
Sermatth72 [HTML] creare link con colori Hover diversi, possibile? HTML e CSS 6
U Hover su immagine escluso titolo - flexbox Presentati al Forum 0
U [HTML] Hover su immagine escluso titolo - flexbox HTML e CSS 3
S [HTML] Effetto hover in un div HTML e CSS 6
otto9due Lampeggiamento solo su .hover(), inizia ma non riesco a fermarlo! jQuery 2
otto9due .hover() perchè non va in questo caso? jQuery 2
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
F Problema hover voce di menù Javascript 2
A :hover HTML e CSS 5
M sottomenu all hover su voce contattaci jQuery 2
A Simulazione :hover su touch device Javascript 1
P Hover HTML e CSS 1

Discussioni simili