Newsgroup: it.comp.lang.javascript
Titolo: variazione WIDTH pagina: spostare elemento con LEFT

Ciao
vorrei che al cambiamento della larghezza 
della finestra del browser dell'utente
avendo a quel punto meno spazio orrizontale
un controllo si sposti verso sinistra
(comprendone altri non importanti)
in modo da rimanere dentro l'area visibile del browser
e non fare comparire la scrollbar orrizontale 
(o al meno farla comparire il più "tardi" possibile)
---------
situazione reale:
su una sessa riga immaginaria ho
un controllo 'immagine', un 'div' con del testo e una piccola 'table'
(tutti sono alti 150 px, tutti sono relative, tutti hanno una loro width
fissa)
ora
se l'utente stringe la larghezza del suo browser
vorrei che la 'table' si muovesse proporzionalmente verso sinistra
andando a coprire il 'div' e poi la 'immagine'
---------
E' fattibile ? ci sono degli esempi? è necessario che posti il mio
codice html?
NB:
sono novizio di javascript e non mi rendo conto dell'entità della richiesta
 


Intendi questo?
<div id="Layer1" style="position:absolute; width:37px; height:25px; 
z-index:1; left: 50%; top: 100px;">Ciao</div>
Saluti
Leo

z-index:1; left: 50%; top: 100px;">Ciao</div>
No,
io ho bisogno di rientrare a sinistra con la 'table'
di una quantità sempre pari alla lunghezza
magiata col restringimento del browser
(fino a che il browser è largo 1024 sto bene,
se però è di meno, devo assolutamente
muovermi a sinistra della quantità pari a quel "meno" 
Nota:
Con il metodo della pecentuale rientro un pochino, 
ma ben presto non ci si riesce più,
se infatti parto (come in effetti è)
da  Left:30%  e la 'table' è larga 600px
la somma di 600px che è fissa 
+ 
il 30%  che è sempre una discreta quantità
mi fa richiedere ugualmente parecchia larghezza

 ha scritto nel messaggio 
news:4f6us39s8hiqu6fmt...@4ax.com...

Da quello che mi sembra di capire la 'table' ha una larghezza di 600, in 
questo caso potresti usare i layer cosi:
<div id="ContenitoreCentrato" style="position:absolute; width:85px; 
height:55px; z-index:1; left: 50%; top: 10px; visibility: visible;">
<div align="left">
<div id="LayePerTabella" style="position:absolute; width:200px; height:42px; 
z-index:2; left: -300px; top: 0px; visibility: visible;">
<table width="600"  border="3" cellspacing="0" cellpadding="0">
<tr>
<td width="296"><div align="center">r1-c1</div></td>
<td width="294"><div align="center">r1-c2</div></td>
</tr>
<tr>
<td><div align="center">r2-c1</div></td>
<td><div align="center">r2-c2</div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
I punti fondamentali sono:
ContenitoreCentrato come contenitore x centrare il tutto
LayePerTabella all'interno del precedente con left: -300px che ti permette 
di avere sempre centrata la tabella.
Saluti
Leo



Mmmhh...,
non riesco ad esserci ancora;
tenendo conto che ho due oggetti a sinistra
questo nuovo modo funziona per un po',
ma quando il rientro si deve accentuare non ce la fa
sotto c'è il codice della mia situaz con applicata
la tua
seconda idea
qui c'è uno zip con degli esempi visivi fatti a mano 
di come vorrei il movimento della  table
http://www.zshare.net/download/85632780c5e631/
(210 kb)
mio codice attuale (insoddisfacente):
<body>
    <div style="left: 0px; width: 188px; position: relative; top: 0px;
height: 160px; background-color: #66ccff">
        &nbsp;qui una jpg</div>
    <div style="left: 188px; width: 188px; position: relative; top: -158px;
height: 152px; background-color: #ffff66;">
        ciao a tutti quanti in Europa e nel mondo
        <br />
        <br />
        <br />
        ciaoooo<br />
        <br />
        <br />
        ciaooooooo</div>
 
 
 
    <div id="ContenitoreCentrato" style="background-color:green; position:
absolute; width: 85px; height: 216px; z-index: 1; left: 50%; top: 12px;
visibility: visible;">
 
 
 
 
            <div id="LayePerTabella" style="left: -118px; top: 4px;
background-color: red; position: absolute; width: 200px; height: 176px;
z-index: 2; visibility: visible;">
 
 
 
                <table border="3" cellpadding="0" cellspacing="0"
style="background-color: Aqua" width="610">
                    <tr>
                        <td width="296" style="height: 21px">
                            <div align="center">
                                r1-c1</div>
                        </td>
                        <td width="294" style="height: 21px">
                            <div align="center">
                                r1-c2</div>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 21px">
                            <div align="center">
                                r2-c1</div>
                        </td>
                        <td style="height: 21px">
                            <div align="center">
                                r2-c2</div>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 21px">
                            aaa</td>
                        <td style="height: 21px">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            bbb</td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            cccc</td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            dddd</td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            eeee</td>
                        <td>
                        </td>
                    </tr>
                </table>
 
 
        </div>
 
    </div>
</body>

.
Ho provato con IE, FF e Maxtho e fa allo stesso modo  quindi posso 
ragionevolmente affermare che il download non funziona, appare per un attimo 
e poi scompare.
Tornando al problema, secondo me ci sono alcuni fattori da considerare.
Con il sistema dei livelli il contenuto della pagina non viene 
ridimensionato ma solo rientrato in automatico.
Per questa ragione quando la dimensione della pagina a video è inferiore 
alla larghezza del livello una parte di questo "scompare" oltre il video
Adoperando una tabella sulla pagina (senza livelli) questa si ridimensionerà 
al ridimensionarsi della pagina.
Le immagini ed il testo determino, per il fatto di esserci, quale sarà la 
larghezza minima della tabella.
Quando la larghezza della finestra è inferiore a quelle dimensioni una parte 
della tabella "scompare" oltre il video.
Un modo per diminuire o anche evitare tutto questo è usare i CSS con una 
routine che ricalcola la posizione e le dimensioni dei vari oggetti a video 
al resize della finestra.
Saluti
Leo
 

Leo
è vero anche a me non va (era sempre andato)
qui c'è il file da un altro sito di hosting (qui va)
http://www.hostingfiles.net/files/032008/20080307031419esempizip.zip
ho capito quello che dici 
ed è quello che avevo un po' immaginato dall'inizio
allora chiedo, con javascript, che è un linguaggio client,
è possibile :
- ricavare la larghezza corrente del browser dell'utente
- sottrarre 600px a quella larghezza (se tale larghezza è maggiore di 600)
- posizionare infine il Left di un controllo a quel valore ottenuto?

 - posizionare infine il Left di un controllo a quel valore ottenuto?
Prova questo esempio (con IE):
<html>
<head>
<title>Prova Resize</title>
<style type="text/css">
#1 {background-color: yellow; width: 200px; height: 100px;
    position: absolute; left: 400px; top: 200px}
</style>
<script type="text/javascript">
function myfunc()
{
  var xsize = document.body.offsetWidth;
  mydiv = document.getElementById("1");
  if ((mydiv.offsetLeft + mydiv.offsetWidth) > xsize)
    mydiv.style.left = (xsize - mydiv.offsetWidth) + "px";
}
window.onresize = myfunc;
</script>
</head>
<body>
<div id="1">PROVA</div>
</body>
</html>
e applica la funzione al tuo caso.
Ciao.


Non capisco il senso, quale valore? Rispetto a quale oggetto?
Come vuoi ottenere l'effetto? Con i livelli o con i CSS?
Saluti
Leo



Intendevo che se la table (o il div che la contiene)
è posta ad esempio a Left 400px
ed essendo larga 600,
in un browser da 1024 ci sta dentro
se il browser diventa 800
allora tale table, per continuare a stare dentro
deve rientrare un po'  verso sx
quanto rientrare?
ovviamente:  1024 - 800 = 224
quindi la nuova posizione Left della table 
deve essere 400 - 224 ,
cioè 176 px.
Come ottenerlo non so.
Il modo più pratico possibile.
Ricorrere a javascript è un requisito per l'utente,
e se si può evitare è meglio, 
ma mi sa che è l'unico modo...

>Prova questo esempio (con IE):
perchè specifichi con IE?
Allora, provato:
incominciamo ad esserci!!
alla funzione di spostamento a sinistra
ho aggiunto il caso opposto, di ritorno a destra,
qualora  ci si allargasse con il browser
(l'ho messo nel blocco di codice sotto all'altro);
ora il   div3giallo  si muove perfettamente
poi ho voluto esagerare,
siccome io ho tre oggetti,
(immagine1 ,  div2marrone  e il noto  div3giallo)
volevo trattare un pochino anche
immag1  e  div2marrone
volevo che se il browser (ok, document.body.offsetWidth)
era sotto 1000px di larghezza,
immag1  doveva diventare invisibile (che tanto è solo estetico)
e
div2marrone  doveva prendere il suo posto, a Left=5
ma che se il browser era sopra ai 1000 di larghezza
e quindi tornava lo spazio per tutti,
immag1  tornava visibile
e
div2marrone   tornava  a  left=164 
ovviamente fallendo miseramente 
Qui c'è il mio codice:
<html>
<head>
    <title>Prova Resize</title>
 
 
    <style type="text/css">
</style>
    <script type="text/javascript">
function myfunc()
{
  var xsize = document.body.offsetWidth;
   mydiv1 = document.getElementById("1");
   mydiv2 = document.getElementById("2");
   mydiv3 = document.getElementById("3");
 
  if ((mydiv3.offsetLeft + mydiv3.offsetWidth) > xsize)
    mydiv3.style.left = (xsize - mydiv3.offsetWidth) + "px";
  if ((mydiv2.offsetLeft + mydiv2.offsetWidth + mydiv3.offsetWidth) >
xsize)
    mydiv2.style.left = 164 + "px";
  if document.body.offsetWidth > 999)
    mydiv1.style.visibility = "visible";
 
  if ((mydiv3.offsetLeft + mydiv3.offsetWidth) < xsize)
    mydiv3.style.left = (xsize - mydiv3.offsetWidth) + "px";
  if ((mydiv2.offsetLeft + mydiv2.offsetWidth + mydiv3.offsetWidth) <
xsize)
    mydiv2.style.left = 5 + "px";
  if document.body.offsetWidth < 1000)
    mydiv1.style.visibility = "hidden";
 
}
window.onresize = myfunc;
    </script>
</head>
<body>
    <img id="1" alt="WWWW" src="" style="position: relative; height: 172px;
background-color: #ffccff; left: 5px; top: -2px;" width="188" />
 
 
    <div id="2" style="left: 188px; width: 188px; position: relative; top:
-174px; height: 164px; background-color: #ffcc66">
        CIaoooooo a tutttttiiii</div>
 
 
    <div id="3" style="background-color: yellow; width: 610px; height:
200px; position: absolute; left: 384px; top: 12px">
        PROVA</div>
 
 
 
</body>

 (o al meno farla comparire il più "tardi" possibile)
E se, banalmente, tramite CSS ti posizionassi la table in questione
sulla parte destra della finestra? In questo modo coprirebbe sempre
i controlli sulla sinistra meno importanti. Qualcosa come:
<style type="text/css">
	body{
		padding		: 0;
		margin		: 0;
	}
	p{
		width		: 300px;		
		border		: 1px solid red;
		margin		: 0;
	}
	#my-table{
		position	: absolute;
		right		: 0;
		width		: 300px;
		top			: 0;
		background	: silver;
	}
</style>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
tincidunt. Maecenas in ligula sed dolor facilisis semper. In in neque
eu magna malesuada faucibus. Fusce velit velit, pellentesque id,
tempus at, nonummy quis, enim. Nunc non magna. Nunc porttitor cursus
ipsum. Sed sed enim. Aliquam quam dui, dapibus sed, varius eget,
euismod et, massa. Donec feugiat. Nulla pulvinar, justo ac varius
sollicitudin, nulla neque lacinia odio, at tincidunt orci quam eget
erat. Donec eget urna eget eros aliquam nonummy.
</p>
<table border="1" id="my-table">
	<tbody>
		<tr>
			<td>Just some value</td>
			<td>123</td>
		</tr>
		<tr>
			<td>Just some value</td>
			<td>123</td>
		</tr>
		<tr>
			<td>Just some value</td>
			<td>123</td>
		</tr>
		<tr>
			<td>Just some value</td>
			<td>123</td>
		</tr>
	</tbody>
</table>
</body>
Il problema di questo genere di approcci, è la scrollbar: Quando si
arriva a una risuluzione minore di quella dell'elemento in oggetto.
Ma del resto se si tratta di una sorta di applicazione (mi pare che
tu abbia parlato di "controlli") qualche "requisito di sistema" può
anche averlo, per essere considerata "usabile".
Inoltre, puoi sempre adottare un CSS diverso in base al dispositivo
(se ad esempio l'applicazione dovesse essere fruibile da cellulare,
adotterai un approccio diverso).
-- 
~ Se cerchi una mano disposta ad aiutarti,
la trovi alla fine del tuo braccio.



sì, infatti questa va bene
ci sono però due "probemi":
---------------
il primo è che 
la proprietà   		margin		: 30;
che io applico ad un Div e appunto metto al valore 30px
su ie 5.0 non fa
il rientro è molto più evidente, direi ad occhio di 90px
cioè il rientro avviene,
ma supporrei che esso parte a contare quei 30px
da un punto che non so quale è...
(tale div non è contenuto in nulla,
è sul documento e tale documento è un frame)
----------
il secondo problema è che poi
ho deciso che invece di sovrapporre questo elemento 
agli altri elementi (due, image e div),
tali due elementi, di metterli via dallo schermo con 
un colpo di  Left = -500px
tramite javascript (ed altri spostamenti sempre con javascript)
e sotto c'è il codice
e tali javascript mi si attivano quando apppunto avviene il Resize,
e non per esempio quando la pagina è lanciata,
quindi appena la pagina appare i due controlli (image e div)
sono ancora tutti sovrapposti perchè javascript non ha lavorato
c'è un evento che si può invocare per l'apertura della pagina
(perchè altrimenti cadrebbe un po' tutto il discorso...)

il 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>
 
 
<style type="text/css">
 
 
	body{
		padding		: 0;
		margin		: 0;
	}
 
#mydiv3{
		position	: absolute;
		right		: 50px;
	}
</style>
    <script type="text/javascript">
function myfunc()
{
 
 
   if (document.body.offsetWidth > 1010)
    document.getElementById("1").style.left = 4 + "px"; 
 
  if (document.body.offsetWidth < 1011)
   document.getElementById("1").style.left = -300 + "px"; 
 
  if (document.body.offsetWidth > 1010)
    document.getElementById("2").style.left = 194 + "px"; 
 
  if (document.body.offsetWidth < 1011)
   document.getElementById("2").style.left = 10 + "px"; 
 
 
 
 
 
 
 
 
 
 //  var xsize = document.body.offsetWidth; 
  //  mydiv3.style.left = (xsize - mydiv3.offsetWidth-16) + "px";
 
if (document.body.offsetWidth < 816)
   document.getElementById("2").style.left = -15 + "px"; 
if (document.body.offsetWidth > 815)
   document.getElementById("2").style.left = 10 + "px"; 
 
 
if (document.body.offsetWidth < 816)
   document.getElementById("2").style.fontSize = 'small';   
if (document.body.offsetWidth < 816)
   document.getElementById("myDiv3").style.width = 592 + "px";
if (document.body.offsetWidth >815)
   document.getElementById("2").style.fontSize = 13 + "pt";  
 if (document.body.offsetWidth > 815)
   document.getElementById("myDiv3").style.width = 610 + "px"; 
 
 
 
if (document.body.offsetWidth > 1010)
   document.getElementById("2").style.left = 194 + "px"; 
 
 
if (document.body.offsetWidth < 795)
   document.getElementById("myDiv3").style.left = 160 + "px";       
 
   if (document.body.offsetWidth >796)
   document.getElementById("myDiv3").style.left = ""; 
 
 
     if (document.body.offsetWidth > 1050)
   document.getElementById("myDiv3").style.left = 388 + "px";         
 
 
 
}
window.onresize = myfunc;
    </script>
</head>
<body bgcolor="White" style="color: crimson; font-family:
'Verdana','Arial'; text-align: left;">
 
 <!-- 
per centrare il contenuto, lo racchiudo tutto in un Div , con margin:auto ,
non usato
        <div style="margin: auto; width: 1007px; position: relative; left:
0px; top: 0px;">
  -->
 
 
    <img id="1" alt="zzzzzzzzzz" height="129" src="logo_sito.jpg"
style="font-size: small; z-index: 105; left: 4px; position: absolute; top:
12px; width: 188px; height: 129px;" width="188" />
 
 
 
    <div id="2" style="z-index: 104; left: 194px; width: 188px; position:
absolute; top: 8px; height: auto; text-align: center; font-size: 13pt;
line-height: 17pt; overflow: hidden;">
        EEEEEEEEEEEEE EEEEEEEE
        <br />
        <br />
        <div style="font-size: 10pt; z-index: 106; left: 0px; width: 184px;
position: relative; top: 4px; height: 60px; text-align: center;
line-height: 14pt;">
            aaaaaaaa<br />
            bbbbbbbbbbbbbbbbb<br />
            ccccccccccccccccc</div>
    </div>
 
 
 
 
    <div id="mydiv3" style="font-size: small; width: 610px;  position:
absolute; top: 0px; height: 1px; z-index: 200; background-color: #ffffff;">
 
        <div style="left: 32px; width: 568px; position: relative; top: 3px;
height: auto; text-align: right; font-size: 8pt; overflow: hidden;">
            Risol. cons. 1024 x 768
        </div>
        <!-- 
per l'ombra dx
-->
        <div style="width: 615px; position: relative; height: auto; left:
0px; top: 8px; background-image: url(ombra_destra.JPG);
background-position-x: right; background-repeat: repeat-y;">
 
 
            <table id="myTable" style="font-size: 8pt; z-index: 102; left:
0px; width: 610px; position: relative; top: -2px; text-align: center;
border-right: #c046da 1px solid; border-top: #bb37cd 1px solid;
border-left: #bb37cd 1px solid; border-bottom: #c046da 1px solid;">
 
<tbody>
	<tr>
		<td>Just some value</td>
		<td>123</td>
	</tr>
	<tr>
		<td>Just some value</td>
		<td>123</td>
	</tr>
	<tr>
		<td>Just some value</td>
		<td>123</td>
	</tr>
	<tr>
		<td>Just some value</td>
		<td>123</td>
	</tr>
</tbody>
            </table>
        </div>
        <!-- 
per l'ombra basso
-->
        <div style="overflow: hidden; width: 97.9%; position: relative;
height: 5px; left: 2px; top: 6px; padding-left: 7px; padding-right: 5px;
background-repeat: repeat-x; background-image: url(ombra_basso.JPG);">
        </div>
 
       <div style="font-size: 11pt; left: 29px; width: 580px; color:
mediumblue; position: relative; top: 2px; height: 8px; text-align: right">
            <span style="font-size: 8pt"><a href="basdeo/adfra.htm"
target="inbasso">Cerca nel sito</a></span>
            <img alt="Cerca" src="leone.gif" style="font-size: small; left:
0px; position: relative; top: 4px; width: 22px; height: 16px;" />
        </div>
 
 
 
 
    </div>
 
 
 
 
 
 
<!--   per centrare il grande Div che fa da contenitore a tutti i
controlli, non usato
 </div>
-->
</body>
</html>

 (perchè altrimenti cadrebbe un po' tutto il discorso...)
L'evento "onload". Ma è sempre bene evitare di usare JS se si può
fare in altro modo, tipo, appunto, con i CSS.
-- 
~ "Tutto quello che devi fare è chiamarmi;
sarò tutto quello di cui hai bisogno" (Peter Gabriel)

fare in altro modo, tipo, appunto, con i CSS.
ora provo con onload;
d'accordo sul limitare il ricorso a javascript
(che tra l'altro se lo disabilito da ie5 e ie6  
Protezione-Personalizza livello-Script attivo,
i miei semplici comandi postati nel post precedente
continuano a funzionare uguale  !!!?????!!!)
 
ma con i CSS si riesce a far "comparire e  scomparire"
e "spostare" un Div ed ed un Img  come nel mio caso?

 e "spostare" un Div ed ed un Img  come nel mio caso?
Con certi paletti, si.. Ma secondo me è meglio, esteticamente, una
sovrapposizione.
A meno che il div e l'img non debbano sparire in modo indipendente
dallo spostamento del layer ancorato sulla destra.
-- 
~ La realtà è un'illusione causata dall'assenza di alcool.

dallo spostamento del layer ancorato sulla destra.
soluzione che mi sono deciso di adottare :
nel frame (dove non c'è più spazio) 
che ospita i tre elementi non ridimensionabili che sai,
se la width del browser
(o meglio la sua area visibile)  è  < 1024   ( anzi  < 1007 )
-se l'utente ha javascript , si trova gli elementi riarrangiati
e niente si incasina
- se non ha javascript, non si riarrangia niente, 
le posizioni rimangono invariate, ma non possono che comparire a questo
punto le due barre di scorrimento