Hi,
I had some troubles with the calendar positioning (as some of you may have
had too) and came up with the following behaviour:
(standard complience mode)
(div tag and calendar code are found in your woody-calendar-styling.xsl or
cforms equivalent file)
With normal cforms stuff:
1)Mozilla related (Mozilla 1.5, and firefox 0.8) : The calendar pops up
at the position of the div tag (div tag meaning the tag that the cforms
style sheets will place at the beginning of your body tag to initialize the
calendar) relative to your browser window. What (seems to) happens is that
if placed at the top of your inner body element, it will be placed at the
top of your browser window. If the div tag
is placed somewhere near the end, you'll notice the calendar is placed at
the bottom of the window, leaving only the top of the popup visible.
2)IE 6: The calendar shows up where the div tag is placed, and it
squishes itself in the html page, leaving a blank space when disappearing
(set to hidden). That's really ugly not?
I changed the div tag that initializes the calendar with the position
attribute set to absolute:
<div style="position:fixed .....
changed to:
<div style="position:absolute....
And got:
1)Mozilla related: The calendar pops up at the exact div element
position. (as with IE in previous test, but not showing in html page itself,
instead opens as popup)
2)IE 6: The calendar pops up at the position of your input element
(where you're <a onclick=...> is situated, but that's set by the woody
stylesheets)
In my case I could manage with the latter if I placed the div tag near my
date inputs. I have my date inputs grouped together on my page, thus with
mozilla, the calendar pops up at the same place for every input element, but
hey, they are all in the same area. Notice that if your div is positioned
with the first date input and it's out of sight, you're popup is also out of
sight(need to scroll to that input)! With IE all's fine, because the
calendar pops up at the input element itself.
Another catch: I need to set the div itself thus removing it from the woody
stylesheets. If you're having two div's the first is used, not the second!
The second case seems to be the best one and may be fixed (not sure, have
not tried it yet) completely if you change you're cforms calendar style
sheet with calendar code to do the following:
1) At the code insertion in the calendar styling: Seek through your form and
when encountering a date input, use it's ID to generate the javascript
variable cforms_calendar_ID_div, use this in you're <script> tags as
parameter, and use cforms_calendar_ID as javascript variable:
var cforms_calendar_ID =
CalendarPopup('cforms_calendar_ID_div'); (this needs to be in your html
head section)
2) Then with your template that takes care of your style='date' element:
set a div element wich looks like:
<div id="cforms_calendar_ID_div" style="position:absolute;....."/>
and use the correct js variable in your onclick:
.... onClick="cforms_calendar_ID.select(....."
Here we do have the following drawbacks:
- We have codeblocks for each date input in the header
- We need to go through whole form to find the date intput's at step 1
(for inserting the code at html header)
But I think it should work as Mozilla related browsers will now popup where
their div is situated (and we did create one for each input, remember that a
copied div with same id does not work, only the first div will be handled in
that case, that's why we create a different id and variable for each date
input) and IE will just popup the calendar at it's input field, not really
making any difference with what we already got with the second testcase.
Well that's it, for now. I may test the fix if I can find some spare time.
It seems that a small difference in implementing that position attribute in
the browsers IE and Moz can really create a hell for us webbers:-)
Hope this can help some others, or at least draw some attention from others
who might have a fix for this prob,
Kind Regards,
Jan
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
