Hot Scripts Forums - View Single Post

job0107 · #3 (**permalink**) 11-17-09, 07:22 AM

Quote:

Originally Posted by hemi

hi

i got one doubt if we can change font size of a text dynamically

ex: if we give name as SACHIN TENDULKAR it should be shown as font size of some 40 or 60

and if we give another text as TENDULKAR TON HELPS INDIA TO WIN THE MATCH this should be automatically adjusted to font size of some 30 to 35.

I searched Google but i didn't find it if anyone one know plz help me out

You will have to use javascript to dynamically change the font attributes.
Here is a simple example that checks how many characters of text is in a span element and changes the font size accordingly.

In this example, if the number of characters is 1 to 29 then the font size is set to 60.
If the number of characters is 30 to 59 then the font size is set to 30.
Else font size is set to 12.

HTML Code:

<html>
<head>
<script>
function changeFontSize()
{
 var elms = document.getElementsByTagName("span");
 for(var i = 0;i < elms.length;i++)
 {
  var elmsHtml = elms[i].innerHTML,FontSize,ln = elmsHtml.length;
  if(ln > 0 && ln < 30){FontSize = 60;}
  else if(ln > 29 && ln < 60){FontSize = 30;}
  else if(ln > 59){FontSize = 12;}
  elms[i].style.fontSize = FontSize;
  }
 }
</script>
</head>
<body>
<span style='font-size:12px;'>SACHIN TENDULKAR</span>
<br />
<span style='font-size:12px;'>TENDULKAR TON HELPS INDIA TO WIN THE MATCH</span>
<br />
<button onclick="changeFontSize()">Change font size</button>
</body>
</html>

Here is another example that will try to change the font size to match the containers width.

HTML Code:

<html>
<head>
<script>
function changeFontSize()
{
 var elms = document.getElementsByTagName("span");
 for(var i = 0;i < elms.length;i++)
 {
  var elmsHtml = elms[i].innerHTML;
  var widthFactor = parseInt(document.getElementById("container").style.width);
  var FontSize = 0;
  var ln = elmsHtml.length;
  FontSize = Math.ceil(widthFactor/ln*1.5);
  elms[i].style.fontSize = FontSize;
  }
 }
</script>
</head>
<body>
<div>
<center>
<div id="container" style="width:275px;border:1px solid #000;">
<span style='font-size:10px;'>SACHIN TENDULKAR</span>
<br />
<span style='font-size:10px;'>TENDULKAR TON HELPS INDIA TO WIN THE MATCH</span>
</div>
<p><button onclick="changeFontSize()">Change font size</button></p>
</center>
</div>
</body>
</html>

The Following User Says Thank You to job0107 For This Useful Post:
hemi (11-17-09)