Popup pubblicitario con conto alla rovescia (continuazione)
Ovviamente, io in background ho inserito una texture del mio logo, per voi sarà l'home page o la pagina che deve contenere il messaggio pubblicitario.
La pagina è sviluppata con php, javascript, Jquery, css.
Il css è l'artefice della grafica quindi, colori, pulsanti, sfumature, dimensioni ecc... Il Jquery ci serve per dar "vita" al conto alla rovescia, questo è affiancato da javascript e css.
Il javascript oltre a servire per Jquery, ci servirà per "scrivere" un cookie temporaneo che alla chiusura del browser si distrugge automaticamente.
A proposito dei cookie, argomento molto discusso al momento, ho preparato uno snippet per la gestione avviso dei cookie se volete dare un occhio:
http://forum.mrwebmaster.it/snippet/43611-barra-cookie-law.html
Il "pulsante" di chiusura del banner pubblicitario è formato da un "button" che alla sua pressione richiama la funzione Jquery:
Codice:
$(document).ready(function() {
$("#close").click(
function(){
$(".content-popUp").fadeToggle(1000);
});
});//FINE DOM
e nello stesso istante con javascript, va a scrivere il cookie:
Codice:
onclick="document.cookie='style=none;expires='";
PHP serve per la lettura del cookie memorizzato e se presente "nasconde" l'intero div contenete il banner bubblicitario.
PHP:
$style = $_COOKIE['style'];
il recupero del cookie è possibile anche in javascript ma personalmente mi trovo meglio facendo in questa maniera.
posto la pagina compilata per intero ma per semplicità ho preparato un file zip dove scaricare tuttotto...
scrica qui:
http://www.filowebservice.com/download/PopUpCount.zip
ecco tutto:
Codice:
<html>
<head>
<?php
$style = $_COOKIE['style'];
?>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/countdown.js"></script>
<script>
$(document).ready(function(){
$("#countdown").countdown({
date: "25 September 2015 00:00:00",//qui setta la data di countdown
format: "on"
},
function() {
});
});
</script>
<script>//
$(document).ready(function() {
$("#close").click(
function(){
$(".content-popUp").fadeToggle(1000);//tempo di dissolvenza
});
});
</script>
</head>
<body>
<div class="content-popUp" style="display:<?php echo $style ?>"><!--Recuoero cookie per nascondere tutto-->
<div class="alert">
<a href="#"><button type="button" id="close" onclick="document.cookie='style=none;expires='">X</button></a>
<!-- TIMER -->
<div class="timer-area">
<h1>Manca poco alla scadenza</h1>
<h3>Una promozione IMPERDIBILE!!!</h3>
<h4>La tua promozione!!!</h4>
<ul id="countdown">
<li> <span class="days">00</span>
<p class="timeRefDays">Giorni</p>
</li>
<li> <span class="hours">00</span>
<p class="timeRefHours">ore</p>
</li>
<li> <span class="minutes">00</span>
<p class="timeRefMinutes">minuti</p>
</li>
<li> <span class="seconds">00</span>
<p class="timeRefSeconds">secondi</p>
</li>
</ul>
</div>
<!-- end TIMER -->
<a href="http://www.dove-vuoi-tu.html" class="button">Vai!</a>
</div>
</div>
</body>
</html>
Se ho dimenticato qualcosa o notate degli errori fatemi sapere grazie.
