Notifikationer

Markér alle som læst Log ud

Slettet bruger

18. juli 2005 - 01:58 Der er 5 kommentarer og
1 løsning

Ændring af skrifttype med Java

Hejsa

Jeg har her nedenfor en del af en mailformular:
<select size="1" name="font" style="font-family: Verdana; font-size: 10pt; border: 1px ridge #FF0000" tabindex="6">
<option value="Arial"<%if Request.Form("font") = "Arial" then%> SELECTED<%end if%>>Arial</option>
<option value="Fixedsys"<%if Request.Form("font") = "Fixedsys" then%> SELECTED<%end if%>>Fixedsys</option>
<option value="Courier"<%if Request.Form("font") = "Courier" then%> SELECTED<%end if%>>Courier</option>
<option value="Courier New"<%if Request.Form("font") = "Courier New" then%> SELECTED<%end if%>>Courier New</option>
<option value="Century"<%if Request.Form("font") = "Century" then%> SELECTED<%end if%>>Century</option>
<option value="Times New Roman"<%if Request.Form("font") = "Times New Roman" then%> SELECTED<%end if%>>Times New Roman</option>
<option value="Verdana"<%if Request.Form("font") = "Verdana" then%> SELECTED<%end if%>>Verdana</option>
<option value="ms sans-serif"<%if Request.Form("font") = "ms sans-serif" then%> SELECTED<%end if%>>MS Sans-Serif</option>
<option value="Impact"<%if Request.Form("font") = "Impact" then%> SELECTED<%end if%>>Impact</option>
<option value="Helvetica"<%if Request.Form("font") = "Helvetica" then%> SELECTED<%end if%>>Helvetica</option>
<option value="Haettenschweiler"<%if Request.Form("font") = "Heattenschweiler" then%> SELECTED<%end if%>>Haettenschweiler</option>
<option value="Comic"<%if Request.Form("font") = "Comic" then%> SELECTED<%end if%>>Comic</option>
<option value="comic sans ms"<%if Request.Form("font") = "comic sans ms" then%> SELECTED<%end if%>>Comic Sans MS</option>
</select>
<textarea rows="30" name="cont" cols="100" style="font-family: Verdana; font-size: 10pt; border: 1px ridge #FF0000; background-image:url('members/MailPics/wall/fleck.gif')" tabindex="9"><%="" & Request.Form("cont") & ""%></textarea>

- Som du kan se er der foroven et rullepanel hvor man skal angive skrifttype i. Forneden er der et textarea, som man skal skrive selve mailen i! Kan man ikke i Java lave det sådan at når man skifter skrifttype i rullepanelet at der så også bliver skiftet skrifttype i "stylen" i textareaet? Sådan at brugeren kan se hvordan det ser ud med den valgte skrifttype inden mailen bliver afsendt?

Med venlig hilsen

Dan

Synes godt om

fennec Nybegynder

18. juli 2005 - 08:25 #1

Smid en onchange på din select. Sådan:
<select size="1" name="font" onchange="document.getElementById('cont').style.fontFamily=this[this.selectedIndex].value;" style="font-family: Verdana; font-size: 10pt; border: 1px ridge #FF0000" tabindex="6">

også skal der lige et ID på textareaet så vi kan fange den med getElementById:
<textarea rows="30" id="cont" name="cont" cols="100" style="font-family: Verdana; font-size: 10pt; border: 1px ridge #FF0000; background-image:url('members/MailPics/wall/fleck.gif')" tabindex="9"><%="" & Request.Form("cont") & ""%></textarea>

Synes godt om

fennec Nybegynder

18. juli 2005 - 08:28 #2

Du vil nok fortrække at smide et width og height style på textareaet, så den ikke ændre størrelse når man ændre skrifttypen.

Synes godt om

Slettet bruger

18. juli 2005 - 08:40 #3

Jeg siger mange tak for dette script.

Men hvordan skal det så se ud hvis det ikke er skrifttypen, men skriftstørrelsen rullepanelet skal definere?

Jeg har nedenstående rullepanel:
<select size="1" name="size" style="font-family: Verdana; font-size: 10pt; border: 1px ridge #FF0000" tabindex="7">
<option value="1"<%if Request.Form("size") = "1" then%> SELECTED<%end if%>>8</option>
<option value="2"<%if Request.Form("size") = "2" then%> SELECTED<%end if%>>10</option>
<option value="3"<%if Request.Form("size") = "3" then%> SELECTED<%elseif Request.Form("size") = "" then%> SELECTED<%end if%>>12</option>
<option value="4"<%if Request.Form("size") = "4" then%> SELECTED<%end if%>>14</option>
<option value="5"<%if Request.Form("size") = "5" then%> SELECTED<%end if%>>18</option>
<option value="6"<%if Request.Form("size") = "6" then%> SELECTED<%end if%>>24</option>
<option value="7"<%if Request.Form("size") = "7" then%> SELECTED<%end if%>>36</option>
</select>

Der har jeg indsat samme java-script som den til skrifttyperullepanelet, hvor jeg bare har ændret "fontFamily" til "fontSize"...

Men så bliver skriftstørrelsen meget lille, meget mindre end den skal være...

Hvordan laver jeg dette om?

Synes godt om

fennec Nybegynder

18. juli 2005 - 08:56 #4

Du kan lave det om så valuen svare til px værdien:

<select size="1" name="size" onchange="document.getElementById('cont').style.fontSize=this[this.selectedIndex].value+'px';" style="font-family: Verdana; font-size: 10pt; border: 1px ridge #FF0000" tabindex="7">
<option value="8">8</option>
<option value="10">10</option>
<option value="12" selected>12</option>
<option value="14">14</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="36">36</option>
</select>

Det betyder nok at du skal have ændret på koden i din send funktion, da du ikke overfører 1-7 værdien men 8-36.

Du kan også smide et ID på dine options, også indsætte det i stylet istedet. Du skal nemlig bruge xx-small til xx-large hvis du skal bruge 1-7 værdierne. Du skal så bare huske at der ikke er andre elementer der må have samme ID:

<select size="1" name="size" onchange="document.getElementById('cont').style.fontSize=this[this.selectedIndex].id;" style="font-family: Verdana; font-size: 10pt; border: 1px ridge #FF0000" tabindex="7">
<option id="xx-small" value="1">8</option>
<option id="x-small" value="2">10</option>
<option id="small" value="3" selected>12</option>
<option id="medium" value="4">14</option>
<option id="large" value="5">18</option>
<option id="x-large" value="6">24</option>
<option id="xx-large" value="7">36</option>
</select>

Synes godt om

Slettet bruger

19. juli 2005 - 16:04 #5

... Kan man gøre det med radioknapper også?

Og i så fald hvordan?

Jeg har lavet det nedenstående som jeg ikke kan få til at virke...
<table border="0" style="border-collapse: collapse" cellpadding="0" id="table3">
<tr>
<td width="100">
<p align="center">
<input type="radio" value="left" name="align" style="border: 3px dashed #FFFFFF; background-color: #C0C0C0" onclick="document.getElementById('cont').style.textAlign=this[this.selectedIndex].value;" checked>
</p>
</td>
<td width="100">
<p align="center">
<input type="radio" value="center" name="align" style="border: 3px dashed #FFFFFF; background-color: #C0C0C0" onclick="document.getElementById('cont').style.textAlign=this[this.selectedIndex].value;">
</p>
</td>
<td width="100">
<p align="center">
<input type="radio" value="right" name="align" style="border: 3px dashed #FFFFFF; background-color: #C0C0C0" onclick="document.getElementById('cont').style.textAlign=this[this.selectedIndex].value;">
</p>
</td>
</tr>
<tr>
<td width="100">
<p align="center"><font face="Fixedsys" color="#ffffff">
VENSTRE
</font></p>
</td>
<td width="100">
<p align="center"><font face="Fixedsys" color="#ffffff">
CENTRERET
</font></p>
</td>
<td width="100">
<p align="center"><font face="Fixedsys" color="#ffffff">
HØJRE
</font></p>
</td>
</tr>
</table>
\Dan

Synes godt om

fennec Nybegynder

20. juli 2005 - 08:18 #6

Du var ellers tæt på. Du skal bare ændre:
document.getElementById('cont').style.textAlign=this[this.selectedIndex].value;

til:
document.getElementById('cont').style.textAlign=this.value;

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS