datetime picker
Here is a cool looking draft that seems to be based on the current datepicker. (source) http://jonathonhill.net/2009-03-27/jquery-datetime-picker/ The jqueryui date picker could become a datetime picker like the one above. And then the options could specify if you want just date, date and time, or just time. There is a strong need for one of these. The user experience with using select form fields on Month, Day, Year Hours:Minutes:Seconds is very poor because of the number of clicks required to fill
Making it easier to customize style of buttons in jQuery UI Dialog boxes
I wanted to add some styling and icons to the buttons inside a jquery UI Dialog boxes and this proved to be very difficult to figure out how to do. As far as I can tell there's no good documentation on it, official or unofficial. This post from filament didn't really help at all: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/ I put together a solution with some things I found on stackoverflow, but this kind of thing should be much easier, and it should
Autocomplete and bold highlight
I've gone from the Jorn autocomplete plugin to the jQuery UI autocomplete plugin. Not sure why, because I liked Jorn's plugin but it feels better to use jQuery UI. Here's my hack to make the searched for work highlit. $('#id_q').autocomplete({ source: function(request, response) { $.ajax({ url: AUTOCOMPLETE_URL, dataType: 'json', data: { q: request.term }, success: function(data) { response($.map(data, function(item) { return {label:
jquery ui custom bundles
Currently after downloading a bundle I need to go through and remove all the stuff I don't want. When building a custom bundle it would be nice if you could specify if you want to include the demos or no demos,minified files,unminimized, or both, and if you want to combine or not.
UI.TABS remove method - additional option to select specific tab after removal
One of the problems with the remove method of jquery ui.tabs is that after deleting the tab it either selects the tab on the right or if it is the last tab it selects one on the left. My initial impression was that I could change this behavior by calling the select method in the 'tabsremove' event. But that does not work as the default selection takes place before the event is fired as indicated in the source below: remove: function( index ) { index = this._getIndex( index );
UI Dialog with *no* styles
I'd really like a UI dialog that doesn't have any CSS styling rules at all -- just jquery code to launch a [modal] dialog window using a div that I create with my own code and styles of my app. Keep the same events and methods so I can hook up my own close button to the close() function, etc. Does anyone else find the need for this important? It's such a huge headache to deal with overriding all the jquery-ui styles for this UI dialog box. I just want to use my own look and feel. Let me hook up
Internationalization strategy for strings?
Doe jQuery UI have an internationalization strategy? As far as I can tell there isn't a comprehensive i18n strategy for jQuery UI. The datepicker widget supports i18n, but having a separate i18n implementation for each widget seems to be a bit wasteful and redundant The first step would be to emulate basic GNU gettext, where you could set the locale globally for your jQuery UI widgets $.ui.locale = "ne"; for Nepal and have a global jquery.ui.strings.json file where plugins could query for matching
Passing functions to options in jQuery UI
It would be nice if I could pass a function as an option when using jQuery UI, like I can in jQuery 1.4 with the .val() method. For example: $(":button, :submit, :reset").button({ icons: { primary: function (element) { return findIconClass(element); } } }); (where findIconClass() returns any 'ui-icon-*' css classes on the element)
Resizable() grip display customizable (?)
Hi All, Always with the resizable() command. If I don't want to see the "SE" handle ? ==> $(myResizerObject).mouseover(function(evt){ $(this.getElementsByClassName('ui-resizable-se')).css({display: 'none'}); }) Not smart ... Why not a "grip" option with the same "philosophy" of "handle" option for the accepted values ? like this : GRIP: "n, e, s, w, ne, se, sw, nw, all" And the combination between "grip" and "autoHide" could give more ... @+
Themes more granular, for further usage.
The UI themes work great for all the controls they use but if you want to style a table or some custom html it gets tricky, sometimes you want the border of one class but background of another. I would like to see themes with granular classes example classes below. This would allow the developer to style none jquery ui elements for more cohesive look. ui-border: (whatever the default border color is for the theme, usually the one declared in .ui-widget-content) ui-default-background ui-hover-background
Form Progressbar + PHP Session variable updating progress
Hey everyone. I just wanna share an idea that I have after some research for a simple and functional way to do update a progress bar using the $_SESSION variable of PHP. Yes, I know most people uses some file written by the PHP with the data, but this way is faster and wont consume many resources. In this example, given a Form with two Inputs (From and To). From [number] To [number] These values will be poster by $.post() function to the Load.php file so it will do a loop (FOR) for every number between
Drag, Drop and Resizable
hey guys i want help Im creating a mood board using jquery.. i have done till dragging the image and dropping it into the container, now dropped contain are draggable, it should also be resizable im not able code it and also the draggable image shouldbe overlapped when it is active i mean that when i clicked on one should drag and should palced over another image, it should will every time happen when i drag the image should be overlap... im placing my code below please guys help with this <!DOCTYPE
A better autocomplete combobox
Hi all, Like a few other people that have posted in the forum, I discovered that the combobox demo for the autocomplete control does not faithfully mimic a native combobox control. I have had a go at improving the code for the demo to try and get it working like the native control. You can see the code and a demo at my blog - http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ . I would love some ideas and feedback on it as I think having a really accurate version using the autocomplete
jquery ui dialog first time open - close events
Is it possible to add first time open event on dialog widget? Sometimes we need to do something only the first time dialog appears. I know we can do it easily via javascript using variables - data check e.t.c. but it would be nice and easier if it was a core feature. The same event for close would also be useful ( first time close event )
jQuery UI as css site theme/framework
Sorry if this has been proposed or explained before, but what about trying to make the jQuery UI theme the central css "theme" for an entire site. I understand that there will always be domain specific customization but if the jUI css could provide "hooks" for other elements to use then the ThemeRoller could be a more integral part of creating/updating/maintaining the overall look of a site. My underlying reason for the idea is that I'm a much better programmer than designer and what happens is
jQuery UI Marble 0.5 released
The function marble() adds a cut-out marble background to every selected object: $('.ui-button, #my-button, .any-other-class').marble(); To prevent the same boring background, the background-position is recalculated for every selected object. So each object shows a different cut-out of the marble plate, which is not repeated, if the background image is big enough. By using a part-transparent background image, the background colour of an object follows the standard ui-class changes as well. Please
Why not ? A pin scale display on the sliderBar ? & With (in the future) a customizable pins positionning ?
Hi All, Today I'll would like to propose to you something on the slidebar. (Look at the snashot under) You customize your pin(s) scale showing with a reference to a jQuery plugin icon name (or not for no display) I'm under a work draft yet. Because my purpose is to propose a full customize setting for the pins positionning (for example : 0% 25% 75% 100% 200% 300% (or other constant values, not in percent...) in purpose for example to set a zoom/xzoom interface or for full others objectives .. ) Source
Modified Slider UI with 2 hidden inputs and showing value in html.
I've made a modified version for Range Slider UI . You can use 2 hidden Inputs. In each hidden input is 1 value and values is also in html with live changing. Here is the code if anyone wants it , you can use it.If you know a better solution for this, don't hesitate and post it to comments.Together we can make it better. I am begginer so take a look at it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range slider</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
DatePicker trigger icon draw inside the textbox
Now the DatePicker draws trigger icon right outside the textbox, I suggest it could support drawing icon inside the textbox, at the most right. The reason is I set textbox 100% width, an outside icon would make it become 2 lines in a talbe cell. thanks.
Video Player..
How about a Video Player? <video src="/videos/1.mp4"> Flash Fallback.. </video> and could be called via: video = $.video("/videos/1.mp4"); video.play(); video.pause(); video.seek(25.2678); video.progressPercent(); /* video_time / duration * 100 */ video.progressPercent(25.6897); /* another way to seek */ ImageToCanvas(video.getframe()); /* function doesn't exist but can be made via CANVAS AND JS */ video.playlist = [ { title: "Video one..", url: "/videos/1.mp4"
Please add an "autocompleteblur" event
I can use "autocompletefocus" to do something. But when focus is moved to the menu top or bottom, no item gets the focus, the event will not be triggered. So I expect jQuery UI to add an "autocompleteblur" event.
Static non-scrolling panel at top of jQuery UI dialog
It would be very helpful if an option could be provided for a static, non-scrolling panel at the top of dialogs, just under the title bar, and above the scrolling section. I realize this would require adding another div, but I think the benefits could be very helpful. The option would require that a height in pixels be provided, with a default of 0 to keep things consistent with current functioning. Also, some way to specify the div for the panel would be needed. I frequently have explanatory text
JQuery for desktop like web applications
Hi jQuery UI team, I was looking to smoothly use JQuery UI for Developing Desktop Like Web Applications. Regards,
After shake effect, applied to UI Dialog element, ends, dialog is removed from the DOM... ?
I've got custom made widget, which is derived from UI Dialog (nothing special), some additional logic on header and footer. Now I try to "shake" it in specific cases with $.effect("shake") and it is does as expected, but when the effect ends UI Dialog is destroyed. Is there any way to prevent this?
Add animation step callback to jQuery UI effects?
Hi! Would it be reasonable to add a per-animation-step callback to jQuery UI effects? So that when you e.g. hide() something, http://jqueryui.com/demos/hide/ then, on each hide animation step, the per-animation-step callback is invoked. Background: I want to redraw SVG arrows on each animation step, when e.g. something is slided/folded in/out. I've done this for the Resizable interaction (there's a resize event, triggered on each resize step). But for jQuery UI effects, there are no per-animation-step
[UI-Tabs] How-To: Persist selected tab on page refresh / postback.
<script type="text/javascript"> $(function() { $('#tabs').tabs({ selected: (location.hash != "") ? location.hash.replace("#", "") : 0, show: function(event, ui) { location.hash = $(this).tabs("option", "selected"); } }); }); </script>
datepicker styles and bootstrap 3
I am using jQuery UI datepicker with the UI brightness theme in a project and it can be used by end users along with Bootstrap 3 styles. I noticed that when using the changeMonth or changeYear options, the select dropdowns in the datepicker widget get a style definition of "color:inherit" from the bootstrap sheet, so it is rendered with white text on white background. I had to add an explicit color setting to the .ui-datepicker .ui-datepicker-title select elements. I do not expect that someone goes
Chrome w/ frames and smoothness/jquery-ui-1.8.2.custom.css
Hi there, (I'm not sure this is the right place. I tried my best... please forward to whereever is more appropiate. Thanks.) we've come across a very weird issue with the latest jQuery UI and current Chrome browser. In line 66 of themes/smoothness/jquery-ui-1.8.2.custom.css there is the following CSS: .ui-widget :active { outline: none; } Which, suprisingly, breaks frame dragging, that is, we've got a page with a frameset (single top frame, two at the bottom) and now the lower frames cannot be resized
End user stretchable dragable textbock
The JQuery stretchable control may be the start of this: I'm trying to find a control that the end user can type text into and then use dragable text block handles to resize the text. It has to be draggable by the end user too. Does anyone know if such a control is available or can anyonebuild it?
Feature request: <ul>,<li> for Autocomplete
Not sure if this is the right place for a feature request. It would be good if the Autocomplete widget would accept HTML as input in the following form: <ul> <li data-value="optional value0"> Some text to describe the value with HTML markup. </li> <li data-value="optional value1"> More HTML </li> </ul> The benefit of this format over JSON is that it's easier to produce, you don't have to escape any characters, it's easier to view and debug, and it's easier to see what you're doing
Improve extensibility of ui.menu (and thus ui.autocomplete)
jQuery UI Autocomplete was one of the great additions to 1.8. Browsing the nightlies I noticed that it has been decided to make it use the newly developed Menu plugin. Since I cannot modify the behavior of the menu through $.widget-izing the Autocomplete anymore, I would like to see an option to make Autocomplete use a custom widget (inherited from menu) instead of the menu. 4 lines of code which I would gladly provide. On the other hand, ui.menu is really hard to extend. Mostly this is because there
Solving cross browser issues in dynamically detecting textarea text value changes
I have developed a webpage with a form that has (1) a textarea into which a user can input text of any length (right now it is 800px wide and 120px high), and (2) an input text box into which a user can input a number of days over which the textarea text should be considered active. The form has two buttons that are enabled or disabled whenever any changes in either the textarea or input box differ from the original “reset” values. The two buttons represent submit and reset actions. I wanted
can the jquery range slider have descriptions within slider panel
can the jquery range slider have descriptions within slider panel as in the example below(it is in dojo) http://tobias.klpstn.com/dojo1.1/dojox/form/tests/test_RangeSlider.html
Destroy Event
I have some cleanup I want to do when a standard widget is destroyed. Extending the widget is overkill. So, my question is: Why is there a 'create' event but no corresponding 'destroy' event?
JQUERY Autocomplete with multiple sources
Hi, Is there a way to specify multiple sources (2 ajax requests) for JQUERY AutoComplete plugin? Both requests should bind and show the results when they return from the server asynchronously. $(".autocomplete").autocomplete({ source: function (request, res) { request 1 : $.ajax({}); //show the results in autocomplete when results are returned request 2 : $.ajax({}); //show the results in autocomplete when results are returned .. ..
Feature request: Large modal dialog inside a small modal dialog
If I open a small modal dialog and in this dialog I open another large modal dialog, then this second large modal dialog is displayed inside the first small dialog. It doesn't look very nice, as scroll bars appear. How to make second modal dialog to look "detached" from the first dialog? So that if it is higher or wider than a parent dialog, it still would be displayed full size, not inside parent dialog. Dialog has option appendTo, but if I attach second dialog to top.document, then it doesn't work
I need a jQuery/PHP developer for new venture
Hi Forum Members, I'm looking for a jQuery/Ajax/PHP/MySql developer to help build an CRUD based application. This will be a part time project and hopefully with a little luck, lead into something long-term. Please feel free to send a private message with any questions. I will only provide project details on a one-to-one basis. Thank you in advance. Jack
using autocomplete on cloned elements
Hi Guys, Had an issue that I could never find the correct solution online for so thought I would post one up in case it would ever help anyone. So basically I wanted to add the same autocomplete function to multiple cloned elements, but as anyone that has tried this before knows, there are tonnes of issues meaning it never works without complications. I've came up with a few solutions, (new ids, add to each new id) but by far my favorite is shown below: $("[name='nameofelement']") .focus(function(){
[UI button] Only secondary icon
Hello, I have a question regarding the button in jQuery UI. Why isn't it possible too only display the secondary icon? If I leave the primary empty, the secondary icon is placed on the position of the primary icon. Would be a great feature, because of the previous / next button.
Need of a new option in droppable
Suppose, if we have a series of girds and want to know from which grid dragging is started, we can implement the following code, but I think there should be another option dealing this situation; though we have only two options ‘out’ and ‘over’, and can use them. var droppableStart = ''; $("#draggable").draggable({ start: function(){ droppableStart = ''; } }); $(".gridArea").droppable({ tolerance: 'intersect', over: function() { if(droppableStart
Next Page