Won't work... Not sure why.

[jamesm]

Here's a link:

http://www.mablio.com/testcase.html

The first input displays in the upper right corner in firefox 2 on linux.

I really wish it would work because your tooltips are great and from what I could tell from the examples, the calendar would be perfect for my site.

Thanks!

[olly]

I haven't seen this before but I'd be lying if I said that I had tested the calendar extensively.

Offhand though, I would have to say this is due to the DOCTYPE declaration at the top of the page - I see you are in strict parsing mode. Would you be able to remove this declaration and test it quickly. If this is the case I will make an update to get around this, I remember BoxOver had similar problems in its early days.

[jamesm]

Made it XHTML transitional, no luck...
Made it html trans no luck either.

I'll leave it in html transitional for you.

[plingscore_jonas]

Hi!

To solve your problem you need to do two changes in the calendar.js-file

First change the Z-index.
In the part in the calendar.js-file where the calendar-table is created, add the following to the style-attribute: z-index:100;

Second thing, give it the correct position:
(I dont want to change too much of the original code, so here´s some additions that will make this fix complete)
a.) In the lcs()-function, replace the following code:

getObj('fc').style.left=Left(ielem);
	getObj('fc').style.top=Top(ielem)+ielem.offsetHeight;

with this code:

pos = getPosition(ielem);
        getObj('fc').style.left = pos['x']+'px';
	getObj('fc').style.top = (pos['y']+20)+'px';

b.) Add the following function to the calendar.js-file

function getPosition(pObject) 
{
	var x = y = 0;
	if (pObject.offsetParent) 
	{
		x = pObject.offsetLeft
		y = pObject.offsetTop
		while (pObject = pObject.offsetParent) 
		{
			x += pObject.offsetLeft
			y += pObject.offsetTop
		}
	}
	tArray = new Array();
	tArray['x'] = x;
	tArray['y'] = y;
	return tArray;
}

And we are done!

// Jonas

[jamesm]

thanks for the patch!! ..but it won't work in IE6 :-/

[plingscore_jonas]

Originally Posted by jamesm

thanks for the patch!! ..but it won't work in IE6 :-/

Thats strange, it works for me both in IE6 and FF.

If you test it on a local machine on IE, note that you have to get rid of that nasty yellow field on top of the screen to make it execute the script!

// Jonas

[jamesm]

hmm. the script seems to be working fine, but it's being displayed below the select boxes.

[plingscore_jonas]

Well thats a known bug in IE. I stumbled across a solution to that problem once, and its a strange one. Try the following

In the section where the calendar-table is generated, do the following changes:
1) Change the id of the table from "fc" to "fc2"

2) Add the following code BEFORE the table:

document.write('<div id="fc" style="position:absolute;width:162px;height:180px;display:none;z-index:100">');
document.write('<iframe frameborder="0" style="position:absolute;width:162px;height:180px;"></iframe>');
document.write('<div style="position:relative;width:162px;height:180px;">');

3) Add the following code AFTER the for-loop and after the table is ended:

document.write('</div></div>');

This is a trick to overlap SELECT-boxes in IE. I guess you have to tweak it a bit to make it look good.

// Jonas

[jamesm]

:-/ that wouldn't work in firefox..

[bradhaydon]

I have added z-index:100; style directly to the table, which seems to work fine in Firefox2 and Safari.

Just replace

document.write('<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellpadding=2>');
document.write('<tr><td style="cursor:pointer" onclick="csubm()"><img src="arrowleftmonth.gif"></td><td colspan=5 id="mns" align="center" style="font:bold 13px Arial"></td><td align="right" style="cursor:pointer" onclick="caddm()"><img src="arrowrightmonth.gif"></td></tr>');
document.write('<tr><td align=center style="background:#ABABAB;font:12px Arial">S</td><td align=center style="background:#ABABAB;font:12px Arial">M</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">W</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">F</td><td align=center style="background:#ABABAB;font:12px Arial">S</td></tr>');

with

document.write('<table id="fc" style="z-index:100;position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #333;display:none" cellpadding=2>');
document.write('<tr><td style="cursor:pointer" onclick="csubm()"><img src="arrowleftmonth.gif"></td><td colspan=5 id="mns" align="center" style="font:bold 13px Arial"></td><td align="right" style="cursor:pointer" onclick="caddm()"><img src="arrowrightmonth.gif"></td></tr>');
document.write('<tr><td align=center style="background:#ABABAB;font:12px Arial">S</td><td align=center style="background:#ABABAB;font:12px Arial">M</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">W</td><td align=center style="background:#ABABAB;font:12px Arial">T</td><td align=center style="background:#ABABAB;font:12px Arial">F</td><td align=center style="background:#ABABAB;font:12px Arial">S</td></tr>');