Scrip for Auto Size font in Div space

[makroz]

Put this code in HEAD section:

<style type="text/css">
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	#theBox{
		width:500px;
		border:1px solid #CCC;
		color: #317082;
	}
	#theBox2{
		width:100px;
		border:1px solid #CCC;
		color:red;
		text-align:center;
	}
	#theBox3{
		width:800px;
		height:50px;
		border:1px solid #CCC;
		color:red;
		text-align:center;
	}
	</style>
	<script type="text/javascript">
	var fitTextInBox_maxWidth = false;
	var fitTextInBox_maxHeight = false;
	var fitTextInBox_currentWidth = false;
	var fitTextInBox_currentBox = false;
	var fitTextInBox_currentTextObj = false;
	function fitTextInBox(boxID,maxHeight)
	{
		if(maxHeight)fitTextInBox_maxHeight=maxHeight; else fitTextInBox_maxHeight = 10000;
		var obj = document.getElementById(boxID);
		fitTextInBox_maxWidth = obj.offsetWidth;	
		fitTextInBox_currentBox = obj;
		fitTextInBox_currentTextObj = obj.getElementsByTagName('SPAN')[0];
		fitTextInBox_currentTextObj.style.fontSize = '1px';
		fitTextInBox_currentWidth = fitTextInBox_currentTextObj.offsetWidth;
		fitTextInBoxAutoFit();
		
	}	
	
	function fitTextInBoxAutoFit()
	{
		var tmpFontSize = fitTextInBox_currentTextObj.style.fontSize.replace('px','')/1;
		fitTextInBox_currentTextObj.style.fontSize = tmpFontSize + 1 + 'px';
		var tmpWidth = fitTextInBox_currentTextObj.offsetWidth;
		var tmpHeight = fitTextInBox_currentTextObj.offsetHeight;
		if(tmpWidth>=fitTextInBox_currentWidth && tmpWidth<fitTextInBox_maxWidth && tmpHeight<fitTextInBox_maxHeight && tmpFontSize<300){		
			fitTextInBox_currentWidth = fitTextInBox_currentTextObj.offsetWidth;	
			fitTextInBoxAutoFit();
		}else{
			fitTextInBox_currentTextObj.style.fontSize = fitTextInBox_currentTextObj.style.fontSize.replace('px','')/1 - 1 + 'px';
		}		
	}	
	</script>

Put this into your BODY section

<div id="theBox"><span>This is the content</span></div>
<script type="text/javascript">fitTextInBox('theBox');</script>
<br>
<div id="theBox2"><span>www.dominioxpres.com</span></div>
<script type="text/javascript">fitTextInBox('theBox2');</script>
<br>
<div id="theBox3"><span>Max height of this box is set to 50px</span></div>
<script type="text/javascript">fitTextInBox('theBox3',50);</script>
 
<br>

How to use
You use this script by defining a <DIV> with an ID. This div should contain one <SPAN> tag which holds the text. Example:

<div id="theBox"><span>www.dominioxpres.com</span></div>
<script type="text/javascript">fitTextInBox('theBox');</script>



The fitTextInBox() function will autofit the text into it's parent DIV. The arguments to this function is the ID of your DIV. The second argument is optional. Use it if you need to define a maximum height. The width of the div is set in the CSS:
#theBox{
width:500px;
border:1px solid #CCC;
color: #317082;
}

View samples Here

This is all.

Thank for you donate and REP

:hehe:

 

[DeViAnThans3]

Looks like an very interesting script!
I won't use it immediatly, but I believe this can be very useful for some people, so Rep++

 

[makroz]

Thank

Hi, and thank for REP

Happy 2007 :hehe:

 

[makroz]

bump :hehe: