Conto alla rovescia groupon

[Topografo]

Ho trovato questo bel conto alla rovescia, veramente ben fatto. In stile groupon

http://www.danieletabacco.com/77/articolo/realizzare-countdown-in-stile-groupon-con-jquery.html

Ma non riesco ad installarlo a metterlo sul sito.
Ho guardato la pagina in Inglese, ho cercato esempi... ho brigato, modificato, incluso file e fatto prove...
Nulla...

Potreste provarlo e dirmi se funziona e come funziona?

[lemonsong]

Forse l'avrai già visto ma un esempio è qui: http://www.danieletabacco.com/esempi/countdown/

Ho provato a fare un esempio al volo per il 01/01/2014 qui: http://lemonsong.altervista.org/test_jq_countdown/

Non so se avrò "cannato" qualcosa... 

Come ben saprai però, con JS, tutto dipende dall'orologio del proprio PC, quindi non so fino a che punto possa essere "utile".

[Topografo]

Ho scoperto l'errore, richiamavo la variabile con nome diverso...

A questo punto si potrebbe fare un tutorial su come installare lo script.

Ma ho una domanda (per tutti), si può modificare il foglio di stile per mettere un background sotto le cifre? Qualcosa del tipo
in modo che la cifra appare come sul tabellone delle partenze dell'aereo....

[lemonsong]

Non so se ho capito bene ma ho aggiornato l'esempio online.

Refresha bene la pagina.


Non l'ho testato con tutti i browser.

[Topografo]

Perfetto, è proprio quello che dicevo.
L'ho visto in Firefox (ultima versione), Ie9, Avant Browser 2012 built 180 e funziona...

A questo punto fai un tutorial di installazione? 

[lemonsong]

Non credo di essere portato per i tutorial e francamente non credo nemmeno ce ne sia bisogno, in questo caso (comunque se ci fosse un volontario...  ).

Ho semplicemente copia/incollato e cambiato un paio di numeri (magari sbagliando pure).

Per quanto riguarda la personalizzazione grafica, ho solo modificato il file jquery.countdown.css

Il resto lo trovi tra i commenti:

<!-- User custom code START -->
e
<!-- User custom code END -->

Se usi WS9 e/o WS10 non hai bisogno di caricare la libreria jQuery.

[Topografo]

Come non ne hai bisogno? O.o
Io l'ho caricata...
E' già compresa nel programma?

http://www.texanogrill.com/coupon01.php

[lemonsong]

E' già compresa nel programma?

Sì:

Codice:

Only registered users can see contents. Please click here to Register or Login.

Prova a togliere:

Codice:

Only registered users can see contents. Please click here to Register or Login.
... dovrebbe funzionare lo stesso.


Come mai ancora "UNREGISTERED VERSION"?

[Topografo]

Ho provato a togliere e mettere

<script type="text/javascript" src="res/jquery.js?1975"></script>

finchè ho controllato il sorgente da firefox e ho visto che lo script viene richiamato di default
Unica pecca è che in anteprima viene spostato... vabbè.

E' unregister perchè il sito lo sto ancora facendo (per un amica) e il mio pagamento sarà la licenza...

[lemonsong]

Ho provato a togliere e mettere [...]

Dovevi solo togliere la seconda libreria, quella dell'esempio; a volte mi chiedo: ma sarò un cittadino italiano? (scusa ma sono pieno di dubbi in questi ultimi giorni) 

E' unregister perchè il sito lo sto ancora facendo (per un amica) e il mio pagamento sarà la licenza...

L'avevo pure letto mi sa... la vecchiaia è una brutta "bestia" 

[Topografo]

Come inserire nel sito un count down in stile groupon (ma più figo)
Tutto si basa su questo articolo http://www.danieletabacco.com/77/articolo/realizzare-countdown-in-stile-groupon-con-jquery.html che si basa su un articolo simile in inglese (http://keith-wood.name/countdown.html) scritto da uno degli sviluppatori della libreria di funzioni JQuery.

Innanzitutto dire che tale libreria è presente in WS9 (grazie Lemonsong)

Se usi WS9 e/o WS10 non hai bisogno di caricare la libreria jQuery.

Bisogna quindi scaricarsi i seguenti tre files:

http://keith-wood.name/css/jquery.countdown.css
http://keith-wood.name/js/jquery.countdown.js
http://keith-wood.name/js/jquery.countdown-it.js

Nelle proprietà pagina (sezione esperto) basta mettere queste righe richiamanti i Css e i Javascript

Codice:

Only registered users can see contents. Please click here to Register or Login.
Al posto di anno mese e giorno mettete la data finale del vostro coundown, per agosto (8° mese) scrivete 8 -1, per gennaio 1 -1 (il meno uno ci deve essere o levate uno al numero del mese)

Se avete un WS precedente alla versione 8 aggiungete

Codice:

Only registered users can see contents. Please click here to Register or Login.In coda alle altre chiamate di Javascript.
Adesso andiamo alla pagina

Tutto il codice che dovete mettere, in un oggetto widget, è:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Nella parte esperto del widget invece allegate al codice i tre files scaricati

Se volede modificare lo stile come l'esempio

Ho provato a fare un esempio al volo per il 01/01/2014 qui: http://lemonsong.altervista.org/test_jq_countdown/

Mettendo uno sfondo come questo

aprite il file .css inserendo in

 .countdown_section { 

questa linea:

}
 .countdown_section {
 display: block;
 float: left;
 font-size: 75%;
 text-align: center;
 background-image: url('timer-piece.png');
 height: 120px;
 color: blue;

e caricando dalla sezione esperto l'immagine da voi preferita (in questo caso timer-piece.png)

Per settare la scadenza del countdown come già scritto sopra si agisce nella sezione esperto della proprietà pagina.

Fine tutorial
(e così tutte le pagine di chi frequenta questo forum avranno questo countdown) 

[Topografo]

Domanda tecnica, è possibile mettere una striscia nera di pixel sopra i numeri che si ottengono?
In modo da usare come sfondo qualcosa del genere...
http://www.premiumpixels.com/freebies/flip-clock-countdown-psd/

[lemonsong]

A questo punto fai prima ad usare un altro tipo di countdown, tipo questo:

http://codecanyon.net/item/countdown-construction-page/full_screen_preview/310456 (3$)

Altri, li puoi trovare anche qui:

http://www.tripwiremagazine.com/2013/04/jquery-countdown-scripts.html

[GDR]

Ne ho messo uno in ufficio...come conto alla rovescia ho impostato quanto la finiscono di dire ca...te!! ...Sarà lunga l'attesa...??

[Topografo]

Acc, tutti molto belli... in pratica "pappa pronta"! 
Me li debbo segnare per un futuro.