Wykorzystanie JS w CSS Opcje

[kapitan kloss]

Czy jest jakas mozliwosc na wykorzystanie szerokosci strony pobieranej z JS w css?

Kod

<script type="text/javascript">
    winwidth=document.all?document.body.clientwidth:window.innerWidth;
    winHeight=document.all?document.body.clientHeight:window.innerHeight;
</script>

Potrzebuje te wartosci podstawic w kodzie, poniewaz potrzebuje miec uklad 3-kolumnowy z zadana minimalna szerokoscia kolumny srodkowej i wypelniajacymi pozostala przestrzen ekranu lewa i prawa. Chodzi o to ze przy duzym zmniejszeniu szerokosci okna przegladarki, prawa kolumna ucieka mi na dol, a nie moge ich zlapac wszystkich w jeden DIV (pod divem znajduje sie obszar klikalny).

Kod

.lewa {
    background-color:red;
    width:40%;
    min-width:100px;
}
.srodek {
    background-color:blue;
    width:20%;
    min-width:100px;
}
.prawa {
    background-color:yellow;
    width:39%;
    min-width:100px;
    overflow:hidden;
}

[kamil4u]

W JS zmień szerokość zaraz po wczytaniu strony.

Kod

document.getElementById('test').style.width = 'wartość';

Nadaj id elementom i umieść kod w zdarzeniu onload.

[Shili]

@up

style.width zadziała tylko dla stylów inline.

http://www.quirksmode.org/dom/getstyles.html

@down
Faktycznie, przepraszam za niedoczytanie i za zamieszanie.
Styl inline natomiast jest to styl umieszczony w atrybucie html style (z ang. inline style sheet)

Ten post edytował Shili 4.01.2012, 21:51:29

[kamil4u]

@Shili: el.style.width zmienia w CSS wartość width, czyli to co chce zmienić autor tematu. Ty mówisz o pobieraniu stylu, a nie o ustwianiu. Przy pobieraniu musisz uwzględnić także tzn. box-model, czyli również obramowanie i padding. I co to jest styl inline?

[erix]

Potrzebuje te wartosci podstawic w kodzie, poniewaz potrzebuje miec uklad 3-kolumnowy z zadana minimalna szerokoscia kolumny srodkowej i wypelniajacymi pozostala przestrzen ekranu lewa i prawa. Chodzi o to ze przy duzym zmniejszeniu szerokosci okna przegladarki, prawa kolumna ucieka mi na dol, a nie moge ich zlapac wszystkich w jeden DIV (pod divem znajduje sie obszar klikalny).

Od tego są media queries.

[kapitan kloss]

No fajnie - media queries, ale jak chce mieć styl zawsze włączony. Robienie oddzielnych plików dla różnych szerokości jest absurdalne. Potrzebuje miec trzy kolumnowy uklad na stronie przy zalozeniu srodkowej kolumny o szerokosci np. 100px. Taka sytuacja powoduje, że ustalenie kolumn pobocznych na zasadzie 40%+40% powoduje ze prawa kolumna będzie mi znikać. Mogę zadać parametr overflow, ale tylko wtedy kiedy wszystkie kolumny sa zalaczone w jednej warstwie - a tego zrobić mi znowu nie można.

Ręce mi już odpadają od kodowania - bo efektów nie widać. Stąd pomysł ściągania (ale na bieżąco) jaka jest szerokość okna.
Rozumiem że nie da się tego zrobić.

Zrobiłem tylko z wykorzystaniem CSS - działa, może nie doskonale, ale działa.

Ten post edytował kapitan kloss 6.01.2012, 17:26:40

[erix]

No fajnie - media queries, ale jak chce mieć styl zawsze włączony. Robienie oddzielnych plików dla różnych szerokości jest absurdalne. Potrzebuje miec trzy kolumnowy uklad na stronie przy zalozeniu srodkowej kolumny o szerokosci np. 100px.

Najpierw sprawdzamy, czy mamy pojęcie, potem krytykujemy:

[CSS] pobierz, plaintext 
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
[CSS] pobierz, plaintext 

Żadnych osobnych plików.