Newsgroup: it.lavoro.professioni.webmaster
Titolo: Primi passi con jQuery: visualizzazione immagini

Sto provando a dinamicizzare un po' i miei form e sto ottenendo 
risultati insperati (ci lavoro da un pomeriggio solo).
ho questo pezzo di script:
  $('#myForm').submit(function() {
           $("#output").html('<img src="./images/loading.gif" />');
per visualizzare una gif di caricamento mentre lo script fa il suo lavoro.
l'html relativo è questo:
[...]
</form><br /><br />
<div id="output"></div>
<br /><br />
e sotto c'è altra roba.
Il problema è che quando va a caricare la gif sposta tutto il resto in 
basso e non mi piace molto, vorrei che rimanesse fisso.
Ho provato a giocare un po' con i css ma senza successo.
L'unica che mi viene in mente è caricare già la gif e metterla nascosta 
dai css, per poi renderla visibile con jQuery. Il processo mi sembra un 
po' macchinoso per la semplicità del problema...
Come posso risolvere? Grazie

 basso e non mi piace molto, vorrei che rimanesse fisso.
Dimenticavo, ovviamente lo spazio ci sarebbe per l'immagine (e comunque 
accade anche con del testo).

 Come posso risolvere? Grazie
Io ho inserito la gif nascosta (hidden) all'interno di un div che
contiene del testo.
<img src="gif/blue-loading.gif" alt="attesa" id="attesa" />
nel css caricato con la pagina rendo la gif invisibile
#attesa {display: none;}
con jquery la rendo visibile in questo modo
$('#attesa').show();
per poi "spegnerla" così:
$('#attesa').hide(1000)
il numero all'interno di hide permette un effetto di scomparsa
graduale (fading)
funziona egregiamente.
Ciao

 funziona egregiamente.
Prima di tutto grazie per la risposta, mi ha chiarito un po' di cose.
Tuttavia ancora non riesco a farla funzionare: le scritte che ho in 
basso continuano a spostare e inoltre non funziona l'effetto hide col 
fading. Spiego meglio cosa ho fatto:
nell'html:
<img src="images/ajax-loading.gif" alt="waiting" id="waiting" /><div 
id="output"></div>
nel css:
#output {
	color: red;
}
#waiting {
	display: none;
}
js:
$('#myForm').submit(function() {
	$('#waiting').show();
	//altro codice relativo all'inserimento dati (č un form)
success: function(r) {
	$('#waiting').hide(1000);
	$("#output").html(r);
Mettendo img src dentro al div output non fa per niente l'effetto 
hiding. Facendo invece come ho scritto sopra, al momento di nascondersi 
l'immagine si sposta tutta a sinistra (prima era centrata) e scompare in 
fade.
Ho provato anche a rigirare il tutto, ovvero ho messo output come 
display:none e racchiuso l'immagine nel div output, nessun miglioramento..
In entrambi i modi si continua a spostare tutto!
Inoltre, questa č la successione di eventi: invio un form, loading, form 
inviato. Quindi sono ancora nella pagina del form, se ne invio un 
secondo non compare piů il loading ma solo il refresh, come aggiro anche 
questo problema?
Grazie ancora e scusa la lunghezza :)

 fade.
Questo l'ho risolto usando fadeOut invece di hide :)
Credo comunque che terrò hide() senza millisecondi per farlo scomparire 
subito, a meno che non riesca a fare contemporaneamente un fadeOut del 
loading.gif e un fadeIn della scritta dell'output!

 In entrambi i modi si continua a spostare tutto!
Dovresti usare "visibility: hidden|visible" anziché "display".
-- 
d.

 
Ciao, ho provato subito ma rimangono sempre invisibili ora (mettendo 
hidden ovviamente).
Intendi nel CSS, vero? Scusa per queste domande stupide ma il sito con 
la documentazione in questi giorni va a singhiozzo :/

 questo problema?
Credo che ci siano due problemi separati, uno è il corretto
posizionamento dei vari tag attraverso css, l'altro è l'uso del form.
Per ciò che riguarda css bisogna vedere tutto il codice, mentre per il
form ti mostro come ho fatto io:
var opz = {
type: 'POST',
url: 'http...ecc...',
async: false,
beforeSend: ajax_inizio,
cache: false,
complete: ajax_fine,
contentType: 'application/x-www-form-urlencoded',
data: $('#'+id del form).serialize(),
dataType: 'text/html',
error: ajax_errore
}
$.ajax(opz);
function ajax_inizio(a) {$('#attesa').show();}
function ajax_fine(a,b) {$('#attesa').hide(1000)}
function ajax_errore(a,b,c) {$('#attesa').hide(1000)}
Ho semplificato il codice ma c'è l'essenziale per attivare/disattivare
il gif di attesa.
uso jquery-1.2.6.js
Attenzione questo vale per un form dove non vi sia un tag input
upload, per questo le cose sono un pò più complicate.
Se puoi leggere in inglese ti invio una buona documentazione in
proposito
oreste.parlatano.com

 
oreste.parlatano.com
Uhm...non ho trovato molto relativamente al mio problema (almeno, non 
esplicitamente!)
Grazie ancora!

 il basso).
Fai uscire il div con la gif dal flusso della pagina, per esempio con un 
float, lasciandogli, naturalmente, lo spazio per apparire, per esempio con 
un margin sull'elemento che lo segue nel codice.
Bye.

 un margin sull'elemento che lo segue nel codice.
Potresti spiegarti meglio? Come dovrei utilizzare il float? Nelle 
proprietà dice che di default è none, ma posso settare left o right; fa 
al caso mio?
Lo spostamento del footer avviene verso il basso

 il basso).
Così com'è mi fa lo stesso scherzo usando FF, però dato che si tratta
di un semplicissimo form senza altre complicate strutture, potresti
inserire il gif in un div tutto suo e posizionare in modo assoluto
quest'ultimo senza dare dimensioni, magari nel punto 0,0
http://www.w3schools.com/Css/pr_class_position.asp
Un'altra soluzione potrebbe essere quella di dare al div "container"
un'altezza fissa che tiene conto delle dimesioni del gif, così non
sposta nulla quando appare. Mi pare, tra l'altro, che il div
"container" non sia chiuso, dovresti controllare.

 "container" non sia chiuso, dovresti controllare.
Hai ragione. Ho risolto chiudendo il container prima del footer e 
dandogli min-height: 530px .
Grazie mille!



Stai usando dreamweaver o roba simile?
Si spiegano tutte le tue difficolta` sia con HTML che con jQuery.
Fatti un favore: evita il wysiwyg, scrivi il codice direttamente e usa 
solo il preview all'inizio, poi ignora anche quello e passa a vedere il 
sito direttamente con firefox.
Il codice, comunque, sara` qualcosa del genere:
<form>
 ...
</form>
<div id="loadinggif"></div>
<div id="mettiquiilnome">
 ......
</div>
css:
#loadinggif {
 width: 32px;
 height: 32px;
 float: right;
 visibility: hidden;
}
Poi, con jQuery, cambi visibility:hidden con visibility:visible
Bye.

 
Ok, più o meno come avevo fatto io! Grazie