Responsive design

[anoniem]

Beste webprogrammers, Ik pruts wat aan met JavaScript en wil eigenlijk een code dat bij een bepaalde resolutie een bepaald CSS stylesheet gebruikt wordt. Zijn hiervoor JavaScript code's? (En zo ja, welke?) Alvast bedankt, Jaapyse

[anoniem]

Probeer dit eens: [code:1:64aa5db0d5] if (screen.width>=1024) { <LINK href="big_screen.css" rel="stylesheet" type="text/css"> } else { <LINK href="little_screen.css" rel="stylesheet" type="text/css"> } [/code:1:64aa5db0d5]

[anoniem]

Bedankt! Ik ga het proberen!

[anoniem]

Mag ik vragen waarom je dat met javascript wilt doen en niet met een media query? (Geen kritische vraag, gewoon nieuwsgierig:))

[anoniem]

Eh... wat is media query??? :roll:

[anoniem]

[url=http://www.w3.org/TR/CSS2/media.html]CSS: @media[/url] :) En meer specifiek: [url=http://www.zelfstudie.be/cursussen/tutorial.php?id=129]Responsive design via CSS media queries[/url]

[anoniem]

Aha, ik snap het een beetje, maar ik blijf JavaScript gebruiken omdat ik dat makkelijker vind met de stylesheets en vooral de html.

[anoniem]

Het lukt me niet echt om dat gedoe te doen met die if <link enz. Hoe ziet mijn head er dan uit? (afgezien van de titel enz.)

[anoniem]

Volgens mij moet er nog document.writeln bij: [code:1:9fd49b8011]<script type="text/javascript"> if (screen.width>=1024) { document.writeln('<LINK href="big_screen.css" rel="stylesheet" type="text/css">'); } else { document.writeln('<LINK href="little_screen.css" rel="stylesheet" type="text/css">'); } </script>[/code:1:9fd49b8011]

[anoniem]

Bedankt, ik ga het proberen. Was het trouwens geen [code:1:10dc85b637]type="text/stylesheet"[/code:1:10dc85b637] in plaats van [code:1:10dc85b637]type="text/css"[/code:1:10dc85b637]???

[anoniem]

Kijk anders eens naar Twitter Bootstrap. Dit is een framework dat volledig responsve is voor desktops, tablets en smartphones. http://twitter.github.com/bootstrap/index.html Hier kun je vinden welke resoluties ondersteund worden. http://twitter.github.com/bootstrap/scaffolding.html#responsive Je moet de responsive feature overigens wel eerst [i:03eee792f2]aan[/i:03eee792f2] zetten voor je het kun gebruiken. Dit kan eenvoudig door de volgende meta tag toe te voegen. [code:1:03eee792f2]1.<meta name="viewport" content="width=device-width, initial-scale=1.0">[/code:1:03eee792f2]

[anoniem]

Ik heb nu dit gebruikt maar het werkt niet: [code:1:473a222d14]<script type="text/javascript"> if(window.innerWidth >= 1080) echo("<link type="text/css" rel="stylesheet" src="css1.css" />"); else if(window.innerWidth >= 800) echo("<link type="text/css" rel="stylesheet" src="css2.css" />"); else echo(<link type="text/css" rel="stylesheet" src="css3.css" />"); </script> [/code:1:473a222d14]Wat doe ik fout?

[anoniem]

Je syntax klopt niet: [list=1:0752ccaf90] [*:0752ccaf90]Je moet document.write() gebruiken ipv echo(); [*:0752ccaf90]Als je binnen je string double quotes ([b:0752ccaf90]"[/b:0752ccaf90]) gebruikt, moet je single quotes ([b:0752ccaf90]'[/b:0752ccaf90]) gebruiken om die string in te sluiten, anders denkt de browser dat de string niet meer is dan "<link type=" [*:0752ccaf90]Voor het overzicht kun je het beste curly braces ([b:0752ccaf90]{[/b:0752ccaf90]) gebruiken om je condities in te sluiten. [/list:o:0752ccaf90] Probeer dit maar eens: [code:1:0752ccaf90]<script type="text/javascript"> if(window.innerWidth >= 1080) { document.write('<link type="text/css" rel="stylesheet" src="css1.css" />'); } else if(window.innerWidth >= 800) { document.write('<link type="text/css" rel="stylesheet" src="css2.css" />'); } else { document.write('<link type="text/css" rel="stylesheet" src="css3.css" />'); } </script> [/code:1:0752ccaf90]

[anoniem]

Ik heb het geprobeerd, maar het werkt nog steeds niet.

[anoniem]

Foutje wat ik gemist had: je gebruikt het attribuut [b:cf3bff3745]src="..."[/b:cf3bff3745]. Dat moet zijn [b:cf3bff3745]href="..."[/b:cf3bff3745]

[anoniem]

[url=http://getfirebug.com/]Firebug[/url] is je vriend ;)

[anoniem]

[quote:d27b32bad4="Gooly"][url=http://getfirebug.com/]Firebug[/url] is je vriend ;)[/quote:d27b32bad4] Het lijkt wel erg veel op de google-chrome element inspector. css1.css laad nu wel, maar css2.css en css3.css niet... Waarschijnlijk blijft er een fout zitten in het JavaScript.

[anoniem]

Er zal altijd maar 1 van de 3 laden, je scherm heeft namelijk maar 1 formaat. ;) Heb je een linkje naar je site, zodat we eens kunnen kijken?

[anoniem]

Ik heb het in alle resoluties geprobeerd en steeds herladen. Ik heb geen link naar de site, hij staat nog niet op de server. Momenteel heb ik alleen nog maar een div, die bij verschillende resoluties van kleur veranderd. Het gaat me vooral om het correcte JavaScript.

[anoniem]

In dat geval wordt het een beetje lastig om je te helpen... Zo uit het blote hoofd zou dit moeten werken namelijk. Een alternatief is de media queries in CSS (dat is wat ik zou doen), maar je gaf eerder al aan dat je dat niet wil gebruiken.