[SOLVED] Javascript and Calendar Issue

[ainoy31]

Hello-

 

I am using the DHTML calendar widget for my popup calendar.  Since IE is not displaying the popup calendar properly on the page, I had to calculate the (x,y) locations of my image tag.  This will tell IE the exact location for the popup calendar.  Here is the javascript to determine (x,y) locations.  This is working.

 

<script language="JavaScript" type="text/javascript">
<!--
function getPos()
{
var elementToFind = document.getElementById('cancelTrigger');
var elementLocs = findPos(elementToFind);
var result = document.getElementById('location').value = ('[' + elementLocs + ']');

}

function findPos(obj)
{
var curleft = curtop = 0;
if(obj.offsetParent)
{
curleft = obj.offsetLeft;
curtop = obj.offsetTop;

while(obj = obj.offsetParent)
{
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft, curtop];
}

window.onload = getPos;

//-->
</script>

 

 

Here is the form code that initiates the popup calendar.

<tr>
<td colspan="*" valign="bottom">
<input type="text" name="future_cancel_date" value="" id="futureCancelDate" readonly="1"> 
<img src="/images-system/ico_date.gif" border="0" id="cancelTrigger" style="cursor: pointer;" title="Date selector">
 <a href="#" onclick="javascript:document.cancelform.future_cancel_date.value=''"><?= $langContent[$section]['clear_cancellation_date'] ?></a>
<input type="hidden" id="location"> 
</td>
</tr>

 

Here is the javascript for the DHTML calendar setup.

<script type="text/javascript">
<!--
Calendar.setup({
inputField     :    "futureCancelDate",    	// id of the input field
ifFormat       :    "<?= str_replace(array('Y', 'y', 'm', 'd'), array('%Y', '%y', '%m', '%d'), $locale->getDateFormat()) ?>",     
button         :    "cancelTrigger",  	// trigger for the calendar (button ID)
singleClick    :    true,
position       :    document.getElementById('location').value
});
//-->	
</script>

 

The hidden input field with ID of location contains the (x, y) locations.  So, for my current page it returns the locations of [152, 722].  My problem it in the position property of the calendar.setup().  If I hard code the return locations as

position   :   [152,722]

the popup calendar displays where it needs to be.  If I keep it the as

position       :    document.getElementById('location').value

 

Hope I explained it thorough enough and easy to follow.  Much appreciation.

[ainoy31]

Sorry.  Forgot to finish my last sentence.  If I keep it as position  : document.getElementById('location').value, the popup calendar does not display properly. 

[lemmin]

It isn't working because you are turning an array into a string. Why don't you just do this?

position       :    findPos(document.getElementById('cancelTrigger'))

[ainoy31]

Yeah.  I did not realize that I was turning it into a string rather an array.  Here is my solution:

 

function getPos()
{
var locArray = new Array();
var elementToFind = document.getElementById('cancelTrigger');
var elementLocs = findPos(elementToFind);
return elementLocs;
}

 

Then in the Calendar.setup(), I did this:

Calendar.setup({
inputField     :    "futureCancelDate",    	// id of the input field
ifFormat       :    "<?= str_replace(array('Y', 'y', 'm', 'd'), array('%Y', '%y', '%m', '%d'), $locale->getDateFormat()) ?>",
button         :    "cancelTrigger",  	// trigger for the calendar (button ID)
singleClick    :    true,
position       :    getPos() //get the [x,y] locations for the img tag so the popup calendar will display properly in IE
});

 

Later.