Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

jQuery UI Datepicker --everything but the "look"

Posted on 2009-05-05
5
Medium Priority
?
512 Views
Last Modified: 2012-06-27
Hi - I'm new to javascript and started to play with jQuery by accident.   Mind you - I am not writing Javascript.  Only re-using what is already available in the Jquery framework (that's a new word for me :-).

I'm trying to understand and use a UI Datepicker (see link below) .  I tried the code provided and the basic Datepicker appeared.  But I need to have every element, all the scripts and css files,  on my own hard drive to use this in a demo I'm building.  I won't be able to link to jquery.com for anything.

After downloading all of the scripts and css files which the demo used,including all the ones it linked by "@import"  I would get the "data" of the DP but none of the appearance.  How do I get the graphics to appear?  What am I missing?  

TIA your jQuery expertise.
d2


// this is where I started...
http://docs.jquery.com/UI/Datepicker
 
 
// I downloaded all of these and what they @imported ...
http://jqueryui.com/latest/themes/base/ui.all.css
http://jqueryui.com/latest/jquery-1.3.2.js
http://jqueryui.com/latest/ui/ui.core.js
http://jqueryui.com/latest/ui/ui.datepicker.js
 
@import "ui.base.css"
@import "ui.theme.css"
@import url("ui.core.css");
@import url("ui.datepicker.css");

Open in new window

0
Comment
Question by:dzash2000
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 12

Accepted Solution

by:
alien109 earned 1000 total points
ID: 24309484
I would suggest downloading the jquery library from here:
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

Then download the jqueryUI library:
http://jqueryui.com/download

(select just the components you need);

And then create your own theme and download here:
http://jqueryui.com/themeroller/

This will ensure that you have all of the correct files (and will give you the ability to customize)
0
 
LVL 2

Expert Comment

by:irf44z
ID: 24309630
You are actually missing the images linked from the CSS files (these are relative URLs, which doesn't exist on your machine). Basically, you'll need to download the UI library (as per the above comment), make sure that you selected 'UI Core', extract the contents and import  the following CSS in your HTML:

<link type="text/css" href="./css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />

The CSS file name might be different depending on how/what version of JQuery you downloaded.
0
 

Author Comment

by:dzash2000
ID: 24310331
Thanks both.  This is interesting.
I'm concerned about something - possibly without reason.
On this project I'm building I've made use of "animated collapsible DIVs" which use jQuery 1.2.

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm


In the downloads you suggested in your posts I've downloaded jQuery 1.7.1 AND - I didn't see any mention of "animated collapsible DIVs" in the UI descriptions.

Will these jQuery libraries conflict??  Will I be sacrificing the collapsible DIV if I use the DatePicker??

Please set me straight.

d2
0
 
LVL 2

Assisted Solution

by:irf44z
irf44z earned 1000 total points
ID: 24313379
No, there won't be any conflicts. Your download from jqueryui.com actually includes JQuery JS (1.3.2) in addition to the UI Components (Ver 1.7.1).

The animation functionality that you are talking about doesn't have any dependencies on the UI components. It just requires JQuery JS.

If you extract the ZIP file you downloaded from jqueryui.com, you'll find the following files we are interested in:
  \css\smoothness\jquery-ui-1.7.1.custom.css
  \js\jquery-1.3.2.min.js
  \js\jquery-ui-1.7.1.custom.min.js

Import these 3 files in your HTML. Rest assured that it will take care of your Calendar as well as animated DIVs.

  <link type="text/css" href="./css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="./js/jquery-ui-1.7.1.custom.min.js"></script>
0
 

Author Closing Comment

by:dzash2000
ID: 31578241
Thanks to alien109 for the comprehensive list of links and thanks to irf44z for a quick and thorough reply to my follow up concern.

d2
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

636 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