Javascipt Question

[DaElderGeek]

Sadly, I'm and Elder Geek, not an über geek and javascript rookie. I've got a javascript problem that has me stumped. Could I persuade someone to take a look at the "datepicker/calendar" thingy source at the bottom of this page and perhaps tell me why it isn't showing? It looks fine when I view the page on localhost but not on the webserver. There's a CSS style sheet that is part of a jquery custom UI and controls the appearance of the calendar. I've provided the datepicker specific code below. Any help will be greatly appreciated.

/* Misc visuals
----------------------------------*/
.ui-datepicker { width: 220px; overflow:hidden;}
.ui-datepicker .ui-datepicker-header { position:relative; margin-bottom:8px;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 15px; height: 15px; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {}
.ui-datepicker .ui-datepicker-prev { left:2px; background:url(../images/date-prev.png) no-repeat 0 0; cursorointer;}
.ui-datepicker .ui-datepicker-next { right:2px; background:url(../images/date-next.png) no-repeat 0 0; cursorointer;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 18px; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: 11px; border-collapse: collapse; margin:0 0 .4em; border-right:1px solid rgba(153, 149, 140, .2);}
.ui-datepicker th { background:rgba(153, 149, 140, .2); height:24px; line-height:24px; font-family:Tahoma, Geneva, sans-serif; color:#fff; border-left:1px solid rgba(153, 149, 140, .2);}
.ui-datepicker td { border: 0; padding: 1px; border-left:1px solid rgba(153, 149, 140, .2); border-bottom:1px solid rgba(153, 149, 140, .2);}
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: center; text-decoration: none; color:#fff; }
.ui-datepicker td a:hover { color:#e83709;}
.ui-datepicker td span, .ui-datepicker td a:hover {

}
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

[007Julien]

Display the script in the head of the page and see the source of this demo-page about the datepicker which seems to be build to work with an input type="text" an not a div...

[DaElderGeek]

Display the script in the head of the page and see the source of this demo-page about the datepicker which seems to be build to work with an input type="text" an not a div...

Hey Julien. Thanx for answering. I did, but it doesn't seem help. The really puzzling thing is, if I browse it on localhost or even open it from the hard drive in a browser it displays perfectly.

[DaElderGeek]

of what it looks like when I open the page in any browser on my local machine.

[kete002]

Display the script in the head of the page and see the source of this demo-page about the datepicker which seems to be build to work with an input type="text" an not a div...

[007Julien]

Are all js usefull scripts on the server ? Mozilla Firefox Firebug gives two errors with your page ??? It is all the same curious to put the script in the container of the datepicker...

illegal character */ jquery....min.js http://www.pyramidbioenergy.com/news....custom.min.js (line 9, col 3)
$("#datepicker").datepicker is not a function inline: true http://www.pyramidbioenergy.com/newsite/

[maurycy]

Hello DaElder

it looks like jquery ui fails on load, might be problem with files encoding. go to: https://developers.google.com/speed/libraries/devguide find jquery and jquery ui and replace those paths with yours.

Although You might reconsider putting JS libraries at bottom of page what will improve page time load

[DaElderGeek]

That did the trick!! Thanx a bunch!