Hoe heet dit ( 3 a om de site te vergroten)

Status
Niet open voor verdere reacties.
J

Jessehuta

Gebruiker
Lid geworden
13 mrt 2013
Berichten
167
Wie weet hoe dat heet (bijv rechtsboven in op www.mst.nl of zie foto) Dat als je op een van de a's klikt de letters groter worden, iemand een schript voor html? Dankjewel alvast!

Fijne avond!
Groeten Jesse groot.JPG
 
dat word gedaan met css het geen dat je ziet is wat html code dat gelinkt is met javascript en css en zo krijgt men dit het resultaat als ik het goed voor heb word dit meestal gebruikt in joomla (CMS )
 
Het zou met een plug-in voor Joomla of een ander CMS geregeld kunnen zijn, maar het kan ook zonder CMS.

Wat hiervoor nodig is aan css:

  • Voor de <body> een font-size: body {font-size: 100%;}.
  • Alle lettergroottes in de pagina mogen niet in px gegeven worden, maar moeten de relatieve maat em hebben, bv. h1 {font-size: 2em;}, p {font-size: .9em;} enz.
Nu kan met javascript de lettergrootte van de <body> aangepast worden.
Dit is de truc: alle daarvan afhankelijke lettergroottes in de pagina veranderen dan naar verhouding mee. :)

De html-code voor de 3 formaten kan dan bv. zijn:
HTML: 
...
<a href="#" onclick="normaal(); return false"><img src="images/normaal.png" alt=""></a>
<a href="#" onclick="groter(); return false"><img src="images/groter.png" alt=""></a>
<a href="#" onclick="grootst(); return false"><img src="images/grootst.png" alt=""></a>
Met als bijbehorend javascript:
[JS]function normaal(){
document.body.style.fontSize="100%";
}
function groter(){
document.body.style.fontSize="115%";
}
function grootst(){
document.body.style.fontSize="130%";
}[/JS]
=======
Op deze manier werkt het per pagina van de site.
Wil je het door de bezoeker ingestelde letterformaat ook voor alle volgende pagina's van de site laten gelden, dan moet er een cookie gezet worden dat de instelling kan onthouden. *)
Elke nieuwe pagina begint dan (ook weer via javascript) met opvragen van de instelling; en als die anders is dan normaal, worden de letters vergroot.

Met vriendelijke groet,
CSShunter
_______
*)
Zo hebben ze het ook bij mst.nl gedaan.
PS: Ook heeft mst.nl het keurig met "unobtrusive javascript" gedaan: als javascript uit staat, werkt het niet > daarom worden in dat geval de 3 keuzemogelijkheden niet getoond.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan