javascript clock resize :(/Forum (SoCoder)

Forum Home

Web Development
javascript clock resize :(

User
Message
Posted : Wednesday, 17 August 2011, 08:53 | Permalink | Mark Here
spinal
I've been trying to make a nice clock in javascript, that looks like the one on my phone. However i've fallen at the first hurdle. What I aim to do, is have the font resize to a specific width, however after finding some code to do that, it seems it doesn't play nice with my clock code
Can someone take a look?
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Clock</title> 
<style> 
 
#clock
{
	width: 320px;
	height: 240px;
	position: absolute;
	padding: 0px;
	margin: 0px;
	top: 0px;
	left: 0px;
	overflow: hidden;
}

	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	#clock_time{
		width:150px;
		border:1px solid #CCC;
		color: red;
	}
	#clock_day{
		width:150px;
		border:1px solid #CCC;
		color:red;
		text-align:center;
	}
	#clock_date{
		width:50px;
		height:50px;
		border:1px solid #CCC;
		color:red;
		text-align:center;
	}
	#clock_month{
		width:100px;
		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';
		}		
	}	


function updateClock ( )
{
  var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );

var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var month = new Array(12);
month[0]="January";
month[1]="Febuary";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
  
  // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
  //var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  //currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds;

  // Update the time display
  //document.getElementById("clock_time").firstChild.nodeValue = currentTimeString;
  document.getElementById("clock_time").textContent = currentTimeString;
  var currentDayString = weekday[d.getDay()];
  // Update the day display
  document.getElementById("clock_day").textContent = currentDayString;
  //document.getElementById("clock_day").style.fontSize = "30 px";

  
  var currentDateString = d.getDate();
  // Update the day display
  document.getElementById("clock_date").textContent = currentDateString;
  //document.getElementById("clock_date").style.fontSize = "40 px";
  
  var currentDateString = month[d.getMonth()];
  // Update the month display
  document.getElementById("clock_month").textContent = currentDateString;
  //document.getElementById("clock_month").style.fontSize = "20 px";
  
	fitTextInBox('clock_time');  
	fitTextInBox('clock_day');  
	fitTextInBox('clock_date');  
	fitTextInBox('clock_month');  
}

// -->
</script>


 
</head> 
<body onload="updateClock(); setInterval('updateClock()', 1000 )"> 
<div id="clock">
	<div id="clock_time"><span>test</span></div> 
	<div id="clock_day"><span>test</span></div> 
	<div id="clock_date"><span>test</span></div>
	<div id="clock_month"><span>test</span></div> 
</div>
</body> 
</html>
-->

-----
3DS - 1762-2660-3218