[JS] Functie om FontSize aan te passen werkt... Bijna.

[Rarz]

code:

<script language="JavaScript" type="text/javascript">

  function switchfs(){
    var span = document.getElementById("MainBody");
    if (span.style.fontSize == "11px")
      {
        span.style.fontSize = "24px";
        var td = document.getElementById("Titel");
        td.style.fontSize = "28px";
      }
      else
      {
        span.style.fontSize = "11px";
        var td = document.getElementById("Titel");
        td.style.fontSize = "13px";
      };
    }
</script>

code:

<a href="#" onClick="switchfs();">Voor slechtzienden</a>

Deze functie voeg ik toe aan een pagina om slechtziende mensen de mogelijkheid te geven om makkelijk de pagina inhoud fontsize te vergroten. Werkt op zich prima, maar om de een of andere wazige reden moet je twee keer klikken op de link om het de eerste keer van 'normaal' naar 'groot' te zetten.

Eerst dacht ik dat als ik dit toevoeg dan start de pagina en is de var. bekend nog voordat er geklikt wordt:

code:

<script language="JavaScript" type="text/javascript">
  var span = document.getElementById("MainBody");
  span.style.fontSize = "11px";

  function switchfs(){
    var span = document.getElementById("MainBody");
    if (span.style.fontSize == "11px")
      {
        span.style.fontSize = "24px";
        var td = document.getElementById("Titel");
        td.style.fontSize = "28px";
      }
      else
      {
        span.style.fontSize = "11px";
        var td = document.getElementById("Titel");
        td.style.fontSize = "13px";
      };
    }
</script>

Maar dat maakte helemaal niets uit. Iemand enige suggestie hoe dit te verhelpen?

Edit: Tiepvoud

[ Voor 14% gewijzigd door Rarz op 07-06-2004 11:56 ]

[André]

Dat komt omdat de eerste keer de span nog geen style fontSize kent dus met de else wordt hij dan pas gezet. En vanaf dat moment werkt je functie ook pas.

Hmm, die 2de oplossing die je bedacht had zou moeten werken als je die 2 regels in een functie zou zetten die je onload aanroept.

[ Voor 31% gewijzigd door André op 07-06-2004 11:58 ]

[Rarz]

Door de twee regels apart in een functie te zetten en deze in OnLoad aan te roepen gaat het nu wel goed.

[Bosmonster]

Zorg verder voor een return false om de link (#) te disablen.

Overigens is het niet makkelijker gewoon em-waardes te gebruiken voor je fonts? Dan kunnen de mensen gewoon hun daarvoor bedoelde browserfunctionaliteit gebruiken.

[sjaakaq]

Al denk ik dat >90% van de mensen helemaal niet weten dat hun browser dat kan

[Bosmonster]

leokennis schreef op 07 juni 2004 @ 15:00:
Al denk ik dat >90% van de mensen helemaal niet weten dat hun browser dat kan

De mensen die het niet nodig hebben niet nee Als je slechtziend bent ben je al snel op zoek naar methodes om je fonts groter te maken.

[RM-rf]

de eerste keer dat je klikt stopt de pagina met laden, waarna pas de properties van de TABLE aangesproken kunnen worden (een TABLE wordt pas feitelijk na het laden gerenderd, ondanks dat de browser wel een soort van preview toont)

ik zou zelf eerder ervoor kiezen om vrijwel alle font-sizes in % te definieren (of em/ex zoals Bosmonster aangeeft), enkel in de BODY een vaste fontsize te definieren
en vervolgens met de DOM methode addRule(selector, declaration) een vaste fontsize toe te voegen.

eventueel kun je hiermee http://www.faqts.com/know...ons/index.phtml?aid=11843 verder werken.