PDA

View Full Version : Resize text

Jan
04-03-2003, 06:28 AM
Hey!

I was wondering how the visitor could change the text size of a specific part of the site? I mean that the size of let's say .text would change by clicking on links that say "increase size" or "decrease size". Could someone explain that to me? Thankies! :D



~Jan
Cris79
04-03-2003, 09:14 AM
Here is an example for you. You have almost all the propertys, not only the font size.:thumbsup:

<HTML>
<HEAD>
<TITLE></TITLE>
<style>
.change1 {color:#000048; font-weight:bolder; font-size:130%; letter-spacing:0.5px; background:transparent; text-decoration:underline overline}
.change2 {color:#000048; font-family:Arial; font-size:100%; letter-spacing:1px; background:transparent; text-decoration:none}
</style>
</HEAD>
<BODY>
<div ID="ba" style="color:00008b"> bla bla bla</div><br>
<div style="cursor: hand"><span onclick="ba.className = 'change1'">increase size</span></div>
<div style="cursor: hand"><span onclick="ba.className = 'change2'">decrease size</span></div>
</BODY>
</HTML>
brothercake
04-03-2003, 11:44 AM
If you use % or em to size your text, then the browser's native "view > text size" controls will do it.
tommysphone
04-03-2003, 02:05 PM
<style>
.bigChange {color:black; font-weight:bolder; font-size:175%; letter-spacing:4px; text-transform: uppercase; background:white}
.start {color:black; background:white}
A:link { color:#003399; text-decoration:none; }
A:visited { color:#6699CC; text-decoration:none; }
A:hover { text-decoration:underline; }
</style>

<p><strong><font face="Verdana"><font size="2">Move the mouse over &quot;Make this text
bigger&quot; below.</font><small><small> </small></small></font></strong></p>

<p><font SIZE="2" face="Verdana">Text can change in size and style at any time! <span
onmouseover="this.style.fontSize = 'larger'" onmouseout="this.style.fontSize =''"
style="color:red">Make this text bigger.</span> Notice how the text automatically reflows.
</font></p>

<p><font SIZE="2" face="Verdana">And one more time—but use the class attribute: <span
onmouseover="this.className = 'bigChange'" onmouseout="this.className='start'"
class="start">Make this text bigger.</span></font></p>
meow
04-03-2003, 06:09 PM
Ahem... :rolleyes: :rolleyes: :D
Originally posted by Jan
how the visitor could change the text size of a specific part of the site?

I'm guessing javascript can do it - but I don't know how. :o
brothercake
04-03-2003, 11:22 PM
Is that the question then - you want to change it only in specific portions, or make all the text uniformly change size from javascript buttons?
Cris79
04-04-2003, 10:46 AM
ok, if you want JS to change the text size of a specific part here is an JS example; maybe it will help you.


<HTML>
<HEAD>
<TITLE></TITLE>
<script LANGUAGE="JavaScript">
function change(nume, tip){
if (tip==1){document.getElementById(nume).style.fontSize="20pt"}
else if(tip==2){document.getElementById(nume).style.fontSize="8pt"}
else {document.getElementById(nume).style.fontSize="12pt"}
}
</script>
</HEAD>
<BODY>
<p>text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1</p>
<div ID="ba">
<p> This text will change This text will change This text will change</p><br>
<p> This text will change This text will change This text will change</p><br>
<p> This text will change This text will change This text will change</p><br>
</div><br>
<p>text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2</p>
<input type="button" value="increase" onclick="change('ba', 1)">
<input type="button" value="decrease " onclick="change('ba', 2)">
<input type="button" value="intial" onclick="change('ba', 3)">
</BODY>
</HTML>
meow
04-04-2003, 10:50 AM
Hey, that's cool! I usually loath the now so popular text resizing gizmos but I see the potential in resizing only part of the page. Me steals that. Oki? :o
Cris79
04-04-2003, 10:53 AM
No problem!!! :thumbsup: oki doki :)