Menu
If you go to this page:
[url]http://www.mikeglaz.com/606club/event.html
and click on All Day Event some of the elements disappear. But if you unclick it they reappear except that they’re not lined up anymore. Anyone know why this is the case?
Here’s my code for event.html:
[CODE]
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Add Event</title>
<script type=”text/javascript” src=”event.js”></script>
<link href=”style/eventstyle.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<h3>Add Event</h3>
<script type=”text/javascript”>
var monthsArray = new Array(“”, “Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”);
var daysArray = new Array(0,31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
cookie_day_name = “dayCookie”;
cookie_month_name = “monthCookie”;
var day1;
var month1;
function getDay() {
if(document.cookie)
{
index = document.cookie.indexOf(cookie_day_name);
if (index != -1)
{
namestart = (document.cookie.indexOf(“=”, index) + 1);
nameend = document.cookie.indexOf(“;”, index);
if (nameend == -1)
{
nameend = document.cookie.length;
}
day1 = document.cookie.substring(namestart, nameend);
return day1;
}
}
}
function getMonth() {
if(document.cookie)
{
index = document.cookie.indexOf(cookie_month_name);
if (index != -1)
{
namestart = (document.cookie.indexOf(“=”, index) + 1);
nameend = document.cookie.indexOf(“;”, index);
if (nameend == -1)
{
nameend = document.cookie.length;
}
month1 = document.cookie.substring(namestart, nameend);
return month1;
}
}
}
function daysInMonth(month,year)
{
var dd = new Date(year, month, 0);
return dd.getDate();
}
function setDayDrop(dyear, dmonth, dday)
{
var year = dyear.options[dyear.selectedIndex].value;
var month = dmonth.options[dmonth.selectedIndex].value;
var day = dday.options[dday.selectedIndex].value;
//if (day == ‘ ‘)
//{
var days = daysInMonth(month,year);
alert(days);
//dday.options.length = 0;
//dday.options[dday.options.length] = new Option(‘ ‘,’ ‘);
for (var i = 1; i <= days; i++)
dday.options[dday.options.length] = new Option(i,i);
//}
}
function setDay()
{
var year = document.getElementById(‘fromYear’);
var month = document.getElementById(‘fromMonth’);
var day = document.getElementById(‘fromDay’);
setDayDrop(year,month,day);
}
year1 = 2011;
//day1=getDay();
//month1=getMonth();
day1 = 16;
month1 = 9;
//alert(day1);
//alert(month1);
</script>
<table border=”0″ cellpadding=”1″ cellspacing=”1″>
<tr>
<td class=”right”>Event Name</td>
<td><input type=”text” size=”30″></td>
</tr>
<tr>
<td class=”right”>Location</td>
<td><input type=”text” size=”30″></td>
</tr>
<tr>
<td> </td>
<td><input type=”checkbox” name=”allDay” onclick=”showHideTable(this, ‘fromTime’, ‘toTime’, ‘at’);”/>All Day Event</td>
</tr>
</table>
<table border=”0″ cellspacing=”1″ cellpadding=”1″>
<tr>
<td class=”right”>From</td>
<!– month –>
<td>
<select name=”fromMonth” id=”fromMonth” onchange=”setDay();”>
<script type=”text/javascript”>
for(var i=1; i<monthsArray.length; i++)
{
document.write(‘<option value=”‘ + i);
if(month1 == i)
document.write(‘” selected=”selected”>’ + monthsArray[i] + ‘</option>’);
else
document.write(‘”>’ + monthsArray[i] + ‘</option>’);
}
</script>
</select>
<select name=”fromDay” id=”fromDay”>
<script type=”text/javascript”>
for(var i=1; i<=daysArray[month1]; i++)
{
currentDay = i;
document.write(‘<option value=”‘ + currentDay);
if(day1 == i)
document.write(‘” selected=”selected”>’ + currentDay + ‘</option>’);
else
document.write(‘”>’ + currentDay + ‘</option>’);
}
</script>
</select>
<!– year –>
<select name=”fromYear” id=”fromYear” onchange=”setDay();”>
<script type=”text/javascript” >
for(var i=2011; i<=2016; i++)
{
document.write(‘<option value=”‘ + i);
if(year1 == i)
document.write(‘” selected=”selected”>’ + i + ‘</option>’);
else
document.write(‘”>’ + i + ‘</option>’);
}
</script>
</select>
</td>
<!– td>
< table border=”0″ cellpadding=”1″ cellspacing=”1″ id=”fromTime”>
<tr–>
<td id=”at” class=”disappear”>at</td>
<td id=”fromTime” class=”disappear”>
<select name=”fromHour” id=”fromHour” >
<script type=”text/javascript” >
for(var i=1; i<=12; i++)
{
document.write(‘<option value=”‘ + i);
if(i == 8)
document.write(‘” selected=”selected”>’ + i + ‘</option>’);
else
document.write(‘”>’ + i + ‘</option>’);
}
</script>
</select>
<!– minute –>
<select name=”fromMinute” id=”fromMinute”>
<script type=”text/javascript” >
for(var i=0; i<60; i+=15)
{
document.write(‘<option value=”‘ + i);
if(i == 0)
document.write(‘” selected=”selected”>’ + ’00’ + ‘</option>’);
else
document.write(‘”>’ + i + ‘</option>’);
}
</script>
</select>
<!– am/pm –>
<select name=”fromAmPm” id=”fromAmPm”>
<option value=”am” selected=”selected”>am</option>
<option value=”pm”>pm</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing=”1″ cellpadding=”1″ id=”toTime”>
<tr>
<td class=”right”>To</td>
<td class=”disappear”>
<!– month –>
<select name=”toMonth” id=”toMonth” onchange=”setDay();”>
<script type=”text/javascript” >
for(var i=1; i<monthsArray.length; i++)
{
document.write(‘<option value=”‘ + i);
if(month1 == i)
document.write(‘” selected=”selected”>’ + monthsArray[i] + ‘</option>’);
else
document.write(‘”>’ + monthsArray[i] + ‘</option>’);
}
</script>
</select>
<select name=”toDay” id=”toDay”>
<script type=”text/javascript” >
for(var i=1; i<=daysArray[month1]; i++)
{
currentDay = i;
document.write(‘<option value=”‘ + currentDay);
if(day1 == i)
document.write(‘” selected=”selected”>’ + currentDay + ‘</option>’);
else
document.write(‘”>’ + currentDay + ‘</option>’);
}
</script>
</select>
<!– year –>
<select name=”toYear” id=”toYear” onchange=”setDay();”>
<script type=”text/javascript” >
for(var i=2011; i<=2016; i++)
{
document.write(‘<option value=”‘ + i);
if(year1 == i)
document.write(‘” selected=”selected”>’ + i + ‘</option>’);
else
document.write(‘”>’ + i + ‘</option>’);
}
</script>
</select>
</td>
<!– hour –>
<td>at</td>
<td >
<select name=”toHour” id=”toHour”>
<script type=”text/javascript” >
for(var i=1; i<=12; i++)
{
document.write(‘<option value=”‘ + i);
if(i == 9)
document.write(‘” selected=”selected”>’ + i + ‘</option>’);
else
document.write(‘”>’ + i + ‘</option>’);
}
</script>
</select>
<!– minute –>
<select name=”toMinute” id=”toMinute” >
<script type=”text/javascript” >
for(var i=0; i<60; i+=15)
{
document.write(‘<option value=”‘ + i);
if(i == 0)
document.write(‘” selected=”selected”>’ + ’00’ + ‘</option>’);
else
document.write(‘”>’ + i + ‘</option>’);
}
</script>
</select>
<!– am/pm –>
<select name=”fromAmPm” id=”fromAmPm” >
<option value=”am” selected=”selected”>am</option>
<option value=”pm”>pm</option>
</select>
</td>
</tr>
</table>
<table border=”0″ cellpadding=”1″ cellspacing=”1″>
<tr>
<td class=”right”>Repeat</td>
<td>
<select name=”repeat”>
<option value=”never” seleted=”selected”>Never</option>
<option value=”daily”>Every Day</option>
<option value=”weekly”>Every Week</option>
<option value=”monthly”>Every Month</option>
<option value=”quarterly”>Every Quarter</option>
<option value=”yearly”>Every Year</option>
<option value=”custom”>Custom</option>
</select>
</td>
</tr>
</table>
</body>
</html>
My CSS:
[CODE]
.right {text-align: right;
width: 100px;}
.disappear td {display: inline-block;}
and some external JavaScript:
[CODE]
function showHideTable(box, id1, id2, id3)
{
var elm1 = document.getElementById(id1);
var elm2 = document.getElementById(id2);
var elm3 = document.getElementById(id3);
elm1.style.display = box.checked ? “none”:”inline-block”;
elm2.style.display = box.checked ? “none”:”inline-block”;
elm3.style.display = box.checked ? “none”:”inline-block”;
}