Problema form animato

Scrivi le tue richieste di aiuto nella sezione relativa.

Richieste di aiuto generiche o riguardanti script o tutorial creati dalla community jQuery Italia.

Questo topic ha 14 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 10 anni, 5 mesi fa da albela.

Stai visualizzando 10 post - dal 1 a 10 (di 15 totali)

1 2 →

Autore
Post
4 Aprile 2013 alle 15:19 #4508
albela
Partecipante
Ciao,
volevo chiedere se qualcuno può darmi una risposta al problema che vado ad esporvi:
nel form animato di cui vado di seguito a postare html, css e js in risposta all’evento click mi si spostano sia il label che il div relativo solo se all’interno del paragrafo in questione aggiungo un tag div prima del tag label. Se l’html è uguale a quello che di seguito posto si sposta solo il label.

Form di registrazioneNome
Cognome

CSS
```
body {
font-family: arial;
font-size: 15px;
}
fieldset {
position: relative;
margin: 100px auto;
width: 300px;
height:300px;
border: solid black 2px;
}
fieldset p {
position: relative;
z-index: 10;
margin: 8px 0;
}
fieldset label {
position: absolute;
z-index: -1;
top: 0;
left: 7px;
width: 180px;
color: #ccc;
}
fieldset input {
position: relative;
width: 150px;
height: 25px;
}
fieldset label.active {
color: #888;
}
fieldset input.text {
border: 1px solid #666666;
padding: 3px 6px;
color: #333333;
background-color: transparent;
}
fieldset div {
background-color: red;
position: relative;
width: 20px;
height: 5px;
top: 0px;
}
```
JS
```
$(document).ready(function(){
$(function()
{
var $inputs = $( '#contact input' );
$inputs.click( function()
{
if( !this.label )
this.label = $( this ).prev();
if( !this.div )
this.div = $( this ).next();
if( this.labelValue )
this.labelValue = this.label.html();
this.label.animate( { left: 175 }, { queue: false, duration: 300 } );
this.div.animate( { left: 175 }, { queue: false, duration: 300 } );
});
});
});
```
Se invece , per esempio all’inteno del primo paragrafo, aggiungo un div, allora (a parte il fatto che cambia la grafica), sia il div che il label puntati si spostano; il paragrafo in pratica diventa come segue:
Nome
Vi ringrazio anticipatamente per l’eventuale risposta.
saluti,
Alberto.
4 Aprile 2013 alle 19:06 #4509
jqueryitalia
Amministratore
Ciao albela!
Hai postato il codice HTML senza inserirlo nel contenitore relativo, come hai fatto correttamente per il CSS e Javascript. In questo modo tutti i tag html sono stati eleiminati e non si riesce a vadere il codice HTML che utilizzi.
Puoi ripostarlo in modo da capire meglio il problema? 😉
5 Aprile 2013 alle 07:03 #4510
albela
Partecipante
Ciao,
posto nuovamente l’html sperando che ora vada bene.
```
<!doctype html>
<html>
<head>
<title>formAnimato</title>
<link rel="stylesheet" href="../css/index.css" type="text/css"/>
<script src="../lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../lib/jquery-ui-1.8.17.custom.min.js" type="text/javascript" ></script>
<script src="../js/index.js" type="text/javascript"></script>
</head>
<body>
<form id="contact" action="" method="post">
<fieldset>
<legend>Form di registrazione</legend>
<p >
<label for="nome" >Username</label>
<input type="text" value="" name="username" class="text" />
<div></div>
<div class="reset">Reset</div>
<p>
<label for="email">Indirizzo E-mail</label>
<input type="text" value="" name="email" class="text" />
<div></div>
<div class="reset">Reset</div>
</p>
<p>
<input type="submit" value="Invia Dati"  name="send" class="send" />
</p>
</fieldset>
</form>
</body>
</html>
```
5 Aprile 2013 alle 07:14 #4511
albela
Partecipante
Così com è il codice, si muove solo il label, come dicevo nel mio primo post.
Se invece cambio il codice del primo paragrafo nella maniera che sotto indico,
al di là del fatto che chiaramente mi si sposta un po’ tutto, la cosa strana è
che il rettangolino rosso si sposta insieme al label, cosa che io vorrei appunto
realizzare.
Posto il pezzo codice di codice modificato:
```
 <p >
     <div></div>
     <label for="nome" >Username</label>
     <input type="text" value="" name="username" class="text" />
     <div></div>
     <div class="reset">Reset</div>
     <p> 
```
Ciao e grazie per l’attenzione che mi state dedicando.
5 Aprile 2013 alle 07:26 #4512
albela
Partecipante
Scusate sono un po’ rinco, riposto il tutto in modo da fare un po’ d’ordine:
HTML
```
<body>
  <form id="contact" action="" method="post">
   
   <fieldset> 
    <legend>Form di registrazione</legend> 
    <p > 
     
     <label for="nome" >Nome</label>
     <input type="text" value="" name="nome" class="text" />
     <div></div>
    </p> 
    <p>
     
     <label for="cognome">Cognome</label> 
     <input type="text" value="" name="cognome" class="text" />
     <div></div>
    </p> 
    
   </fieldset> 
  </form> 
 </body>
```
CSS
```
body { 
 font-family: arial;
 font-size: 15px;
} 


fieldset { 
 position: relative; 
 margin: 100px auto;
 width: 300px;
 height:300px;
 border: solid black 2px;
}

fieldset p { 
 position: relative; 
 z-index: 10; 
 margin: 8px 0; 
} 

fieldset label { 
 position: absolute;
 z-index: -1; 
 top: 0; 
 left: 7px; 
 width: 180px; 
 color: #ccc; 
}

fieldset input {
    position: relative;
 width: 150px;
 height: 25px;
}

fieldset label.active { 
 color: #888; 
}

fieldset input.text { 
 border: 1px solid #666666; 
 padding: 3px 6px; 
 color: #333333; 
 background-color: transparent; 
}

fieldset div {
    
    background-color: red;
    position: relative;
    width: 20px;
    height: 5px;
    
    top: 0px;
    }
```
JS
```
$(document).ready(function(){
 $(function() 
  { 
   var $inputs = $( '#contact input' ); 
   $inputs.click( function() 
    {
     if( !this.label ) 
      this.label = $( this ).prev();
     if( !this.div )
      this.div = $( this ).next();
     if( this.labelValue )
      this.labelValue = this.label.html();
     this.label.animate( { left: 175 }, { queue: false, duration: 300 } );
     this.div.animate( { left: 175 }, { queue: false, duration: 300 } );
     }); 
   }); 
});
```
Con questo codice all’evento click si sposta verso sinistra solo il label mentre io vorrei il contemporaneo spostamento anche del corrispondente rettangolino rosso.
Stranamente se io aggiungo all’interno dei paragrafi un generico div così come mostro di seguito
```
<p > 
     <div></div>
     <label for="nome" >Nome</label>
     <input type="text" value="" name="nome" class="text" />
     <div></div>
    </p>
```
allora al di là del fatto che si mincasina un po’ tutto, però all’evento click si spostano contemporaneamente label e rettangolino.
Forse alla fine ci sono riuscito a postare correttamente questi codici… scusatemi e grazie ancora.
Alberto.
5 Aprile 2013 alle 10:36 #4513
jqueryitalia
Amministratore
Credo che tu abbia preso il codice presente in questa pagina http://www.yourinspirationweb.com//example/jquery/label_animati_nojs/ e lo abbia adattato a tuo piacimento, facendo un po di confusione.
Prova a sostituire il tuo form con questo:
```
<form id="contact" action="" method="post">
	<fieldset>
		<legend>Form di registrazione</legend>
		<p>
			<label for="username" class="active">Username</label>
			<input type="text" value="" name="username" class="text" />
			<div class="reset">Reset</div>
		</p>

		<p>
			<label for="email" class="active">Indirizzo E-mail</label>
			<input type="text" value="" name="email" class="text" />
			<div class="reset">Reset</div>
		</p>
		
		<p>
			<input type="submit" value="Invia Dati" name="send" class="send" />
		</p>
	</fieldset>
</form>
```
ed il tuo codice javascript con questo:
```
$(function()
{
	$( '#contact label' ).removeClass( 'active' ).animate( { left: 7 }, { queue: false, duration: 200 } );	
	
	var $inputs = $( '#contact input' );
	
	$inputs.click( function()
	{
	    if( !this.label )
	    	this.label = $( this ).prev();
	
	    if( this.labelValue )
	    	this.labelValue = this.label.html();
	
	    this.label.addClass( 'active' ).animate( { left: 175 }, { queue: false, duration: 300 } );
	});
	
	$inputs.blur( function(){
		
		var current = $( this ).val();
		
		if( !current || current == this.labelValue ){
			
			$( this ).val( '' );
			
			this.label.removeClass( 'active' ).animate( { left: 7 }, { queue: false, duration: 200 } );
		}
		else {
			this.label.removeClass( 'active' );
		}
	});
})
```
e vedrai che tutto funzionerà in maniera corretta 😉
5 Aprile 2013 alle 14:54 #4514
albela
Partecipante
Ciao,
in effetti come tu mi scrivi ho preso spunto dal link che tu hai evidenziato ma a partire da quello avrei il desiderio di fare delle modifiche. Il form ed il js che tu mi suggerisci so bene che funzionano correttamente anche perchè sono un semplice copia-incolla (o giù di lì) di ciò che è postato nel sito di cui sopra. Probabilmente ho espresso male ciò che intendo fare. Ci riprovo:
nel mio form ci sono in sequenza all’interno di ogni paragrafo una label, un input, ed un div;
il div è un semplice rettangolino rosso che sta appena sotto la casella di inserimento testo dell’input.
Se io vado ad eseguire il codice che ti ho postato si sposta solamente il label anche se nel js
ho scritto un metodo che dovrebbe far spostare anche il rettangolino (in pratica come potrai leggere ho cercato di catturare il div con un metodo next, ho chiamato l’oggetto this.div e nell’ultima riga di codice cerco di farlo spostare con il metodo animate). All’evento click però si sposta solamente il label mentre il rettangolino sta fermo quasi come non fossi riuscito a catturarlo. La cosa strana è che se io aggiungo semplicemente
sopra al primo e lascio invariato tutto il resto (js compreso), vedrò chiaramente visualizzato un altro rettangolino sopra alla casella di input, ma quando clicco sia il label che il rettangolino sotto la casella si spostano (come volevo, mentre il rettangolino aggiunto sta fermo). Perchè accade tutto ciò?
Per quanto riguarda il codice che mi hai postato non può chiaramente far spostare il rettangolino rosso visto che non c’è nessuna riga al riguardo.
Colgo l’occasione per ringraziarti comunque della velocità della risposta e della tua attenzione.
Ciao
5 Aprile 2013 alle 16:03 #4515
jqueryitalia
Amministratore
Chiedo scusa albela: non avevo letto correttamente il tuo obbiettivo…
Rimedio subito con questo http://jsfiddle.net/jmAd3/ che credo sia quello che volevi ottenere.
Per problemi relativi a jsFiddle ho dovuto modificare i paragrafi con una lista, ma se copi il codice HTML e lo ricambi funzionerà tutto ugualmente.
Buon lavoro!
5 Aprile 2013 alle 16:12 #4516
albela
Partecipante
wow! Fantastico. Ho già visto che probabilmente il problema è risolto.
Per il momento ti ringrazio, corro a studiarmi il codice.
Ciao,
a presto su nuove discussioni!
6 Aprile 2013 alle 10:16 #4519
albela
Partecipante
Si si tutto funziona perfettamente!
Avrei una domanda. Nel js che ho postato ed a cui tu hai giustamente fatto riferimento viene fatto un controllo sull’esistenza della “this.labelValue” ed in caso affermativo le viene assegnato il valore del label corrispondente (o meglio le viene assegnata la stringa che sta tra i <label></label> corrispondenti), ossia:
```
if (this.labelValue)
this.labelValue = this.label.html();
```
Se poi, all’evento blur, il valore della casella di input o è vuoto o coincide con il valore precedentemente assegnato, si resetta il valore ed il label (ed il rettangolino da me aggiunto) tornano alla posizione iniziale, ossia:
```
if (!current || current == this.labelValue) {
            $(this).val('');
            this.label.removeClass('active').animate({left: 7}, {queue: false,duration: 200});
            this.div.removeClass('active').animate({left: 0}, {queue: false,duration: 200});}
```
Siccome però, per come mi sembra di aver interpretato il codice, alla domanda sull’esistenza di this.labelValue non potrà mai esservi risposta affermativa a meno che non la si definisca precedentemente, mi domando a cosa serva il controllo a cui ho fatto prima riferimento e che si effettua all’evento blur; in pratica basta solo controllare che la casella di input sia vuota. Forse chi ha scritto in origine il codice non voleva che le caselle di input di username ed email assumessero valori uguali ai corrispondenti label, ma in tal caso il codice non dovrebbe essere come segue?
```
if (!this.labelValue)
this.labelValue = this.label.html();
```
Tutto questo non perchè voglia “controllare” come è stato scritto originariamente il codice,
ma perchè mi preme sapere se mi sfugge qualcosa nella logica di stesura dello stesso, cosa che invece sarebbe utile comprendere in toto.
Ciao,
Albela.
Autore
Post

Stai visualizzando 10 post - dal 1 a 10 (di 15 totali)

1 2 →

Devi essere connesso per rispondere a questo topic.

Problema form animato

PROMOZIONE SUPPORTHOST

SOSTIENI jQuery Italia

Download in evidenza

jQuery Links

SITO SEGNALATO SU

Problema form animato

Accedi

PROMOZIONE SUPPORTHOST

SOSTIENI jQuery Italia

Download in evidenza

jQuery Links

SITO SEGNALATO SU

TAG