Funzionamento di ResizeTo()

[4everskiff]

Perchè resizeto() non funziona a dovere? spesso riduce troppo (soprattutto in altezza) le popup a cui la applico, e poi sono costretto ad introdurre un delay al ridimensionamento altrimenti può capitare che faccia dei casini! c'è qualcuno che ne sa qualcosa di più? c'è un trucco per farla funzionare a dovere? sono stufo di vedere le mie immagini "amputate" in popup!

Grazie 1000

4everskiff

[br1]

Benvenuto sul forum

Dovrai pero' abituarti a fornire maggiori indicazioni... non sappiamo in quali casi ti si verifica; come e' fatto lo script di ridimensionamento (qualche parte puo' influire); come e' fatto lo script che apre la popup; con quali browser e sistemi operativi si manifesta il difetto; se avviene in locale e/o pubblicato su un server; se usi correttamente le Maiuscole (si scrive resizeTo() ); eccetera...
Insomma, tieni presente che noi non siamo davanti al tuo pc

ciao

[4everskiff]

Ciao,

scusa! hai proprio ragione! solo che andavo di frettissima e pensavo (anzi, speravo!) che il problema di Resize fosse un classico e che quindi ci fosse già una soluzione predefinita; sono solo 2 mesi che programmo in html e JS e quindi ho poca esperienza;

presento meglio il problema:

sto ricostruendo (amatorialmente e gratuitamente) il sito dell'Associazione Italiana Laser4000; la beta del sito è all'indirizzo:

www.laser4000.it/beta/struttura.htm

considera che è solo una bozza di prova e che devo ancora fare molte cose (tipo mettere i css e i js in file esterni, ecc..)

lo script per aprire le immagini in popup è il seguente:

chiamo la funzione Popup_pictures() con z = numero dell'immagine

function Popup_pictures(z) {
var file = "pic.htm?id=" + z;
var pos = "top=50, left=50";
window.open(file, null, pos);
}

nel file pic.htm ho messo:

var querystring = location.search;

var id = querystring.substr(4);

document.write("[img]pics/pic" + id + ".jpg[/img]");

function Resize() {
window.resizeTo(img.width, img.height);
}

window.setTimeout("Resize()", 1000);


il problema è che (con MIE6 e Windows2000) quando la popup si ridimensiona si "mangia" un pezzo di immagine (prova per esempio con la 4 immagine della prima riga, dove il problema si nota bene); inoltre se non ritardo la funzione di resize a volte non ridimensiona la popup correttamente, ridimensionandola a dimensioni piccolissime... e poi il ritardo non mi piace stilisticamente!

vorrei poter aprire la popup (cioè con window.open) dandogli direttamente le dim della foto, senza però dover specificare manualmente ogni volta le dimensioni; avevo provato anche con una funzione del tipo:

function Popup_pictures(z, w, h) {
var file = "pic.htm?id=" + z;
var l = Math.floor((screen.width-w)/2);
var t = Math.floor((screen.height-h)/2);
window.open(file, null,"width=" + w + ",height=" + h + ",top=" + t + ",left=" + l);
}

ma è uno sbattimento esagerato specificare ogni volta nella ciamata alla funzione le variabili h e w!

ho provato anche a controllare i valori di img.width e img.height nel file pic.htm, tramite un document.write inserito nello stesso file, ed ho verificato che sono corretti; ma l'istruzione resizeTo non funziona a dovere, nonostante i valori assegnati siano corretti!

come posso fare a leggere le dimensioni dell'immagine prima di caricarla?

mah!

...forse adesso ho scritto anche troppo!

Ciao e Grazie!

Sail Keeping It Fast and Flat!

[Xinod]

i problemi sono 2:
- in generale resizeTo opera su tutta la finestra eventuali barre e telaio compresi
(mentre width e height nel 3° parametro del window.open si riferiscono solo all' area visibile del documento)
per questo le immagini vengono "tagliate"

lo risolvi rilevando le dimensioni della finestra,
ridimensionando la finestra a quelle dimensioni,
rilevando nuovamente le dimensioni della finestra:
comparando i 2 valori sai quanto spazio è occupato dalle barre,
ti basterà aggiungerlo (con gli eventuali margini del documento) alle dimensioni dell' immagine

- usi una temporizzazione perchè al momento del resize l' immagine potrebbe non essere stata caricata
(img.width e img.height in questo caso non sarebbero valori affidabili) ma un secondo può non bastare,
per cui, per immagini non ancora in cache hai il problema delle finestre piccolissime

puoi risolverlo richiamando il resize onload sull' immagine o direttamente sul body

se vuoi trovi i 2 sistemi applicati qui
ciao

[4everskiff]

Grazie 1000,

nel frattempo avevo già capito che il problema erano i telai e le barre. ho seguito il tuo consiglio riguardo alla chiamata della funzione onload, modificando così il file pic.htm:

<body topmargin="0" leftmargin="0" onload="Resize();">

<script language="JavaScript">

<!--

var querystring = location.search;

var id = querystring.substr(4);

document.write("[img]pics/pic" + id + ".jpg[/img]");

function Resize() {
var w = img.width;
var h = img.height;
window.resizeTo(w,h);
}

//-->

ma non riesco a leggere le dimensioni! ho provato ad aprire il post da te indicato, ma non c'ho capito nulla! ho provato anche con gli attributi di window innerWidth e outerwidth (istruzioni prese da http://www.devguru.com/Technologies/...ef/window.html), ma niente da fare, facendo un test mi risponde undefined!

grazie per la cortesia e la disponibilità. siete fantastici!

[4everskiff]

Dato che non ne vuole sapere di interpretare ne innerWidth (o Height) ne outerwidth (o height), mentre ho scoperto che accetta screenLeft e screenTop, ho pensato di operare come segue:

se non ho tradotto male dall'inglese:

window.screenTop mi da la distanza tra la parte sinistra della pagina contenuta nella finestra e la parte sx dello schermo;

window.screenTop ritorna il valore della distanza tra la parte superiore della stessa pagina e il top dello schermo;

ora: io apro la popup con valori top=50 e left=50; quindi:

x = window.screenleft - 50 = valore del bordo del telaio della finestra

y = window.screentop - 50 = spessore della barra + bordo del telaio

di conseguenza, se iw=img.width e ih=img.height:

nww = new-window-width = iw + x + x (2 bordi)

nwh = new-window.height = ih + y + x (barra&bordo + bordo bottom)

lo script diventa così:

function Resize() {
var iw = img.width;
var ih = img.height;
var x = window.screenLeft - 50;
var y = window.screenTop - 50;
var nww = iw + x + x;
var nwh = ih + x + y;
window.resizeTo(nww,nwh);
}

che ne dici?

ciao!!

[4everskiff]

ho modificato ancora:

apro la popup con valori top=0 e left=0; quindi:

x = window.screenleft = valore del bordo del telaio della finestra

y = window.screentop = spessore della barra + bordo del telaio

di conseguenza, se iw=img.width e ih=img.height:

nww = new-window-width = iw + x + x (2 bordi)

nwh = new-window.height = ih + y + x (barra&bordo + bordo bottom)

lo script diventa così:

function Resize() {
var iw = img.width;
var ih = img.height;
var x = window.screenLeft;
var y = window.screenTop;
var nww = iw + x + x;
var nwh = ih + x + y;
var l = Math.floor((screen.width-nww)/2);
var t = Math.floor((screen.height-nwh)/2);
window.resizeTo(nww,nwh);
window.moveTo(l,t);
}
ora che ne dici?

[Xinod]

se dici che funziona buon per te
il modo corretto di procedere (secondo me, chiaramente) te l' ho riportato sopra

dubito screenLeft e screenTop siano crossbrowser, ma anche se lo fossero cosa c' entra la distanza dai bordi dello schermo con le dimensioni del documento/finestra? :master:
capisco dove vuoi arrivare ma mi sembra un po' "reinventare la ruota"

in alcuni browser (IE, opera) document.body.clientWidth sostituisce/coesiste con window.innerWidth

la discussione che ti ho segnalato prima probabilmente non è molto chiara
ma se scarichi lo zip linkato e smonti lo script che vi trovi all' interno lo dovrebbe diventare

[4everskiff]

Avevi perfettamente ragione!

purtroppo non riesco ad aprire lo zip perchè nosono a casa e su questo pc non ho la possibilità di installare software (sono in rete e non posso accedere come Administrator). lavevo fatto così perchè non mi funzionava innerwidth. ho quindi rifatto come segue:

function Resize() {
var iw = img.width;
var ih = img.height;
window.resizeTo(iw,ih);
var pw = document.body.clientWidth;
var ph = document.body.clientHeight;
var dw = iw - pw;
var dh = ih - ph;
var nww = iw + dw;
var nwh = ih + dh;
var l = Math.floor((screen.width-nww)/2);
var t = Math.floor((screen.height-nwh)/2);
window.resizeTo(nww,nwh);
window.moveTo(l,t);
}

dw = delta-width = errore in larghezza
dh = delta-height

ho fatto anche un controllo facendogli rileggere i valori di document.body.clientWidth e Height e questi coincidono perfettamente con quelli dell'immagine!

MITICO!!! :mavieni:

PS: puoi dirmi se funziona su Netscape?

www.laser4000.it/beta/struttura.htm

[Xinod]

non può funzionare con netscape (qualsiasi versione):
non ha idea di cosa sia document.body.clientWidth