variazione WIDTH pagina: spostare elemento con LEFT

On Mon, 10 Mar 2008 11:27:51 +0100, ZER0 <zer0.shock (AT) libero (DOT) it> wrote:

On Wed, 05 Mar 2008 14:31:23 +0100, a wrote:

Premetto che, mea culpa, non ho seguito l'intero thread, ma mi sono
unicamente visto gli esempi zippati.

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)

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).

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...)

On Mon, 10 Mar 2008 23:33:58 +0100, a wrote:

[cut]

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).

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

Così non la metti a 30px, ma la metti a "30", che potrebbe essere
diversamente interpretato da differenti browser. Devi specificare
l'unità di misura, e quindi:

margin : 30px;

su ie 5.0 non fa
il rientro è molto più evidente, direi ad occhio di 90px

Il problema non è di questo approccio, ma di un baco del browser,
a prescindere dall'approccio. IE *5* è decisamente arcaico, e non
ha il box model corretto (com'è risaputo. Cerca su google per più
informazioni). Avrai quindi tantissimi altri problemi legati alla
renderizzazione su tale browser. E a maggior ragione ti consiglio
di usare semplicemente i CSS invece che JS. Perché non solo vai a
ridurre e semplificare il codice, ma puoi utilizzare un CSS su IE
5 e un CSS su i browser conformi agli standard (come ti dicevo, è
possibile adottare un CSS in base al dispositivo).

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

Beh, io rispondevo all'esigenza che hai esposto inizialmente. Non
capisco perché tu voglia, poi, farli sparire in questo modo.

c'è un evento che si può invocare per l'apertura della pagina
(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)

Così non la metti a 30px, ma la metti a "30", che potrebbe essere
diversamente interpretato da differenti browser. Devi specificare
l'unità di misura, e quindi:

margin : 30px;

sì

su ie 5.0 non fa
il rientro è molto più evidente, direi ad occhio di 90px

Avrai quindi tantissimi altri problemi legati alla
renderizzazione su tale browser. E a maggior ragione ti consiglio
di usare semplicemente i CSS invece che JS.

ma appunto dare un right: 30px non è usare i CSS?
però come detto su IE5 mi rientra di più ...

Perché non solo vai a
ridurre e semplificare il codice, ma puoi utilizzare un CSS su IE
5 e un CSS su i browser conformi agli standard (come ti dicevo, è
possibile adottare un CSS in base al dispositivo).

è possibile solo per IE5 fare che tale right abbia un
valore tutto suo, più adatto?

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

Beh, io rispondevo all'esigenza che hai esposto inizialmente. Non
capisco perché tu voglia, poi, farli sparire in questo modo.

sì giusto.
Poi per evitare le sovrapposizione (non bellissime)
ho deciso per la scomparsa
(in un primo tempo mi ero impicciato con visibility: hidden;
poi se un oggetto scompariva non potevo (o sapevo) più richiamarlo),
allora ho deciso per la fuoriuscita a -500px

c'è un evento che si può invocare per l'apertura della pagina
(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.

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?

On Tue, 11 Mar 2008 14:52:29 +0100, a wrote:

su ie 5.0 non fa
il rientro è molto più evidente, direi ad occhio di 90px

Avrai quindi tantissimi altri problemi legati alla
renderizzazione su tale browser. E a maggior ragione ti consiglio
di usare semplicemente i CSS invece che JS.

ma appunto dare un right: 30px

Stiamo parlando di margin o di right?

non è usare i CSS?

Si, ed è per questo che ti li consiglio. Te l'ho già detto e te lo
ripeto, oltre a semplificarti il codice, puoi adottare diversi CSS
in base al dispositivo senza toccare né il codice di markup né JS.

Inoltre, anche fare:

document.getElementById("2").style.left = 194 + "px";

è usare i CSS.
La differenza sta nel fatto che qui non usi solo CSS, ma anche DOM
e JS, aumentando di fatto la complessità del codice.

Altra cosa: non puoi far cominciare un ID di un tag con un numero,
è contrario alle specifiche w3c.

però come detto su IE5 mi rientra di più ...

Come ti ho già detto su IE5 avrai ben altri problemi. A livello di
JS non lo supporta nessuna libreria, il rendering ha seri problemi
(del resto se IE6 non è conforme agli standard figurati il 5) etc.
Se non devi supportarlo specificatamente, lascialo perdere. Se non
puoi farlo, allora ti tocca studiarti per bene tutte le specifiche
e le limitazioni del browser prima d'imbarcarti nello sviluppo. In
quanto, come ti ho già detto, quello che hai scritto è il problema
minore su IE5.

Perché non solo vai a
ridurre e semplificare il codice, ma puoi utilizzare un CSS su IE
5 e un CSS su i browser conformi agli standard (come ti dicevo, è
possibile adottare un CSS in base al dispositivo).

è possibile solo per IE5 fare che tale right abbia un
valore tutto suo, più adatto?

Certo, è quello che ti ho detto. Ci sono vari modi per farlo. Puoi
optare per degli hack, oppure per i commenti condizionali:

http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Se ne è parlato altre volte in questo NG.

Beh, io rispondevo all'esigenza che hai esposto inizialmente. Non
capisco perché tu voglia, poi, farli sparire in questo modo.

sì giusto.
Poi per evitare le sovrapposizione (non bellissime)

Dipende tutto da come la fai, la sovrapposizione. E' solo una mera
questione di design.
Non è neanche bello che un elemento sparisca di punto in bianco, e
non lasci niente sotto.

(in un primo tempo mi ero impicciato con visibility: hidden;
poi se un oggetto scompariva non potevo (o sapevo) più richiamarlo),

Basta utilizzare visibility: visible. Ma dovresti dare un'occhiata
alle reference, prima di imbarcarti nello sviluppo su web. Almeno,
per imparare un po' le basi.
Qua puoi trovare le principali reference:

#DOM w3c
http://www.w3.org/DOM/

#DOM Gecko
http://developer.mozilla.org/en/docs..._DOM_Reference

#DOM IE
http://msdn2.microsoft.com/en-us/library/ms533050.aspx

#Javascript
http://developer.mozilla.org/en/docs/JavaScript

#JScript (IE)
http://msdn2.microsoft.com/en-us/library/hbxc2t98.aspx

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 !!!?????!!!)

E si vede che hai disabilitato le opzioni sbagliate.

ma con i CSS si riesce a far "comparire e scomparire"
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.

On Tue, 11 Mar 2008 15:30:04 +0100, ZER0 <zer0.shock (AT) libero (DOT) it> wrote:

On Tue, 11 Mar 2008 14:52:29 +0100, a wrote:

su ie 5.0 non fa
il rientro è molto più evidente, direi ad occhio di 90px

Avrai quindi tantissimi altri problemi legati alla
renderizzazione su tale browser. E a maggior ragione ti consiglio
di usare semplicemente i CSS invece che JS.

ma appunto dare un right: 30px

Stiamo parlando di margin o di right?

right (anche se ho parlato di margin,
nel codice ho sempre messo right)

non è usare i CSS?

Si, ed è per questo che ti li consiglio. Te l'ho già detto e te lo
ripeto, oltre a semplificarti il codice, puoi adottare diversi CSS
in base al dispositivo senza toccare né il codice di markup né JS.

Inoltre, anche fare:

document.getElementById("2").style.left = 194 + "px";

è usare i CSS.
La differenza sta nel fatto che qui non usi solo CSS, ma anche DOM
e JS, aumentando di fatto la complessità del codice.

si, lo ho capito, ma se devo ricavare la larghezza del browser
in un determinato momento, per forza a javascript devo ricorrere, giusto?

(comunque per il momento,
se riesco a spostare questi due elementi di cui sto parlando,
e direi di esserci riuscito, correggendo ie5 con un Condizionale

solo ie8 mi mette ora le due sbarre orizzontali nel frame
dove sono ospitati, per 3-4 pixel e non so perchè_ forse
per l'height del frame

direi di essere a posto)

Altra cosa: non puoi far cominciare un ID di un tag con un numero,
è contrario alle specifiche w3c.

ah, è vero, vado a corregere

però come detto su IE5 mi rientra di più ...

Come ti ho già detto su IE5 avrai ben altri problemi. A livello di
JS non lo supporta nessuna libreria, il rendering ha seri problemi
(del resto se IE6 non è conforme agli standard figurati il 5) etc.
Se non devi supportarlo specificatamente, lascialo perdere. Se non
puoi farlo, allora ti tocca studiarti per bene tutte le specifiche
e le limitazioni del browser prima d'imbarcarti nello sviluppo. In
quanto, come ti ho già detto, quello che hai scritto è il problema
minore su IE5.

su ie5 ci sono stato attento ed è tutto ok
(è un sito tuttto sommato semplice);

sui palmari o cellulari non so onestamente...

Perché non solo vai a
ridurre e semplificare il codice, ma puoi utilizzare un CSS su IE
5 e un CSS su i browser conformi agli standard (come ti dicevo, è
possibile adottare un CSS in base al dispositivo).

è possibile solo per IE5 fare che tale right abbia un
valore tutto suo, più adatto?

Certo, è quello che ti ho detto. Ci sono vari modi per farlo. Puoi
optare per degli hack, oppure per i commenti condizionali:

http://msdn2.microsoft.com/en-us/library/ms537512.aspx

ho usato
<![if IE 5]>
<script type="text/javascript">
function myfunc()
{

// assicuriamo che il 3 rientri sempre a sx se la larghezza del browser
diminuisce
document.getElementById("myDiv3").style.right = -11 + "px";
}

window.onresize = myfunc;
window.onload = myfunc;
</script>
<![endif]>

Se ne è parlato altre volte in questo NG.

Beh, io rispondevo all'esigenza che hai esposto inizialmente. Non
capisco perché tu voglia, poi, farli sparire in questo modo.

sì giusto.
Poi per evitare le sovrapposizione (non bellissime)

Dipende tutto da come la fai, la sovrapposizione. E' solo una mera
questione di design.
Non è neanche bello che un elemento sparisca di punto in bianco, e
non lasci niente sotto.

a me al momento piace

(in un primo tempo mi ero impicciato con visibility: hidden;
poi se un oggetto scompariva non potevo (o sapevo) più richiamarlo),

Basta utilizzare visibility: visible. Ma dovresti dare un'occhiata
alle reference, prima di imbarcarti nello sviluppo su web. Almeno,
per imparare un po' le basi.
Qua puoi trovare le principali reference:

#DOM w3c
http://www.w3.org/DOM/

#DOM Gecko
http://developer.mozilla.org/en/docs..._DOM_Reference

#DOM IE
http://msdn2.microsoft.com/en-us/library/ms533050.aspx

#Javascript
http://developer.mozilla.org/en/docs/JavaScript

#JScript (IE)
http://msdn2.microsoft.com/en-us/library/hbxc2t98.aspx

eh lo so, ma avere il tempo...

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 !!!?????!!!)

E si vede che hai disabilitato le opzioni sbagliate.

quesa opzionie in ie5 e 6:
http://www.hostingfiles.net/files/03...0image1gif.gif
75 kb

quali altri devo mettere in gioco??

ma con i CSS si riesce a far "comparire e scomparire"
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.

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