How to bring Calendar control from back to front using javascript

[gan]

hi dear all
please help me
im using the calander control from a form
just i paste here the problem,
the problem is when i click the calander button the calander is opening at the same time backside form component also visible in front side how can i rectfiy this one? i changed the z-index also but no use?

[HTML]<TABLE border="1" bordercolor="#DDDFE7" bgcolor="#565656"cellPadding=0 cellSpacing="1" id=calendar style="DISPLAY:none; POSITION:absolute; z-index:4;" >
<TBODY>
<TR>

<TD Align="left" colspan="7">
<!-- Month combo box -->
<SELECT id=month class=sbox onchange=newCalendar()>
<SCRIPT language=JavaScript>
// Output months into the document.
// Select current month.
for (var intLoop = 0; intLoop < months.length; intLoop++)
document.write("<OPTION " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);
</SCRIPT>
</SELECT>

<!-- Year combo box -->
<SELECT id=year class=sbox onchange=newCalendar()>
<SCRIPT language=JavaScript>
// Output years into the document.
// Select current year.
for (var intLoop = 1900; intLoop < 2028; intLoop++)
document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);
</SCRIPT>
</SELECT>


</TD>
</TR>
<TR class=days align="center" >
<!-- Generate column for each day. -->
<SCRIPT language=JavaScript>
// Output days.
for (var intLoop = 0; intLoop < days.length; intLoop++)
document.write("<TD>" + days[intLoop] + "</TD>");
</SCRIPT>
</TR>


<TBODY class=dates id=dayList onclick="getDate('')" Align=center >
<!-- Generate grid for individual days. -->
<SCRIPT language=JavaScript>
for (var intWeeks = 0; intWeeks < 6; intWeeks++)
{
document.write("<TR>");
for (var intDays = 0; intDays < days.length; intDays++)
document.write("<TD></TD>");
document.write("</TR>");
}
</SCRIPT>

<!-- Generate today day. --></TBODY>
<TBODY>
<TR >
<TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD>
<TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN class="content"><B>
Hide</B></SPAN></A></TD>
</TR>
</TBODY>
</table>[/HTML]

[dmjpro]

Welcome to TSDN.

Don't do double Post.
And try to follow the Post Guidelines while you do Post.

Kind regards,
Dmjpro.

[gan]

Welcome to TSDN.

Don't do double Post.
And try to follow the Post Guidelines while you do Post.

Kind regards,
Dmjpro.

ok thanks for ur advise

[dmjpro]

ok thanks for ur advise

You better to use DIV instead of table here.
Try this one and see what happens.

Kind regards,
Dmjpro.

[acoder]

Removed the duplicate thread. If you needed to add more information as you did in this thread, just post in the same thread or edit the original post (you can edit up to an hour after posting).

I've added CODE tags for you. Please use them when posting code. See the Reply Guidelines on the right next time you reply. Thanks!

MODERATOR

[acoder]

hi dear all
please help me
im using the calander control from a form
just i paste here the problem,
the problem is when i click the calander button the calander is opening at the same time backside form component also visible in front side how can i rectfiy this one? i changed the z-index also but no use?

There is nothing wrong with your code (in terms of bringing the calendar forward). You're experiencing a bug in IE6. Check in Firefox, Opera or other browsers and you won't see this. In IE6, select dropdowns appear in front of floating divs. There are two possible solutions:

1. Hide the select elements when you display the calendar. This is the easy solution.
2. And the more elegant solution: use the iframe shimming technique. Google it!

[gan]

You better to use DIV instead of table here.
Try this one and see what happens.

Kind regards,
Dmjpro.

thanks for your suggestion
but here im using only table na

[dmjpro]

thanks for your suggestion
but here im using only table na

Is this a Chat Window?
You are using Code Words.

Kind regards,
Dmjpro.

[gan]

There is nothing wrong with your code (in terms of bringing the calendar forward). You're experiencing a bug in IE6. Check in Firefox, Opera or other browsers and you won't see this. In IE6, select dropdowns appear in front of floating divs. There are two possible solutions:

1. Hide the select elements when you display the calendar. This is the easy solution.
2. And the more elegant solution: use the iframe shimming technique. Google it!

Thanks for your kind help,can you give me the modified cods please?
otherwise tell me how can i Hide the elements when i display the calendar. please give me that solution

thanks

[acoder]

Thanks for your kind help,can you give me the modified cods please?
otherwise tell me how can i Hide the elements when i display the calendar. please give me that solution

In the code which displays the calendar, access the select elements which overlap and set the visibility property to "hidden", e.g.

var selObj = document.getElementById("selObjID");
selObj.style.visibility = "hidden";

Don't forget to display the select elements again when you hide the calendar (set the visibility property to "visible").

[gan]

In the code which displays the calendar, access the select elements which overlap and set the visibility property to "hidden", e.g.

var selObj = document.getElementById("selObjID");
selObj.style.visibility = "hidden";

Don't forget to display the select elements again when you hide the calendar (set the visibility property to "visible").

Thank you so much i got the solution with your gideline
thanks lots

bye

[acoder]

Glad you got it working. Post again anytime if you need help.