Stato di :hover su dispositivi Touch-Screen

andreto · 29 Apr 2013

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 · 29 Apr 2013

Ciao, con javascript
tramite l'evento onmousedown() puoi assegnare un azione e con onmouseup() ne assegni un altra dovrebbe funzionare

andreto · 29 Apr 2013

criric ha scritto:
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 · 29 Apr 2013

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 · 29 Apr 2013

criric ha scritto:
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 · 29 Apr 2013

no non mi funziona
ma non ho un tablet sto provando su un monitor touch dell'asus

andreto · 29 Apr 2013

Ok, ho capito.

il codice da me postato funziona sia su iPhone 5 che su Samsung con Android.

Cerca

Cerca

Stato di :hover su dispositivi Touch-Screen

andreto

Utente Attivo

criric

Super Moderatore

andreto

Utente Attivo

criric

Super Moderatore

andreto

Utente Attivo

criric

Super Moderatore

andreto

Utente Attivo

Discussioni simili