Newsgroup: it.comp.lang.javascript
Titolo: Grandezza finestra

 si puņ sapere la nuova grandezza della finestra?
NS4.x:
	window.innerWidth
	window.innerHeight
IE:
	document.body.clientWidth
	document.body.clientHeight
-- 
C'ya,
ZER0
  :. job profile - coder.gfxer.webDesigner
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

 	document.body.clientHeight
Ehm, dimenticavo che questo e' valido anche mozilla & co.. sorry ^_^"


 Ehm, dimenticavo che questo e' valido anche mozilla & co.. sorry ^_^"
Mentre l'altro solo per ns4 o per ns in generale?
--
Massy
------------
Tutto sul mondo della patente
<< 
www.autoscuolacarnevale.it
 >>

 Mentre l'altro solo per ns4 o per ns in generale?
Solo per NS4.x, per IE, Mozilla e Netscape vale l'ultima che ti ho 
scritto.


Ehm...
per caso, non esiste un modo per sapere _in tempo reale_ la grandezza della
finestra?
Cioč se l'utente la ridimensiona...
mi serviva per un effetto liquido, un po' come nei css con larghezza in
percentuale.
Dato che vorrei mettere un'immagine di circa 680px, vorrei che nel caso la
pagina abbia larghezza >700px mi stampi quella nel caso abbia larghezza <700
me ne stampi un'altra piů piccola.
Se ridimensiono non funziona come vorrei fin quando non la ricarico...
Spero di essermi spiegato :-)
Ps grazie ancora
Massy

 Cioč se l'utente la ridimensiona...
ti sei risposto da solo :)
<body onLoad="scegliImmagine()" onResize="scegliImmagine()">
dove
scegliImmagine()
č la funzione che
[1] identifica il browser in uso
[2] calcola le dimensioni effettive della finestra
[3] sceglie l'immagine appropriata o fa altre cose a tua discrezione
Ciao!
Daniele.
-- 
per ottenere l'indirizzo vero, cancella CHIOCCIOLA e lascia solo @

 [3] sceglie l'immagine appropriata o fa altre cose a tua discrezione
Ehmm, chiedo troppo se ti chiedo qualche riga di codice, come esempio?
Ho fatto un po' di prove e non ho risolto nulla... :-)


 > Ehmm, chiedo troppo se ti chiedo qualche riga di codice, come esempio?
 > Ho fatto un po' di prove e non ho risolto nulla... :-)
NOTE:
- occhio a ricomporre le righe eventualmente interrotte
- nei commenti c'č scritto tutto
- crea tu le 4 immagini
    small.gif
    medium.gif
    large.gif
    extraLarge.gif
- il riconoscimento del browser puň essere effettuato in modo
   decisamente piů completo
- testato con Netscape 7 e Explorer 6 su WinXP pro.
enjoy!
<html>
   <head>
     <title>opero in base alle dimensioni della finestra</title>
     <script language="JavaScript" type="text/JavaScript">
     <!--
     function browserSniffer(){
     /*
       restituisce una stringa
       identificante il browser in uso
     */
       var nav;
       if(document.all){
         nav = 'IE4';
         if(document.getElementById){
           nav = 'IE5UP';
         }
       }else{
         if(document.getElementById){
         nav = 'NN6UP';
         }else{
           nav = 'NN4';
         }
       }
       return nav;
     }
     function winDim(){
     /*
       restituisce in un vettore le dimensioni
       interne della finestra corrente
     */
       var nav = browserSniffer();
       var winDimReport = new Array();
       var winWidth;
       var winHeight;
       switch(nav){
         case 'IE4':
           winWidth = document.body.clientWidth;
           winHeight = document.body.clientHeight;
         break;
         case 'IE5UP':
           winWidth = document.body.clientWidth;
           winHeight = document.body.clientHeight;
         break;
         case 'NN4':
           winWidth = window.innerWidth;
           winHeight = window.innerHeight;
         break;
         case 'NN6UP':
           winWidth = window.innerWidth;
           winHeight = window.innerHeight;
         break;
       }
       winDimReport['width'] = winWidth;
       winDimReport['height'] = winHeight;
       return winDimReport;
     }
     function reporter(displayName, imageName, dimWinLayerName, 
dimImgLayerName){
     /*
       scrive in un layer
       - browser in uso
       - dimensioni interne della finestra corrente
       - dimensioni correnti dell'immagine
       - nome dell'immagine corrente
       rappresenta graficamente
       - dimensioni interne finestra
       - dimensioni immagine
       rispetto ad una griglia organizzata secondo le piů dffuse 
risoluzioni video
       s  = 640  x 480
       m  = 800  x 600
       l  = 1024 x 768
       xl = 1600 x 1200
     */
       var disp = document.getElementById(displayName);
       disp.style.display = 'block';
       var nav = browserSniffer();
       var wd = winDim();
       var theImage = document.images[imageName];
       var imageUrl = theImage.src;
       var imageFile = 
imageUrl.substring(imageUrl.lastIndexOf('/')+1,imageUrl.length);
       disp.innerHTML =  'navigator: <b>' + nav + '</b><br><br>';
       disp.innerHTML += '<b>DATI FINESTRA</b><br>';
       disp.innerHTML += 'larghezza: <b>' + wd['width']  + '</b><br>';
       disp.innerHTML += 'altezza:   <b>' + wd['height'] + '</b><br><br>';
       disp.innerHTML += '<b>DATI IMMAGINE</b><br>';
       disp.innerHTML += 'larghezza: <b>' + theImage.width + '</b><br>';
       disp.innerHTML += 'altezza: <b>' + theImage.height + '</b><br>';
       disp.innerHTML += 'file: <b>' + imageFile + '</b>';
       var dimWinL = document.getElementById(dimWinLayerName);
       dimWinL.style.width = Math.round(wd['width']/10);
       dimWinL.style.height = Math.round(wd['height']/10);
       var dimImgL = document.getElementById(dimImgLayerName);
       dimImgL.style.width = Math.round(theImage.width/10);
       dimImgL.style.height = Math.round(theImage.height/10);
     }
     function imageHandler(imageName){
     /*
       - fissa tre classi di dimensione per la finestra del browser
       - legge le dimensioni interne della finestra corrente
       - legge le dimensioni originali dell'immagine
       - calcola il rapporto tra altezza e larghezza dell'immagine
       arrotondato al centesimo
       - in base alle dimensioni interne della finestra corrente:
       - imposta le dimensioni dell'immagine in modo tale che assuma
       le massime dimensioni possibili rimanendo totalmente
       visibile
       - centra l'immagine nella pagina
       - sceglie l'immagine da mostrare in base alle
       dimensioni assunte dalla stessa
       - imposta alt, title dell'immagine e status della finestra
       corrente
     */
       var smallSetup = new Array();
       smallSetup['maxBrowserWidth'] = 640;
       smallSetup['maxBrowserHeight'] = 480;
       smallSetup['imageUrl'] = 'small.gif';
       var mediumSetup = new Array();
       mediumSetup['maxBrowserWidth'] = 800;
       mediumSetup['maxBrowserHeight'] = 600;
       mediumSetup['imageUrl'] = 'medium.gif';
       var largeSetup = new Array();
       largeSetup['maxBrowserWidth'] = 1024;
       largeSetup['maxBrowserHeight'] = 768;
       largeSetup['imageUrl'] = 'large.gif';
       var extraLargeSetup = new Array();
       extraLargeSetup['imageUrl'] = 'extraLarge.gif';
       var wd = winDim();
       var ww = wd['width'];
       var wh = wd['height'];
       var theImage = document.images[imageName];
       with(theImage){
         var prop = Math.round((width/height)*100)/100;
         width = ww;
         height = Math.floor(ww/prop);
         if(height > wh){
           height = wh;
           width  = Math.floor(wh*prop);
         }
         style.position = 'absolute';
         style.top = Math.floor((wh-height)/2);
         style.left = Math.floor((ww-width)/2);
         var maxImgEdge = (width>=height)?'w':'h';
         if(maxImgEdge == 'w'){
           if(0<width && width<=smallSetup['maxBrowserWidth']){
             currentSetup = smallSetup;
           }
           if(smallSetup['maxBrowserWidth']<width && 
width<=mediumSetup['maxBrowserWidth']){
             currentSetup = mediumSetup;
           }
           if(mediumSetup['maxBrowserWidth']<width && 
width<=largeSetup['maxBrowserWidth']){
             currentSetup = largeSetup;
           }
           if(largeSetup['maxBrowserWidth']<width){
             currentSetup = extraLargeSetup;
           }
         }else{
           if(0<height && height<=smallSetup['maxBrowserHeight']){
             currentSetup = smallSetup;
           }
           if(smallSetup['maxBrowserHeight']<height && 
height<=mediumSetup['maxBrowserHeight']){
             currentSetup = mediumSetup;
           }
           if(mediumSetup['maxBrowserHeight']<height && 
height<=largeSetup['maxBrowserHeight']){
             currentSetup = largeSetup;
           }
           if(largeSetup['maxBrowserHeight']<height){
             currentSetup = extraLargeSetup;
           }
         }
         src = currentSetup['imageUrl'];
         alt = width + ', ' + height + ', ' + prop;
         title = alt;
         window.status = alt;
       }
     }
     //-->
     </script>
     <style type="text/css">
       <!--
       body{
         height:        100%;
         width:        100%;
         margin:        0px;
         padding:      0px;
         background-color:  #f2f2f2;
         color:        #888888;
         font-family:    Verdana, Arial, Helvetica, sans-serif;
         font-size:      10px;
         font-weight:    normal;
         overflow:      hidden;
       }
       table{
         empty-cells:    show;
         table-layout:    auto;
         border-spacing:    0px;
         border-collapse:  collapse;
         margin:        0px 0px 0px 0px;
         border-width:    1px 0px 0px 1px;
         border-style:    solid;
         border-color:    #000000;
       }
       th{
         margin:        0px;
         padding:      0px;
         background-color:  #e0e0e0;
         font-family:    Verdana, Arial, Helvetica, sans-serif;
         font-size:      10px;
         font-weight:    normal;
         border-width:    0px 1px 1px 0px;
         border-style:    solid;
         border-color:    #000000;
       }
       td{
         margin:        0px;
         padding:      0px;
         background-color:  #ffffff;
         font-family:    Verdana, Arial, Helvetica, sans-serif;
         font-size:      10px;
         font-weight:    bold;
         text-align:      right;
         vertical-align:    bottom;
         border-width:    0px 0px 0px 0px;
         border-style:    solid;
         border-color:    #000000;
       }
       #display{
         position:      absolute;
         z-index:      2;
         left:        0px;
         top:        0px;
         width:        150px;
         height:        120px;
         display:      none;
         margin:        0px;
         padding:      5px;
         color:        #333333;
         vertical-align:    top;
         white-space:    nowrap;
         border-width:    1px 1px 1px 1px;
         border-color:    #aaaaaa;
         border-style:    solid;
       }
       #dimBase{
         position:      absolute;
         z-index:      2;
         left:        0px;
         top:        155px;
         display:      block;
         margin:        0px;
         padding:      0px;
         color:        #333333;
         vertical-align:    top;
         white-space:    nowrap;
         border-width:    0px 0px 0px 0px;
         border-color:    #333333;
         border-style:    solid;
       }
       #dimWinL{
         position:      absolute;
         z-index:      3;
         left:        14px;
         top:        169px;
         width:        102px;
         height:        77px;
         display:      block;
         margin:        0px;
         padding:      0px;
         background-color:  #ccddff;
         color:        #333333;
         filter:        alpha(Opacity =50);
         -moz-opacity:    50%;
         vertical-align:    top;
         white-space:    nowrap;
         border-width:    0px 1px 1px 0px;
         border-color:    #000000;
         border-style:    dashed;
       }
       #dimImgL{
         position:      absolute;
         z-index:      4;
         left:        14px;
         top:        169px;
         width:        102px;
         height:        77px;
         display:      block;
         margin:        0px;
         padding:      0px;
         background-color:  #ffffff;
         color:        #333333;
         filter:        alpha(Opacity =50);
         -moz-opacity:    50%;
         vertical-align:    top;
         white-space:    nowrap;
         border-width:    0px 1px 1px 0px;
         border-color:    #000000;
         border-style:    solid;
       }
       -->
     </style>
   </head>
   <body onLoad="imageHandler('imageToHandle'); 
reporter('display','imageToHandle','dimWinL', 'dimImgL')"; 
onResize="imageHandler('imageToHandle'); 
reporter('display','imageToHandle','dimWinL', 'dimImgL')">
     <div id="display"></div>
     <div id="dimBase">
     <table style="width: 173px; height: 133px;">
       <tr>
         <th style="width: 13px; height: 13px;"></th>
         <th>s</th>
         <th>m</th>
         <th>l</th>
         <th>xl</th>
       </tr>
       <tr>
         <th>s</th>
         <td style="width: 64px; height: 48px; border-width: 0px 1px 1px 
0px"></td>
         <td style="width: 16px; border-width: 0px 1px 0px 0px"></td>
         <td style="width: 22px; border-width: 0px 1px 0px 0px"></td>
         <td style="width: 58px; border-width: 0px 1px 0px 0px"></td>
       </tr>
       <tr>
         <th>m</th>
         <td style="height: 12px; border-width: 0px 0px 1px 0px"></td>
         <td style=" border-width: 0px 1px 1px 0px"></td>
         <td style=" border-width: 0px 1px 0px 0px"></td>
         <td style=" border-width: 0px 1px 0px 0px"></td>
       </tr>
       <tr>
         <th>l</th>
         <td style="height: 17px; border-width: 0px 0px 1px 0px"></td>
         <td style=" border-width: 0px 0px 1px 0px"></td>
         <td style=" border-width: 0px 1px 1px 0px"></td>
         <td style=" border-width: 0px 1px 0px 0px"></td>
       </tr>
       <tr>
         <th>xl</th>
         <td style="height: 43px; border-width: 0px 0px 1px 0px"></td>
         <td style=" border-width: 0px 0px 1px 0px"></td>
         <td style=" border-width: 0px 0px 1px 0px"></td>
         <td style=" border-width: 0px 1px 1px 0px"></td>
       </tr>
     </table>
     </div>
     <div id="dimWinL"></div>
     <div id="dimImgL"></div>
     <img name="imageToHandle" style="border: 1px #000000 solid; 
background-color: #ffffff;" width="8" height="6">
   </body>
</html>

     extraLarge.gif
[cut]
miiiiiii... grazie...
mo mi ci metto e me lo studio :-)
Grazie davvero...
