Menu
Hi,
I have made the following script which generated a calendar onClick and should place it where the user clicks. It works in IE but not in Firefox. Everything works apart from the positioning.
The following code is live as an example here: [URL=”http://www.vouzamo.co.uk/calendar_test2.html”]http://www.vouzamo.co.uk/calendar_test2.html
Code:
[CODE]
<html>
<head>
<script type=”text/javascript”>
var element;
var width;
var height;
var date;
function calendar(e,id)
{
height = e.clientY + parseInt(‘5’);
var offsetHeight = parseInt(e.offsetY);
height = height – offsetHeight;
width = e.clientX
var offsetWidth = parseInt(e.offsetX);
width = width – offsetWidth;
element = document.getElementById(id);
date = new Date();
if((element.value.length > 9) && (element.value.charAt(2) == ‘/’ && element.value.charAt(‘5’) == ‘/’))
{
var dateIn = element.value.split(‘/’);
if(!(isNaN(dateIn[0])) || !(isNaN(dateIn[1])) || !(isNaN(dateIn[2])))
{
if(dateIn[0].charAt(0) == ‘0’)
{
dateIn[0] = dateIn[0].charAt(1);
}
date.setDate(parseInt(dateIn[0]));
if(dateIn[1].charAt(0) == ‘0’)
{
dateIn[1] = dateIn[1].charAt(1);
}
date.setMonth(parseInt((dateIn[1] – 1)));
date.setFullYear(parseInt(dateIn[2]));
}
}
drawCalendar()
}
function drawCalendar()
{
var days = [‘S’,’M’,’T’,’W’,’T’,’F’,’S’];
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’,’May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’,’Oct’, ‘Nov’, ‘Dec’];
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var startOfMonth = new Date(date);
startOfMonth.setDate(1);
firstDay = startOfMonth.getDay();
monthLength = monthLength[date.getMonth()];
if(this.month == 1)
{
if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0)
{
monthLength = 29;
}
}
var html = ‘<table width=”160″ cellpadding=”0″ cellspacing=”0″ border=”0″ align=”center”><tr><td width=”10″ height=”20″ style=”background-image: url(‘/images/default/layout/tl.png’);”></td><td width=”140″ height=”20″ align=”center” valign=”center” style=”background-image: url(‘/images/default/layout/t.png’); font-size: 10px; font-family: tahoma; color: #000000;”>Calendar</td><td width=”10″ height=”20″ style=”background-image: url(‘/images/default/layout/tr.png’);”></td></tr><tr><td width=”10″ height=”125″ style=”background-image: url(‘/images/default/layout/l.png’);”></td><td width=”140″ height=”125″ align=”center” valign=”center” style=”background-image: url(‘/images/default/layout/c.png’);”><table width=”140″ cellpadding=”0″ cellspacing=”0″ border=”0″ align=”center”><tr><td width=”20″ height=”30″ align=”center” valign=”center”><img src=”/images/default/buttons/results_first.png” alt=”first” onClick=”previousYear();”></td><td width=”20″ height=”30″ align=”center” valign=”center”><img src=”/images/default/buttons/results_previous.png” alt=”previous” onClick=”previousMonth();”></td><td width=”60″ height=”30″ align=”center” valign=”center” style=”font-size: 10px; font-family: tahoma; color: #000000;” colspan=”3″>’ + months[date.getMonth()] + ‘ ‘ + date.getFullYear() + ‘</td><td width=”20″ height=”30″ align=”center” valign=”center”><img src=”/images/default/buttons/results_next.png” alt=”next” onClick=”nextMonth();”></td><td width=”20″ height=”30″ align=”center” valign=”center”><img src=”/images/default/buttons/results_last.png” alt=”last” onClick=”nextYear();”></td></tr><tr>’;
for(var i = 0; i <= 6; i++ )
{
html += ‘<td width=”20″ height=”20″ align=”center” valign=”center” style=”font-size: 10px; font-family: tahoma; color: #000000;”>’;
html += days[i];
html += ‘</td>’;
}
html += ‘</tr><tr>’;
var day = 1;
for (var i = 0; i < 5; i++)
{
for (var j = 0; j <= 6; j++)
{
html += ‘<td width=”20″ height=”15″ align=”center” valign=”center” style=”font-size: 10px; font-family: tahoma; color: #000000;”>’;
if (day <= monthLength && (i > 0 || j >= firstDay))
{
dayString = String(day);
if(dayString.length < 2)
{
dayString = ‘0’ + dayString;
}
monthString = String((date.getMonth() + 1));
if(monthString.length < 2)
{
monthString = ‘0’ + monthString;
}
yearString = String(date.getFullYear());
dateString = dayString + ‘/’ + monthString + ‘/’ + yearString;
html += ‘<a href=”#” onClick=”element.value=” + dateString + ”; document.getElementById(‘calendar_popup’).style.display = ‘none’;”>’ + day + ‘</a>’;
day++;
}
html += ‘</td>’;
}
if (day > monthLength)
{
break;
}
else
{
html += ‘</tr><tr>’;
}
}
html += ‘</tr></table></td><td width=”10″ height=”125″ style=”background-image: url(‘/images/default/layout/r.png’);”></td></tr><tr><td width=”10″ height=”10″ style=”background-image: url(‘/images/default/layout/bl.png’);”></td><td width=”140″ height=”10″ style=”background-image: url(‘/images/default/layout/b.png’);”></td><td width=”10″ height=”10″ style=”background-image: url(‘/images/default/layout/br.png’);”></td></tr></table>’;
document.getElementById(‘calendar_popup’).innerHTML = html;
document.getElementById(‘calendar_popup’).className = ‘show’;
document.getElementById(‘calendar_popup’).style.position = ‘absolute’;
document.getElementById(‘calendar_popup’).style.top = parseInt(height);
document.getElementById(‘calendar_popup’).style.left = parseInt(width);
document.getElementById(‘calendar_popup’).style.display = ‘block’;
}
function previousMonth()
{
var month = date.getMonth();
if(month == 0)
{
if(date.getFullYear() > 1900)
{
month = 11;
date.setMonth(month);
previousYear();
}
}
else
{
month = month – 1;
date.setMonth(month);
drawCalendar();
}
}
function previousYear()
{
var year = date.getFullYear();
if(year > 1900)
{
year = year – 1;
date.setFullYear(year);
drawCalendar();
}
}
function nextMonth()
{
var month = date.getMonth();
if(month == 11)
{
month = 0;
date.setMonth(month);
nextYear();
}
else
{
month = month + 1;
date.setMonth(month);
drawCalendar();
}
}
function nextYear()
{
var year = date.getFullYear();
year = year + 1;
date.setFullYear(year);
drawCalendar();
}
</script>
<style type=”text/css”>
.hide
{
display: none;
}
.show
{
display: block;
}
body
{
background-image: url(‘/images/default/background.jpg’);
}
a:link
{
color: #000000;
text-decoration: none;
}
a:visited
{
color: #000000;
text-decoration: none;
}
a:active
{
color: #000000;
text-decoration: underline;
}
a:hover
{
color: #000000;
text-decoration: underline;
}
font-size: 9px;
</style>
</head>
<body>
<div style=”width: 160px; height: 155px; font-size: 10px; font-family: tahoma; color: #000000; display: none;” id=”calendar_popup” class=””>
</div>
<form method=”post” action=”#”>
<input id=”calendar_field” type=”text” name=”date” value=””> <img src=”/images/default/buttons/calendar.png” alt=”calendar” onClick=”calendar(event,’calendar_field’);”>
</form>
</body>
</html>
The key part of this code is:
[CODE]
height = e.clientY + parseInt(‘5’);
var offsetHeight = parseInt(e.offsetY);
height = height – offsetHeight;
width = e.clientX
var offsetWidth = parseInt(e.offsetX);
width = width – offsetWidth;
and
[CODE]
document.getElementById(‘calendar_popup’).style.position = ‘absolute’;
document.getElementById(‘calendar_popup’).style.top = parseInt(height);
document.getElementById(‘calendar_popup’).style.left = parseInt(width);
document.getElementById(‘calendar_popup’).style.display = ‘block’;
Please help… I can’t see where the problem lies