login  Naam:   Wachtwoord: 
Registreer je!
 Forum

De juiste CSS bestand laden.

Offline rolandt - 01/03/2009 13:59
Avatar van rolandtNieuw lid Voor mijn site heb ik twee CSS bestanden gemaakt. Een voor lagere beeldschermresolutie en een voor een hogere beeldschermresolutie. Nu wil ik graag dat zodra de site aangeroepen wordt, de bijbehorende CSS bestand ingeladen wordt. Ondanks veel ge-google en van alles geprobeerd te hebben kom ik er niet uit.  
Wie heeft hiervoor een oplossing.

Wat ik dus niet wil is nadat de site is geladen je op een link moet klikken om een andere CSS in te laden.

Grt,
Roland

3 antwoorden

Gesponsorde links
Offline BigBug - 01/03/2009 14:01
Avatar van BigBug PHP expert Door middel van JS kun je de schermresolutie opvragen. Als je zorgt dat dit scriptje bovenaan de pagina geladen wordt en de juiste css file aanwijst moet het lukken 
Offline rolandt - 01/03/2009 14:22 (laatste wijziging 01/03/2009 14:30)
Avatar van rolandt Nieuw lid Nu ben ik beslist niet handig met javascript. Hulp is dus van harte welkom.

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. <link href="../../css/styling.css" rel="stylesheet" type="text/css" media="screen" />
  3. <link href="../../css/photo1024.css" rel="stylesheet" type="text/css" media="screen" />
  4. <script type="text/javascript">
  5. 	if (screen.width >= 1440)
  6.       	    {parent.location.href='../../css/photo1440.css'}
  7. 	</script>
  8. </head>
  10. <img src="big/photo_01.jpg" class="photo_big" alt="" />
  11. </body>


Het herkennen van de beeldschermresolutie lukt wel. Het inladen van de bijbehorende CSS niet.
Nu wordt de inhoud van de CSS op het beeldscherm getoond, en ik wil juist dat deze ingeladen wordt.

Een ander mogelijk vervolg probleem zou kunnen zijn dat de twee CSS elkaar gaan bijten. Ze doen zo goed als het zelfde alleen de width en de height zijn anders.

CSS photo1024
css code - Bekijk de code zonder highlighting - Klap code in 
  1. img.photo_big {
  2. 	border:#12254f 1px solid;
  3. 	width:500px;
  4. 	height:375px;
  5. 	}


css photo1440
css code - Bekijk de code zonder highlighting - Klap code in 
  1. img.photo_big {
  2. 	border:#12254f 1px solid;
  3. 	width:640px;
  4. 	height:580px;
  5.        }
Offline cyberninjah - 01/03/2009 17:18 (laatste wijziging 01/03/2009 17:19)
Avatar van cyberninjah Lid ik heb ook ooit is iets gedaan met de resolutie van de client.

Wat ik gedaan had is eerst een div maken die 100% hoogte en breete van het scherm is hierdoor kan je met javascript heel makelijk de resolutie op halen.
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var hoogteclient = divnaam.clientHeight;
  2. var breeteclient = divnaam.clientWidth;


En hier kan je dan natuurlijk een if statement voor maken als deze waardes groter of kleine zijn dan een speciaal getal <link.... else <link....

Bijvoorbeeld

Hoop dat ik je verder geholpen heb.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.17s