Solved

Need to fix issues with dhtml popup calendar

Posted on 2009-07-09
9
547 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:egoselfaxis
  • 5
  • 4
9 Comments
 
LVL 5

Expert Comment

by:Koma666
ID: 24815161
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
 

Author Comment

by:egoselfaxis
ID: 24816527
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
 
LVL 5

Expert Comment

by:Koma666
ID: 24821476
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
 

Author Comment

by:egoselfaxis
ID: 24823465
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 5

Expert Comment

by:Koma666
ID: 24823648
Ist the background also not showing up if you set
animation: false ?
0
 

Author Comment

by:egoselfaxis
ID: 24823735
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
 
LVL 5

Accepted Solution

by:
Koma666 earned 500 total points
ID: 24824144
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
 

Author Comment

by:egoselfaxis
ID: 25340184
Moderator - please close this question and award points however you see fit.  
0
 

Author Closing Comment

by:egoselfaxis
ID: 31601545
additional comments
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now