javascript clock resize :(

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|547\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> javascript clock resize :(
Wed, 17 Aug 2011, 09:53
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> --v -=-=- Check out my excellent homepage!