Ik ben bezig met een websiteopdracht voor mijn opleiding. Nu staat er in deze opdracht dat er een plus en min knop in moet zitten. En als je op de plus knop klikt dat het lettertype vergroot en natuurlijk bij de min knop dat het lettertype verkleint.
Zover ik weet is het niet mogelijk met alleen html en css, je zal dus javascript of een serverside taal nodig hebben. Het mooiste zal zijn als je PHP kon gebruiken, dan zou je een script kunnen maken die een sessie opslaat met daarin de gewenste waarde. En dat dan als fallback gebruiken als de bezoeker geen javascript heeft aan staan. En dan de javascript versie ook gewoon maken (wel dan dezelfde cookie gebruiken of sessie (als je AJAX gebruikt)).
<?php
// Dit stukje code moet voor alle output (zoals witruimte en html) worden geplaatst,
// omdat het een header stuurt, en dat kan alleen als er nog geen output is.
// daarom zal het dan een foutmelding geven.
if (!isset($_SESSION))
{
session_start();
}
// Bestaat de sessie met de fontsize nog niet,
// geef hem dan de standaard waarde.
if (!isset($_SESSION['fontsize']))
{
$_SESSION['fontsize'] = 12;
}
// Moet de grootte worden veranderd?
if (isset($_GET['fontsize']))
{
switch ($_GET['fontsize'])
{
case 'larger':
$_SESSION['fontsize'] += 2;
// Het maximum
if ($_SESSION['fontsize'] > 20)
{
$_SESSION['fontsize'] = 20;
}
break;
case 'smaller':
$_SESSION['fontsize'] -= 2;
// Het minimum
if ($_SESSION['fontsize'] < 8)
{
$_SESSION['fontsize'] = 8;
}
break;
}
}
// Nu kan je $_SESSION['fontsize'] in je applicatie gebruiken voor de lettergrootte.
?>
<?php
// Dit stukje code moet voor alle output (zoals witruimte en html) worden geplaatst,
// omdat het een header stuurt, en dat kan alleen als er nog geen output is.
// Nu kan je $_SESSION['fontsize'] in je applicatie gebruiken voor de lettergrootte.
?>
En dan kan je nog met javascript een code maken, die met behulp van de id van de div de twee links een onclick functie geeft, die een request met behulp van AJAX naar fontsize.php?fontsize=... doet, om zo niet steeds de pagina te hoeven herladen.
Zover ik weet is het niet mogelijk met alleen html en css, je zal dus javascript of een serverside taal nodig hebben. Het mooiste zal zijn als je PHP kon gebruiken, dan zou je een script kunnen maken die een sessie opslaat met daarin de gewenste waarde. En dat dan als fallback gebruiken als de bezoeker geen javascript heeft aan staan. En dan de javascript versie ook gewoon maken (wel dan dezelfde cookie gebruiken of sessie (als je AJAX gebruikt)).
Dus dan krijg je bijvoorbeeld zoiets:
Op pagina.php
[..code..]
PHP gedeelte ergens bovenaan pagina.php
[..code..]
In font_resizer.php
[..code..]
En dan kan je nog met javascript een code maken, die met behulp van de id van de div de twee links een onclick functie geeft, die een request met behulp van AJAX naar fontsize.php?fontsize=... doet, om zo niet steeds de pagina te hoeven herladen.
Dan moet je wel larger en smaller omdraaien in je switch hé
@CDNC,
Omdat dan gelijk alle tekst groter wordt en dan is de pagina al snel uit model.
@Grayen,
Mooie methode om het lettertype te wijzigen, alleen als je toch javascript kan gebruiken kan het veel gemakkelijker: http://www.whit...ntsize.php
waarom doe je het in php?
[js]
function change(v)
{
if(v) {
font = document.getElementsById('body').style.fontSize;
font =Number(font.replace("px",""));
document.getElementsById('body').style.fontSize = font++ + 'px'; }
else {
font = document.getElementsById('body').style.fontSize;
font =Number(font.replace("px",""));
document.getElementsById('body').style.fontSize = font-- + 'px'; }
}
en idd
inpunt type="button" onclick="change(true bij + en false bij -)"
Alleen nu is mijn vraag is dit alleen mogelijk met html en css, zo ja hoe dan? of is dit alleen mogelijk met javascript
Mijn antwoord is dus, ja als je een serverside taal hebt, heb je geen javascript nodig. Alleen is het mooier als je het met javascript doet, vanwege de request, en dat zou je dus kunnen oplossen met AJAX. Zo ben je javascript onafhankelijk.
Want je krijgt dan:
Staat javascript aan?
Javascript gebruiken (client side, zonder pagina herladen).
Staat javascript uit?
PHP gebruiken (server side, pagina moet per se worden herladen).
Dat ligt er aan, als je een script ervoor gebruikt kan je zelf instellen welke tekst groter moet worden. Er zijn die helemaal uit model raken als je alle tekst groter maakt. Bijvoorbeeld omdat een menu dan zo groot wordt dat die over de content heen schuift.
Maar als je alle css goed hebt opgebouwd heb je daar niet zo veel last van. Dan schuift alles gewoon keurig mee.
@Grayen,
Dat met javascript zei ik erbij om de TS gelijk een voorbeeld te geven van hoe het dan met javascript zou kunnen. Voor als hij toch voor zo'n oplossing zou kiezen.
Mijn vraag is beantwoord je hebt javascript nodig om het lettertype via de knoppen te kunnen wijzigingen. En ook nog meerdere voorbeelden hoe je dat voor elkaar kunt krijgen. Iedereen bedankt voor zijn hulp.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
