login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Voor slechtzienden een betere usability (Opgelost)

Offline BartP - 02/03/2008 09:42
Avatar van BartPNieuw lid Goedenmorgen,

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.

Een voorbeeld van zon systeem staat op de website hieronder gegeven:
http://www.thea.../webwinkel

Alleen nu is mijn vraag is dit alleen mogelijk met html en css, zo ja hoe dan? of is dit alleen mogelijk met javascript

Mvg

BartP

12 antwoorden

Gesponsorde links
Offline Grayen - 02/03/2008 10:40 (laatste wijziging 02/03/2008 11:04)
Avatar van Grayen PHP ver gevorderde 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

  1. <div id="fontsize">
  2. <a href="pagina.php?fontsize=larger" title="Vergroot letters">A+</a>
  3. <a href="pagina.php?fontsize=smaller" title="Vergroot letters">a-</a>
  4. </div>


PHP gedeelte ergens bovenaan pagina.php

  1. <?php
  2. include 'font_resizer.php';
  3. ?>


In font_resizer.php

  1. <?php
  2. // Dit stukje code moet voor alle output (zoals witruimte en html) worden geplaatst,
  3. // omdat het een header stuurt, en dat kan alleen als er nog geen output is.
  4. // daarom zal het dan een foutmelding geven.
  5. if (!isset($_SESSION))
  6. {
  7. }
  8.  
  9. // Bestaat de sessie met de fontsize nog niet,
  10. // geef hem dan de standaard waarde.
  11. if (!isset($_SESSION['fontsize']))
  12. {
  13. $_SESSION['fontsize'] = 12;
  14. }
  15.  
  16. // Moet de grootte worden veranderd?
  17. if (isset($_GET['fontsize']))
  18. {
  19. switch ($_GET['fontsize'])
  20. {
  21. case 'larger':
  22.  
  23. $_SESSION['fontsize'] += 2;
  24.  
  25. // Het maximum
  26. if ($_SESSION['fontsize'] > 20)
  27. {
  28. $_SESSION['fontsize'] = 20;
  29. }
  30.  
  31. break;
  32.  
  33. case 'smaller':
  34.  
  35. $_SESSION['fontsize'] -= 2;
  36.  
  37. // Het minimum
  38. if ($_SESSION['fontsize'] < 8)
  39. {
  40. $_SESSION['fontsize'] = 8;
  41. }
  42.  
  43. break;
  44. }
  45. }
  46.  
  47. // Nu kan je $_SESSION['fontsize'] in je applicatie gebruiken voor de lettergrootte.
  48. ?>


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.
Offline Koen - 02/03/2008 11:02
Avatar van Koen PHP expert
Grayen schreef:
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é 
Offline Grayen - 02/03/2008 11:04
Avatar van Grayen PHP ver gevorderde lol, wel handig ja 
Offline CDNC - 02/03/2008 12:07
Avatar van CDNC PHP ver gevorderde deze functie zit standaart in firefox (en IE ook, maar daar ken ik de sneltoets niet van)

CTRL + + (het plus teken en CTRL in drukken) en de handel word groter
CTRL + - en de handel word kleiner

ik zou niet weten waarom je dan op je website zou zitten ambetant doen met + en - knopjes
Offline Rik - 02/03/2008 12:15
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen
@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
Offline yetti4 - 02/03/2008 12:26 (laatste wijziging 02/03/2008 12:35)
Avatar van yetti4 JS interesse 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 -)"
Offline Grayen - 02/03/2008 12:30 (laatste wijziging 02/03/2008 12:34)
Avatar van Grayen PHP ver gevorderde @Boekefalos en yetti4

Citaat:
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).
Offline yetti4 - 02/03/2008 12:36
Avatar van yetti4 JS interesse javascript staat tegenwoordig bij iedereen aan, maar als je bij de leraar ff wilt slijmen, doe je ook php debij 
Offline CDNC - 02/03/2008 15:05
Avatar van CDNC PHP ver gevorderde
Boukefalos schreef:
@CDNC,
Omdat dan gelijk alle tekst groter wordt en dan is de pagina al snel uit model.


Dat is toch net wat de TS wil?
Offline Simon - 02/03/2008 15:14
Avatar van Simon PHP expert @ Grayen: dus volgens jou werkt AJAX zonder javascript?
Offline Rik - 02/03/2008 15:17
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen
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.
Offline BartP - 02/03/2008 17:49
Avatar van BartP Nieuw lid Goedenavond,

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.

BartP
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.2s