Avatar billede dotcom1 Nybegynder
03. juni 2009 - 08:34 Der er 10 kommentarer og
1 løsning

Større/mindre skriftstørrelse

Hej.

Jeg har fundet et script, som kan gøre tekst større eller mindre. Jeg har dog problemer med at få det til at virke på min side. Teksten, som det skal virke på, ligger i en nested table - kan det være derfor? Se koden her:
http://komfrisk.dk/test/test.html

Scriptet er følgende:
var min=8;
var max=18;
function increaseFontSize() {
  var p = document.getElementById('text');
  for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
        var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
        var s = 12;
      }
      if(s!=max) {
        s += 1;
      }
      p[i].style.fontSize = s+"px"
  }
}
function decreaseFontSize() {
  var p = document.getElementById('text');
  for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
        var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
        var s = 12;
      }
      if(s!=min) {
        s -= 1;
      }
      p[i].style.fontSize = s+"px"
  } 
}

Oprindeligt brugte jeg denne linie i stedet, hvilket virker, men problemet er, at teksten kommer fra en database, og jeg kan ikke altid være sikker på at teksten er omsluttet af paragraphs (jeg har ikke adgang til databasen):

var p = document.getElementsByTagName('p');

- men hvorfor virker ovennævvnte funktion med getElementById ikke?
Avatar billede mcb2001 Nybegynder
03. juni 2009 - 11:14 #1
getElementById bruges til at vælge elementer der har det unikke id givet:

<a href="test.html" id="LINKtilTEST">link</a>
<a href="test.html" id="LINKtilTEST2">link</a>

var elem1 = document.getElementById('LINKtilTEST');
var elem2 = document.getElementById('LINKtilTEST2');

elem1 er nu første link, elem2 er andet link...
Avatar billede dotcom1 Nybegynder
03. juni 2009 - 11:18 #2
Hej.

Ja, det er jeg klar over. Det id, jeg bruger, er også unikt og angivet i den funktion, jeg bruger. Det virker bare ikke.
Avatar billede mcb2001 Nybegynder
03. juni 2009 - 11:35 #3
du har jo defineret "table" til at være text... Det er ikke "table" der styrrer indholdet af "td".

Lav det sådan at du laver en css-class der hedder "tekst-der-kan-ændre-størrelse" eller lignende, og så rediger denne med javascript. og så tildel alle "td", "p" og andet denne css-class...
Avatar billede dotcom1 Nybegynder
03. juni 2009 - 12:25 #4
Tak for svar.
Jeg har tidligere prøvet at ændre funktionen til at bruge
var p = document.getElementsByClassName('text');
med .text som en class i mit css, men ligeledes uden effekt.

Mvh.
Avatar billede mcb2001 Nybegynder
03. juni 2009 - 12:46 #5
nogengange hjælper det at starte forfra :-)

prøv:
function increaseFontSize()
{
    var p = document.getElementsByClassName('text');
    for(i=0;i<p.length;i++)
    {
        if(!p[i].style.fontSize)
        {
            p[i].style.fontSize = 12;
        }
        else
        {
            var s = parseInt(p[i].style.fontSize.replace("px",""));
            s++;
            p[i].style.fontSize = s;
        }
    }
}
Avatar billede mclemens Nybegynder
03. juni 2009 - 12:47 #6
Slet lige:
* {
    font: 12px Arial, Verdana, Tahoma, sans-serif;
}

(brug evt.
#text {
    font: 12px Arial, Verdana, Tahoma, sans-serif;
}
)

og prøv med:

var min=8;
var max=18;
function increaseFontSize() {
  var p = document.getElementById('text');
      if(p.style.fontSize) {
        var s = parseInt(p.style.fontSize.replace("px",""));
      } else {
        var s = 12;
      }
      if(s!=max) {
        s += 1;
      }
      p.style.fontSize = s+"px"
}
function decreaseFontSize() {
  var p = document.getElementById('text');
      if(p.style.fontSize) {
        var s = parseInt(p.style.fontSize.replace("px",""));
      } else {
        var s = 12;
      }
      if(s!=min) {
        s -= 1;
      }
      p.style.fontSize = s+"px"
}
Avatar billede dotcom1 Nybegynder
03. juni 2009 - 14:05 #7
mcclemens >> Yees, så virker det. Var det asterisk'en, der gjorde det? Havde ikke lige skænket den en tanke...

Tusind tak for hjælpen.
Avatar billede dotcom1 Nybegynder
03. juni 2009 - 14:05 #8
mclemens >> Svar lige, i øvrigt. :)
Avatar billede mclemens Nybegynder
03. juni 2009 - 14:27 #9
Det var * samt
  for(i=0;i<p.length;i++) {
  (...)
  }
gennemløbet der skulle slettes, da et
enkelt element ikke kan gennemløbes og
p[i] der skulle rettes til p

Velbekom, og tak for point :)
Avatar billede mclemens Nybegynder
03. juni 2009 - 14:30 #10
P.s.: Uddybning vedr. * - problemet
- Eftersom den satte font-size på alle elementer til et bestemt antal px ville en ændring på text id elementets font-size ikke kunne overrule *'ens fastsættelse af font-size på elementer indeni text id elementet.
Avatar billede dotcom1 Nybegynder
03. juni 2009 - 15:50 #11
Aha. Tak for uddybningerne. :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester