[ydn-javascript] Calendar widget example displaying with no background/images

Hello,
I'm new to YUI trying to use the advanced calendar sample that has the cale=
ndar widget in a dialog container that displays in an overlay over my exist=
ing page's content.
Firebug shows no errors and things seem to run OK, but the rendering isn't =
quite right, i.e. the calendar background (off-white) isn't displaying and =
I can see through to my site's native background color.
Saying it another way, it's like the calendar background is transparent. I =
also don't see any navigation arrows or buttons on the calendar.
What I do see are the actual numbers that represent the days of the month o=
verlaying my page as well as the calendar header (month name/year), but no =
calendar background color or calendar buttons/images.
I'm using YUI 2.7.0 and the links to the Yahoo CDN from the config builder =
helper:



=

I've added 'class=3D"yui-skin-sam"' to a top level div in my page that's a =
grandparent/ancestor of the button that shows the pop-up calendar.
It appears that the sample code from that example dynamically inserts a div=
with an id of "cal" somewhere to handle the actual calendar rendering.
The only other thing I knew to do from looking at some other posts was to c=
heck the CSS for the "calnavleft" and "calnavright" image paths and did see=
something odd:




Previous Month (March 2009)
April 2009
Next Month (May 2009)




...


Notice the "#" URI's for the nav classes.
Sorry for the long post.
I'd really appreciate any suggestions or hints.
Thanks, -Eric

Hi,
Try adding the "yui-skin-sam" class to the BODY element. If you're renderin=
g the Dialog container to document.body, then adding the yui-skin-sam class=
to an ancestor DIV of the button which pops up the Calendar won't apply th=
e skin correctly (which appears to be what's happening), since the Dialog/C=
alendar are not actually rendered as children of that DIV.
Regards,
Satyen
________________________________________
From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com=
] On Behalf Of ericlukather
Sent: Tuesday, April 21, 2009 6:38 PM
To: ydn-javascript@yahoogroups.com
Subject: [ydn-javascript] Calendar widget example displaying with no backgr=
ound/images

Hello,
I'm new to YUI trying to use the advanced calendar sample that has the cale=
ndar widget in a dialog container that displays in an overlay over my exist=
ing page's content.
Firebug shows no errors and things seem to run OK, but the rendering isn't =
quite right, i.e. the calendar background (off-white) isn't displaying and =
I can see through to my site's native background color.
Saying it another way, it's like the calendar background is transparent. I =
also don't see any navigation arrows or buttons on the calendar.
What I do see are the actual numbers that represent the days of the month o=
verlaying my page as well as the calendar header (month name/year), but no =
calendar background color or calendar buttons/images.
I'm using YUI 2.7.0 and the links to the Yahoo CDN from the config builder =
helper:



=

I've added 'class=3D"yui-skin-sam"' to a top level div in my page that's a =
grandparent/ancestor of the button that shows the pop-up calendar.
It appears that the sample code from that example dynamically inserts a div=
with an id of "cal" somewhere to handle the actual calendar rendering.
The only other thing I knew to do from looking at some other posts was to c=
heck the CSS for the "calnavleft" and "calnavright" image paths and did see=
something odd:




Previous Month (March 2009)
April 2009
Next Month (May 2009)




...


Notice the "#" URI's for the nav classes.
Sorry for the long post.
I'd really appreciate any suggestions or hints.
Thanks, -Eric

Yes, thanks! I can now see the calendar background and buttons.
However, with IE (Firefox 3.0.9 is OK), the buttons are shifted to the righ=
t of the calendar; in what appears to be a second "column" next to the cale=
ndar.
It's difficult to describe and I have a .jpg, but don't know how to attach =
it to a message.
Any ideas?
Thanks again, -Nathan
--- In ydn-javascript@yahoogroups.com, "Satyen Desai" wrote:
>
> Hi,
>=20
> Try adding the "yui-skin-sam" class to the BODY element. If you're render=
ing the Dialog container to document.body, then adding the yui-skin-sam cla=
ss to an ancestor DIV of the button which pops up the Calendar won't apply =
the skin correctly (which appears to be what's happening), since the Dialog=
/Calendar are not actually rendered as children of that DIV.
>=20
> Regards,
> Satyen