Solved

Need to fix issues with dhtml popup calendar

Posted on 2009-07-09
9
558 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change javascript filter code from OR logic to AND 5 41
Disabling a Faux Submit Button 4 41
center text in div with CSS3 2 31
ninja forms fields lay next to each other 1 23
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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