Forum Moderators: open
THE PAGE
-------------
<HTML>
<HEAD>
<SCRIPT src="Resize.js"></SCRIPT>
<BODY>
<TABLE width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<TR><TD class="title">Private Forum Access</TD></TR>
<TR><TD id="myText">WebmasterWorld has grown to become an Alexa Top site </TD></TR>
<TR><TD height="20" valign="top"><A href="javascript:Crece();"><IMG src="../image/letras.gif" alt="Letras" width="27" height="15" border="0"/></A></TD></TR>
<TR><TD class="title">Private Forum Access</TD></TR>
<TR><TD id="myText">WebmasterWorld has grown to become an Alexa Top site</TD></TR>
<TR><TD height="20" valign="top"><DIV align="right"><A href="javascript:Crece();"><IMG src="../image/letras.gif" alt="Letras" width="27" height="15" border="0"/></A></DIV></TD></TR>
<TR><TD class="title">Private Forum Access</TD></TR>
<TR><TD id="myText">WebmasterWorld has grown to become an Alexa Top site </TD></TR>
<TR><TD height="20" valign="top"><DIV align="right"><A href="javascript:Crece();"><IMG src="../image/letras.gif" alt="Letras" width="27" height="15" border="0"/></A></DIV></TD></TR>
</TR></TABLE>
</BODY>
</HTML>
THE CODE
-----------------------------
var cont=1;
function Crece()
{switch (cont ){
case 1:{
//document.getElementById('myText').style.fontSize = 12; -- this works fine but needs to be independent of the numbers of cells
ChageSize(12);
cont=2;
break}
case 2:{
ChageSize(14);
cont=3;
break}
case 3:{
ChageSize(15);
cont=4;
break}
case 4:{
ChageSize(16);
cont=5;
break}
default:{
ChageSize(10);
cont=1
break}}}
function ChageSize(Num)
{
alert(Num);
var HowMany=document.getElementByName("myText").length; ---- //it doesn't work
for(i = 1;i<=HowMany; i++)
{
alert(i);
document.getElementById("myText").elements[i].style.fontSize=Num; // Doesn't works if I can't get de length property!
//document.getElementById("myText").style.fontSize = Num;
}
}
--------
Thanks in advance for yor help
document.getElementsByTagName('td')function ChangeSize(Pixels)
{
var arrTDs = document.getElementsByTagName("td");
for(i = 0; i < arrTDs.length; i++)
{
arrTDs[i].style.fontSize = Pixels + "px";
}
}
<td class="myText" id="1234">very long text here!</td>
<td class="myText" id="4567">very long text here!</td>
<td class="myText" id="7890">very long text here!</td>
and in the call of the function send the name of the id where I want to resize the font. like this:
------------------------
<a href="javascript:Resize(1234);"><img src="icon.gif" A></a>
So the font in the cell with the id will grow!
well if someone needs something like this, the resize.js looks like this now:
----------------------------
var cont=1;
function Resize(Num){
switch (cont)
{
case 1:{document.getElementById(Num).style.fontSize=14;
cont++;
break}
case 2:{document.getElementById(Num).style.fontSize=16;
cont++;
break}
case 3:{document.getElementById(Num).style.fontSize=18;
cont++;
break}
default:{document.getElementById(Num).style.fontSize=12;
cont=1;
break}}}
it is very simple and don't needs to change the hole style file (css) and offcourse it can be improve so if you make it more elegant just let me know
thanks for your help!
I need to put a "Rezise text" functionality in a web page
...you just want to be able to change all the text on a page, right?
If so, you should recall that font size is inherited in CSS, so you should--browser bugs excepted--be able to just resize text in the body element only--the cascade (the 'C' in 'CSS') will take care of the cells.
This code is deliberately verbose, and you may be able to simplify it, but I think it illustrates the principle fairly well:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Simple Text Resizer</title>
<script type="text/javascript">
function hugeText() {
var bodyElement = document.getElementsByTagName('body')[0];
bodyElement.style.fontSize = '4em';
}function bigText() {
var bodyElement = document.getElementsByTagName('body')[0];
bodyElement.style.fontSize = '2em';
}function mediumText() {
var bodyElement = document.getElementsByTagName('body')[0];
bodyElement.style.fontSize = '1em';
}function smallText() {
var bodyElement = document.getElementsByTagName('body')[0];
bodyElement.style.fontSize = '.8em';
}function textResize() {
var huge = document.getElementById('hugeLink');
var big = document.getElementById('bigLink');
var medium = document.getElementById('mediumLink');
var small = document.getElementById('smallLink');small.onclick = smallText;
medium.onclick = mediumText;
big.onclick = bigText;
huge.onclick = hugeText;
}window.onload = textResize;
</script>
</head><body>
<p><a href="#" id="smallLink">Small Size</a></p>
<p><a href="#" id="mediumLink">Normal Size</a></p>
<p><a href="#" id="bigLink">Large Size</a></p>
<p><a href="#" id="hugeLink">Huge</a></p>
<p>Lorem ipsum dolor sit amet.</p><table border="1">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr><tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr><tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</table>
</body>
</html>
-b
