Thanks, Richard. I knew I was missing some steps. I really didn't know where to begin. Since my mission was to use the accordion and the tabs for a school project, I selected to use those tutorials. I've been trying to understand jQuery for over a week, but I don't remember there being any specific order of learning. So, thanks for the link to the proper tutorial.
I'm using IE 7 as default. I'll use FF going forward. I have Firebug installed but never used it at all. I usually use the Web Developer add on. Yeh, I've seen the document.ready function in documentation when I initially started researching jQuery. I just haven't been able to find it again, so thanks for the link on that. Regarding using the .datepicker on a div. I was just following the example by adding the input box. For some weird reason, I thought once I linked the .js files, if I started typing numbers inside the textbox, that the textbox was like "smart" and the datepicker would appear underneath, -- kinda like intellisense, in the example at: http://jqueryui.com/docs/Getting_Started. When that didn't happen, I tried a few events, onblur, onchange, onclick -- just to get the calendar widget to display--- since it didn't displayby typing input or once the page loaded. Thanks for providing the link to the datepicker tutorial. It's not really the datepicker I want to use, it just happened to be in the tutorial. I thought I could use that as an example in order to understand how to add the widgets (whether it was an accordion or the tabs) to a page. I figured they would be added basically the same way. On a different note: Is jQuery easy to learn? I'm beginning to teaching myself Javascript DOM scripting and I'm wondering whether or not I should even attempt to learn how to use libraries. I thought it would be like copying & pasting javascript code. But it seems to be a language of it's own....? Thanks again, Richard, for taking the time to give me a very detailed response. Noah On Oct 31, 2:09 am, "Richard D. Worth" <rdwo...@gmail.com> wrote: > You need to include jQuery before you include jQuery UI, as jQuery UI > depends on jQuery. So change > > <script type="text/javascript" > src="js/jquery-ui-1.7.2.custom.min.js"></script> > <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> > > to > > <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> > <script type="text/javascript" > src="js/jquery-ui-1.7.2.custom.min.js"></script> > > If you haven't already, I recommend installing Firebug. This would've shown > as an error in the Firebug Console. Something like > > jQuery is not defined > jquery-ui-1.7.2.custom.min.js()jquery-ui-1.7.2.custom.min.js (line 10) > jQuery.ui||(function(c){var i=c.fn.remov...ate;delete > this._unrotate}}})})(jQuery);jquery-ui-1.7.2.custom.min.js (line 10) > > Also, you need a document.ready function for any jQuery code in the head to > find any elements in the body. You may want to start with a jQuery (as > opposed to jQuery UI) tutorial, such as: > > http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery > > Next, do you really want an inline datepicker in a div? Because the > onclick="..." on your input suggests you want the datepicker to appear when > the input is clicked. This is the default behavior if you call .datepicker > on the input instead of on a div. See > > http://jqueryui.com/demos/datepicker/default.html > > for a full code sample you can use as a starting point. Notice in view > source on that page the .datepicker() call is inside a > > $(function() { > ... > > }); > > That's a shorthand syntax for document.ready > > $(document).ready(function() { > ... > > }); > > I got to that demo by going do jqueryui.com/demos/datepicker and then > clicking 'new window', which you can do for any of the demos. > > - Richard > > > > On Sat, Oct 31, 2009 at 4:13 AM, northernLights <chq...@yahoo.com> wrote: > > Hi all, > > > I'm new to javascript libraries in general. I am trying to use the > > use the UI widgets, but I'm not getting the results demonstrated in > > the Getting Started guide athttp://jqueryui.com/docs/Getting_Started. > > Here is my code: > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > <html xmlns="http://www.w3.org/1999/xhtml";> > > <head> > > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > > <title>Widget testing</title> > > <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" > > ></script> > > <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> > > <link type="text/css" href="css/smoothness/jquery- > > ui-1.7.2.custom.css"rel="Stylesheet" /> > > > <script language="javascript" type="text/javascript" > > > > // Datepicker > > $('#datepicker').datepicker({ > > inline: true > > }); > > </script> > > > </head> > > > <body> > > > <!-- Datepicker --> > > <h2 class="demoHeaders">Datepicker</h2> > > <div id="datepicker">date: > > <input type="text" name="date" id="date" onclick=".datepicker > > ('#datepicker');" /> > > </div> > > > </body> > > </html> > > > I know the code must be wrong and I must be missing some steps. The > > example doesn't tell you exactly what to do, it just gives you some > > code and but doesn't tell you where to put it. I understand HTML and > > CSS alright, and I understand Javascript, too, even though I'm still > > learning. > > > So, could someone tell me what I'm doing wrong and how I can get the > > widgets to work? > > > Thanks! > > > -- > > > You received this message because you are subscribed to the Google Groups > > "jQuery UI" group. > > To post to this group, send email to jquery...@googlegroups.com. > > To unsubscribe from this group, send email to > > jquery-ui+unsubscr...@googlegroups.com<jquery-ui%2bunsubscr...@googlegroups.com> > > . > > For more options, visit this group at > >http://groups.google.com/group/jquery-ui?hl=en.- Hide quoted text - > > - Show quoted text - -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery...@googlegroups.com. To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
