SlidingForms / Form Fiqui Con Javascript E CSS

Schermata ed esempiolinkgo per chi non possiede il dono della pazienza:

exclamation.png L’esempio non si vede granché bene con Internet Explorer <7 poiché contiene PNG trasparenti.
Non mi frega un cazzo se lo state usando, quindi non segnalatelo nei commenti perché ve li cancello come SPAM. Che il vostro PC possa essere stuprato dai peggiori virus circolanti e i vostri dati personali regalati ad ogni serial killer del pianeta!

Sliding Forms by SevenCapitalSins

Ok, dopo le dovute presentazioni happy passiamo alla teoria!

help Quali caratteristiche dovrebbero avere i form di invio?

  • Sintetici, ma comprensibili.
  • Ben strutturati, separati in piccole sezioni.
  • Non devono spaventare l’utente.

help Cosa vuol dire “non spaventare l’utente”?

Qualche volta (specialmente nei moduli di iscrizione) i campi di input sono così tanti che mettono a disagio. E l’utente meno fedele è sempre quello che ancora non si è iscritto.

Nel mio caso il form (per un g.d.r. online) deve contenere i seguenti dati di input (non tutti obbligatori):

  • Nome
  • E-mail
  • Maggiore età
  • Nickname
  • Avatar
  • Razza
  • Forza
  • Agilità
  • Intelligenza
  • Costituzione
  • Carisma
  • MSN
  • ICQ
  • Yahoo!
  • GTalk
  • antiBot
  • …e altri che non mi vengono in mente ora

Risultato: il modulo di iscrizione finale contiene troppi input tutti insieme sparati come un pugno verso gli occhi dell’utente.

Siccome l’età media dei giocatori sarà di circa 15-16 anni potete immaginare la reazione:

«Ma uffaaaaa devo fare tutto quellooooo? Cheppallleeeeee non ho più vogliaaaaa ora chiudo e vado su youporneeee che ho gli ormoniiiii cazzooooo è ora di merendaaaa!»

help In che modo convincere i bastardi che il nostro sito è più appetibile di YouPorn e della merendina?

Hanno ragione loro, YouPorn è fantasDunque, l’essenziale è ingannarli facendogli fare le cose poco per volta e nascondendo la reale dimensione del form.

Poi ci vuole qualche orpello grafico che gli faccia dire:

«Ehiii figaaaa se clikko qui si muoveeee stupendooo!»

Quindi: dividere il tutto in slide piccole e con pochi campi di input, e far “scivolare” una slide dietro l’altra.

help Ma sei un pirla, non potevi farlo in flash che ci mettevi meno tempo?

FlashPlayer non è affatto un buon programma. È solo una scusa per avere la pappa pronta. La Adobe è una azienda pescecane. Poi sono americani. E gettano le bombe sui bambini. Kabul. Guantanamo. Abu Grahib. Panama. Cuba. Vietnam. Hiroshima. Pena di morte. Massacri nelle università. McDonald. bomba

Vabbè, la verità è che io ho Linux, quindi non posso scrivere nulla in Flash.

Ancor peggio, io ho Linux a 64 bit. Quindi non posso vedere nulla in Flash (nspluginwrapper ha smesso di funzionare e non ho voglia di risolvere).

E siccome sono io quello che programma, è un bell’ostacolo.

La Adobe deve fallire!

help Va bene, spiegami il concetto.

In poche righe:

  • metto le slide tutte affiancate su uno “slider” molto lungo;
  • metto sopra allo slider una “maschera” che visualizza solo una slide per volta.;
  • per cambiare slide sposto orizzontalmente lo slider con 2 freccette (che richiamano le funzioni javascript).

Graficamente:

Teoria dello Slider

Similitudini per chi non ha capito:

  • le slide sono come le diapositive;
  • lo slider come la pellicola della macchina fotografica;
  • il javascript come la levetta della macchina fotografica che consente di cambiare diapositiva.

help Ok, capito. Quindi come sono i file?

Innanzitutto vediamo l’HTML.

  • Servono le slide: <div class=”slide”>
  • Serve lo slider che contenga tutte le slide: <div id=”slider”>
  • Serve la maschera che contenga lo slider e ne visualizzi solo una parte: <div id=”middle”>
  • Però servono anche le freccette per spostare lo slider… quindi mettiamo dentro al “middle” altri due div, <div id=”left”> per la freccina a sx, e <div id=”right”> per la freccina a dx
  • Per poter stilizzare graficamente ho usato anche <div id=”header”>, <div id=”footer”>, <div id=”container”>. Ma non sono essenziali.
  • Infine, ovviamente, i link a CSS e Javascript.
<html>

<head>
<title>Registrazione</title>
<link rel="stylesheet" type="text/css" href="reg.css">
<script type="text/javascript" src="slider.js"></script>
</head>

<body>
<div id="container">

<div id="header"><h1>Sliding Forms</h1><p>by SevenCapitalSins</p></div>


<div id="middle">
<div id="left"><button id="Lbtn" onclick="slideL()"><img src="btnL.png"></button></div>
<div id="slider">
<div class="slide">
<h1>Dati</h1>
<form>
Nome:<br>
<input><br><br>
Cognome:<br>
<input>
</form>
</div>
<div class="slide">
<h1>Boh?</h1>
<form>
Altra roba:<br>
<input><br><br>
Ah, l'email!<br>
<input>
</form>
</div>
<div class="slide">
<h1>Inzomma</h1>
<form>
Il concetto:<br>
<input><br><br>
&egrave; chiaro:<br>
<input>
</form>
</div>
<div class="slide">
<h1>Saluti</h1>
<form>
da:<br>
<input><br><br>
<a onclick="alert('ai luv iu')">SevenCapitalSins</a>
</form>
</div>
</div>
<div id="right"><button id="Rbtn" onclick="slideR()"><img src="btnR.png"></button></div>
</div>


<div id="footer"></div>

</div> <!-- /container -->
</body>

</html>

Poi vediamo il CSS.

I parametri veramente importanti sono:

  • Slide:
    • width: 244px (deve essere larga quanto basta per un form, è importante che rimanga fissa)
    • float: left (devono disporsi affiancate)
    • height: 300px;
  • Slider:
    • larghezza = larghezza slide * numero slide;
    • position: relative (dobbiamo poterlo spostare orizzontalmente)
    • left: 100px (un offset dovuto alla presenza della freccia sinistra, che altrimenti coprirebbe la prima slide. Questo parametro CSS è quello che viene poi modificato da javascript, quindi è importantissimo!)
    • z-index: 0 (deve essere minore del z-index di “left” e “right”, che contengono le freccine quindi vanno visualizzati sopra tutto)
    • height:300px; (uguale alla slide)
  • Left:
    • width: 100px (spazio desiderato per il bottone)
    • position: absolute; top: 0px; left: 0px; (lo rimuoviamo dal flusso e lo mettiamo a sinistra)
    • height: 300px; (uguale allo slider)
  • Right:
    • width:100px;
    • position:absolute; top: 0px; right: 0px;
    • height:300px; (uguale allo slider)
  • Middle:
    • width: 2*larghezzaLeft + larghezzaSlide=444px;
    • height: 300px; (uguale allo slider)
    • overflow: hidden; (effetto “maschera”, senza antiestetica barra di scorrimento)
    • position: relative; (perché contiene “left” e “right” che sono posizionati in maniera assoluta)
  • Tutti gli altri parametri sono solo orpelli grafici, abbellimenti, trucchi…
body {
background:url(bg.png);
text-align:center;
}

div#container {
width:444px;
margin: 0 auto;
text-align:left;
font: 80% verdana,tahoma,arial,"sans serif";
color:red;
}

div#header, div#footer {
font-variant:small-caps;
color:silver;
width:100%;
height:150px;
overflow:auto;
background:url(header.png) no-repeat bottom center;
clear:both;
text-align:center;
}

div#footer{
background:url(footer.png) no-repeat top center;
}

div#header h1 {
letter-spacing:5px;
color:#c00;
}

div#middle {
width:100%;
height:300px;
overflow:hidden;
position:relative;
background:black;
}

div#left, div#right {
text-align:center;
width:100px;
height:300px;
position:absolute;
right:0px;
top:0px;
background:url(right.png) repeat-y top right;
z-index:2;
}

div#left {
left:0px;
background:url(left.png) repeat-y top left;
}

div#right {
right:0px;
}

div#slider {
width:976px;
height:300px;
position:relative;
left:100;
z-index:0;
background:transparent;
}

.slide {
width:244px;
height:300px;
float:left;
color:red;
text-align:center;
}

button {
margin-top:7em;
background:transparent;
border:none;
color:red;
}

input {
background:#222;
border:1px solid #500;
width:90%;
}

Infine il javascript, che non credo abbia bisogno di molte spiegazioni: bisogna solo impostare le variabili globali, il resto viene da sè.

// variabili globali

var nSlides=4;    //numero di slides
var passoNdef = 244;    // larghezza della singola slide
var startSty = "100px";   //spazio per la freccia a sx/dx
var startNdef = 100;   //spazio per la freccia (numero)
var passoNdef = 244;   // deve essere = alla larghezza della slide
var startN;
var passoN;
var endN;
var slider;
var dir;
var endMin = startNdef -(passoNdef*(nSlides-1));   // limite = n-esima slide
var endMax = startNdef;    // limite = prima slide

function slideL() {
buttonOff();
slider = document.getElementById("slider");
if (slider.style.left != "") {
startSty = slider.style.left;
startN = startSty.substring(0,startSty.indexOf('p')); // "300px" -> 300
}
else startN = startNdef; //prima volta
passoN = passoNdef; //deve essere riportato al valode di default
endN = (1*startN) + (1*passoN);
//document.getElementById("header").innerHTML+= "startSty: "+startSty+" startN: "+startN+" endN: "+endN+" passoN: "+passoN+"<br>";
dir="l";
if (endN&lt;=endMax) slide();
else {
buttonOn();
//document.getElementById("header").innerHTML+= " endN: "+endN+" endMin: "+endMin+" endMax: "+endMax+"<br>";
}
}

function slideR() {
buttonOff();
slider = document.getElementById("slider");
if (slider.style.left != "") {
startSty = slider.style.left;
startN = startSty.substring(0,startSty.indexOf('p')); // "300px" -> 300
}
else startN = startNdef; //prima volta
passoN = passoNdef; //deve essere riportato al valode di default
endN = (1*startN) - (1*passoN);
//document.getElementById("header").innerHTML+= "startSty: "+startSty+" startN: "+startN+" endN: "+endN+" passoN: "+passoN+"<br>";
dir="r";
if (endN>=endMin) slide();
else {
buttonOn();
//document.getElementById("header").innerHTML+= " endN: "+endN+" endMin: "+endMin+" endMax: "+endMax+"<br>";
}
}

function slide() {
if (startN == undefined || endN == undefined || passoN == undefined){
alert ("startSty: "+startSty+" startN: "+startN+" endN: "+endN+" passoN: "+passoN);
return;
}

if (startN == endN){ //fine dell'iterazione
buttonOn();
return;
}
else {
if(passoN &lt; 1) {
startN = endN;
}
else {
passoN = passoN/2;
if (dir=="l")startN = endN - passoN;
if (dir=="r")startN = endN + passoN;
}
slider.style.left = startN;
setTimeout('slide()',50);
}
}

function buttonOff () {
document.getElementById("Lbtn").disabled=true;
document.getElementById("Rbtn").disabled=true;
}
function buttonOn () {
document.getElementById("Lbtn").disabled=false;
document.getElementById("Rbtn").disabled=false;
}

That’s all folks! happy

6 thoughts on “SlidingForms / Form Fiqui Con Javascript E CSS

  1. sevencapitalsins scrive:

    Prego notare come WordPress abbia modificato i simboli in < e > nel codice Javascript nonostante l’uso di [sourcecode language="jscript"].

    Non posso editare e correggere il problema altrimenti fa la stessa sostituzione anche al codice HTML!

    E converrete con me che nel codice HTML di ce ne sono troppi per poterli cambiare a manina…

    BISOGNA SCOPRIRE UN MODO PER DISABILITARE LA FORMATTAZIONE AUTOMATICA A TESTINA DI CAZZO!

  2. Zedor scrive:

    vorrei segnalarti che ci sono problemi con il doctype che non fa più andare il js

    sto cercando la soluzione
    Intanto complimenti comunque per l’idea e l’esecuzione ;-)

  3. Zedor scrive:

    alla riga 72
    aggiungere i “px” al valore dello style left
    così:
    slider.style.left = startN+”px”;

  4. sevencapitalsins scrive:

    ciao, in effetti non ci avevo pensato: confesso che non ho mai usato realmente questa mia idea, quindi effettivamente inserire un doctype rende il browser più “severo”…

    Grazie della segnalazione, appena posso cerco di correggere. :)

  5. Zedor scrive:

    figurati!

    Invece ora sarebbe bello aggiungere un modo per capire “a che punto” della compilazione uno si trova..

    mumble…mumble

  6. sevencapitalsins scrive:

    Numeri di pagina css? :D

    Io farei anche un controllo javascript: finché non hai compilato tutti i campi della slide attuale non puoi andare avanti e la freccia dx è disabilitata (scurita o altro)

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: