jquery / jqueryui.com

jQuery UI web site content

jqueryui.com

Building and Deploying

To build and deploy your changes for previewing in a jquery-wp-content instance, follow the workflow instructions from our documentation on contributing to jQuery Foundation web sites.

jqueryui.com's Issues

Retire DownloadBuilder-hijack-way of building-demos

To save bytes and time, currently we're hijacking the jquery-ui checkout from download.jqueryui.com to copy demo files when building the demo.

Soon, Download Builder will handle multiple versions and the chance the get garbage (different checkout than expected) from its tmp dir is higher.

We may need to handle it by our own or find a consistent alternative.

Autocomplete ComboBox demo mistake

http://jqueryui.com/autocomplete/#combobox

Dropdown button doesn't work properly.

Firefox Console Errors:

ReferenceError: input is not defined
[Break On This Error]

wasOpen = input.autocomplete( "widget" ).is( ":visible" );

combobox.html (line 90)

ReferenceError: input is not defined
[Break On This Error]

input.focus();

Reason

Mousedown and Click events do not have the variable 'input' defined.

Fix

Amend the function as follows _createShowAllButton:

            .mousedown(function() {
                wasOpen = $('.ui-combobox-input').autocomplete( "widget" ).is( ":visible" );
            })
            .click(function() {
                $('.ui-combobox-input').focus();

                // Close if already visible
                if ( wasOpen ) {
                    return;
                }

                // Pass empty string as value to search for, displaying all results
                $('.ui-combobox-input').autocomplete( "search", "" );
            });

Bug in code of Slider Scrollbar example

Looking at the source code, at the function sizeScrollbar()

Line 63:
handleHelper.width( "" ).width( scrollbar.width() - handleSize );

as far as I can tell, it should be scrollPane.width() as opposed to scrollbar.width().
Currently if you make the browser window bigger the scrollbar helper gets smaller each time.

jQuery ui progressbar is not working in chrome

I have the following element in my HTML.

<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="ui-progressbar-value ui-widget-header ui-corner-left" style="display: none; width: 0%;"></div></div>

I include the following jquery and ui libraries:
jquery-1.9.1.min.js
jquery-migrate-1.2.1.min.js
jquery.ui.core.min.js (jQuery UI - v1.10.3 - 2013-05-03)
jquery.ui.widget.min.js (jQuery UI - v1.10.3 - 2013-05-03)

and I am trying to set value of the progress bar as follows:

    jQuery("#progressbar").progressbar("value", counts.progress);

I get this error:

TypeError: Object [object Object] has no method 'progressbar'

This only happens in the Chrome browser, of which my version is: Version 26.0.1410.64 m

I even tried this on the Jquery UI progress bar demo page by pasting the following code into the console:

    $( "#progressbar" ).progressbar({
      value: 37
    });

This is copied directly from your example code on the demo page... I get the same error?

Demos not working because code.jquery.com is unavailable

Not a single demo from jqueryui.com works for me, because resources from code.jquery.com are not available, see:

C:\Documents and Settings\Wojtek>wget http://code.jquery.com/jquery-1.9.1.js
--2013-04-15 06:20:03--  http://code.jquery.com/jquery-1.9.1.js
Resolving code.jquery.com (code.jquery.com)... failed: hostname nor servname provided, or not known.
wget: unable to resolve host address `code.jquery.com'

Other domains work, i.e.:

C:\Documents and Settings\Wojtek>wget http://jqueryui.com/datepicker/
--2013-04-15 06:29:39--  http://jqueryui.com/datepicker/
Resolving jqueryui.com (jqueryui.com)... 70.32.120.34
Connecting to jqueryui.com (jqueryui.com)|70.32.120.34|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: unspecified [text/html]
Saving to: `index.html'
2013-04-15 06:29:40 (27.0 KB/s) - `index.html' saved [20488]

jQuery UI 1.10.2 + FancyBox 2 + ComboBox error.

Version used in the image: jQuery 1.9.1 and jQuery UI 1.10.2

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Version used in the image: jQuery 1.9.1 and jQuery UI 1.9.2

Allow editing of demos

We want to allow users to edit our demos to explore features. That could be completely custom on just our own site, or a "Edit on jsfiddle" (or jsbin) link that creates a fresh fiddle/bin with the content of the demo, ready for the user to play with.

We don't want to deploy our content to other sites, so creating something on fiddle/bin should only happen on a user action.

Document which browsers jQuery UI supports

Close to 1.x jQuery Core, except IE6: http://jquery.com/browser-support/

1.9.0 -- Blog Announcement, 'Deprecated APIs' bad link

http://blog.jqueryui.com/2012/10/jquery-ui-1-9-0/

Deprecated APIs

As mentioned above, many plugins went through API redesigns. As a result, many existing APIs were deprecated. These APIs will be removed in 1.10.0. The 1.9.0 release includes a flag to disable all deprecated APIs, allowing you to determine if your code is ready for 1.10.0 even before it is released. There are full details on how to use the flag in the upgrade guide.

The 'upgrade guide' link goes to: http://bugs.jqueryui.com/upgrade-guide/1.9#api-redesigns
It should be: http://jqueryui.com/upgrade-guide/1.9/#api-redesigns

build-demos fails with node >= 0.9

Need to upgrade grunt whenever we want to support node > 0.8. It has to do with gruntjs/grunt#722 and [1].

1:
On node ~0.8:

> path.join(undefined, "foo")
'foo'

On node >= 0.9:

> path.join(undefined, "foo")
TypeError: Arguments to path.join must be strings

Demos: Autocomplete remote demo 404s

The ajax request for search terms returns a 404.

Update deploy script for DB to keep the process running even when it crashes

As long as errors are logged, the crashed process should be restarted automatically. Probably need to ping @gnarf37 about this.

Support jQuery UI 1.11

This issue is only a checklist reminder of 1.11 changes jqueryui.com needs to support:

• jquery/jquery-ui#982

Copy old downloads from Google Code

http://jqueryui.com/download/all/ only lists versions created since the new site launched. We should copy all downloads from https://code.google.com/p/jquery-ui/downloads/list

Demo view source missing closing angle brackets

http://bugs.jqueryui.com/ticket/8728

Add link to about page

504 Gateway Time

For the last two days I've been attempting to create a custom theme at http://jqueryui.com/themeroller/

If I do not change any settings and leave things as default, the download works. However, when I start to customize the theme and try to download, I'm receiving a 504 Gateway Timeout.

Here is what I'm changing... Select the Redmond theme as a default.

Then:

Header / Toolbar

- Background Color & Texture
    - 4B598A
- Border
    - 4b598A
- Icon
    - FFFFFF

Content

- Border
    - 000000
- Icon
    - 4B598A

Clickable: default state

- Background Color & Texture
    - DDDDDD
- Border
    - 000000
- Text
    - 000000
- Icon
    - 4B598A

Clickable: hover state

- Background Color & Texture
    - FFFFFF
- Text
    - 000000
- Border
    - 4B598A
- Icon
    - 4B598A

Clickable: active state

- Background Color & Texture
    - 4B598A
- Border
    - 000000
- Text
    - FFFFFF

Highlight

- Icon
    - 4B598A

(minor) Blue "Quick Downloads:" text?

On the main page, we have a download box. The text color is blue, except for the "Quick Downloads". Does it look better if all text is on blue?

Current

Blue (same color as all other texts in this box)

Trac registeration issues

I just registered myself as ljani on jQuery UI's Trac. First it told me this:

Error
Another account or group with that name already exists.

But then I navigated to another page and got this:

Registration has been finished successfully. You may login as user ljani now. 

So, I received the error even if the registration was successful. When I pressed the register button of the register form, it took a good while to load and give the error. I wonder if it due to the lag, or if the registration is broken.

I'd try to replicate this myself, but I don't want to "account spam" the site.

Link to relevant learn articles

Since the learn site is now online, we should deep link to relevant articles where its useful. For example, the widget pages should have links to using the widget factory. Need to figure out what else there is.

Add new widgets to themeroller page

The themeroller page currently only shows the 1.8 widgets. It would be good if you could add the new 1.9 ones, too, so that users can see how spinner, tooltip and menu will look like in the selected theme

ThemeSwitcher

We currently have docs for ThemeSwitcher at http://jqueryui.com/docs/Theming/ThemeSwitcher

If we want to keep that, might be worth pointing at https://github.com/harborhoffer/Super-Theme-Switcher

Add descriptions to each component page

Currently our component pages just have the demos, so there's no description of the widget. That's pretty bad for search engine previews.

For example, the preview for googling "jquery progressbar" has the progressbar as the first result, but this as the description: "jQuery: The Write Less, Do More, JavaScript Library. ... Default determinate progress bar. view source. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19 ..."

"jquery tooltip" doesn't gives us the tooltip widget as the first result, the description there is just "jQuery: The Write Less, Do More, JavaScript Library." (btw. I've updated my tooltip plugin's page to get rid of the spanish description and added a link to jqueryui.com/tooltip).

As for texts, we can probably use the description we have inside the manifest files for each plugin. That should be a good starting point.

Datepicker localization demo is broken

We don't load the i18n files on jqueryui.com, so http://jqueryui.com/datepicker/#localization doesn't work.

Finish migrating old changelogs

http://docs.jquery.com/UI/Changelog

Front page spelling mistake

I did notice a spelling mistake on the front page:

The spinner widget displays buttons to easily input numberic values via the keyboard or mouse. When used in combination with Globalize, the spinner supports numbers, currencies, and dates in hundreds of locales.

Should be

The spinner widget displays buttons to easily input numeric values via the keyboard or mouse. When used in combination with Globalize, the spinner supports numbers, currencies, and dates in hundreds of locales.

buttonset

I use jqueryui 1.10.2 and jquery 1.9.1 with jquery-migrate-1.1.1
and the buttonset does not work at all

Use jQuery CDN for demo resources

Currently our demo code isn't copy-pastable, as we have relative resource references. We should consider rewriting those includes to CDN references, otherwise you get useless code like this: http://jsbin.com/ubuzex/1/edit

[Documentation] CSS classes are missing

It would seem all the CSS class documentation has disappeared with the new site.

ie.
http://web.archive.org/web/20110524050102/http://jqueryui.com/docs/Theming/API

Accordion Widget Documentation mistake

the ui object that is returned by the create event includes 2 jquery obejcts. the "header" and the "content"! in docs it says "panel" which is wrong.

http://api.jqueryui.com/accordion/#event-create

Autocomplete sample borken

Its not possible to open the dropdown (Show all Items) in the combobox sample at:

http://jqueryui.com/autocomplete/#combobox

tested with Opera and Chrome.

I got his backtrace:

Uncaught exception: ReferenceError: Undefined variable: input

Error thrown at line 90, column 6 in <anonymous function: _createShowAllButton>() in http://jqueryui.com/resources/demos/autocomplete/combobox.html:
    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
called via Function.prototype.apply() from line 3073, column 5 in <anonymous function: dispatch>(event) in http://code.jquery.com/jquery-1.9.1.js:
    ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
called via Function.prototype.apply() from line 2749, column 4 in <anonymous function: elemData.handle>(e) in http://code.jquery.com/jquery-1.9.1.js:
    return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?
Uncaught exception: ReferenceError: Undefined variable: input

Error thrown at line 93, column 6 in <anonymous function: _createShowAllButton>() in http://jqueryui.com/resources/demos/autocomplete/combobox.html:
    input.focus();
called via Function.prototype.apply() from line 3073, column 5 in <anonymous function: dispatch>(event) in http://code.jquery.com/jquery-1.9.1.js:
    ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
called via Function.prototype.apply() from line 2749, column 4 in <anonymous function: elemData.handle>(e) in http://code.jquery.com/jquery-1.9.1.js:
    return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?```

Tooltip Custom Content Demo Broken

May actually be a bug in tooltip but not sure so figured the issue could start here. Tooltip appears in incorrect place and disappears. Tested in Chrome and Firefox

Migrate old MediaWiki content

Some of this may end up on different sites, but until we know where each piece goes, we'll track them here.

• Getting Started Guide see also #17
• Theming and all linked pages
• How to Write a Theme
• Upgrade Guides
  • 1.7
  • 1.8
  • 1.8.4
  • 1.8.5
  • 1.8.6
  • 1.8.7
  • 1.8.11
  • 1.8.15

List dependencies in widget doc

In the old page, widgets used to have a list of their dependencies (e.g. autocomplete requires the core, widget and mouse modules and so on), which was kind of handy for those of us who include the individual files one-by-one (and merge them later in the framework).

Also, it would be good if you could clarify external dependencies. Right now, I'm looking at the spinner documentation and I couldn't say if Globalize is mandatory or optional. The demos use it and some options kind of suggest it should be there, but it would be nice if you could just spell it out somewhere, so that we don't have to find out by trial and error

Style Trac

Accordion plugin Documentation

hello,

I want to mention, on the accordion documentation section "No auto height" :

$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
// this should be written to conrol the autoHeight by setting "true" or "false"
autoHeight: false,
});
});

#sidebar h3 -- font-size

http://zoggy.net/jui-1.png

font-size of 1.17em smushes the letters that drop below the baseline like 'e' if it was just a little larger it looks fine

firefox 19.0.2 on windows 7 x64

Replace jsdom with cheerio

We're using cheerio in grunt-jquery-content, should also use that for the build-demos task here.

Demos - Leverage jsbin?

http://bugs.jqueryui.com/ticket/5769 @jzaefferer
jsbin accepts content via paremters. From @remy

http://jsbin.com/?html=remy&js=yay

Obviously you can put all the markup in the HTML tab, and you can force focus only to the HTML tab using the following:

http://jsbin.com/?html=remy&js=yay#html

You just have to escape all the markup and new lines, etc to get it to work as a get.

If this doesn't suffice, I could upgrade JS Bin to accept postMessage messages to modify the editor panel - but I think the above should be the start point.

Adding (generated) links to all demos to open the demo code on jsbin, preferably with dependencies as loaded from CDNs, would allow visitors to test out the code without having to manually copy&paste around.

Could we just author the demos on jsbin and save them / load them in the iframe?

Request to add internationalization for Italian in Switzerland

jQueryUi includes some Internationalizations, ecpecially for the Datepicker. Of the available Internationalization js files misses a specific one for the Italian used in Switzerland. It is mostly like the existing italian (jquery.ui.datepicker-it.min.js), but the notation of the date (dateformat) is different. For the switzerland's variant of French this is already done.

dateFormat:"dd.mm.yy"
instead of
dateFormat:"dd/mm/yy"

I made up a file file (jquery.ui.datepicker-it-CH.min.js), here is the content

/*! jQuery UI - v1.10.2 - 2013-03-14
* http://jqueryui.com
* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */
jQuery(function(e){e.datepicker.regional.it={closeText:"Chiudi",prevText:"<Prec",nextText:"Succ>",currentText:"Oggi",monthNames:["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"],monthNamesShort:["Gen","Feb","Mar","Apr","Mag","Giu","Lug","Ago","Set","Ott","Nov","Dic"],dayNames:["Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato"],dayNamesShort:["Dom","Lun","Mar","Mer","Gio","Ven","Sab"],dayNamesMin:["Do","Lu","Ma","Me","Gi","Ve","Sa"],weekHeader:"Sm",dateFormat:"dd.mm.yy",firstDay:1,isRTL:!1,showMonthAfterYear:!1,yearSuffix:""},e.datepicker.setDefaults(e.datepicker.regional.it)});

highlighted demo menu item loses its highlight when viewing a demo

On jqueryui.com, click demos. The demos menu item is highlighted.
Now click on any element on the left hand-side menu e.g. Draggable, the demos menu item is no longer highlighted, so the user has no way of knowing he actually is under the demos menu.

This does not happen on the api docs. When that menu item is selected, it gets highlighted and remains so when an item in the left hand-side menu is selected.

As long as the user is under the demos menu item, that menu item should be highlighted

Datepicker widget events documentation missing

In the API documentantion web are missing the events for the datepicker.
http://api.jqueryui.com/datepicker/

Broken link to getting started guide

http://jqueryui.com/support/ links to the getting started guide, but uses the old jqueryui.com/docs URL.

Quick fix would be to just point to docs.jquery.com, but we should really just update and move all the content.

Autocomplete combobox demo is broken

Searching for an empty string results in "No Results" being above left nav

If you just hit the search icon without filling in anything to search for you get this:

But if you search for some text you get:

Closing a dialog containing an iframe causes iframe to reload if the dialog has effects applied

For example, consider the following:

<div class="spinit">
    <iframe src="someurl.php" height="95%" width="95%" frameborder="0" scrolling="auto"></iframe>
</div>

The dialog instantiation like so:

$('.spinit').dialog({
        height:300,
        width:600,
        autoOpen:false,
        modal:true,
        show:{
            effect:"blind",
            duration:250
        },
        hide:{
            effect:"explode",
            duration:750
        }
    });

Nothing out of the ordinary, right? If you now go ahead and close the dialog, the iframe gets reloaded. Depending on application, this could potentially lead to serious additional server load.

Adding

        beforeClose: function( event, ui ) {
            $('.spinit iframe').attr("src", "");
        }

to the dialog instantiation, I can kill the iframe's src attribute and thus have it not reload, but that's just a nasty hack.

Ideally, the iframe should not reload. Please consider fixing that :)

With best regards,
Martin

1.9.0 -- duplicate 'Default Functionality' (wrong title) demos

[02:35pm] <scott_gonzalez> _zoggy_: The double default demo bug is actually in jquery-ui
[02:36pm] <scott_gonzalez> It's parsing the title from the demo.

so far the demos that need to be updated are:

• http://jqueryui.com/tooltip/#custom-style

  also missing space after the label Your age:

• http://jqueryui.com/spinner/#currency

• http://jqueryui.com/position/#cycler

Better styles for active demo

See jquery/api.jqueryui.com#43

Autocomplete cannot work in the Dialog

When i use Autocomplete in the Dialog,i can get the response data by alert,but it does not show the result options,i guess the Dialog covered them.

Links to upgrade guide

I couldn't find a link to the upgrade guides except for the blog posts. They should be reachable from the top level navigation or reasonable sub page.