Ga Terug  
     


Templates (1.5) Het forum voor Joomla! Templates

Antwoord
 
Onderwerpopties Weergavemodus
Oud 20 december 2009, 09:52   #1
Herrie
 
Geregistreerd op: 23 april 2009
Locatie: Zuid Limburg
Leeftijd: 58
Berichten: 51
Bedankjes gegeven: 7
Bedankjes ontvangen: 0
Standaard site aanpassen aan scherm resolutie

L.S.,

Ik kom er niet uit, 'vroegah' had ik een heel simpele html site en een css.
Eigenlijk 3 css bestanden.
Een voor een resolutie van 800
Een voor een resolutie van 1024
Een voor alle andere gevallen.

Ik had toen in mijn 'index.html' de oplossing met:

Code:
 
if (screen.width == 800) {
document.write('<link rel="stylesheet" type="text/css" href="css/800.css">');
}
if (screen.width == 1024) {
document.write('<link rel="stylesheet" type="text/css" href="css/1024.css">');
}
Er zijn nog mensen die een laptopje met 800 resolutie gebruiken (Ze ZIJN oud!!)

Ik vraag me dus of of, en hoe ik dit in mijn joomla template kan doen.

Moet het dan zoiets worden?

Code:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
 
if (screen.width == 800{
document.write(<link rel="stylesheet" 
href="templates/<?php echo $this->template ?>/css/template_800.css"
type="text/css" />
{
</head>

Herrie,
Specialist in Limburgeringscursussen
Motorrijder
www.bedlamites.nl
Herrie is offline   Met citaat antwoorden
Oud 20 december 2009, 10:01   #2
babsgosgens
Gebruikersgroep 's-Hertogenbosch
 
babsgosgens's Avatar
 
Geregistreerd op: 12 juni 2009
Locatie: Noord-Brabant
Berichten: 313
Bedankjes gegeven: 41
Bedankjes ontvangen: 49
Standaard Re: site aanpassen aan scherm resolutie

Het stukje code dat je laat zien is javascript. Het moet dus in ieder geval binnen <script></script> tags staan.

Hartelijke groet, Babs
http://www.crossinghippos.com
babsgosgens is offline Stuur een bericht via Skype™ naar babsgosgens   Met citaat antwoorden
Oud 20 december 2009, 10:49   #3
bole
 
Geregistreerd op: 19 oktober 2008
Locatie: Noord-Brabant
Berichten: 493
Bedankjes gegeven: 94
Bedankjes ontvangen: 101
Standaard Re: site aanpassen aan scherm resolutie

Citaat:
Origineel geplaatst door Herrie Bekijk Bericht
Moet het dan zoiets worden?

Code:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
 
if (screen.width == 800{
document.write(<link rel="stylesheet" 
href="templates/<?php echo $this->template ?>/css/template_800.css"
type="text/css" />
{
</head>
Maak er dit van, en het werkt:
Code:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<script language="javascript">
if (screen.width == 800) {
document.write('<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_800.css" type="text/css" />');
}
</script>
</head>
Doe jezelf een lol en zoek de verschillen ('-tekens, ;-tekens, <script> tags etc etc), daar leer je van

Laatst aangepast door bole : 20 december 2009 om 10:50.
bole is offline   Met citaat antwoorden
Oud 20 december 2009, 16:21   #4
Herrie
 
Geregistreerd op: 23 april 2009
Locatie: Zuid Limburg
Leeftijd: 58
Berichten: 51
Bedankjes gegeven: 7
Bedankjes ontvangen: 0
Standaard Re: site aanpassen aan scherm resolutie

aha...

ik zit met een beetje 'Vba' kennis en dan zou ik een andere weg zenken

zoals:
Code:
 
<script language="javascript">
if (screen.width == 800) 
{
document.write("<link rel="stylesheet" 
href="templates/<?php echo $this->template ?>/css/template-800.css" type="text/css" />");
} Else {
document.write("<link rel="stylesheet" 
href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />");
}
</script>
maar als ik die in mijn index.php gebruik werkt er geen enkele template...

Herrie,
Specialist in Limburgeringscursussen
Motorrijder
www.bedlamites.nl
Herrie is offline   Met citaat antwoorden
Oud 20 december 2009, 16:22   #5
bole
 
Geregistreerd op: 19 oktober 2008
Locatie: Noord-Brabant
Berichten: 493
Bedankjes gegeven: 94
Bedankjes ontvangen: 101
Standaard Re: site aanpassen aan scherm resolutie

Op zich goed gedacht... Kijk even naar het verschil tussen " en ' in jouw stukje code en het mijne.
bole is offline   Met citaat antwoorden
Oud 20 december 2009, 21:41   #6
Herrie
 
Geregistreerd op: 23 april 2009
Locatie: Zuid Limburg
Leeftijd: 58
Berichten: 51
Bedankjes gegeven: 7
Bedankjes ontvangen: 0
Standaard Re: site aanpassen aan scherm resolutie

bole,

Idd een subtiel verschil....
Misschien een detail uit 'VBa'.

Is dat stukje

Code:
 
} Else {
bla bla
}
Eigenlijk noodzakelijk? Er is immers maar een (eventuele) voorwaarde, nl ALS het 'toevallig' een 800 resolutie is DAN moet er een ander css-je geladen worden.
In ALLE andere gevallen wordt NIET aan de voorwaarde voldaan, en hoeft er geen speciale css geladen te worden.

VBa heeft dan

Code:
 
If [voorwaarde] Then
  [alternatief]
Endif

Herrie,
Specialist in Limburgeringscursussen
Motorrijder
www.bedlamites.nl
Herrie is offline   Met citaat antwoorden
Oud 21 december 2009, 11:18   #7
HermanPeeren
Gebruikersgroep Rotterdam
 
HermanPeeren's Avatar
 
Geregistreerd op: 17 april 2009
Locatie: Rotterdam
Leeftijd: 57
Berichten: 553
Bedankjes gegeven: 50
Bedankjes ontvangen: 197
Standaard Re: site aanpassen aan scherm resolutie

Op zich is VB daar niet verschillend in van de c-achtige syntax van JavaScript: alleen gebruikt die laatste accolades en de eerste Endif. Ook in VB kun je een Else-conditie gebruiken.

In je oorspronkelijke posting is nog geen sprake van template.css als het scherm breder is dan 800px. Wat inderdaad zou kunnen is alleen maar het alternatief opgeven. Maar dan moet je wel de "gewone" template.css eerst opgeven, anders wordt die niet geladen. In geval van een 800-scherm worden dan weliswaar beide css-bestanden geladen, maar hij neemt uiteindelijk alleen de laatste definitie (die stylesheets zijn cascading). Een voordeel is wel, dat er ook een stylesheet geladen wordt als Javascript uit zou staan (gracefully degrading); nou komt dat heel weinig voor dat iemand JavaScript uit heeft staan, maar laatst kwam ik dat toch een keer tegen.

Kortom, je code wordt dan:
HTML Code:
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

<script language="javascript">
if (screen.width == 800) {
document.write('<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_800.css" type="text/css" />');
}
</script>
Als je, zoals je oorspronkelijk schreef, 3 css-bestanden wil hebben, dan voeg je nog een 2e if (eventueel binnen een else) toe.

Ik gebruik trouwens vaker clientWidth (de breedte van het huidige window) dan screen.width (de breedte van het hele scherm), maar dat is maar net voor welk doel je het gebruikt.

Groeten Herman (ook wel eens HerriesHelpdesk genoemd; toevallig).

Laatst aangepast door HermanPeeren : 21 december 2009 om 11:20.

Herman Peeren
Yepr: web - ontwerp - applicaties - illustraties - maatwerk
www.yepr.nl
KvK 58029443
HermanPeeren is offline   Met citaat antwoorden
De volgende leden bedanken HermanPeeren voor dit nuttige bericht:
Herrie (21 december 2009)
Oud 21 december 2009, 19:10   #8
Herrie
 
Geregistreerd op: 23 april 2009
Locatie: Zuid Limburg
Leeftijd: 58
Berichten: 51
Bedankjes gegeven: 7
Bedankjes ontvangen: 0
Standaard Re: site aanpassen aan scherm resolutie

Herman,

Got it!!!

Daar zat mijn 'denkfout'

Eerst de 'standaard' css, dan de 'uitzondering' voor de 800 'kijkers'.

Vooralsnog hou ik het op 2 varianten, om de 'kleinbeeld kijkers' niet al te zeer in problemen te brengen.
Het origineel drukte de '2nd column' (rechtse) naar beneden.
Ook dat is inmiddels opgelost, maar evengoed was de indeling op een '800' scherm knudde, de gebruiker moest dan nog zels horizontaal scrollen.
De '800' variant, waarin alles 100px smaller is, heeft dat niet.

Dank voor de info!!

Laatst aangepast door Herrie : 21 december 2009 om 19:47.

Herrie,
Specialist in Limburgeringscursussen
Motorrijder
www.bedlamites.nl
Herrie is offline   Met citaat antwoorden
Antwoord

Onderwerpopties
Weergavemodus

Berichting Regels
Je mag niet nieuwe onderwerpen maken
Je mag niet reageren op berichten
Je mag niet bijlagen posten
Je mag niet je berichten bewerken

BB code is Aan
Smilies zijn Aan
[IMG] code is Aan
HTML code is Uit

Forumnavigatie


Alle tijden zijn GMT +1. De tijd is nu 20:29.