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
egoselfaxisAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Koma666Connect With a Mentor Commented:
Try to add the definition for the background to the very end of the css:

.DynarchCalendar {
  background: url("gold.jpg") no-repeat 50% 30px;
}

And play around with it.
like:
.DynarchCalendar {
  background: transparent url("gold.jpg") no-repeat 50% 30px;
}
or
.DynarchCalendar {
  background: transparent url("gold.jpg");
}

or

.DynarchCalendar {
  background: url("gold.jpg");
}

I can't tell you why IE8 is not showing it, but changing the css should help you.
0
 
Koma666Commented:
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()
}
0
 
egoselfaxisAuthor Commented:
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


0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Koma666Commented:
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?

0
 
egoselfaxisAuthor Commented:
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

0
 
Koma666Commented:
Ist the background also not showing up if you set
animation: false ?
0
 
egoselfaxisAuthor Commented:
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>
0
 
egoselfaxisAuthor Commented:
Moderator - please close this question and award points however you see fit.  
0
 
egoselfaxisAuthor Commented:
additional comments
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.