[Javascript] [HTML] doppio click

ujroberto · 7 Feb 2017

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 · 7 Feb 2017

ujroberto ha scritto:
Posso postare il codice se volete.

È necessario!
Quando si pone dei quesiti postare il codice è sempre molto auspicabile

ujroberto · 7 Feb 2017

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

Max 1 · 7 Feb 2017

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

ujroberto · 7 Feb 2017

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 · 7 Feb 2017

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>

Max 1 · 7 Feb 2017

Purtroppo ho visto che non funziona! Ti sposto in JS

criric · 8 Feb 2017

Ciao, dai una letta qui

ujroberto · 8 Feb 2017

Grazie perchè il Javascript per me è materia oscura,
adesso lo provo, sai dove devo inserire il codice?

criric · 8 Feb 2017

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 · 8 Feb 2017

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

criric · 8 Feb 2017

<head> non <header>
posta il link se lo hai online

criric · 8 Feb 2017

<head> non <header>
al posto di $(".vppop") devi mettere la tua classe $(".riquadro")
posta il link se lo hai online

ujroberto · 8 Feb 2017

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 · 8 Feb 2017

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 · 9 Feb 2017

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 · 9 Feb 2017

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 · 9 Feb 2017

forse ho trovato l'inghippo, ho chiuso javescript con due parentesi anzichè una per errore. Domani mattina che ho il pc provo!

ujroberto · 11 Feb 2017

Purtroppo non funziona, proverò a sentire l'ideatore del tema, intanto Vi ringrazio per il supporto!

[Javascript] [HTML] doppio click

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Super Moderatore

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Discussioni simili