attributo dinamico append con body o id

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Buonasera, spero di essere abbastanza chiaro da farmi capire e riuscire a risolvere questo "semplice", per molti, problema per me.

Vengo al dunque. Nel mio sito adotto la validazione tramite jquery ma ovviamente anche via php. Ad ogni campo ho un div che appare e mi avvisa se il campo è vuoto o non corrispondente a determinate condizioni poste da me.
Il codice jquery che uso è questo:
HTML:
$(document).ready(function(){

	var jVal = {

		'email' : function() {

			$('body').append('<div id="emailInfo" class="info"></div>');

			var emailInfo = $('#emailInfo');
			var ele = $('#email_rec');
			var pos = ele.offset();

			emailInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+16
			});

			var patt = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*\s+&lt;(\w[-._\w]*\[email protected]\w[-._\w]*\w\.\w{2,3})&gt;$|^(\w[-._\w]*\[email protected]\w[-._\w]*\w\.\w{2,3})$/i;

			if(!patt.test(ele.val())) {
				jVal.errors = true;
				emailInfo.removeClass('correct').addClass('error').html('&larr; Mail usata nella registrazione').show();
				ele.removeClass('normal').addClass('wrong');
			} else {
				emailInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}

		},


		'risposta' : function() {

			$('body').append('<div id="rispostaInfo" class="info"></div>');

			var rispostaInfo = $('#rispostaInfo');
			var ele = $('#risposta_rec');
			var pos = ele.offset();

			rispostaInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+16
			});

			if(ele.val().length == "") {
				jVal.errors = true;
				rispostaInfo.removeClass('correct').addClass('error').html('&larr; Ricordati la risposta!').show();
				ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});
			} else {
				rispostaInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}
		},


		'dati' : function (){
			$('body').append('<div id="datiInfo" class="info"></div>');
			var datiInfo = $('#datiInfo');
			var ele = $('#cred_pass');
			var pos = ele.offset();
			datiInfo.css({
				top: pos.top-10,
				left: pos.left+ele.width()+138
			});
			if($('input[name="dati"]:checked').length === 0) {
				jVal.errors = true;
				datiInfo.removeClass('correct').addClass('error').html('&larr; Cosa vuoi recuperare?').show();
				ele.removeClass('normal').addClass('wrong');
			} else {
				datiInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}
		},



		'sendIt' : function (){
			if(!jVal.errors) {
				$('#sendmail').change('ok');
				$('#jform').submit();
			}
		}
	};

	// ====================================================== //

	$('#send').click(function (){
		var obj = $.browser.webkit ? $('#jform') : $('html');
		obj.animate({ scrollTop: $('body').offset() }, 750, function (){
			jVal.errors = false;
			jVal.email();
			jVal.risposta();
			jVal.dati();
			jVal.sendIt();
		});
		return false;
	});
	//Qui colleghiamo il valore jVal.xxx al valore del form
	$('#email_rec').change(jVal.email);
	$('#risposta_rec').change(jVal.risposta);
	$('input[name="dati"]').change(jVal.dati);
});

Il tutto funziona bene, ma il mio problema è che se la pagina che l'utente visita viene ridimensionata, ovviamente questi div dipendendo dal body vanno fuori misura. L'ideale sarebbe che fossero "legati" ad un altro id che possa essere magari il form. Ho provato a cambiare il codice, sostituendo alla parola body semplicemente l'id del form ma senza risultato. Qualcuno saprebbe dirmi come devo fare? Sbaglio da qualche parte?

Grazie
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
CIao, io non l'avevo visto.
Puoi evitare di far creare il contenitore a javascript mettendolo direttamente nell'html a fianco del proprio input, magari usa uno span al posto del div. Setti con i css il display a none, nel codice che hai postato c'è già il metodo show() per mostrarlo, se invece devi nasconderlo puoi usare hide(). Più o meno come ho fatto io qui.
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Nel caso interessasse a qualcuno ho aggiunto uno span nel codice html sotto il tag input, gli ho dato un aspetto con i css mentre nel codice postato prima ho tolto queste righe:
HTML:
$('body').append('<div id="emailInfo" class="info"></div>');

			var pos = ele.offset();

			emailInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+16
			});

in quanto la posizione offset era legata al valore della pagina, mentre i css li ho impostati nel file dedicato.

Vorrei ringraziare criric che ancora una volta mi ha fatto "svoltare la giornata".
 
Discussioni simili
Autore Titolo Forum Risposte Data
P attributo target dinamico in JS Javascript 0
A attributo "min" per input gestione date PHP 8
S Impostare attributo "onclick" Javascript 5
Daniele_Carrara [HTML] Problema attributo min HTML e CSS 0
Eugene Lunghezza attributo alt per le immagini SEO e Posizionamento 2
D Come salvare scelta della select "dinamica" ajax-php? Come dato php o attributo value tag option? Ajax 5
B [Javascript] Richiamare un attributo DATA Javascript 0
A metodo css("attributo", "valore") con ajax jQuery 1
I attributo con IF aiuto PHP 3
M Attributo "order" shortcode wordpresa WordPress 0
C E' possibile assegnare all' attributo name di un form html il nome di una variabile php? PHP 6
Devil-94 Recuperare il valore di un attributo del div tramite ajax. Ajax 3
otto9due Funzione cambia attributo input value non funziona.. Un aiutino :D Javascript 14
P trasformazione di una tabella ->i valori di un attributo diventano gli attributi della nuova tabella MySQL 1
M Attributo placeholder con immagine HTML e CSS 2
V Attributo align nel tag colgroup HTML e CSS 2
O Modificare attributo float di un immagine tramite checkbox o select Javascript 3
F rimuovere un attributo jQuery 1
Monital attributo iframe per porzione di pagina HTML e CSS 0
L inviare a database sia valore di value che valore di altro attributo PHP 5
voldemort Verificare se un attributo esiste con jQuery jQuery 4
max_400 fopen - l'attributo 'r+' si comporta uguale a 'w+' perchè? PHP 4
borgo italia option ed attributo onmouseout/over HTML e CSS 0
J Attributo Location non funzionante su windows.open Javascript 1
WpStyle validare attributo "value" HTML e CSS 7
V Attributo name che non viene validato Javascript 0
F Lettura "input number" dinamico PHP 4
F menù select dinamico da db in php PHP 3
elpirata Update dinamico informazioni scritte in una pagina php jQuery 11
M Grafico dinamico mysql chartjs Ajax 5
felino [Wordpress] Title dinamico per pagina WordPress 0
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1
L Exchange Server su DNS dinamico Server Dedicati e VPS 0
Domenico_Falco1 Rendere dinamico un sito web con chiamate ajax e php e variabili json PHP 12
G Modifica da sito statico HTML a dinamico in Wordpress SEO e Posizionamento 1
M [PHP] costruzione sito dinamico PHP 1
ANDREA20 [PHP] sito dinamico PHP 1
R Come creare report dinamico/variabile in Access Presentati al Forum 1
K [PHP + MYSQL ] Inserimento dati in database da form dinamico PHP 13
L [PHP] Drupal convertire sito dinamico. CMS (Content Management System) 1
S [PHP] [HTML] Come creare un grafico dinamico PHP 4
Andrea_Ventura [HTML] Realizzazione di un layout dinamico di immagini HTML e CSS 4
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
A Javascript Nascondere Div con id numerico dinamico Javascript 18
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
M sottodominio di 3° livello che punta a ip dinamico? Domini 1
C [Javascript] cambio dinamico riferimento elemento html Javascript 2
elpirata Creare scritte flash effetto dinamico Flash 2
C [PHP] Ciclo for dinamico PHP 14
Zea URL dinamico senza GET php PHP 24

Discussioni simili