www.webdeveloper.com
Results 1 to 8 of 8

Thread: Javascipt Question

  1. #1
    Join Date
    Jun 2012
    Location
    Aurora, Co
    Posts
    4

    Javascipt Question

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

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    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...

  3. #3
    Join Date
    Jun 2012
    Location
    Aurora, Co
    Posts
    4
    Quote Originally Posted by 007Julien View Post
    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.

  4. #4
    Join Date
    Jun 2012
    Location
    Aurora, Co
    Posts
    4

    I've attached a screen shot . . . .

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

  5. #5
    Join Date
    Jun 2012
    Posts
    2
    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...

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    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/
    Last edited by 007Julien; 06-27-2012 at 06:14 AM.

  7. #7
    Join Date
    Jan 2011
    Location
    United Kingdom, London
    Posts
    117
    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

  8. #8
    Join Date
    Jun 2012
    Location
    Aurora, Co
    Posts
    4

    Hooray!!

    That did the trick!! Thanx a bunch!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles