Resize di un immagine con FireFox

**populus** · 21-08-2007, 05:43

Salve,

vi chiederete come mai sono alle 5.30 al pc? beh me lo chiedo pure io...
Il problema che ho fatto una piccolo javascript per fare un resize di una immagine solo che con firefox non funziona ( e se vogliamo dirla tutta neanche con opera)

Lo scopo e' quello una volta cliccata l'immagine, fare il resize (ingrandirla), fino ad una dimensione precisa, dopo di che fare l'operazione inversa riportandola alle dimensioni originali cambiando la posizione della stessa.

Naturalmente deve dare l'idea di un effetto grafico, percio ho usato setInterval per farlo graduato.

Il pezzo di codice che non interpreta firefox ( e neanche opera) è:

codice:

if(stop==0){
	img.style.width=wid++
	if(comp==2)
		if(le!=-400)
			img.style.marginLeft=le--
		if(wid==700)
			stop=1
	setInterval("resize()",33)
}else
	if(stop==1){
		img.style.width=wid--
	        if(top!=-200)
			img.style.top=top--
		if(wid==300){
			stop=2
		}
	setInterval("resize()",25)
	}

sotto IE funziona alla perfezione...

vi prego non riesco a capire il motivo

**pietro09** · 21-08-2007, 06:11

così mi funziona :master:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Pagina senza titolo</title>
    <script type="text/javascript" src="../js/libreria.comp.js"></script>
    <script language="javascript" type="text/javascript">
// <!CDATA[


function Button1_onclick() 
{
    resize();
}

var stop = 0;
var wid = 0;
var top = 0;
var le = 0;
var comp = 0;


function resize()
{
    if(stop == 0)
    {
	    img.style.width = wid++ + "px";
	    if(comp == 2)
		    if(le != -400)
			    img.style.marginLeft = le-- + "px";
		    if(wid == 700)
			    stop = 1;
	    setInterval("resize()",250);
    }
    else
	    if(stop == 1)
	    {
		    img.style.width = wid-- + "px";
	            if(top != -200)
			        img.style.top = top-- + "px";
		    if(wid == 300)
		    {
			    stop = 2;
		    }
	    setInterval("resize()",250);
    }
}
// ]]>
    </script>

    
</head>
<body>
    <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
    


    [img]../immagini/f1-arenas.jpg[/img]
    <script>var img = $("img1");</script>
</body>
</html>

**populus** · 21-08-2007, 15:51

ho copiato il tuo codice( che poi integra il mio) e NON funziona!!!

Mi sta venendo seriamente il dubbio che sia il mio firefox che ha qualche problema...

ma come cavolo e' possibile ?

Eseguendo il tuo codice, clicco sul bottone e non succede niente!!!

Ho messo degli alert di debug e ho notato che non supera questa riga

codice:

img.style.width = wid++ + "px";

vi prego fate qualcosa sta diventando pazzo...

**populus** · 21-08-2007, 16:12

Rettifica:

sono riuscito a far succedere qualcosa, differenziando IE da FF con

codice:

	if(document.all)
	    	setInterval("resize()",33);
	    else
		    if(document.getElementById)
	  	  	setInterval("resize()",200);

In questo modo a seconda del browser uso un interval diverso perche ho notato che con firefox se uso interval troppo bassi non riesce a gestirli bene. Fattosta che ora l'immagine si muove il problem che va a scatti, e non esce fluida come in IE. Mi viene il dubbio che con un interval così alto in realta le chiamate al resize prendano valori sballati del "wid" così da causare un fastidioso resize a scatti.

help!

**pietro09** · 21-08-2007, 16:13

Ebbene, io mi appello agli amici del forum

perchè a me funziona con IE7, Firefox2 e Opera9:
insomma, condannato sì, ma solo se colpevole

**populus** · 21-08-2007, 16:54

Rettifico di nuovo:

Pietro aveva ragione, quel codice scritto da lui funziona ( leggermente modificato ma in sostanza uguale) e sono riuscito a far funzionare anche il mio

Il problema non era quel pezzo di codice ma qualche riga sopra...avendo due immagini affiancate, avevo bisogno di visualizzarne una piu grande rispetto all'altra così da dare l'effetto zoom della scelta. La prima idea era stata di rendere quella non selezionata "invisibile" e quello creava problema di lag mostruosi al motore di firefox cosi da non far vedere il resize dell'altra.
Lasciando le immagini entrambe visibili il resize funziona bene

Ora però sorge un altra questione...
Dopo il resize faccio un redirect() ad una altra pagina

codice:

function redirect(){
        if(stop=2){
	if(comp==1){
		location.href="paginaImmagine1"
		stop=0
		
	}
	else
		if(comp==2){
			location.href="paginaImmagine2"
			stop=0
		}
        setTimeout("reset()", 100)
	}
}

e fin qua tutto bene, ma se da questa nuova pagina uso il tasto BACK del browser su firefox ( sempre lui ) si pianta tutto, o meglio la barra del caricamento rimane attiva e va tutto lentissimo, come se qualche timeout o interval rimanesse bloccato o in esecuzione.

Nella funzione reset non faccio altro ch riposizionare l'immagine cliccata nella corretta posizione, con un piccolo intervallo necessario al caricamento della nuova

Ragazzi vi prego aiutatemi...

**pietro09** · 21-08-2007, 18:29

Rettifico di nuovo:

Pietro aveva ragione, quel codice scritto da lui funziona ( leggermente modificato ma in sostanza uguale) e sono riuscito a far funzionare anche il mio

:master:

Forse faccio male a collaudare il codice in una pagina reale, perchè quel codice non è mio, ma tuo. Ho aggiunto solo "px" dove serviva, poichè, se non sbaglio, Firefox e Opera lo vogliono.
Poi mi sono aumentato il tempo di invocazione di setTimeout portandolo a 1/4 di secondo, solo per vedere qualcosa, altrimenti era troppo veloce

Spero in qualche intervento più risolutivo.

**populus** · 21-08-2007, 18:49

no no, figurati, le modifiche sono state la risoluzione del problema

Nessun problema

Cmq nessuno che mi aiuti sul fatto del blocco di FF ?

Discussione: Resize di un immagine con FireFox

Strumenti discussione

Ricerca discussione

Visualizza

Resize di un immagine con FireFox

Permessi di invio