jquery su popup solo prima volta

mmarammei

jquery su popup solo prima volta

Buongiorno a tutti! Ho montato sul mio sito un popup che si apre automaticamente all'apertura del sito e che si chiude cliccando sull'hover scuro o sul pulsante 'X'. Ho trovato il codice, molto semplice, carino e funzionale, da orangedropdesign.
Definiti #hover, #popup e #close, li ho richiamati con dei semplici div nel body e ho assegnato loro uno script.
Quello che vorrei fare (e non riesco) è fare in modo che il popup si apra sì automaticamente, ma una sola volta per sessione e non ogni volta che si va da una pagina all'altra del sito.
Il js che ho usato è relativo solo alla chiusura, come posso implementarlo?

<script language='JavaScript'>
$(document).ready(function(){


  //chiusura al click sulla parte scura
  $(&quot;#hover&quot;).click(function(){
      $(this).fadeOut();
    $(&quot;#popup&quot;).fadeOut();
    });


  //chiusura al click sul pulsante
  $(&quot;#close&quot;).click(function(){
$(&quot;#popup&quot;).fadeOut();
        $(&quot;#hover&quot;).fadeOut();
    });


});
</script>

mentelibera

Penso che la soluzione più semplice al quesito sia quella di creare un cookie quando viene chiuso il popup. Premetto subito di non avere esperienza con jQuery, ma alcuni giorni fa aprendo un articolo ( ingegneri . cc/articolo/18358/Mini-eolico-le-ottime-prospettive-per-l-Italia-Intervista-ad-Alessandro-Giubilo-presidente-ASSIEME ) e studiandomi l'Html la tecnologia è quella di tuo interesse ed in buona parte dovremmo essere abbastanza vicini alla soluzione al tuo caso. Infatti il popup si ripresenta cancellando il cookie e ricaricando la pagina.
Prima di vedere il codice penso che potremmo vedere il problema da un livello più astratto tanto per capire la logica:

Se non c'è il cookie allora mostra il popup, e quando viene premuta la "X" o l'area esterna scura crearlo e mostrare la pagina.
Invece, se già ci fosse il cookie allora verrebbe visualizzata subito la pagina.

Una veloce osservazione al codice Html che ho fatto è che non mi sembra aver trovato il controllo sull'esistenza del cookie, mentre trovato il codice per la scrittura:

[HTML]
function scriviCookie(nomeCookie,valoreCookie,durataCookie)
{
var scadenza = new Date();
var adesso = new Date();
scadenza.setTime(adesso.getTime() + (parseInt(durataCookie) * 60000));
document.cookie = nomeCookie + '=' + escape(valoreCookie) + '; expires=' + scadenza.toGMTString() + '; path=/';
}
[/HTML]

Come già accennato prima dovrà essere richiamata sia quando si preme la "X" che l'area scura. Esempio:

[HTML]
scriviCookie("il_cookie","1",6024365);
[/HTML]

Tornando al codice Html dell'articolo già citato constatiamo che la funzione per scrivere il cookie è contenuta in un'altra funzione che ha lo scopo di nascondere il popup.

Notare che un cookie ha un tempo di vita e dopo la scadenza viene cancellato e si ripresenterà il popup. Ci potrebbero essere casi in cui il browser sia impostato per non accettare i cookie, quindi si presenterà sempre a meno di complicare notevolmente la gestione, aspetto che non viene affrontato.

mmarammei

grazie! provo subito a montarlo! ma "durata cookie" devo esprimerlo in minuti, ore o giorni?

mentelibera

durataCookie è espresso in minuti, infatti vedendo il corpo della funzione scriviCookie() il fattore moltiplicativo 60000 lo porta in millisecondi. Ricordare che la durata di vita del cookie è espressa in secondi. Tuttavia quando viene invocato il metodo

[HTML]adesso.getTime()
[/HTML]
riporta il numero di millisecondi dall'epoca Unix dell'oggetto adesso. Approfondimento: www . w3schools . com/jsref/jsref_gettime.asp

Infine l'invocazione del metodo

[HTML]scadenza.toGMTString()
[/HTML]
converte il nuovo timestamp in una data espressa come stringa. Approfondimento: www . tutorialspoint . com/javascript/date_togmtstring.htm

Mi potresti cortesemente postare il nuovo codice? Purtroppo quello del post #1 ha qualche problema. Mi basta anche poco ma completo, mi sta venendo un po' di curiosità. Grazie.

mmarammei

//chiusura al click sulla parte scura
$("#hover").click(function(){
$(this).fadeOut();
$("#popup").fadeOut();
});

//chiusura al click sul pulsante
$("#close").click(function(){
$("#popup").fadeOut();
$("#hover").fadeOut();
});

});
</script>

l'autore proponeva di intervenire col php per fare in modo che si aprisse una sola volta per sessione. ma io di php non ne capisco davvero nulla!!
cito quello che lui scrive:
"col PHP si può insiere un controllo di una variabile di sessione: mettiamo che si chiami $_SESSION['popup-visualizzato']. Quindi con un semplice if-else se $_SESSION['popup-visualizzato'] risulta 'true' allora non lo mostro, altrimenti lo mostro e setto la variabile.
session_start();
if($_SESSION['popup-visualizzato'] == false){
include('popup.php');
$_SESSION['popup-visualizzato'] = true;
}

mentelibera

Grazie per il codice, un suggerimento che potrebbe tornare utile: usando la "Modalità Avanzata" poi troverai il delimitatore Html (ed altri) per inserirlo correttamente come ho fatto prima.

Sì, è vero che si può fare anche con le sessioni ma questo approccio potrebbe essere contropoducente se non si prendessero opportune precauzioni perché per il loro funzionamento viene scritto un file di sessione oltre ad avere un timeout che potrebbe non essere coerente con altri scopi (per esempio se per questo poni una settimana mentre per la durata di validità di un captcha vuoi che duri un'ora dovrai sacrificare uno dei due, non mi sembra si possano impostare più timeout).
Sfortunatamente c'è da dire che il garbage collection di PHP non è particolarmente efficiente nella pulizia dei file di sessione, a meno che non si agisca su un certo parametro ma richierebbe di far perdere le prestazioni del server.

Per eseperienza personale dopo aver trovato misteriosamente quantità industriali di questi file di sessione ho fatto in modo di loggare tutte le visite, ed ho scoperto che ci sono molti più bot di quelli che si possano immaginare, e già dopo poche settimane dal precedente svuotamento la cartella era ingolfata. Tra l'altro attualmente uso le sessioni solo per i contatti e per una richiesta di preventivo, troppo strano per ricevere pochi riscontri effettivi...
In parte il problema si potrebbe risolvere se il server avesse installato un processo demone che ogni tot tempo avvii uno script per le pulizie, ma in base alle precedenti osservazioni mi sembra possano esserci casi da valutare singolarmente con attenzione.

mmarammei

Grazie! Sia per le dritte per scrivere correttamente sul forum il codice, con il delimitatore, sia per la mano che mi stai dando a scoprire cose che, ripeto, non conosco assolutamente (sessioni e simili).
Tornando al mio popup, io definisco la funzione "scriviCookie" nell'head della mia pagina, e poi la implemento nel codice del popup, in modo che scriva il cookie, se non è già presente, ad ogni chiusura di x o a ogni pressione sulla parte scura.
[HTML]<script language='JavaScript'>
$(document).ready(function(){

//chiusura al click sulla parte scura
$("#hover").click(function(){
$(this).fadeOut();
$("#popup").fadeOut();
$ scriviCookie("il_cookie","1",6024365);
});

//chiusura al click sul pulsante
$("#close").click(function(){
$("#popup").fadeOut();
$("#hover").fadeOut();
$ scriviCookie("il_cookie","1",6024365);
});

});
</script>
[/HTML]

giusto? (spero di essere riuscita a delimitare il codice come hai fatto tu). quello che mi chiedo è: come faccio a dirgli di aprire il popup solo se il cookie non è già presente?

mentelibera

Brava per aver usato bene i delimitatori, opzionalmente puoi vedere come sta venendo la stesura del post con il pulsante "Anteprima Messaggio" sempre nella "Modalità Avanzata".

Purtroppo di jQuery come già detto non conosco ma ho curiosità di andarmi a studiare i codici sorgenti della pagina appena vedo qualcosa di nuovo, come è stato per quell'articolo.

Ad occhio direi che il tuo ragionamento mi sembra corretto (nell'articolo che menzionavo definivano la funzione per creare il cookie vicino al punto in cui è invocata, poco prima della fine dell'elemento body), probabilmente bisognerebbe fare una piccola pagina essenziale in Html con il popup e quanto si sta producendo per avere un riscontro. Forse circa 30 righe di codice...

Riguardo la domanda su come fare a vedere se il cookie di nome "il_cookie" fosse presente in JavaScript si fa così:

[HTML]if (document.cookie.indexOf("il_cookie") >= 0) {
// il cookie esiste
}
else {
// il cookie non esiste
}[/HTML]

Il precedente codice potrebbe essere messo in una funzione ed invocato all'apertura della pagina aggiungendo l'attributo JS onload che la richiama nel tag body.
Ma spulciando l'articolo citato non mi sembra che sia fatto un controllo sul cookie. È vero che una volta creato viene passato al server che poi lo rimanda al client con la nuova data di scadenza.

mentelibera

Dunque, dopo essere arrivato a pagina 8 dei risultati di Google penso di aver trovato una base di tutorial che spiega la soluzione al problema con jQuery ed il cookie anche se in quel caso è applicato al caso di Google+.
Fonte: www . tech-cave . com/2012/03/how-to-add-one-time-popout-google-plus.html
Mi auguro che da questa possa venire fuori una (piccola) pagina demo funzionante.

mmarammei

mamma quanto materiale su cui lavorare! mi metto subito a farlo e, appena avrò una paginetta funzionante, la posterò! grazie tantissime, menteLibera!

mentelibera

Dopo lunghe navigazioni penso che questo codice sia un buon punto di partenza (ho dovuto rimuovere il doctype ed i link attivi nell'elemento head, metti i prefissi degli indirizzi assoluti e togli gli spazi bianchi):

[HTML]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link media="screen" rel="stylesheet" target="_blank" href="colorbox.css"/>
<link media="screen" rel="stylesheet" target="_blank" href="popup.css"/>
<script language="javascript" src="ajax . googleapis . com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="colorbox.js"></script>
<script>

$(document).ready(function (){

   // load the overlay
    if (document.cookie.indexOf('visited=true') == -1) {
        scriviCookie("visited","true",60*24*365);
        $.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
    }

    $(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});

});

function scriviCookie(nomeCookie,valoreCookie,durataCookie)
{
var scadenza = new Date();
var adesso = new Date();
scadenza.setTime(adesso.getTime() + (parseInt(durataCookie) * 60000));
document.cookie = nomeCookie + '=' + escape(valoreCookie) + '; expires=' + scadenza.toGMTString() + '; path=/';
}

</script>
</head>
<body>
<noscript><div id="noscript">You need JavaScript enabled to view most of the demos!</div></noscript>
<div id="container">
<div id="inner_wrap">
<p>The subscription popup will activate if no cookie is set. You can manually activate the subscription box below.</p>
<a href="#" class="open_popup">Click here to open the popup</a>

<div style='display:none'>
<div id='subscribe_popup' style='padding:10px;'>
<h2 class="box-title">Never miss an update from us</h2>
<h3 class="box-tagline">Get notified about the latest tutorials and downloads.</h3>

<div class="box-side left">
<h5>Get alerts directly into your inbox after each post and stay updated.</h5>
<a class="sub" target="_blank" href="#" title="Subscribe Now!">Subscribe</a>

</div>
<div id="box-or">OR</div>

<div class="box-side right">
<div class="box-icon"><a class="rss" target="_blank" href="#"><img src="img.jpg"/></a></div>
<h4><a target="_blank" href="#">Subscribe by RSS</a></h4>
<h5>Add our RSS to your feedreader to get regular updates from us.</h5>
<a class="sub" target="_blank" href="#" title="Subscribe Now!">Subscribe</a>

</div>

</div>
</div>
</div>

</div>
<div id="footer"> <a href="#">.................</a> | <a href="#">Subscribe</a> | <a href="#">Back To Tutorial</a><br/>
<div class="google-advert" style=" margin-top:6px; height:100px">
</div>
</div>
</div>

</body>
</html>[/HTML]

Un'osservazione al precedente listato: c'è un controllo sulla presenza del cookie, come pensavo di fare nei miei primi post. Il codice non è completamente farina del mio sacco, ma ho voluto mettere la funzione per creare i cookie. Gli effetti speciali sono nelle librerie richiamate dai file JS esterni, con il metodo fadeOut() penso che li potrai supplire altrettanto bene. Spero che posterai un bel codice che tenga conto di ciò...

Ricordati di pensare sempre a mente libera [/OT]