Link to home
Start Free TrialLog in
Avatar of egoselfaxis
egoselfaxis

asked on

Need to fix issues with dhtml popup calendar

I have 3 problems with my popup calendar that I need to resolve:

http://www.theseagatehotel.com/www.theseagatehotel.com/index.html

1) The background image within the popup calendar doesn't display in IE -- it instead displays as semi-transparent

2) I need to force the position where the popup calendar displays to be immediately beside the right edge of the small calendar icons (so that it doesn't overlap the select dropown boxes -- which creates a problem in IE6)

3) I need to update the javascript so that when you click on a date -- it first clears the contents of the text input field before populating it. Right now, .. as a temporary fix, .. I have it so that the text input field is cleared when you click on the small calendar icon. Ideally, though, I'd need for this to happen only when they click on an actual date within the calendar.

Could anyone here lend a hand?

Thanks,
- Yvan
Avatar of Koma666
Koma666
Flag of Germany image

1) There is no semi transparent image, I can see the background image in my IE 7

2) You can move the calendar with showAt(x, y, true) to a position or use popup("Popup_Image_Arrive", "BR/ / /Br/r") and give the image icon the ID="Popup_Image_Arrive"

3)change the onSelect method from
onSelect   : function() { this.hide() }

to something like
onSelect   : function() {
document.reservationForm.arrive.value='';
this.hide()
}
Avatar of egoselfaxis
egoselfaxis

ASKER

1) There is no semi transparent image, I can see the background image in my IE 7

I'm using IE8 -- and the gold background image that's supposed to be displayed behind the popup calendar does not display.  

2) You can move the calendar with showAt(x, y, true) to a position or use popup("Popup_Image_Arrive", "BR/ / /Br/r") and give the image icon the ID="Popup_Image_Arrive"

Ok .. but where do I place this "showat()" code?  Can you show me an example?  And is the positioning relative to the calendar icon?

3)change the onSelect method from
onSelect   : function() { this.hide() }

to something like
onSelect   : function() {
document.reservationForm.arrive.value='';
this.hide()
}

The problem with this is that there are 2 popup calendars in my form.  I certainly wouldn't want to clear the contents of the "arrive" text input field when choosing a "depart" date.  So how would I need to handle this?

- yg


1)Check your style for the background and the box, maybe in the style definition there is something wrong or missing.

2)
in the constructor use:

Calendar.setup({
        trigger    : "calendar-trigger-arrive",
        inputField : "arrive",
        align: "BR/ / /Br/r",
            onSelect   : function() { this.hide() }
    });

3) you have 2 constructors one for arrive and one for depart, why don't you just change one of them to clean the box?

Thanks for your suggestions. #2 worked for me - Thank you.
 
I've  already figured out how to fix #3 .  

I just need to figure out why my background images aren't showing in the popup calendar in IE8.

I've already ruled out any conflicts with the other non calendar-specific stylesheets.  

- yg

Ist the background also not showing up if you set
animation: false ?
I tried turning off the animation, .. but I still don't get the background images.

Here is my javascript -- I tried specifying false both with and without quotes:

<script type="text/javascript">
    Calendar.setup({      
        trigger    : "calendar-trigger-depart",
        inputField : "depart",
        align: "BR/ / /Br/r",
      animation: "false",
      onSelect   : function() { this.hide() }      
    });      
</script>
ASKER CERTIFIED SOLUTION
Avatar of Koma666
Koma666
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Moderator - please close this question and award points however you see fit.  
additional comments