Script Immagine Full Screen - Non funziona in IE

#1

Ciao a tutti,
ho fatto, basandomi su documentazione on-line, uno script per
leggere le dimensioni dello schermo in cui sto aprendo la mia
immagine, per poi ridimensionare quest'ultima in modo che sia
visualizzabile all'interno della pagina, nonostante le dimensioni
della stessa saino maggiori della pagina.

</script>
<SCRIPT type="text/javascript">
function findLivePageHeight() {
if (window.innerHeight != null)
return window.innerHeight;
if (document.body.clientHeight != null)
return document.body.clientHeight;
return (0);
}

function findLivePageWidth() {
if (window.innerWidth != null)
return window.innerWidth;
if (document.body.clientWidth != null)
return document.body.clientWidth;
return (0);
}
</script>
<body onload="prova()">
<form id="form1" runat="server" >
<div>
<asp:Image ID="imgProdotto" runat="server" />
</div>

<SCRIPT type="text/javascript">
function prova(){
var img = document.getElementById('<%= imgProdotto.clientid
%>');
if (img != null) {
//while (img.width < lw & img.height < lh){
var lw = findLivePageWidth();
if (img.width > lw) {
img.height = img.height * lw / img.width;
img.width = lw;
}
var lh = findLivePageHeight();
if (img.height > lh) {
img.width = img.width * lh / img.height;
img.height = lh;
}
}
else{
//window.location.reload()
}
var img = null;
}
</script>

In FireFox funziona che è una meraviglia!!! In IE mi fa solo il primo
dei 2 ridimensionamenti: ovvero vede che l'immagine è più larga, e
quindi imposta la larghezza dell'immagine alla larghezza della pagina
e imposta l'altezza in proporzione. Però poi non riesce a fare lo
stesso con l'altezza (che resta cmq maggiore di quella della pagina).
Quello che proprio non capisco è come mai in FF funziona e in IE no.
Tra l'altro in FF ho gli strumenti per debuggare il JS,mentre in IE,
se esistono, non li conosco.

Potete aiutarmi? Ho cercato scripts che facessero lo stesso ma non ho
trovato nulla che differisse sostanzialmente da quanto ho già fatto.
Qualcuno usa screen.availWidth e screen.availHeight per reperire le
dimensioni della pagina ma, provando, non ho notato differenze.

Grazie Mille

Ellis

#2

On Tue, 29 Jan 2008 08:39:31 -0800 (PST), Ellis wrote:

[cut]

Quote:

SCRIPT type="text/javascript"

già che ci sei metti il tag script minuscolo.

Quote:

function findLivePageHeight() {
if (window.innerHeight != null)
return window.innerHeight;
if (document.body.clientHeight != null)
return document.body.clientHeight;
return (0);

Non c'è bisogno delle parentesi, nel return.
Inoltre il codice non è propriamente corretto. Ti converrebbe andare
a verificare se la proprietà è undefined invece che null; o anche se
il valore è una "falsità logica" o meno.

Dovresti tener conto anche del tipo di documento: in base al doctype
devi utilizzare un oggetto piuttosto che un altro. Se sei in quirks,
va bene il "body". Altrimenti devi interrogare il "documentElement".

Quote:

var lw = findLivePageWidth();
if (img.width > lw) {
img.height = img.height * lw / img.width;
img.width = lw;
}
var lh = findLivePageHeight();
if (img.height > lh) {
img.width = img.width * lh / img.height;
img.height = lh;
}

Non mi torna molto da un punto di vista logico. Dovresti fare un bel
resize una volta sola tenendo conto fin da subito di quale delle due
dimensioni è quella più grande, per mantenere il rapporto.

Quote:

In FireFox funziona che è una meraviglia!!!
[..]
Quello che proprio non capisco è come mai in FF funziona e in IE no.

Perché fa uso di innerHeight/Width e non di clientHeight/Width.

Quote:

Tra l'altro in FF ho gli strumenti per debuggare il JS,mentre in IE,
se esistono, non li conosco.

Nella stragrande maggioranza dei casi, soprattutto in casistiche che
sono semplici come questa, un alert o due sono più che sufficienti.
Fatti un bel:

alert(lw+"x"+lh)

E verifica se i valori rispecchiano quelli effettivi del viewport: è
abbastanza facile che tu sia in standard mode e non in quirks.

Quote:

Qualcuno usa screen.availWidth e screen.availHeight per reperire le
dimensioni della pagina ma, provando, non ho notato differenze.

Non sono le dimensioni della pagina, quelle, bensì del desktop.

--
~ "L'arte non riproduce cio' che e' visibile,ma rende visibile cio'
che
non sempre lo e'" (Paul Klee)

#3

Anzitutto ti ringrazio per il tuo prezioso aiuto.

Questo è lo script funzionante (sicuramente non il più
ottimizzato ;D):

<script type="text/javascript">

function myWidthSize() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement &&
( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
//alert(myWidth);
return myWidth;
}

function myHeightSize() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
//alert(myHeight);
return myHeight;
}

</script>
<body onload="Dimensioni()">
<form id="form1" runat="server" >
<div>
<asp:Image ID="imgProdotto" runat="server" />
</div>

<script type="text/javascript">

function Dimensioni(){
var lw = myWidthSize();
var lh = myHeightSize();
var img = document.getElementById('<%= imgProdotto.clientid
%>');
if (img != "undefined") {
if (img.width > lw) {
img.height = img.height * lw / img.width;
img.width = lw;
}
if (img.height > lh) {
img.width = img.width * lh / img.height;
img.height = lh;
}
}
}

</script>

</form>
</body>
</html>

Concettualemente utilizzo un sistema di controllo sulla versione del
browser un po' più evoluto e, in base ad esso, estraggo il dato
corretto sull'area utile del browser. L'ho testato e mi sembra
funzionare bene.

Per quanto riguarda il calcolo delle dimensioni dell'immagine in base
alla finestra, mi rendo conto che sarebbe meglio controllare il
rapporto tra le dimensioni dell'immagine e della finestra utile del
browser, esattamente come dici tu. Perdonate la pigrizia, ma così
com'è, logicamente parlando, sono sicuro che le dimensioni siano
sempre quelle giuste. Inoltre, essendo questa pagina piuttosto
"leggera", non penso sia necessaria una vera e propria operazione di
ottimizzazione....

Grazie ancora per l'aiuto

Ellis

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Script Immagine Full Screen - Non funziona in IE

Javascript (Italian) Il linguaggio JavaScript (it.comp.lang.javascript)

Script Immagine Full Screen - Non funziona in IE - 01-29-2008 , 10:39 AM

Re: Script Immagine Full Screen - Non funziona in IE - 01-30-2008 , 09:19 AM

Re: Script Immagine Full Screen - Non funziona in IE - 01-31-2008 , 04:18 AM