Solved

Need to fix issues with dhtml popup calendar

Posted on 2009-07-09
9
549 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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)

786 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