jQuery UI Datepicker --everything but the "look"

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

dzash2000Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

alien109Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
irf44zCommented:
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
dzash2000Author Commented:
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
irf44zCommented:
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
dzash2000Author Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.