Ændre stylesheet efter den besøgendes skærmopløsning
Adam
Jeg har et 'lille' problem:
Jeg vil meget gerne have valideret på klientsiden hvilken
skærmopløsning brugeren har: 800x600, 1024x768 eller 1280x1024, og vil
så gerne ha' at stylesheet'et bliver udskiftet alt efter resultatet af
opløsningentjekket.
Valideringen virker fint nok, men udskiftningen af stylesheet virker
ikke...
Koden jeg bruger:
Mit stylesheet-link i min index.fil: <link rel="stylesheet" type="text/
css" href="style/default.css">
Javascript:
if ((screen.width==1280) && (screen.height==1024))
{
document.getElementById("stylesheet").href = "style/
default1024x768.css";
}
else if ((screen.width==1024) && (screen.height==768))
{
document.getElementById("stylesheet").href = "style/
default1024x768.css";
}
else
((screen.width==800) && (screen.height==600))
{
document.getElementById("stylesheet").href = "style/
default800x600.css";
}
Men ingenting forandrer sig, når jeg prøver scriptet af...
Hvad mangler jeg?
Hilsen
Adam
Erik Ginnerskov
> Hejsa
>
> Jeg har et 'lille' problem:
>
> sk�rmopl�sning brugeren har: 800x600, 1024x768 eller 1280x1024,
Hvad vil du det for? Det er da meget enklere at lave siden med flydende
design - siden tilpasser sig automatisk den til r�dighed v�rende bredde p�
browservinduet.
Sk�rmens opl�sning har alligevel ikke nogen sammenh�ng med hvor stort
brugerens browservindue er, snarere tv�rt imod: Jo st�rre sk�rmopl�sning des
st�rre sandsynlighed for at browservinduet er v�sentligt mindre end full
screen.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk
Jørgen Farum Jensen
> Hejsa
>
> Jeg har et 'lille' problem:
>
> s� gerne ha' at stylesheet'et bliver udskiftet alt efter resultatet af
> opl�sningentjekket.
>
> Valideringen virker fint nok, men udskiftningen af stylesheet virker
> ikke...
>
> Koden jeg bruger:
>
> Mit stylesheet-link i min index.fil: <link rel="stylesheet" type="text/
> css" href="style/default.css">
>
> Javascript:
>
> if ((screen.width==1280) && (screen.height==1024))
> {
> document.getElementById("stylesheet").href = "style/
> default1024x768.css";
> }
> else if ((screen.width==1024) && (screen.height==768))
> {
> document.getElementById("stylesheet").href = "style/
> default1024x768.css";
> }
> else
> ((screen.width==800) && (screen.height==600))
> {
> document.getElementById("stylesheet").href = "style/
> default800x600.css";
> }
>
Det er m�ske fordi du ikke har noget element p�
websiden med id="stylesheet"?
I �vrigt tilslutter jeg mig helt Eriks kommentar.
Der er nyttigere ting du kan fortage dig med en
styleswitcher, se for eksempel
http://webdesign101.dk/design/styleswitch.php
--
Med venlig hilsen
J�rgen Farum Jensen
H�ndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
.
Philip Nunnegaard
>> if ((screen.width==1280) && (screen.height==1024))
> I �vrigt tilslutter jeg mig helt Eriks kommentar.
Og skulle man endelig g�re det andet, ville document.body.clientWidth
(mener jeg at det hedder) give mere mening, alts� et tjek p�
*browservinduets* bredde, og ikke *sk�rmens* ditto.
Foretr�kker dog ogs� selv variabel bredde, gerne defineret i %, evt. med
en max-width for at undg� for lange linjer.
--
Philip - der ikke k�rer med maksimeret vindue
Kim Ludvigsen
> J�rgen Farum Jensen skrev:
>
>>> if ((screen.width==1280) && (screen.height==1024))
>
>> I �vrigt tilslutter jeg mig helt Eriks kommentar.
>
> Og skulle man endelig g�re det andet, ville document.body.clientWidth
> (mener jeg at det hedder) give mere mening, alts� et tjek p�
> *browservinduets* bredde, og ikke *sk�rmens* ditto.
Ja, og kun bredden. Ikke h�jden.
--
Mvh. Kim Ludvigsen
Validerende multimedia p� hjemmesiden:
http://kimludvigsen.dk/tips-internet-websnedker-multimedia.php
Adam
> Philip Nunnegaard skrev:
>
> > Jørgen Farum Jensen skrev:
>
> >>> if ((screen.width==1280) && (screen.height==1024))
>
> >> I øvrigt tilslutter jeg mig helt Eriks kommentar.
>
> > Og skulle man endelig gøre det andet, ville document.body.clientWidth
> > (mener jeg at det hedder) give mere mening, altså et tjek på
> > *browservinduets* bredde, og ikke *skærmens* ditto.
>
> Ja, og kun bredden. Ikke højden.
>
> --
> Mvh. Kim Ludvigsen
> Validerende multimedia på hjemmesiden:http://kimludvigsen.dk/tips-internet-websnedker-multimedia.php
Hejsa alle,
Tak for jeres svar.
I har nok ret i at jeg burde tjekke browservinduets bredde i stedet
for skærmens...
Det layout jeg er ude i sat op en %-vis definering af de DIV-lagene
jeg bruger - problemet er 'bare' at der nogle grafiske elementer med
en vis størrelse der helst skulle skaleres alt efter hvilken størrelse
browservindue har... Det er vel 'nemmest' at gøre i stylesheet'et,
eller hur?
Med venlig hilsen
Adam
Erik Ginnerskov
> problemet er 'bare' at der nogle grafiske elementer med
> en vis st�rrelse der helst skulle skaleres alt efter hvilken st�rrelse
> browservindue har... Det er vel 'nemmest' at g�re i stylesheet'et,
> eller hur?
Man kan skalere grafik/billeder i browseren, men resultatet er ikke v�rd at
snakke om. Et grafikprogram er bedre til den slags.
Lasse Reichstein Nielsen
> Jeg vil meget gerne have valideret p� klientsiden hvilken
> sk�rmopl�sning brugeren har: 800x600, 1024x768 eller 1280x1024, og vil
> s� gerne ha' at stylesheet'et bliver udskiftet alt efter resultatet af
> opl�sningentjekket.
Ud over de argumenter der allerede er give mod at basere noget som helst
p� sk�rmens st�rrelse, s� skal man ogs� huske at tage h�jde for:
- Sk�rme kan have mange andre dimensioner end de tre du har der (fx
1440x1152 eller 1600x1200, jeg har haft begge), s� enhver test skal
v�re for intervaller, ikke eksakte tal. Og man b�r kun kigge p� bredden.
- Selv hvis man bruger browserens bredde, s� skal brugeren ogs� kunne
resize sin browser, og, helst, stadig bruge siden. Det taler igen for
et flydende design.
Jeg kan forst� at man har forskellige st�rrelser af billeder der
bruges ved forskellige browser-bredder.
Til det kunne man have et stort stylesheet der �ndrer billedst�rrelser
efter, fx, class p� body. I.e., en selector der ligner:
body #myDiv { background-image: url(default.png); }
body.stor #myDiv { background-image: url(stor.png); }
body.lille #myDiv { background-image: url(lille.png); }
S� kan man n�jes med at s�tte document.body.className efter st�rrelsen,
og man kan endda opdatere den nemt p� onresize.
Det er dog m�ske lidt for kompliceret i praksis :)
/L
--
Lasse Reichstein Holst Nielsen
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Philip Nunnegaard
> Man kan skalere grafik/billeder i browseren, men resultatet er ikke v�rd
> at snakke om. Et grafikprogram er bedre til den slags.
Alternativt acceptere at visse <div>'er har en fast bredde og s� lade
resten tilpasse bredde til resten af den bredde der er til r�dighed.
Men nu kender jeg ikke disse grafiske elementers st�rrelse. Hvis de er
meget brede (300-400 px) er det nok noget andet. S� tager de jo en
v�sentlig del af bredden i et 800x600-vindue.
--
Philip - http://chartbase.dk | http://www.hitsurf.dk