One More Thing » Community » Forum » Pro » Web ontwikkeling » Javascript voor resolutie afhankelijk css

Javascript voor resolutie afhankelijk css

Thom

Thom op 23 januari 2005 #

Ik wil een resolutie afhankelijk css. Het leek mij met dit javascriptje wel te lukken, maar nee. Weet iemand wat ik fout doe?

 

<script language="Javascript">

if (screen.width <= 800) {
document.write("<link rel='stylesheet' type='text/css' href='size1.css'>";
}

else if (screen.width <= 1024) {
document.write("<link rel='stylesheet' type='text/css' href='size2.css'>";
}

if (screen.width > 1024) {
document.write("<link rel='stylesheet' type='text/css' href='size2.css'>";
}

</script>[/code:1:23aeedc12a]

freshface

freshface op 23 januari 2005 #

Ik denk niet dat het met document.write zal gaan.
Omdat de document.write (het gaan moet worden weergegeven) alleen door de browser kan worden weergegeven en niet direct in de html file.

Dus wat jij wil doen moet er al op  voorhand staan (de te kiezen css file) en dat gebeurt niet.
Ik denk dat php een betere oplossing biedt.

Je moet je code maar eens tussen je body-tags zetten en zien wat er gebeurt.
Ik hoop dat je snapt wat ik bedoel en ik hoop ook dat mijn redenatie juist is :)

fab

fab op 23 januari 2005 #

De techniek die je bedoelt vind je hier terug:

http://www.themaninblue.com/experiment/ResolutionLayout/

Succes.

Thom

Thom op 23 januari 2005 #

Het is een combinatie van twee javascriptjes die wel werken:

 

<script language="JavaScript">
        winTest = navigator.platform.indexOf("Win");
        if(winTest > -1) sect="Windows";
        macTest = navigator.platform.indexOf("Mac");
        if(macTest > -1) sect="Macintosh";
        if(macTest == -1 && winTest == -1) sect = "Neither Mac Nor Windows";

        if(sect=="Macintosh"){
            document.write("<link rel='stylesheet' type='text/css' href='mac.css'>");
            }
        else{
            document.write("<link rel='stylesheet' type='text/css' href='win.css'>");
            }

</script>[/code:1:4522707596]

 

<script language="Javascript">

if (screen.width <= 800) {
document.location = "frset_small.html";
}

else if (screen.width <= 1024) {
document.location = "frset_large.html";
}

if (screen.width > 1024) {
document.location = "frset_large.html";
}

</script>[/code:1:4522707596]

Thom

Thom op 23 januari 2005 #

"fab"

De techniek die je bedoelt vind je hier terug:

http://www.themaninblue.com/experiment/ResolutionLayout/

Succes.

Geen link op deze site werkt. Bij jou wel?

tennapel

tennapel op 23 januari 2005 #

waarom zou je javascript willen gebruiken? waarom niet gewoon 1 flexibele layout?

Thom

Thom op 23 januari 2005 #

"tennapel"

waarom zou je javascript willen gebruiken? waarom niet gewoon 1 flexibele layout?

Ik heb een design gemaakt, dit kan je vinden op: http://www.initiumnet.nl/lifeguard1
Nu wil ik dat op 800 schermen de linker ruimte een stukje kleiner is. Op grotere schermen wil ik dit design aanhouden.

Dat zou toch prima op te lossen zijn door een javascript?
Bij een felexibele layout zou hij gradueel opschuiven. Dat heeft twee nadelen:
1. de site is dan als het ware gecentreed, dus onrustig bij korte pagina’s zonder srollbalk.
2. bij breede schermen komt er wel erg veel ruimte aan de zijkant.

Nietzman

Nietzman op 23 januari 2005 #

Het is heel erg ‘fout’ om op zo’n manier een site op te bouwen.

Ik mag op mijn PB dan wel draaien in 1024 bij 768, en op mijn secundaire scherm op 1280 bij 1024, maar mijn browserscherm is echt nooit breder dan 800px.

Zo moeilijk is het toch niet om een layout te maken die er overal goed uitziet? :).

Thom

Thom op 23 januari 2005 #

"Nietzman"

Het is heel erg ‘fout’ om op zo’n manier een site op te bouwen.

Ik mag op mijn PB dan wel draaien in 1024 bij 768, en op mijn secundaire scherm op 1280 bij 1024, maar mijn browserscherm is echt nooit breder dan 800px.

Zo moeilijk is het toch niet om een layout te maken die er overal goed uitziet? :).

Beste Nietzman,

Ik ben nu niet bepaald gisteren begonnen met het ontwerpen van websites. Alle aspecten worden goed afgewogen, daar kun je vanuit gaan.

Kortom, mijn vraag blijft hetzelfde.

fab

fab op 23 januari 2005 #

"Thom"
"fab"

De techniek die je bedoelt vind je hier terug:

http://www.themaninblue.com/experiment/ResolutionLayout/

Succes.

Geen link op deze site werkt. Bij jou wel?

Hier is het artikel erover: http://www.themaninblue.com/writing/perspective/2004/09/21/

Ik snap de negatieve reacties t.o.v. de techniek hier niet echt… ik vind dit een echte meerwaarde, mits goed toegepast en weloverwogen ten aanzien van concept en vormgeving.

Thom

Thom op 23 januari 2005 #

Ohoe, ja. Dit is een hele luxe oplossing.
Werkt als ware realtime.

Nee ik zoek echt de eerder beschreven funsctie:
800 pixels  = size1.css
1024 pixels en groter = size2.css

Volgens mij doe ik echt iets kleins fout. Ik heb het gecombineerd van twee andere javascriptjes die prima werken.

fab

fab op 23 januari 2005 #

Als het niet realtime hoeft, dan gebruik je in plaats van:

zie voorbeeld: scripts/init.js

 

checkBrowserWidth();
window.onresize = checkBrowserWidth;

[/code:1:0b93725068]

 

window.onload = checkBrowserWidth;

[/code:1:0b93725068]

Dan is het niet meer realtime, en werkt het alsnog zoals je wil denk ik  :)

Thom

Thom op 23 januari 2005 #

Ja ok maar dan kom ik bij dit script je uit:

http://www.themaninblue.com/experiment/ResolutionLayout/scripts/resolution.js

Dat is een mega iets wat ik helemaal niet snap en kan aanpassen.

Het kan volgens mij heel simpel. Hierboven heb ik als tweede post twee scriptjes gegeven waarvan ik die van mij heb gecombineerd. Die werken prima

Ik doe iets kleins fout, maar wat.

fab

fab op 23 januari 2005 #

Ok, ik snap dat die scriptjes prima werken. De reden waarom ik echter deze versie promoot is dat document.write() niet altijd even ‘netjes’ is qua techniek. Bovendien werkt het niet bij XHTML Strict dacht ik. Anyway, ik probeer het in elk geval altijd te vermijden als het even kan.

Als je me je e-mail adres even PMed dan stuur ik je de files (het absolute minimum dat je nodig hebt).

tennapel

tennapel op 23 januari 2005 #

Wat je wilt is vrij simpel op te lossen door het witte gedeelte een max-width te geven en wat javascript te gebruiken dat alleen IE snapt; kost je heel wat minder hoofdbrekens en is future-compatible (je hoeft dus niet iets aan te passen als morgen Browser XYZ op de markt verschijnt)

http://www.svendtofte.com/code/max_width_in_ie/

De chique manier is dan om voor IE de boel te filteren middels de Tan-hack:

 

* html #linkerkant {
 javascript oplossing in je CSS
 }
[/code:1:068b8903ba]

Voordeel: slechts 1 stylsheet waarin je je hele site onderhoudt en oneindig  flexibel ongeacht de venstergrootte van de browser (die je ook niet hoeft te testen).

Thinking out of the box...

Thom

Thom 9 jaren geleden #

"tennapel"

Wat je wilt is vrij simpel op te lossen door het witte gedeelte een max-width te geven en wat javascript te gebruiken dat alleen IE snapt; kost je heel wat minder hoofdbrekens en is future-compatible (je hoeft dus niet iets aan te passen als morgen Browser XYZ op de markt verschijnt)

http://www.svendtofte.com/code/max_width_in_ie/

De chique manier is dan om voor IE de boel te filteren middels de Tan-hack:

 

* html #linkerkant {
 javascript oplossing in je CSS
 }
[/code:1:8eefb88508]

Voordeel: slechts 1 stylsheet waarin je je hele site onderhoudt en oneindig  flexibel ongeacht de venstergrootte van de browser (die je ook niet hoeft te testen).

Thinking out of the box...

He? Snap je post niet
1. Het probleem heeft niets met IE te maken.
2. Je kunt bij beide css' jes een @import doen met de styles die voor allebei hetzelfde zijn. Dus in feite ook 1 stylesheet.

BEWERKING:
Aha, snap nu wel wat het met IE te maken heeft. Fab heeft me zij voorbeeld gemaild en dat werkt zoals ik het wilde. Zal nu ook eens naar jouw link kijken.

tennapel

tennapel 9 jaren geleden #

Het voorbeeld dat fab geeft is schieten met een bus hagel op een mug; max-width is de oplossing voor je probleem (of min-width) en het probleem is dat IE max-width niet ondersteud; vandaar de ‘silly trick’ in je CSS bestand met javascript. Een idioterie die alleen Microsoft ondersteunt, maar die je wel tot je voordeel kan gebruiken.

Thom

Thom 9 jaren geleden #

"tennapel"

Het voorbeeld dat fab geeft is schieten met een bus hagel op een mug; max-width is de oplossing voor je probleem (of min-width) en het probleem is dat IE max-width niet ondersteud; vandaar de ‘silly trick’ in je CSS bestand met javascript. Een idioterie die alleen Microsoft ondersteunt, maar die je wel tot je voordeel kan gebruiken.

Natuurlijk wardeer ik alle reacties van iedereen, maar omdat niemand mijn originele vraag goed leest en met hun eigen varianten komt, wordt het steeds moeilijker om te reageren.

@ tennapel
Nadeel van jouw idee is dat het gradueel opschuift. Dat is hier niet zo’n probleem, maar ik wil voor andere sites gewoon de functie van verschillende css’sen kunnen toepassen.
Ten tweede ze je niet hoe ik jouw idee moet toepassen. Dat zeggen ze ook niet op de site. Er moet blijkbaar een javascriptje tussen, hoe ziet dat er dan uit?

@ fab
Jouw idee heeft precies de functionaliteit die ik zoek, werkt alleen niet met IE/MAC

@YOU ALL
Als er iemand is die even kan kijken naar mijn javascriptje aan het begin van deze draad, dan zou ik enorm geholpen zijn.

fab

fab 9 jaren geleden #

Ik reageer wellicht ten overvloede met deze opmerking:

Klopt je syntax wel? Het valt me nu pas op dat je document.write() statement de laatste ) mist nl.
Lijkt me stug dat je dat over het hoofd gezien hebt… maar ik blijkbaar tot nu toe wel :roll:

tennapel

tennapel 9 jaren geleden #

"Thom"

@ tennapel
Nadeel van jouw idee is dat het gradueel opschuift. Dat is hier niet zo’n probleem, maar ik wil voor andere sites gewoon de functie van verschillende css’sen kunnen toepassen.
Ten tweede ze je niet hoe ik jouw idee moet toepassen. Dat zeggen ze ook niet op de site. Er moet blijkbaar een javascriptje tussen, hoe ziet dat er dan uit?

Ik probeer al een hele tijd duidelijk te maken dat je (a) javascript niet moet willen gebruiken om een stylesheet aan een pagina te hangen [als javascript uit staat heb je geen enkele stijl] en (b) dat het overbodig is; er zijn andere manieren om het probleem dat jij nu hebt op te lossen.

In het artikel waar ik naar gelinkt heb staat precies van A tot Z beschreven hoe het werkt. Lees het nauwkeurig, speel er mee op een testpagina en dan valt het kwartje vanzelf.

fab

fab 9 jaren geleden #

"tennapel"

als javascript uit staat heb je geen enkele stijl

Dat is dus niet het geval. Als javascript uit staat wordt de normale stylesheet gebruikt.
De stylesheet voor bredere browservensters staat dan netjes als ‘alternative stylesheet’ ter beschikking van bijv. FireFox. Dat heet dus ‘unobtrusive javascript which degrades gracefully’.

In dat opzicht vind ik de css ‘expression’ (IE) oplossing veel meer als een ‘hack’ aanvoelen.
Zeker als daar ook nog eens css hacks aan te pas komen die niet forward compatible zullen zijn.

Ieder z’n ding… en zoals Thom zegt: ‘Dat is hier niet zo’n probleem, maar ik wil voor andere sites gewoon de functie van verschillende css’sen kunnen toepassen.’ Neem bijvoorbeeld sites waarbij de fontgrootte aanpasbaar is; ook dit is op deze manier elegant op te lossen. Tja, wel jammer van IE/Mac dan… maar: ook die ziet de standaard (800px) stylesheet, dus geen probleem wat mij betreft.

Ik heb het nogmaals zelf getest met document.write() maar alles wijst er op dat dit onmogelijk werkt, doordat de volgorde waarop een pagina laadt dit verhindert. M.a.w. de pagina is al klaar met laden wanneer je met javascript die <link> schrijft; de browser gaat dan niet alsnog ‘n stylesheet laden.

Thom

Thom 9 jaren geleden #

@ fab
Thanks, ik misste inderdaad de laatste ). Ik zei al dat het vast iets kleins was omdat de twee andere waarvan ik hem had gecombineerd wel werkte.
In tegenstelling to wat jij zegt werkt dit wel (ook op alle browsers) en hij laad een defautl css in. De code is dus:

 

<html>
<head>
<title>TEST</title>

<link href="size1.css" rel="stylesheet" type="text/css">

<script language="Javascript">

if (screen.width <= 800) {
document.write("<link rel='stylesheet' type='text/css' href='size1.css'>");
}

else if (screen.width <= 1024) {
document.write("<link rel='stylesheet' type='text/css' href='size2.css'>");
}

if (screen.width > 1024) {
document.write("<link rel='stylesheet' type='text/css' href='size2.css'>");
}

</script>

</head>

<body>
TEST
</body>
</html>
[/code:1:a20fd08dbe]

@ tennapel
1. Ik schreef dat ik geen gradueele (opschuivende) oplossing wilde. Dus of/of. Voor deze site maakt het niet zoveel uit, maar voor andere sites weer wel. Bij een graduele oplossing heb je namelijk minder lay-out mogelijkheden, denk maar aan een foto die over de volle breedte van een tekstblok moet komen.
2. Je commentaar op de situatie wanneer Javascript uit staat gaat niet op, zie bovenstaande code. Als ik Javascript uit zet dan laad hij 'size1.css' in. Als ik hem aan zet dan laad hij 'size2.css' in.
3. Daar komt bij dat jouw idee in geval van IE ook javascript nodig heeft.
4. Zonder Javascript kunnen bezoekers de rest van de site ook niet tot slecht gebruiken.
5. Ik zie nu inderdaad waar de javascript in ouw idee moet komen. Als ik een graduele oplossing wil dan is dat zeker de beste oplossing.

tennapel

tennapel 9 jaren geleden #

"fab"
"tennapel"

als javascript uit staat heb je geen enkele stijl

Dat is dus niet het geval. Als javascript uit staat wordt de normale stylesheet gebruikt.
De stylesheet voor bredere browservensters staat dan netjes als ‘alternative stylesheet’ ter beschikking van bijv. FireFox. Dat heet dus ‘unobtrusive javascript which degrades gracefully’.
.

Dat is in het geval van de ‘blue man’ oplossing het geval; in geval van wat Thom wil niet. Maar je hebt al geconstateerd dat het niet lukt met een document.write.

En de CSS/IE-javascript directive oplossing is absoluut een hack, maar dan alleen gericht op IE/Win. De rest van de nieuwere browsers maakt keurig gebruik van max-width of min-width.

Thom

Thom 9 jaren geleden #

Waarom doet hij heb bij mij wel en bij jullie niet?

http://www.initiumnet.nl/test

geel= 1024 +
blauw= 800

fab

fab 9 jaren geleden #

"Thom"

Waarom doet hij heb bij mij wel en bij jullie niet?

http://www.initiumnet.nl/test

geel= 1024 +
blauw= 800

Goeie vraag  :?  . Hier werkt het echt niet. Getest in Safari, FireFox en IE 5/Mac.
Je kunt trouwens de eerste if (screen.width <= 800) { weglaten, anders krijg je 2x dezelfde <link>.

Wellicht heb je meer succes met een letterlijk style definitie, dus de css rechtstreeks in je page head op basis van document.write(). Of probeer eens @import daarin.

Succes!

Thom

Thom 9 jaren geleden #

Dus jij krijgt geen gele pagina met een 1024(+) scherm?
Wat krijg je dan?

Ik krijg het hier op al de drie mijn compu’s en op alle browsers wel.

tennapel

tennapel 9 jaren geleden #

Bij mij is het scherm geel, zowel op IE6/Win als Firefox1.0/Win, ongeacht de schermgrootte

Thom

Thom 9 jaren geleden #

"tennapel"

Bij mij is het scherm geel, zowel op IE6/Win als Firefox1.0/Win, ongeacht de schermgrootte

Dan doet hij het dus:
1 Zet je monitor op 800×600 en hij is blauw
2 Zet Javascript uit en hij is ook blauw

tennapel

tennapel 9 jaren geleden #

ow.. resolutie, ik dacht canvasgrootte.

Wat dan als ik een standaard resolutie heb van 1024*768, maar altijd mijn venstergrootte van mijn browser kleiner heb staan?

Thom

Thom 9 jaren geleden #

"tennapel"

ow.. resolutie, ik dacht canvasgrootte.

Wat dan als ik een standaard resolutie heb van 1024*768, maar altijd mijn venstergrootte van mijn browser kleiner heb staan?

1. Aha, schermgrootte leek me wel iets anders dan venstergrootte.
2. Ja dat snap ik natuurlijk wel, lijkt me nu niet de allergrootste ramp.

Over dit topic

Gestart op 23 januari 2005 door Thom

Laatste reactie door Thom

Je kunt alleen reageren met een gratis OMT account.
Log in.

Inloggen