Søg
Avatar billede Slettet bruger
09. marts 2004 - 19:33 Der er 39 kommentarer og
1 løsning

Skaler font størrelsen

Hej,

Jeg har flere steder set en javascript implementering som gør det muligt at sætte fontstørrelsen op og ned. Nogen der ligger inde med et sådant script?

Det skal helst kunne hhv. lægge én til og trække én fra den aktuelle størrelse - altså ikke med et nyt stylesheet hver gang, men med vilkårligt mange antal størrelser.
Avatar billede jakobclausen Nybegynder
09. marts 2004 - 19:39 #1
HVis du ikke fastsætter en px størrelse på din side vil det være muligt at ændre størrelsen ved at holde ctrl nede mens man scroller. Eller vælger i vis -> tekststørrelse.

Dette kan du f.eks. se i effekt på www.google.dk
Avatar billede Slettet bruger
09. marts 2004 - 19:40 #2
sandt, men ikke lige det jeg er ude på.
Avatar billede roenving Novice
09. marts 2004 - 19:41 #3
Hvordan havde du tænkt dig at angive størrelsen ?-)

Hvis den f.eks. angives i px, kan man f.eks.

<script type="text/javascript">
function chgFont(elm,dir){
  if(elm.style.fontSize){
    elm.style.fontSize = (parseInt(elm.style.fontSize) + (dir=='up')?1:-1) + 'px';
  }else{
    elm.style.fontSize = (dir=='up')?'11px':'9px';
}
</script>

-- men den er kun egnet til hele elementers indhold !-)
Avatar billede fixxxer Nybegynder
09. marts 2004 - 19:42 #4
jeg kunne forestille mig at hvis du har en tekst i en <P>:

<p id="mintekst" style="font-size: 14pt;">Tralalalal</p>

så med lidt fiflerig:

<a href="java script:getElementByID("mintekst").style.fontSize='10';">Gør punkt 10</a>
Avatar billede fixxxer Nybegynder
09. marts 2004 - 19:46 #5
jeg glemte lige mine js-regler et øjeblik...

et mere korrekt eksempel:

<html>

<head>
<script>
ns4  = (document.layers) ? true : false;
ie4 = (document.all)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;

function getLayerStyle( lyr ){
if(document.getElementById)return document.getElementById(lyr).style;
else if(document.all)return document.all[lyr].style;
else if(document.layers)return document.layers[lyr];
else return;
}
</script>
</head>

<body>

<p id="mintekst" style="font-size: 14pt;">Tralalalal</p>

<a href="#" onclick="getLayerStyle('minTekst').fontSize='10';">Gør punkt 10</a>

</body>

</html>
Avatar billede fixxxer Nybegynder
09. marts 2004 - 19:51 #6
nu jeg lige så roenving's eksempel ville jeg lige bringe mit bud på banen:

function IncreaseFont(layer){
  fontS = getLayerStyle(layer).fontSize;
  getLayerStyle(layer).fontSize = parseInt(fontS)+1+'pt';
}

function DecreaseFont(layer){
  fontS = getLayerStyle(layer).fontSize;
  getLayerStyle(layer).fontSize = parseInt(fontS)-1+'pt';
}
Avatar billede roenving Novice
09. marts 2004 - 20:08 #7
pt på skærm ?-)

Man bruger punkter (points, pt) i trykte medier, pixel (px) på skærme ...

-- og det er da fint, at du laver noget, som også understøtter v4-browserne, det er jeg nemlig selv holdt fuldstændig op med, hvorfor getElementById dækker alle aktuelle browsere !-)
Avatar billede Slettet bruger
09. marts 2004 - 20:32 #8
vil

function IncreaseFont(layer){
  fontS = getLayerStyle(layer).fontSize;
  getLayerStyle(layer).fontSize = parseInt(fontS)+1+'px';
}

function DecreaseFont(layer){
  fontS = getLayerStyle(layer).fontSize;
  getLayerStyle(layer).fontSize = parseInt(fontS)-1+'px';
}

virke på hele siden og override værdierne i stylesheetet?
Avatar billede Slettet bruger
09. marts 2004 - 20:34 #9
og ikke mindst så skal det virke på hele siden ved ét kald, uagtet hvilke elementer teksten måtte befinde sig...
Avatar billede roenving Novice
09. marts 2004 - 20:35 #10
Du kan ikke aflæse noget style fra elementer, hvis de ikke står i tagget eller er sat med js, derfor mit hack, med at sætte det absolut, hvis det ikke kan findes...
Avatar billede Slettet bruger
09. marts 2004 - 20:44 #11
Jeg kan ikke få nogen af dem til at virke
Avatar billede Slettet bruger
09. marts 2004 - 20:46 #12
Kommer lige i tanke om at funktionen skal kunne skrive en cookie der husker den aktuelle værdi, således at det kommer til at gælde for alle sider på sitet..
Avatar billede grunken Nybegynder
09. marts 2004 - 21:04 #13
Man kan jo sagtens lave et gennemløf af alle elementer på side, og skalere dem op eller ned!

Men kan vi ikke blive enige om at en header så ikke skal være lige så stor som en indholdstekst ?

altså skal cookien gemme en streng som eks:+1 etc. ?
Avatar billede grunken Nybegynder
09. marts 2004 - 21:05 #14
gennemløf = gennemløb
Avatar billede Slettet bruger
09. marts 2004 - 21:27 #15
header skal naturligvis ikke være ligeså stor, men det er vel ligemeget hvis der bare lægges 1 til og trækkes 1 fra.
Så gælder det vel for alle tekster?
Avatar billede =maddog= Nybegynder
09. marts 2004 - 22:19 #16
Jeg skal ikke blandes ind i det her, men jeg har lavet en del på NS4. Man kan IKKE sætte font størrelse dynamisk. Tro mig. Så der er ingen grund til at understøtte document.layers her for det vil ikke kunne virke alligevel.
Avatar billede grunken Nybegynder
09. marts 2004 - 22:19 #17
Du er nødt til at uddybe en del :o)

hvis at nogen af os skal komme med et brugbart eksempel :o), er alle dine styles sat vha. et stylesheet på alle elementer ?
Avatar billede Slettet bruger
09. marts 2004 - 22:29 #18
maddog > ?

grunken >

>er alle dine styles sat vha. et stylesheet på alle elementer ?

Ja, i hvertfald mht. størrelsen. Enkelste steder er der angivet lokale style attributer...
Avatar billede roenving Novice
09. marts 2004 - 22:34 #19
Se bla. mit indlæg @ 20:35:57, for det vil så give ekstra problemer ...

Men kan du ikke bruge css-ækvivalenterne for size 1-7 ?-)

xx-small|x-small|small|medium|large|x-large|xx-large
Avatar billede Slettet bruger
09. marts 2004 - 22:53 #20
roenving > Hvad mener du? Min standard størrelse er 11px;
Avatar billede roenving Novice
10. marts 2004 - 17:31 #21
<script type="text/javascript">
function chgFont(elm,dir){
  if(elm.style.fontSize){
    elm.style.fontSize = (parseInt(elm.style.fontSize) + (dir=='up')?1:-1) + 'px';
  }else{
    elm.style.fontSize = (dir=='up')?'12px':'10px';
}
</script>
Avatar billede Slettet bruger
10. marts 2004 - 17:51 #22
Hvordan skal jeg kalde funktionen?

<a href="java script:chgFont(this,1)">Sæt størrelse op</a> this vil jo referere til linket... Hmm...
Avatar billede roenving Novice
11. marts 2004 - 00:59 #23
<a href="#" onclick="chgFont(document.getElementById('ditElement'),1);return false;">Sæt størrelse op</a>
Avatar billede Slettet bruger
11. marts 2004 - 11:49 #24
hvad skal ditElement være?
Avatar billede roenving Novice
11. marts 2004 - 11:57 #25
id på det element, som skal skaleres, evt. kan du kalde funktionen flere gange, men skal du det, kan vi da modificere funktionen en anelse ...

-- og jeg havde lige overset:

<a href="#" onclick="chgFont(document.getElementById('ditElement'),'up');return false;">Sæt størrelse op</a>
Avatar billede Slettet bruger
11. marts 2004 - 12:07 #26
Vil det sige at jeg skal smække <div id="whatever"> rundt om alle de steder jeg vil sætte størrelsen op?

Iøvrigt så virker det kun ved det første klik. Den sætter størrelsen op, men hvis man klikker igen sættes den ned så man slet ikke kan læse skriften.
Avatar billede roenving Novice
11. marts 2004 - 12:29 #27
Fandt ikke ud af, hvorfor if-shortcuttet ikke virkede, men denne gør som den skal ...

function chgFont(elm,dir){
  if(elm.style.fontSize){
    var foer = parseInt(elm.style.fontSize);
    elm.style.fontSize = ((dir=='up')?++foer:--foer) + 'px';
  }else{
    elm.style.fontSize = (dir=='up')?'12px':'10px';
}}


-- men afhængig af hvad du skal hav i de områder, kan du måske wrappe det indeni een stor div !-)

-- eller et hvilket som helst andet element:

<body id="ditElement">
Avatar billede Slettet bruger
11. marts 2004 - 12:36 #28
nu virker det med størrelsen, men jeg kan ikke få det til at virke hele siden.
Har prøvet med <body id="alt"> og <div id="alt"> rundt om hele siden...
Avatar billede roenving Novice
11. marts 2004 - 12:47 #29
<script type="text/javascript">
function chgFont(elm,dir){
  if(elm.childNodes)for(var i=0;elm.childNodes.length>i;i++)chgFont(elm.childNodes[i],dir);
  if(!elm.style)return;
  if(elm.style.fontSize){
    var foer = parseInt(elm.style.fontSize);
    elm.style.fontSize = ((dir=='up')?++foer:--foer) + 'px';
  }else{
    elm.style.fontSize = (dir=='up')?'12px':'10px';
}}
</script>
<a href="#" onclick="chgFont(document.body,'up');return false;">Sæt størrelse op</a>
Avatar billede Slettet bruger
11. marts 2004 - 12:51 #30
Det virker :) Nu blev det til gengæld lidt tungt... Der går 1 sekund fra man klikker til der sker noget..
Avatar billede roenving Novice
11. marts 2004 - 12:58 #31
Ja, på en bare nogenlunde kompliceret side, vil der blive en del iterationer igennem alle niveauer i de rekursive kald, til gengæld slipper du for at overveje, om det konkrete element normalt vil arve denne type css-property !-)

-- hvis det kan begrænses på en eller anden måde, kunne man jo også gennemsøge f.eks. en liste af tagNames og så udføre det overfor disse elementer, hvilket alt andet lige vil være adskilligt hurtigere !-)
Avatar billede Slettet bruger
11. marts 2004 - 13:07 #32
Ja, for i grunden er det kun ved <td>, <div>, <a>, <p>, <b>, <span> og <h1,2,3,4,5,6>
Avatar billede roenving Novice
11. marts 2004 - 13:20 #33
<script type="text/javascript">
function chgFont(dir){
  var tags = ['TD','DIV','A','P','B','SPAN','H1','H2','H3','H4','H5','H6','H7'],elms,j;
  for(var i=0;tags.length>i;i++){
    elms = document.getElementsByTagName(tags[i]);
    for(j=0;elms.length>j;j++){
      if(elms[j].style.fontSize){
        var foer = parseInt(elms[j].style.fontSize);
        elms[j].style.fontSize = ((dir=='up')?++foer:--foer) + 'px';
      }else{
        elms[j].style.fontSize = (dir=='up')?'12px':'10px';
      }
    }
  }
}
</script>
<a href="#" onclick="chgFont('up');return false;">Sæt størrelse op</a>
Avatar billede Slettet bruger
11. marts 2004 - 13:43 #34
Det var vist bedre. Så mangler vi bare en skrivning til cookie så det gælder på alle sider..
Avatar billede roenving Novice
11. marts 2004 - 13:55 #35
Tjah ...

Vil font-size altid være ens på alle elementer, for så kan vi effektivisere en hel del ?-)
Avatar billede Slettet bruger
11. marts 2004 - 14:07 #36
hvad mener du med ens`? <h1> er jo større end <p> for eksempel
Avatar billede roenving Novice
11. marts 2004 - 14:26 #37
Så skal vi jo tælle, hvor mange gange, der er trykket på op og ned ...

<body onload="genskabTxtStr()">
<script type="text/javascript">
var num = 0;
function chgFont(dir){
  num += (dir=='up')?1:-1;
  var tags = ['TD','DIV','A','P','B','SPAN','H1','H2','H3','H4','H5','H6','H7'],elms,j;
  for(var i=0;tags.length>i;i++){
    elms = document.getElementsByTagName(tags[i]);
    for(j=0;elms.length>j;j++){
      if(elms[j].style.fontSize){
        var foer = parseInt(elms[j].style.fontSize);
        elms[j].style.fontSize = ((dir=='up')?++foer:--foer) + 'px';
      }else{
        elms[j].style.fontSize = (dir=='up')?'12px':'10px';
      }
    }
  }
  var dato = new Date(new Date().getTime() + 8640000000);//100 dage
  document.cookie = "num="+num+";expires="+dato.toGMTString();
}
function genskabTxtStr(){
    if (document.cookie){
        var n = document.cookie.indexOf("num="),val;
        if (n>-1){
            val = document.cookie.substring(n+4);
            n = val.indexOf(";");
            if(n>-1)val=val.substring(0,n);
      dir = (val.indexOf("-")>-1)?'down':'up';
      val = Math.abs(parseInt(val));
      for(i=0;val>i;i++)chgFont(dir)
        }
    }
}
</script>
<a href="#" onclick="chgFont('up');return false;">Sæt størrelse op</a>
Avatar billede Slettet bruger
14. september 2004 - 18:43 #38
roenving > smider du et svar?
Avatar billede roenving Novice
14. september 2004 - 23:38 #39
Velbekomme '-)
Avatar billede roenving Novice
21. september 2004 - 03:19 #40
Tak for point ;~}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
I går 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
White papers
Flere white papers »