[Javascript] [HTML] doppio click

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
Ciao ragazzi,
su un immagine ho creato l'effetto hover facendo comparire una descrizione <p>, come posso fare per avere con un click sull'immagine, l'apertura di un link?
Sul mobile con un click ho l'hover ma, utilizzando solo il CSS, come si fa ad aprire il link relativo al secondo click?
Ho cercato nelle guide in inglese ma non ci ho capito granchè.
Posso postare il codice se volete.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.012
296
83

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
Ok
Codice:
<div class="conthome">
<div class="row1home"><h3>TITOLO</h3>
<div class="riquadro">
<a href="http://www.ciao.it"><img src="http://www.sailcoolroute.eu/wp-content/gallery/gallery/cool-route-img-5.jpg">
<p class="overlayText">Descrizione
</p></a>
 </div>
</div>
......
CSS
Codice:
.conthome {
  display: flex;
  flex-flow: wrap;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 80px;
  padding-right: 80px;
  text-align: center;
  margin-bottom:50px;
}

.row1home {
  width:23%;
  float:left;
  position:relative;
}

.riquadro {
   position:relative;
}

.caption {
    background-color: rgba(0,0,0,0.75);
    position: absolute;
    color: #fff;
    font-weight: 600;
    z-index: 100;
    padding: 50 50;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}

/* Subclass of imageContainer*/
.overlayText{
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  opacity:0;
  background:#000000;
  color:#ffffff;
  text-align:center;
  font-size:20px;
  transition:0.5s ease-in;
  -webkit-transition:0.5s ease-in
   margin:0;
  padding:10px;
  margin:0px;
}

.overlayText:hover {
    opacity: 0.7;
    cursor: pointer;
}
Grazie
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.012
296
83
Con solo i CSS è un'impresa fare i due click per mobile.
Per semplificare farei una pagina solo per il mobile
oppure passare a javascript

P.S.
Questa volta te lo faccio io ma in futuro quando posti del codice usa il tag [ code ] oppure l'opzione dalla barra degli strumenti
box inserisci 2.png.JPG
 

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
Scusa hai ragione, non me ne ero accorto.
Immagino che non sia così facile da fare e non vorrei chiedere di più, sai come si chiama questa funzionalità in gergo tecnico in modo che la possa cercare in inglese?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.012
296
83
Prova così dovrebbe fimzionare
Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
.conthome {
display: flex;
flex-flow: wrap;
flex-direction: row;
justify-content: space-between;
padding-left: 80px;
padding-right: 80px;
text-align: center;
margin-bottom:50px;
}

.row1home {
width:23%;
float:left;
position:relative;
}

.riquadro {
position:relative;
}

.caption {
background-color: rgba(0,0,0,0.75);
position: absolute;
color: #fff;
font-weight: 600;
z-index: 100;
padding: 50 50;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}

/* Subclass of imageContainer*/
.overlayText{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
opacity:0;
background:#000000;
color:#ffffff;
text-align:center;
font-size:20px;
transition:0.5s ease-in;
-webkit-transition:0.5s ease-in
margin:0;
padding:10px;
margin:0px;
}

.overlayText:hover {
opacity: 0.7;
cursor: pointer;
}
</style>
</head>

<body>
<div class="conthome">
<div class="row1home">
<h3>TITOLO</h3>
<div class="riquadro">
<a href="http://www.ciao.it">
<img src="http://www.sailcoolroute.eu/wp-content/gallery/gallery/cool-route-img-5.jpg">
<div class="overlayText" onClick="document.location.href='http://www.ciao.it/';">
Descrizione
<a href="#" target="_self"></a>
</div>
</a>
</div>
</div>
</body>
</html>
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.012
296
83
Purtroppo ho visto che non funziona! Ti sposto in JS
 

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
Grazie perchè il Javascript per me è materia oscura,
adesso lo provo, sai dove devo inserire il codice?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
nella <head> tra i tag <script> e </script>. Devi includere anche la libreria jquery
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
questo è uno dei modi per includerla direttamente dal sito ufficiale.
 

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
Ho inserito la libreria così com'è scritta in header.php dentro i tag <header> di wordpress
alla fine della pagina interessata ho inserito questo tra <script> ma non funziona.
Codice:
</div>

$(function() {
  $(".vppop").mouseenter(function() { // Desktop browsers only
      $(".vppop").addClass("vppopscale");
  });
  $(".vppop").mouseleave(function() { // Desktop browsers only
      $(".vppop").removeClass("vppopscale");
  });
  $(".vppop").on('tap', function(e) { // Mobile browsers only
      e.preventDefault(); // Stop from following link
      $(".vppop").addClass("vppopscale").delay(300).removeClass("vppopscale");
  });
$(".vppop").on('doubletap', function() { // Mobile browsers only
    window.location = this.href;
 });
});
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
<head> non <header>
posta il link se lo hai online
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
<head> non <header>
al posto di $(".vppop") devi mettere la tua classe $(".riquadro")
posta il link se lo hai online
 

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
L'ho dovuto mettere sotto manutenzione per volontà dell' amico - proprietario,
ho creato i tag head nelle pagine interessate e ho inserito lì la stringa
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>

poi ho inserito a fondo pagina, es. home, il codice che mi hai girato,
ps:
addClass("vppopscale") diventerebbe ("riquadroscale") ?

dimmi che ne pensi
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
a te basta questa istruzione
Codice:
$(".riquadro a").on('doubletap', function() { // Mobile browsers only
   window.location = this.href;
 });
non ho mai sviluppato per cellulari e non conosco l'evento doubletap, al massimo prova anche con dblclick
Codice:
$(".riquadro a").on('dblclick', function() { // Mobile browsers only
   window.location = this.href;
 });
in "italiano" vorrebbe dire :
"quando accade l'evento doppio click sull'elemento <a> del div con classe riquadro esegui la funzione window.location utilizzando il suo attributo href "
 

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
Ho provato ma non funziona da mobile, continua ad aprirsi con un solo click.
Comunque grazie per questa spiegazione, ora mi è chiaro il procedimento.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
prova cosi
HTML:
<html>
    <head>
        <style>
            .conthome {
                display: flex;
                flex-flow: wrap;
                flex-direction: row;
                justify-content: space-between;
                padding-left: 80px;
                padding-right: 80px;
                text-align: center;
                margin-bottom:50px;
            }
            .row1home {
                width:23%;
                float:left;
                position:relative;
            }
            .riquadro {
                position:relative;
            }
            .caption {
                background-color: rgba(0,0,0,0.75);
                position: absolute;
                color: #fff;
                font-weight: 600;
                z-index: 100;
                padding: 50 50;
                -webkit-transition: all 300ms ease-out;
                -moz-transition: all 300ms ease-out;
                -o-transition: all 300ms ease-out;
                -ms-transition: all 300ms ease-out;
                transition: all 300ms ease-out;
                left: 0;
            }
            /* Subclass of imageContainer*/
            .overlayText{
                position:absolute;
                top:0px;
                bottom:0px;
                left:0px;
                right:0px;
                opacity:0;
                background:#000000;
                color:#ffffff;
                text-align:center;
                font-size:20px;
                transition:0.5s ease-in;
                -webkit-transition:0.5s ease-in margin:0;
                padding:10px;
                margin:0px;
            }
            .overlayText:hover {
                opacity: 0.7;
                cursor: pointer;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    </head>
    <body>
        <div class="conthome">
            <div class="row1home"><h3>TITOLO</h3>
                <div class="riquadro">
                    <a href="http://www.ciao.it"><img src="http://www.sailcoolroute.eu/wp-content/gallery/gallery/cool-route-img-5.jpg">
                        <p class="overlayText">Descrizione</p>
                    </a>
                </div>
            </div>
        </div>
        <script>
            $(".riquadro a").on('dblclick', function () { // Mobile browsers only
                alert("dblclick");
                window.location = this.href;
            });
            $(".riquadro a").on('doubletap', function () { // Mobile browsers only
                alert("doubletap");
                window.location = this.href;
            });
        </script>
    </body>
</html>
il mio cellulare invia a malapena gli sms quindi non posso testare
 

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
forse ho trovato l'inghippo, ho chiuso javescript con due parentesi anzichè una per errore. Domani mattina che ho il pc provo!
 

ujroberto

Nuovo Utente
5 Feb 2017
18
1
3
Purtroppo non funziona, proverò a sentire l'ideatore del tema, intanto Vi ringrazio per il supporto!