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(){
Disapointed with new Button icons
Been really busy and was just tasked with looking into upgrading to the latest jquery ui, however I am very disappointed with the button icons as functionality has been removed. We have developed a few web apps, and many of them have buttons with an icon on the left and a drop down icon on the right. With 1.12 it seems that a button can now only have 1 icon, basically removing functionality. Why not leave the icons option that consists of an object with icon and icon_position, enabling multiple
When will the JQuery UI sortable enabled the 2 or more column span portlets?
When will the JQuery UI sortable enabled the 2 or more column span portlets?
How to make the perfect horizontal menu
Here's a simple way to make a menu like this: CSS code: #menu { overflow : hidden; width : 500px; } #menu > li { float : left; width : 100px !important; } #menu .ui-menu { width : 200px; } JS code: var menu = "#menu"; var position = {my: "left top", at: "left bottom"}; $(menu).menu({ position: position, blur: function() { $(this).menu("option", "position", position); }, focus: function(e, ui) { if ($(menu).get(0) !== $(ui).get(0).item.parent().get(0)) {
faster use of jquery-ui via class iteration
I found it a bit of a hassle to "register" every div that I want to use with a jquery-ui widget. So I wrote a little bit of code. Basically, every widget type gets a class name. For example: if you have multiple buttons you dont have to write " $('#id1".button(); $('#id2".button(); $('#id3".button(); etc anymore. You just add the class "btn" to any div in your html code and my code does the rest. <div class="btn"> <button onlick="">Button</button> <button onlick="">Button</button></div> Widgets
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
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 ... @+
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 .. ..
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?
UI Dialog with option to hide Close Button
I have modified jquery-ui Dialog source code to add an option that allows to hide the close Button. Very handy for various cases. I use jQuery UI Dialog 1.11.2 Here is the code: /* FIRST - Add the option in jquery-ui source code */ options: { hideCloseButton: false, ..... /* THEN - Add the condition */ // support: IE // Use type="button" to prevent enter keypresses in textboxes from closing the // dialog in IE (#9312) if( this.options.hideCloseButton ) { this.uiDialogTitlebarClose = $(
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?
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
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
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
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 )
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.
Error initializing .button()
Hello, I trying to assign icons to buttons Ive created but Im getting an initialization error . Do I have to do the button icon assignment in a callback? Uncaught cannot call methods on button prior to initialization; attempted to call method 'option' But the button has been instantiated here is my code ... $(document).ready(function(){ $("img").attr("src",""); $("a").has("img").button();
Enhance effect blind with effect fade (how to)
Hi. The possibility to combine the blind with the fade effect seems to be a wanted feature. I've found some discussions and approaches to do this on Stackoverflow and some blog. It would be very easy to implement this feature as an option in the code. Just add a few lines in jquery.ui.effect-blind.js (version 1.10.3) at line 57: // start at 0 if we are showing if ( show ) { wrapper.css( ref, 0 ); if ( ! motion ) { wrapper.css( ref2, margin + distance );
AutoComplete Sub-Menu, Navigation, and Other Suggestions
Hi all, I am using AutoComplete from 1.10. I noticed that the AutoComplete does use the menu widget for its results, which is great, but it wasnt very intuitive to figure out how to get sub-menus to happen there. I did eventually figure that out though. My real issue is with navigation. Even though AutoComplete uses Menu, and Menu supports expanding and collapsing of sub-menus using arrow navigation, the menu that is the AutoComplete results does not support this. It appears to be the case that
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
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.
Chess
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> <style> #header { width: 100%; text-align: center; } .area { position: relative; width: 336px; height: 336px; } .block { position: absolute;
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
.position() against two targets
I want to position an item relative to two elements, using 'top' from one element and 'right' from a different one. I thought I would try callig position() twice, one for the vertical position and again for the horizontal. Unfortunately, as anyone who actually reads the documentation knows, if you specify only one value in 'my', the other is added for you. What I tried was this: $("#page_tools").position({ my: "left", at: "right+2 ", of: "#layout_wrapper" }).position({ my: "top", at: "top-40", of: "#page_content" });
Using Tooltip with img alt attribute
I want Tooltip to display my img tags' alt attribute text. I am a newcomer to jQuery and jQuery UI so I am still on the steepest portion of the learning curve. The UI Tooltip API provides an example of how to change from the default attribute ('title') to the img alt attribute. In doing so it shows how to use the Tooltip items option (http://api.jqueryui.com/tooltip/#option-items). It also states, "When changing this option, you likely need to also change the content option." However, the content
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
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">
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
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
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
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
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
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 );
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
.accordion proves to be an easy and interesting vertical menu
script> $(function() { $( "#directory" ).accordion({ event: "mouseover", collapsible: true, autoheight: false, active: false }); }); </script>I wanted the accordion collapsed initially, expanding on mouse over, and this works fairly well. I also went into the CSS and removed the padding for: .ui-accordion .ui-accordion-header a Now, the reason, I'm here now, is that on mouse out, I'd like for the active content to collapse. The toggle effect isn't quite as fluid as I'd like it to be. My knowledge
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
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
Accordion CRUD with ajax
I would like to request added functionality to accordion, where it has an option to add buttons like "show, edit and remove" and other optional buttons for CRUD porposes. Wherein show would slide down the original information, while edit will ajax to the edit form page and remove would just remove that item, but has a method like remoteAjax so to update the database on delete.
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
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:
Next Page