G
Guest
Hi all,
New to developing in VS 2005 ASP 2.0
Trying to have a easy pop calender for a button on a web page.
I keep getting a error message in IE6 that says:
Line 69
Char 3
Error: 'this.container' is null or not an object
In red I put an arrow at line 69 in the js file
I'm using Nick Baicoianu code that I got off the web.
I've in closed the code with *** where I have put the function to reference
js file?
this is how i'm using it:
In a js file I have this:
/*****************************************************************************
Copyright (C) 2006 Nick Baicoianu
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301,
USA.
*****************************************************************************/
//constructor for the main Epoch class (ENGLISH VERSION)
function Epoch(name,mode,targetelement,multiselect)
{
this.state = 0;
this.name = name;
this.curDate = new Date();
this.mode = mode;
this.selectMultiple = (multiselect == true); //'false' is not true or not
set at all
//the various calendar variables
//this.selectedDate = this.curDate;
this.selectedDates = new Array();
this.calendar;
this.calHeading;
this.calCells;
this.rows;
this.cols;
this.cells = new Array();
//The controls
this.monthSelect;
this.yearSelect;
//standard initializations
this.mousein = false;
this.calConfig();
this.setDays();
this.displayYear = this.displayYearInitial;
this.displayMonth = this.displayMonthInitial;
this.createCalendar(); //create the calendar DOM element and its children,
and their related objects
if(this.mode == 'popup' && targetelement && targetelement.type == 'text')
//if the target element has been set to be an input text box
{
this.tgt = targetelement;
this.calendar.style.position = 'absolute';
this.topOffset = this.tgt.offsetHeight; // the vertical distance (in
pixels) to display the calendar from the Top of its input element
this.leftOffset = 0; // the horizontal distance (in pixels) to
display the calendar from the Left of its input element
this.calendar.style.top = this.getTop(targetelement) + this.topOffset +
'px';
this.calendar.style.left = this.getLeft(targetelement) + this.leftOffset +
'px';
document.body.appendChild(this.calendar);
this.tgt.calendar = this;
this.tgt.onfocus = function () {this.calendar.show();}; //the calendar
will popup when the input element is focused
this.tgt.onblur = function ()
{if(!this.calendar.mousein){this.calendar.hide();}}; //the calendar will
popup when the input element is focused
}
else
{
this.container = targetelement;
this.container.appendChild(this.calendar);
this is line 69 -->> }
this.state = 2; //0: initializing, 1: redrawing, 2: finished!
this.visible ? this.show() : this.hide();
}
.......
.......
.......
In another js file I have this:
// JScript File
var bas_cal, dp_cal, ms_cal; /*must be declared in global scope*/
/*put the calendar initializations in the window's onload() method*/
window.onload = function() {
bas_cal = new
Epoch('epoch_basic','flat',document.getElementById('basic_container'));
ms_cal = new
Epoch('epoch_multi','flat',document.getElementById('multi_container'),true);
dp_cal = new
Epoch('epoch_popup','popup',document.getElementById('popup_container'));
};
and in my master page I have this:
<%@ Master Language="VB" CodeFile="MainMasterPage.master.vb"
Inherits="MainMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>MainMaster</title>
<link rel="stylesheet" type="text/css" href="javascript/epoch_styles.css"
/> <!--Epoch's styles-->
<script type="text/javascript" src="javascript/epoch_classes.js"></script>
<!--Epoch's Code-->
<script type="text/javascript"
src="javascript/my_declarations.js"></script> <!--Epoch Declarations-->
</head>
<body>
<form id="form1" runat="server">
<div style="background-color: #6f9a64">
<table border="0" cellpadding="0" cellspacing="0" style="width:
100%; height: 100%" id="MainTable" runat="server">
<tr>
<td colspan="2" style="height: 87px; background-image:
url(images/maingrad2.JPG); border-bottom-color: #006600;">
<img id="imageheader"
src="images/Helicoverpa_armigera2.jpg"
style="z-index: 100; left: 53px; width: 101px; position:
absolute; top: 25px;
height: 66px; -moz-opacity:70%;
filter:alpha(opacity=75); opacity:0.75"
alt="Helicoverpa Armigera"
/>
<div style="z-index: 101; left: 336px; width: 246px;
color: black; position: absolute;
top: 78px; height: 24px">
<span id="ctl00_Label1" style="font-weight: bold;
font-size: 1.4em; color: #404040;
font-family: Arial">PPQ Eastern Region</span>
</div>
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server" ShowStartingNode="False" />
</td>
</tr>
<tr>
<td colspan="3" style="border-right: #003300 thin solid;
border-top: #999999 thin solid;
font-weight: bold; font-size: 12px; border-bottom-color:
#006600; color: gray;
height: 9px; background-color: #aec7a9; text-align: left
" id="Celldate">
<asp:Label ID="datelbl" runat="server"
</td>
</tr>
<tr>
<td style="width: 157px; vertical-align: top; border-right:
#003300 thin solid; background-color: #ffffff; text-align: left; border-top:
#003300 thin solid; border-left: #003300 thin solid; position: relative;
height: 78%;">
<asp:Menu ID="Menu1" runat="server"
DataSourceID="SiteMapDataSource1" Width="100%" Height="90px"
style="font-weight: normal; font-size: large; font-family: Verdana;
background-color: white; padding-left:
5px; border-top-style: none;
border-right-style: none; border-left-style: none; border-bottom-style: none;
width: 100%;" Font-Names="Verdana" ForeColor="#404040" Font-Bold="True"
Font-Size="Medium" BorderColor="Black" BorderStyle="Solid">
<StaticHoverStyle BackColor="#A1BC99"
BorderColor="White" ForeColor="#404040" />
</asp:Menu>
*****************************************************
<input id="popup_container" type="text" />
<input type="button" value="pick" onclick="dp_cal.toggle();" />
****************************************************
</td>
<td style="background-color: #ffffff; vertical-align: top;
font-size: large; border-left-color: #006600; color: black; font-family:
Arial; table-layout: fixed; border-top: #003300 thin solid; height: 78%;
width: 618px; position: static;">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
<br />
<br />
<br />
</asp:contentplaceholder>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
thanks
GV
New to developing in VS 2005 ASP 2.0
Trying to have a easy pop calender for a button on a web page.
I keep getting a error message in IE6 that says:
Line 69
Char 3
Error: 'this.container' is null or not an object
In red I put an arrow at line 69 in the js file
I'm using Nick Baicoianu code that I got off the web.
I've in closed the code with *** where I have put the function to reference
js file?
this is how i'm using it:
In a js file I have this:
/*****************************************************************************
Copyright (C) 2006 Nick Baicoianu
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301,
USA.
*****************************************************************************/
//constructor for the main Epoch class (ENGLISH VERSION)
function Epoch(name,mode,targetelement,multiselect)
{
this.state = 0;
this.name = name;
this.curDate = new Date();
this.mode = mode;
this.selectMultiple = (multiselect == true); //'false' is not true or not
set at all
//the various calendar variables
//this.selectedDate = this.curDate;
this.selectedDates = new Array();
this.calendar;
this.calHeading;
this.calCells;
this.rows;
this.cols;
this.cells = new Array();
//The controls
this.monthSelect;
this.yearSelect;
//standard initializations
this.mousein = false;
this.calConfig();
this.setDays();
this.displayYear = this.displayYearInitial;
this.displayMonth = this.displayMonthInitial;
this.createCalendar(); //create the calendar DOM element and its children,
and their related objects
if(this.mode == 'popup' && targetelement && targetelement.type == 'text')
//if the target element has been set to be an input text box
{
this.tgt = targetelement;
this.calendar.style.position = 'absolute';
this.topOffset = this.tgt.offsetHeight; // the vertical distance (in
pixels) to display the calendar from the Top of its input element
this.leftOffset = 0; // the horizontal distance (in pixels) to
display the calendar from the Left of its input element
this.calendar.style.top = this.getTop(targetelement) + this.topOffset +
'px';
this.calendar.style.left = this.getLeft(targetelement) + this.leftOffset +
'px';
document.body.appendChild(this.calendar);
this.tgt.calendar = this;
this.tgt.onfocus = function () {this.calendar.show();}; //the calendar
will popup when the input element is focused
this.tgt.onblur = function ()
{if(!this.calendar.mousein){this.calendar.hide();}}; //the calendar will
popup when the input element is focused
}
else
{
this.container = targetelement;
this.container.appendChild(this.calendar);
this is line 69 -->> }
this.state = 2; //0: initializing, 1: redrawing, 2: finished!
this.visible ? this.show() : this.hide();
}
.......
.......
.......
In another js file I have this:
// JScript File
var bas_cal, dp_cal, ms_cal; /*must be declared in global scope*/
/*put the calendar initializations in the window's onload() method*/
window.onload = function() {
bas_cal = new
Epoch('epoch_basic','flat',document.getElementById('basic_container'));
ms_cal = new
Epoch('epoch_multi','flat',document.getElementById('multi_container'),true);
dp_cal = new
Epoch('epoch_popup','popup',document.getElementById('popup_container'));
};
and in my master page I have this:
<%@ Master Language="VB" CodeFile="MainMasterPage.master.vb"
Inherits="MainMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>MainMaster</title>
<link rel="stylesheet" type="text/css" href="javascript/epoch_styles.css"
/> <!--Epoch's styles-->
<script type="text/javascript" src="javascript/epoch_classes.js"></script>
<!--Epoch's Code-->
<script type="text/javascript"
src="javascript/my_declarations.js"></script> <!--Epoch Declarations-->
</head>
<body>
<form id="form1" runat="server">
<div style="background-color: #6f9a64">
<table border="0" cellpadding="0" cellspacing="0" style="width:
100%; height: 100%" id="MainTable" runat="server">
<tr>
<td colspan="2" style="height: 87px; background-image:
url(images/maingrad2.JPG); border-bottom-color: #006600;">
<img id="imageheader"
src="images/Helicoverpa_armigera2.jpg"
style="z-index: 100; left: 53px; width: 101px; position:
absolute; top: 25px;
height: 66px; -moz-opacity:70%;
filter:alpha(opacity=75); opacity:0.75"
alt="Helicoverpa Armigera"
/>
<div style="z-index: 101; left: 336px; width: 246px;
color: black; position: absolute;
top: 78px; height: 24px">
<span id="ctl00_Label1" style="font-weight: bold;
font-size: 1.4em; color: #404040;
font-family: Arial">PPQ Eastern Region</span>
</div>
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server" ShowStartingNode="False" />
</td>
</tr>
<tr>
<td colspan="3" style="border-right: #003300 thin solid;
border-top: #999999 thin solid;
font-weight: bold; font-size: 12px; border-bottom-color:
#006600; color: gray;
height: 9px; background-color: #aec7a9; text-align: left
" id="Celldate">
<asp:Label ID="datelbl" runat="server"
Width="30%"> said:
</td>
</tr>
<tr>
<td style="width: 157px; vertical-align: top; border-right:
#003300 thin solid; background-color: #ffffff; text-align: left; border-top:
#003300 thin solid; border-left: #003300 thin solid; position: relative;
height: 78%;">
<asp:Menu ID="Menu1" runat="server"
DataSourceID="SiteMapDataSource1" Width="100%" Height="90px"
style="font-weight: normal; font-size: large; font-family: Verdana;
background-color: white; padding-left:
5px; border-top-style: none;
border-right-style: none; border-left-style: none; border-bottom-style: none;
width: 100%;" Font-Names="Verdana" ForeColor="#404040" Font-Bold="True"
Font-Size="Medium" BorderColor="Black" BorderStyle="Solid">
<StaticHoverStyle BackColor="#A1BC99"
BorderColor="White" ForeColor="#404040" />
</asp:Menu>
*****************************************************
<input id="popup_container" type="text" />
<input type="button" value="pick" onclick="dp_cal.toggle();" />
****************************************************
</td>
<td style="background-color: #ffffff; vertical-align: top;
font-size: large; border-left-color: #006600; color: black; font-family:
Arial; table-layout: fixed; border-top: #003300 thin solid; height: 78%;
width: 618px; position: static;">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
<br />
<br />
<br />
</asp:contentplaceholder>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
thanks
GV