KevinM1 Posted April 6, 2007 Share Posted April 6, 2007 I currently have a calender script in which the dates of the month and whatever appointments it has are displayed using innerHTML. Unfortunately, this method makes it so my external CSS file can't 'see' that info, so no styling can be applied to it. Would changing innerHTML to a createTextNode/appendChild combo make it so my CSS file could style the calender's information? Or would I have to go another route? Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted April 9, 2007 Author Share Posted April 9, 2007 Unfortunately, createElement, createTextNode, and appendChild didn't fix my problem. Here's a more detailed rundown of what's happening and what I want. I have a calender in which appointments can be entered and the color of the day chosen depending on what's entered into the script. It's not an elegant solution, but it works well enough. Each calender month is a table, which is hard-coded right into the HTML. The script populates these tables with the appropriate dates, apppointments, and background colors. Unfortunately, my appointment text causes the calender's table cells to stretch, both horizontally and vertically, making the days without any appointments look squished. I've tried setting the cells' width, height, and overflow properties in the hopes of getting a more uniform shape, but nothing has worked. Is it impossible to keep the calendars looking uniform, given that they're populated by JavaScript? Or am I going about it the wrong way? Below is my code. HTML: <table class="calendar" id="January" cellspacing="0" cellpadding="5" style="display: none;"> <tr> <th colspan="7">January</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="February" cellspacing="0" cellpadding="5" style="display: none;"> <tr> <th colspan="7">February</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="March" cellspacing="0" cellpadding="5" style="display: none;"> <tr> <th colspan="7">March</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="April" cellspacing="0" style="display: auto;"> <tr> <th colspan="7">April</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="May" cellspacing="0" cellpadding="5" style="display: auto;"> <tr> <th colspan="7">May</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="June" cellspacing="0" cellpadding="5" style="display: auto;"> <tr> <th colspan="7">June</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="July" cellspacing="0" cellpadding="5" style="display: none;"> <tr> <th colspan="7">July</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="August" cellspacing="0" cellpadding="5" style="display: none;"> <tr> <th colspan="7">August</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="September" cellspacing="0" cellpadding="5" style="display: none;"> <tr> <th colspan="7">September</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="October" cellspacing="0" cellpadding="5" style="display: none;"> <tr> <th colspan="7">October</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="November" cellspacing="0" cellpadding="5" style="display: none;"> <tr> <th colspan="7">November</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> <table class="calendar" id="December" cellspacing="0" cellpadding="5" style="display: none;"> <tr> <th colspan="7">December</th> </tr> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th> </tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> </table> CSS: .calendar{ margin: 0 0 2px 0; width: 525px; } .calendar th{ padding: 5px; width: 76px; border: 1px solid #000000; text-align: center; } .calendar td{ border: 1px solid #000000; padding: 5px; width: 76px; height: 76px; overflow: auto; text-align: right; } JavaScript: var W3CDOM = (document.createElement && document.getElementsByTagName); var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var numDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //Number of days in each month...be sure to make February equal to 29 on leap years var firstDays = [2, 5, 5, 1, 3, 6, 1, 4, 7, 2, 5, 7]; //1 = Sunday, 2 = Monday, etc. var apps = [ [16, 4, 16, 4, "AMITY I 8:30 - 11:30", "amity"], [16, 4, 16, 4, "Word II 6:00 - 9:00", "amity"], [17, 4, 17, 4, "Excel II 9:00 - 4:00", "microsoft"], [17, 4, 17, 4, "PowerPoint II 6:00 - 9:00", "microsoft"], [18, 4, 18, 4, "PowerPoint I 9:00 - 4:00", "microsoft"], [18, 4, 18, 4, "Word II 6:00 - 9:00", "microsoft"], [19, 4, 19, 4, "AMITY II 8:30 - 11:30", "amity"], [19, 4, 19, 4, "PowerPoint II 9:00 - 4:00", "amity"], [20, 4, 20, 4, "Access III 9:00 - 4:00", "microsoft"], [21, 4, 21, 4, "Into to Vista 9:00 - 11:00", "microsoft"], [23, 4, 23, 4, "Excel II 6:00 - 9:00", "microsoft"], [24, 4, 24, 4, "Access II 6:00 - 9:00", "microsoft"], [25, 4, 25, 4, "Excell II 6:00 - 9:00", "microsoft"], [26, 4, 26, 4, "BOSC 9:00 - 4:00", "bosc"], [26, 4, 26, 4, "Access II 6:00 - 9:00", "bosc"], [28, 4, 28, 4, "Intro to Vista 9:00 - 11:00", "microsoft"], [30, 4, 30, 4, "AMITY I 8:30 - 11:30", "amity"], [30, 4, 30, 4, "Word I 9:00 - 4:00", "amity"], [30, 4, 30, 4, "Word I 6:00 - 9:00", "microsoft"], [1, 5, 1, 5, "Excel III 9:00 - 4:00", "microsoft"], [1, 5, 1, 5, "PowerPoint I 6:00 - 9:00", "microsoft"], [2, 5, 2, 5, "Powerpoint II 9:00 - 4:00", "microsoft"], [2, 5, 2, 5, "Word I 6:00 - 9:00", "microsoft"], [3, 5, 3, 5, "AMITY II 8:30 - 11:30", "amity"], [3, 5, 3, 5, "BOSC 9:00 - 4:00", "amity"], [3, 5, 3, 5, "PowerPoint I 6:00 - 9:00", "amity"], [4, 5, 4, 5, "Access I 9:00 - 4:00", "microsoft"], [5, 5, 5, 5, "Intro to Vista 9:00 - 11:00", "microsoft"], [7, 5, 7, 5, "Word II 9:00 - 4:00", "microsoft"], [7, 5, 7, 5, "Excel I 6:00 - 9:00", "microsoft"], [8, 5, 8, 5, "Excel I 9:00 - 4:00", "microsoft"], [8, 5, 8, 5, "Access I 6:00 - 9:00", "microsoft"], [9, 5, 9, 5, "PowerPoint III 9:00 - 4:00", "microsoft"], [9, 5, 9, 5, "Excel I 6:00 - 9:00", "microsoft"], [10, 5, 10, 5, "BOSC 9:00 - 4:00", "bosc"], [10, 5, 10, 5, "Access I 6:00 - 9:00", "bosc"], [11, 5, 11, 5, "Access II 9:00 - 4:00", "microsoft"], [12, 5, 12, 5, "Intro to Vista 9:00 - 11:00", "microsoft"], [14, 5, 14, 5, "Word III 9:00 - 4:00", "microsoft"], [14, 5, 14, 5, "Word II 6:00 - 9:00", "microsoft"], [15, 5, 15, 5, "Excel II 9:00 - 4:00", "microsoft"], [15, 5, 15, 5, "PowerPoint II 6:00 - 9:00", "microsoft"], [16, 5, 16, 5, "PowerPoint I 9:00 - 4:00", "microsoft"], [16, 5, 16, 5, "Word II 6:00 - 9:00", "microsoft"], [17, 5, 17, 5, "BOSC 9:00 - 4:00", "bosc"], [17, 5, 17, 5, "PowerPoint II 6:00 - 9:00", "bosc"], [18, 5, 18, 5, "Access III 9:00 - 4:00", "microsoft"], [19, 5, 19, 5, "Intro to Vista 9:00 - 11:00", "microsoft"], [21, 5, 21, 5, "Excel II 6:00 - 9:00", "microsoft"], [22, 5, 22, 5, "Access II 6:00 - 9:00", "microsoft"], [23, 5, 23, 5, "Excel II 6:00 - 9:00", "microsoft"], [24, 5, 24, 5, "BOSC 9:00 - 4:00", "bosc"], [24, 5, 24, 5, "Access II 6:00 - 9:00", "bosc"], [26, 5, 26, 5, "Intro to Vista 9:00 - 11:00", "microsoft"], [28, 5, 28, 5, "Word I 9:00 - 4:00", "microsoft"], [28, 5, 28, 5, "Word I 6:00 - 9:00", "microsoft"], [29, 5, 29, 5, "Excel III 9:00 - 4:00", "microsoft"], [29, 5, 29, 5, "PowerPoint I 6:00 - 9:00", "microsoft"], [30, 5, 30, 5, "PowerPoint II 9:00 - 4:00", "microsoft"], [30, 5, 30, 5, "Word I 6:00 - 9:00", "microsoft"], [31, 5, 31, 5, "BOSC 9:00 - 4:00", "bosc"], [31, 5, 31, 5, "PowerPoint I 6:00 - 9:00", "bosc"], [1, 6, 1, 6, "Access I 9:00 - 4:00", "microsoft"], [2, 6, 2, 6, "Intro to Vista 9:00 - 11:00", "microsoft"], [4, 6, 4, 6, "Word II 9:00 - 4:00", "microsoft"], [4, 6, 4, 6, "Excel I 6:00 - 9:00", "microsoft"], [5, 6, 5, 6, "Excel I 9:00 - 4:00", "microsoft"], [5, 6, 5, 6, "Access I 6:00 - 9:00", "microsoft"], [6, 6, 6, 6, "PowerPoint III 9:00 - 4:00", "microsoft"], [6, 6, 6, 6, "Excel I 6:00 - 9:00", "microsoft"], [7, 6, 7, 6, "BOSC 9:00 - 4:00", "bosc"], [7, 6, 7, 6, "Access I 6:00 - 9:00", "bosc"], [8, 6, 8, 6, "Access II 9:00 - 4:00", "microsoft"], [9, 6, 9, 6, "Intro to Vista 9:00 - 11:00", "microsoft"], [11, 6, 11, 6, "Word III 9:00 - 4:00", "microsoft"], [11, 6, 11, 6, "Word II 6:00 - 9:00", "microsoft"], [12, 6, 12, 6, "Excel II 9:00 - 4:00", "microsoft"], [12, 6, 12, 6, "PowerPoint II 6:00 - 9:00", "microsoft"], [13, 6, 13, 6, "PowerPoint I 9:00 - 4:00", "microsoft"], [13, 6, 13, 6, "Word II 6:00 - 9:00", "microsoft"], [14, 6, 14, 6, "BOSC 9:00 - 4:00", "bosc"], [14, 6, 14, 6, "PowerPoint II 6:00 - 9:00", "bosc"], [15, 6, 15, 6, "Access III 9:00 - 4:00", "microsoft"], [16, 6, 16, 6, "Intro to Vista 9:00 - 11:00", "microsoft"], [18, 6, 18, 6, "Excel II 6:00 - 9:00", "microsoft"], [19, 6, 19, 6, "Access II 6:00 - 9:00", "microsoft"], [20, 6, 20, 6, "Excel II 6:00 - 9:00", "microsoft"], [21, 6, 21, 6, "BOSC 9:00 - 4:00", "bosc"], [21, 6, 21, 6, "Access II 6:00 - 9:00", "bosc"], [23, 6, 23, 6, "Intro to Vista 9:00 - 11:00", "microsoft"], [25, 6, 25, 6, "Word I 9:00 - 4:00", "microsoft"], [25, 6, 25, 6, "Word I 6:00 - 9:00", "microsoft"], [26, 6, 26, 6, "Excel III 9:00 - 4:00", "microsoft"], [26, 6, 26, 6, "PowerPoint I 6:00 - 9:00", "microsoft"], [27, 6, 27, 6, "PowerPoint II 9:00 - 4:00", "microsoft"], [27, 6, 27, 6, "Word I 6:00 - 9:00", "microsoft"], [28, 6, 28, 6, "BOSC 9:00 - 4:00", "bosc"], [28, 6, 28, 6, "PowerPoint I 6:00 - 9:00", "bosc"], [29, 6, 29, 6, "Access I 9:00 - 4:00", "microsoft"], [30, 6, 30, 6, "Intro to Vista 9:00 - 11:00", "microsoft"] ]; // Format is: Appt start day, appt start month, appt end day, appt end month, appt description, appt category function init(){ if(!W3CDOM) return; printCalendar(); } function printCalendar(){ for(var i = 0; i < 12; i++){ printMonth(i); } } function printMonth(monthNum){ var month = document.getElementById(months[monthNum]); var days = month.getElementsByTagName('td'); var date = 1; var start = firstDays[monthNum] - 1; var dayText; var dayInfo; var tmpText; for(var i = 0; i < days.length; i++){ //To make the bottom row look pretty if its cells are empty days[i].innerHTML = " "; } for (i = start; date <= numDays[monthNum]; i++){ dayInfo = checkDate(monthNum, date); days[i].style.backgroundColor = dayInfo[0]; days[i].style.color = dayInfo[1]; days[i].setAttribute("title", dayInfo[2]); var span = document.createElement('span'); dayText = date++; span.style.fontWeight = 'bold'; span.appendChild(document.createTextNode(dayText)); days[i].appendChild(span); days[i].appendChild(document.createElement('br')); days[i].appendChild(document.createElement('br')); for(var j = 0; j < dayInfo[2].length; j++){ tmpText = dayInfo[2][j]; days[i].appendChild(document.createTextNode(tmpText)); days[i].appendChild(document.createElement('br')); days[i].appendChild(document.createElement('br')); } } } function checkDate(monthNum, dayNum){ var output = new Array(); var desc = new Array(); var bgColor = ""; var color = ""; var index = 0; for(var i = 0; i < apps.length; i++){ if((monthNum + 1) >= apps[i][1] && (monthNum + 1) <= apps[i][3]){ //if we're in the range of the appointment's months if(apps[i][1] == apps[i][3]){ // if the appointment takes place in just one month if(dayNum >= apps[i][0] && dayNum <= apps[i][2]){ // setting the range of dates in that month desc[index++] = apps[i][4]; bgColor = apps[i][5]; } } else if((monthNum + 1) == apps[i][1]){ //if we're in the first month of an appointment that goes over the end of the start month if(dayNum >= apps[i][0]){ // if the date is greater or equal to the starting date of the appointment desc[index++] = apps[i][4]; bgColor = apps[i][5]; } } else if((monthNum + 1) == apps[i][3]){ // if we're in the last month of an appointment that goes over the end of the start month if(dayNum <= apps[i][2]){ // if the date is less than or equal to the ending date of the appointment desc[index++] = apps[i][4]; bgColor = apps[i][5]; } } else{ // if we're somewhere in between a multi-month appointment desc[index++] = apps[i][4]; bgColor = apps[i][5]; } } } if(bgColor == "microsoft"){ bgColor = "#284DBF"; color = "#FFFFFF"; } else if(bgColor == "amity"){ bgColor = "#D10000"; color = "#FFFFFF"; } else if(bgColor == "bosc"){ bgColor = "#000000"; color = "#FFFFFF"; } else{ bgColor = "white"; } output[0] = bgColor; output[1] = color; output[2] = desc; return output; } window.onload = init; Quote Link to comment Share on other sites More sharing options...
jminkler Posted April 10, 2007 Share Posted April 10, 2007 Why are you creating child elements if the tables are already created? Set the <td>'s Id's to their date, and use innerHTML. then create a properly formed multidimensional array broken down by each year, month and day then you can loop through the month you want like .. var $year = $get_this_year; var $mon = $get_this_mon; for (var $x =0; $x < $my_dates[$year][$mon].length; $x++) { if($x < 10) $x = '0'+$x; $('div_day_'+$year+$mon+$x).innerHTML = $my_dates[$year][$mon][$x]; } Of course you would want to setup your calendar to use a database, hooking the page up to Ajax and returning JSON/XML objects to populate the js mulitdimensional array. Set the widths of the cells, as well as overflow:scroll Try setting the table cellpadding and cellspacing to 0 as well. If all else fails look at other calendar applications on the web and inspect the page using Firebug addon for firefox. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted April 10, 2007 Author Share Posted April 10, 2007 Why are you creating child elements if the tables are already created? Set the <td>'s Id's to their date, and use innerHTML. then create a properly formed multidimensional array broken down by each year, month and day then you can loop through the month you want like .. var $year = $get_this_year; var $mon = $get_this_mon; for (var $x =0; $x < $my_dates[$year][$mon].length; $x++) { if($x < 10) $x = '0'+$x; $('div_day_'+$year+$mon+$x).innerHTML = $my_dates[$year][$mon][$x]; } Of course you would want to setup your calendar to use a database, hooking the page up to Ajax and returning JSON/XML objects to populate the js mulitdimensional array. Set the widths of the cells, as well as overflow:scroll Try setting the table cellpadding and cellspacing to 0 as well. If all else fails look at other calendar applications on the web and inspect the page using Firebug addon for firefox. What you're describing is 1) way out of my league. I really don't want to deal with a three or four dimensional array if I can help it, let alone all of the AJAX stuff that I don't know how to do. 2) is too complicated/involved for what I'm trying to do...I'm not designing an intranet calender application, just something quick and dirty that works. 3) not related to my problem in any event. I'm merely trying to get each table's <td> to be rendered in a consistant size throughout. If you actually looked at my CSS, you'd see that I do set an explicit width and height for my <td> elements (76px x 76px), as well as set their overflow to auto. It doesn't work. I'm thinking that the problem is that the CSS cannot see the text within the cells, since they're filled after the page is rendered via my JS script, so it doesn't know to apply the correct overflow value. I originally had everything written to the calender via innerHTML, but that left me with cells of different sizes. I switched to the W3C-approved createWhatever/appendChild method, as you can see above, and that still didn't fix my cell size issue. Short of switching to a server-side option (which would be difficult as my host doesn't have PHP, and I'm pretty damned rusty when it comes to Perl or C++), is there anything - within reason - that I can do to enforce consistantly sized cells, or will I just have to make do with what I have? Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted April 26, 2007 Author Share Posted April 26, 2007 Bumpbump. Can anyone else suggest something non-AJAX for me to do with this issue? Am I right in thinking that the table cells stretch because the HTML is rendered before the JS is applied, thereby causing the HTML (and attached CSS) to not recognize that the info written in the cells by the JS exists? Calling Dr. Fenway... Quote Link to comment Share on other sites More sharing options...
fenway Posted April 26, 2007 Share Posted April 26, 2007 Hmmm.... I write out HTML with CSS all the time from JS, and I've never encountered this issue, but maybe it's a runtime / race-condition. Let me mull that over for a bit. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted April 30, 2007 Author Share Posted April 30, 2007 Hmmm.... I write out HTML with CSS all the time from JS, and I've never encountered this issue, but maybe it's a runtime / race-condition. Let me mull that over for a bit. How would I test for this? Maybe use setTimeout? Quote Link to comment Share on other sites More sharing options...
fenway Posted April 30, 2007 Share Posted April 30, 2007 Sorry about the delay, I've been busy with other things... as long as the CSS styles are loaded, there shouldn't really be any issue here. Try and design a very simple "helllo world" type script to test out the combinations. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 1, 2007 Author Share Posted May 1, 2007 Sorry about the delay, I've been busy with other things... as long as the CSS styles are loaded, there shouldn't really be any issue here. Try and design a very simple "helllo world" type script to test out the combinations. I just want to make sure we're on the same page, as something in your previous post just caught my eye: Hmmm.... I write out HTML with CSS all the time from JS My CSS isn't written to the page from the JS script. It's merely an external CSS file linked to the HTML. Only the calendar dates, info, and background colors are written from the JS. Would this make a difference? Quote Link to comment Share on other sites More sharing options...
fenway Posted May 1, 2007 Share Posted May 1, 2007 I just meant that I document.write() HTML code with CSS markup, not that the CSS style itself is being declared via JS. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 2, 2007 Author Share Posted May 2, 2007 Well, I just tried a very simple version of my calendar, and I'm still getting table cells that stretch. My code is below. HTML: <html> <head> <title>Test</title> <script type="text/javascript" src="test.js"></script> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <table> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> </table> </body> </html> My JavaScript: var W3CDOM = (document.createElement && document.getElementsByTagName); function init(){ if(!W3CDOM) return; printCalendar(); } function printCalendar(){ var days = document.getElementsByTagName('td'); for(var i = 0; i < days.length; i++){ days[i].innerHTML = "I'm making a long ass paragraph to see if the table cells expand, so blah blah blah blah"; if(i / 2 == 0){ days[i].style.backgroundColor = "black"; days[i].style.color = "white"; } else if(i / 3 == 1){ days[i].style.backgroundColor = "red"; days[i].style.color = "white"; } else if(i / 5 == 1){ days[i].style.backgroundColor = "blue"; days[i].style.color = "white"; } else{ days[i].style.backgroundColor = "green"; days[i].style.color = "white"; } } } window.onload = init; My CSS: td { width: 76px; height: 76px; overflow: auto; } I'm wondering if not using XHTML (or, at least, not declaring my document as XHTML) is messing it up. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 3, 2007 Author Share Posted May 3, 2007 It has to be a runtime conflict. I changed the markup of my test case to XHTML and got the same result. And both IE and FF give me the same sizing problem. Quote Link to comment Share on other sites More sharing options...
fenway Posted May 3, 2007 Share Posted May 3, 2007 FF doesn't give me any problems on Linux. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 4, 2007 Author Share Posted May 4, 2007 FF doesn't give me any problems on Linux. Hmm..could it be a Windows XP thing, then? Because both IE7 and FF on my comp give me the same problem. With the simple example above, the widths of the cells are all approximately 76px, but their heights most definitely are not. I'll post a screenshot when I get to work. Quote Link to comment Share on other sites More sharing options...
obsidian Posted May 4, 2007 Share Posted May 4, 2007 Running WinXP here, and what you posted works fine in both FF and IE6. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 4, 2007 Author Share Posted May 4, 2007 Running WinXP here, and what you posted works fine in both FF and IE6. Here are my screenshots of the simple examples: http://www.nightslyr.com/ieexample.jpg http://www.nightslyr.com/ffexample.jpg As you can see, the cell height stretches to fit the text, which is what I don't want. The widths are uniform because the text is the same, but when the text is different, that becomes messed up too: http://www.nightslyr.com/ieliveversion.jpg http://www.nightslyr.com/ffliveversion.jpg I use the same td { width: 76px; height: 76px; overflow: auto; } CSS for the live version. EDIT: my OS chrome is just something one of my coworkers gave me...I am running XP. Quote Link to comment Share on other sites More sharing options...
fenway Posted May 4, 2007 Share Posted May 4, 2007 Actually, on second thought, you can't "enforce" height on a TD like that, especially with overflow:auto! Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 4, 2007 Author Share Posted May 4, 2007 Actually, on second thought, you can't "enforce" height on a TD like that, especially with overflow:auto! Is there anyway to enforce height, then? Maybe min/max-height? Quote Link to comment Share on other sites More sharing options...
fenway Posted May 5, 2007 Share Posted May 5, 2007 You can set overflows to none, but IE doesn't like min/max height. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 8, 2007 Author Share Posted May 8, 2007 You can set overflows to none, but IE doesn't like min/max height. Well, I just tried every flavor of overflow, and the sizing problems remain. I don't think I'll ever be able to get evenly sized date cells with my current approach. Quote Link to comment Share on other sites More sharing options...
fenway Posted May 9, 2007 Share Posted May 9, 2007 You can try and put DIVs inside the TDs. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 10, 2007 Author Share Posted May 10, 2007 You can try and put DIVs inside the TDs. I can't believe that I didn't think of that! I've tried doing it that way twice, once on my test script, once on my live script. It works great for my test script, but the height is still an issue with my live script. This is odd, as I'm using more or less the same CSS in both cases. As always, I'm going to post my code. Please bear with me as some of it is large. Test JavaScript: var W3CDOM = (document.createElement && document.getElementsByTagName); function init(){ if(!W3CDOM) return; printCalendar(); } function printCalendar(){ var days = document.getElementsByTagName('td'); for(var i = 0; i < days.length; i++){ days[i].innerHTML = "<div>I'm making a long ass paragraph to see if the table cells expand, so blah blah blah blah</div>"; if(i / 2 == 0){ days[i].style.backgroundColor = "black"; days[i].style.color = "white"; } else if(i / 3 == 1){ days[i].style.backgroundColor = "red"; days[i].style.color = "white"; } else if(i / 5 == 1){ days[i].style.backgroundColor = "blue"; days[i].style.color = "white"; } else{ days[i].style.backgroundColor = "green"; days[i].style.color = "white"; } } } window.onload = init; Test HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> <script type="text/javascript" src="test.js"></script> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <table> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> </table> </body> </html> Test CSS: td div{ width: 80px; height: 80px; overflow: auto; } Live JavaScript: var W3CDOM = (document.createElement && document.getElementsByTagName); var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var numDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //Number of days in each month...be sure to make February equal to 29 on leap years var firstDays = [2, 5, 5, 1, 3, 6, 1, 4, 7, 2, 5, 7]; //1 = Sunday, 2 = Monday, etc. var apps = [ [16, 4, 16, 4, "AMITY I 9:00 - 11:30", "amity"], [16, 4, 16, 4, "Word II 5:30 - 8:30", "amity"], [17, 4, 17, 4, "Excel II 9:00 - 4:00", "microsoft"], [17, 4, 17, 4, "PowerPoint II 5:30 - 8:30", "microsoft"], [18, 4, 18, 4, "PowerPoint I 9:00 - 4:00", "microsoft"], [18, 4, 18, 4, "Word II 5:30 - 8:30", "microsoft"], [19, 4, 19, 4, "AMITY II 9:00 - 11:30", "amity"], [19, 4, 19, 4, "PowerPoint II 9:00 - 4:00", "amity"], [20, 4, 20, 4, "Access III 9:00 - 4:00", "microsoft"], [21, 4, 21, 4, "Into to Vista I 9:00 - 11:00", "microsoft"], [23, 4, 23, 4, "Excel II 5:30 - 8:30", "microsoft"], [24, 4, 24, 4, "Access II 5:30 - 8:30", "microsoft"], [25, 4, 25, 4, "Excell II 5:30 - 8:30", "microsoft"], [26, 4, 26, 4, "BOSC 9:00 - 4:00", "bosc"], [26, 4, 26, 4, "Access II 5:30 - 8:30", "bosc"], [28, 4, 28, 4, "Intro to Vista I 9:00 - 11:00", "microsoft"], [30, 4, 30, 4, "AMITY I 9:00 - 11:30", "amity"], [30, 4, 30, 4, "Word I 9:00 - 4:00", "amity"], [30, 4, 30, 4, "Word I 5:30 - 8:30", "microsoft"], [1, 5, 1, 5, "Excel III 9:00 - 4:00", "microsoft"], [1, 5, 1, 5, "PowerPoint I 5:30 - 8:30", "microsoft"], [2, 5, 2, 5, "Powerpoint II 9:00 - 4:00", "microsoft"], [2, 5, 2, 5, "Word I 5:30 - 8:30", "microsoft"], [3, 5, 3, 5, "AMITY II 9:00 - 11:30", "amity"], [3, 5, 3, 5, "BOSC 9:00 - 4:00", "amity"], [3, 5, 3, 5, "PowerPoint I 5:30 - 8:30", "amity"], [4, 5, 4, 5, "Access I 9:00 - 4:00", "microsoft"], [5, 5, 5, 5, "Intro to Vista II 9:00 - 11:00", "microsoft"], [7, 5, 7, 5, "Word II 9:00 - 4:00", "microsoft"], [7, 5, 7, 5, "Excel I 5:30 - 8:30", "microsoft"], [8, 5, 8, 5, "Excel I 9:00 - 4:00", "microsoft"], [8, 5, 8, 5, "Access I 5:30 - 8:30", "microsoft"], [9, 5, 9, 5, "PowerPoint III 9:00 - 4:00", "microsoft"], [9, 5, 9, 5, "Excel I 5:30 - 8:30", "microsoft"], [10, 5, 10, 5, "BOSC 9:00 - 4:00", "bosc"], [10, 5, 10, 5, "Access I 5:30 - 8:30", "bosc"], [11, 5, 11, 5, "Access II 9:00 - 4:00", "microsoft"], [12, 5, 12, 5, "Intro to Vista II 9:00 - 11:00", "microsoft"], [14, 5, 14, 5, "Word III 9:00 - 4:00", "microsoft"], [14, 5, 14, 5, "Word II 5:30 - 8:30", "microsoft"], [15, 5, 15, 5, "Excel II 9:00 - 4:00", "microsoft"], [15, 5, 15, 5, "PowerPoint II 5:30 - 8:30", "microsoft"], [16, 5, 16, 5, "PowerPoint I 9:00 - 4:00", "microsoft"], [16, 5, 16, 5, "Word II 5:30 - 8:30", "microsoft"], [17, 5, 17, 5, "BOSC 9:00 - 4:00", "bosc"], [17, 5, 17, 5, "PowerPoint II 5:30 - 8:30", "bosc"], [18, 5, 18, 5, "Access III 9:00 - 4:00", "microsoft"], [19, 5, 19, 5, "Intro to Vista I 9:00 - 11:00", "microsoft"], [21, 5, 21, 5, "Excel II 5:30 - 8:30", "microsoft"], [22, 5, 22, 5, "Access II 5:30 - 8:30", "microsoft"], [23, 5, 23, 5, "Excel II 5:30 - 8:30", "microsoft"], [24, 5, 24, 5, "BOSC 9:00 - 4:00", "bosc"], [24, 5, 24, 5, "Access II 5:30 - 8:30", "bosc"], [26, 5, 26, 5, "Intro to Vista I 9:00 - 11:00", "microsoft"], [28, 5, 28, 5, "Word I 9:00 - 4:00", "microsoft"], [28, 5, 28, 5, "Word I 5:30 - 8:30", "microsoft"], [29, 5, 29, 5, "Excel III 9:00 - 4:00", "microsoft"], [29, 5, 29, 5, "PowerPoint I 5:30 - 8:30", "microsoft"], [30, 5, 30, 5, "PowerPoint II 9:00 - 4:00", "microsoft"], [30, 5, 30, 5, "Word I 5:30 - 8:30", "microsoft"], [31, 5, 31, 5, "BOSC 9:00 - 4:00", "bosc"], [31, 5, 31, 5, "PowerPoint I 6:00 - 9:00", "bosc"], [1, 6, 1, 6, "Access I 9:00 - 4:00", "microsoft"], [2, 6, 2, 6, "Intro to Vista II 9:00 - 11:00", "microsoft"], [4, 6, 4, 6, "Word II 9:00 - 4:00", "microsoft"], [4, 6, 4, 6, "Excel I 5:30 - 8:30", "microsoft"], [5, 6, 5, 6, "Excel I 9:00 - 4:00", "microsoft"], [5, 6, 5, 6, "Access I 5:30 - 8:30", "microsoft"], [6, 6, 6, 6, "PowerPoint III 9:00 - 4:00", "microsoft"], [6, 6, 6, 6, "Excel I 5:30 - 8:30", "microsoft"], [7, 6, 7, 6, "BOSC 9:00 - 4:00", "bosc"], [7, 6, 7, 6, "Access I 5:30 - 8:30", "bosc"], [8, 6, 8, 6, "Access II 9:00 - 4:00", "microsoft"], [9, 6, 9, 6, "Intro to Vista II 9:00 - 11:00", "microsoft"], [11, 6, 11, 6, "AMITY I 9:00 - 11:30", "amity"], [11, 6, 11, 6, "Word III 9:00 - 4:00", "amity"], [11, 6, 11, 6, "Word II 5:30 - 8:30", "amity"], [11, 6, 11, 6, "AMITY I 6:00 - 8:30", "amity"], [12, 6, 12, 6, "Excel II 9:00 - 4:00", "microsoft"], [12, 6, 12, 6, "PowerPoint II 5:30 - 8:30", "microsoft"], [13, 6, 13, 6, "PowerPoint I 9:00 - 4:00", "microsoft"], [13, 6, 13, 6, "Word II 5:30 - 8:30", "microsoft"], [14, 6, 14, 6, "AMITY II 9:00 - 11:30", "amity"], [14, 6, 14, 6, "BOSC 9:00 - 4:00", "amity"], [14, 6, 14, 6, "PowerPoint II 5:30 - 8:30", "amity"], [14, 6, 14, 6, "AMITY II 6:00 - 8:30", "amity"], [15, 6, 15, 6, "Access III 9:00 - 4:00", "microsoft"], [16, 6, 16, 6, "Intro to Vista I 9:00 - 11:00", "microsoft"], [18, 6, 18, 6, "AMITY I 9:00 - 11:30", "amity"], [18, 6, 18, 6, "Excel II 5:30 - 8:30", "amity"], [18, 6, 18, 6, "AMITY I 6:00 - 8:30", "amity"], [19, 6, 19, 6, "Access II 5:30 - 8:30", "microsoft"], [20, 6, 20, 6, "Excel II 5:30 - 8:30", "microsoft"], [21, 6, 21, 6, "AMITY II 9:00 - 11:30", "amity"], [21, 6, 21, 6, "BOSC 9:00 - 4:00", "amity"], [21, 6, 21, 6, "Access II 5:30 - 8:30", "amity"], [21, 6, 21, 6, "AMITY II 6:00 - 8:30", "amity"], [23, 6, 23, 6, "Intro to Vista I 9:00 - 11:00", "microsoft"], [25, 6, 25, 6, "Word I 9:00 - 4:00", "microsoft"], [25, 6, 25, 6, "Word I 5:30 - 8:30", "microsoft"], [26, 6, 26, 6, "Excel III 9:00 - 4:00", "microsoft"], [26, 6, 26, 6, "PowerPoint I 5:30 - 8:30", "microsoft"], [27, 6, 27, 6, "PowerPoint II 9:00 - 4:00", "microsoft"], [27, 6, 27, 6, "Word I 5:30 - 8:30", "microsoft"], [28, 6, 28, 6, "BOSC 9:00 - 4:00", "bosc"], [28, 6, 28, 6, "PowerPoint I 5:30 - 8:30", "bosc"], [29, 6, 29, 6, "Access I 9:00 - 4:00", "microsoft"], [30, 6, 30, 6, "Intro to Vista II 9:00 - 11:00", "microsoft"] ]; // Format is: Appt start day, appt start month, appt end day, appt end month, appt description, appt category function init(){ if(!W3CDOM) return; printCalendar(); } function printCalendar(){ for(var i = 0; i < 12; i++){ printMonth(i); } } function printMonth(monthNum){ var month = document.getElementById(months[monthNum]); var days = month.getElementsByTagName('td'); var date = 1; var start = firstDays[monthNum] - 1; var dayText; var dayInfo; var tmpText; for(var i = 0; i < days.length; i++){ //To make the bottom row look pretty if its cells are empty days[i].innerHTML = " "; } for (i = start; date <= numDays[monthNum]; i++){ dayInfo = checkDate(monthNum, date); days[i].style.backgroundColor = dayInfo[0]; days[i].style.color = dayInfo[1]; days[i].setAttribute("title", dayInfo[2]); days[i].innerHTML = '<span style="font-weight: bold;">' + date++ + '<br /><br /><div>'; for(var j = 0; j < dayInfo[2].length; j++){ tmpText = dayInfo[2][j]; days[i].innerHTML += tmpText + '<br /><br />'; } days[i].innerHTML += '</div>'; } } function checkDate(monthNum, dayNum){ var output = new Array(); var desc = new Array(); var bgColor = ""; var color = ""; var index = 0; for(var i = 0; i < apps.length; i++){ if((monthNum + 1) >= apps[i][1] && (monthNum + 1) <= apps[i][3]){ //if we're in the range of the appointment's months if(apps[i][1] == apps[i][3]){ // if the appointment takes place in just one month if(dayNum >= apps[i][0] && dayNum <= apps[i][2]){ // setting the range of dates in that month desc[index++] = apps[i][4]; bgColor = apps[i][5]; } } else if((monthNum + 1) == apps[i][1]){ //if we're in the first month of an appointment that goes over the end of the start month if(dayNum >= apps[i][0]){ // if the date is greater or equal to the starting date of the appointment desc[index++] = apps[i][4]; bgColor = apps[i][5]; } } else if((monthNum + 1) == apps[i][3]){ // if we're in the last month of an appointment that goes over the end of the start month if(dayNum <= apps[i][2]){ // if the date is less than or equal to the ending date of the appointment desc[index++] = apps[i][4]; bgColor = apps[i][5]; } } else{ // if we're somewhere in between a multi-month appointment desc[index++] = apps[i][4]; bgColor = apps[i][5]; } } } if(bgColor == "microsoft"){ bgColor = "#284DBF"; color = "#FFFFFF"; } else if(bgColor == "amity"){ bgColor = "#D10000"; color = "#FFFFFF"; } else if(bgColor == "bosc"){ bgColor = "#000000"; color = "#FFFFFF"; } else{ bgColor = "white"; } output[0] = bgColor; output[1] = color; output[2] = desc; return output; } window.onload = init; Live CSS: .calendar{ margin: 0 0 2px 0; width: 525px; } .calendar th{ padding: 5px; border: 1px solid #000000; text-align: center; } .calendar td{ border: 1px solid #000000; } .calendar td div{ width: 80px; height: 80px; overflow: auto; } #legend{ float: right; padding: 5px; border: 1px solid #000000; } #red{ background-color: #ff0000; height: 15px; width: 15px; float: left; } #green{ background-color: green; height: 15px; width: 15px; float: left; } #gray{ background-color: gray; height: 15px; width: 15px; float: left; } #yellow{ background-color: yellow; height: 15px; width: 15px; float: left; } #purple{ background-color: purple; height: 15px; width: 15px; float: left; } p .divs{ clear: left; margin: 0; padding: 5px 0 0 0; } I didn't post the live HTML as it's identical to the test HTML. Also, there's some stuff at the end of the live CSS that I don't use, but left in the file (the stuff from #legend to the end of the file). Quote Link to comment Share on other sites More sharing options...
fenway Posted May 10, 2007 Share Posted May 10, 2007 Test vs live issues are often race conditions... but again, why overflow:auto? Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 10, 2007 Author Share Posted May 10, 2007 Test vs live issues are often race conditions... but again, why overflow:auto? Well, since I'm making the calendar days so small, so as to fit in with the live site's layout, their contents will always be bigger than what the layout can handle. It's my understanding that, since I don't want both a horizontal and vertical scroll bar for each date, setting the overflow to auto will only give me a vertical scroll bar while keeping the dates' sizes static, which is what I want. Quote Link to comment Share on other sites More sharing options...
fenway Posted May 10, 2007 Share Posted May 10, 2007 Right, but I thought the whole issue was that you wanted the sizing to be exact?!? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.