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,264
    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,264
    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 05: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
    Javascript, jQuery / Prototype & PHP expert ready to complete your work on Freelancer.co.uk - Hire Me at https://www.freelancer.co.uk/users/1...&action=hireme

  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