Slider Bug in IE7 - Flickers on change
I'm having a problem with the UI Slider in IE7. I'm using Jquery UI v.1.7.2. The slider is a range slider with a minimum range set to prevent the handles from overlapping. When you are holding the handles to slide them the width of the range blows out to 100% width, but snaps back to the width it's supposed to be once you release the handle. This causes a very annoying flickering effect. Unfortunatly I cannot provide a sample page but I have attached an image of what it happening if this
draggables don't work after upgrade from jquery UI 1.7.2 to 1.8
My draggables script was working great on jquery UI 1.7.2 with jquery 1.3.2, but after replacing the files with jquery-ui-1.8.custom.js and jquery 1.4.2, I get the following error: group[0].style is undefined: var min = parseInt(group[0].style.zIndex) || 0; (line 1594 jquery-ui-1.8.custom.js) Any help would be much appreciated -- otherwise I can't use the new buttons in jquery 1.8 and will have to stay at jquery 1.7.2. Is there an issue with backward compatibility Thank you!
help: drag-drop-sortable
Hi, I hope someone can give me some help to get this to work. What I want to do: --------------------- I am building a packing app and i need a gui that allows the user to build the "cart" with drawers. User must also reorder drawers and save the layout. Once layout is save then give the user the ability to drag and drop items to each of those drawers. Here is a what i have so far: Open Demo ( http://www.touchpointglobal.com/jquery.html ) I would like to stop drawers "overlaping" each other and
Help with datepicker minDate
How do I set the minDate of a datepicker to be the original value in the text box it's attached to, at the time that the datepicker is created? Consider the following code: Everything works as expected, except that the minDate isn't being set, apparently. $(".updateabledate").datepicker({ dateFormat: 'M dd, yy', minDate: new Date($(this).attr("value")), showAnim: 'drop', onSelect: function(input, inst){
Nested widgets
Hi Is there a support for nested widgets? I need tabs with child panels. Each will be a separate widget. With this design it is possible to extend panels and implement custom functionality. Is this supported in jquery ui or planned? Thanks
[ jquery UI ] unknown number of multiple Sliders, how to make them work ?
Hello, At the moment, I have a page, with a very large table, that exceeds my container width. So I'm using a UI slider, and the user can slide the handle to reveal the hidden columns of the table. But my table is also very populated (about 60 rows). So I'd like to cut my table evert 2 rows, and embed each of those 2-rows tables into its own slidable container. I made an example, with 3 2-rows tables, here : http://wir3d.net/tests/sliders.htm As my data are extracted from a database, I don't know
buttonset spacing and button corner rounding
Hi, I would like to change (smaller) the spacing between buttonsets. Looking at this file:- http://dev.jqueryui.com/browser/trunk/themes/base/ui.button.css?rev=3621 It sets a right margin for ui-button-set. But something like:- .ui-button-set {margin-right: 2px;} Doesn't change it. Any ideas? Also - how do I change the curvature of the button corners? Thanks. PS: this is not a jQuery Q but it's driving me nuts - does anybody know why padding and margin on divs is sometimes ignored - i have a div
Use of effet when opened dialog.
I add this option to my statement : show: "clip", When the box opens, the effect occurs well but the box also closes. This works fine if I remove the effect. Have you any idea about this problem? A thousand thank you. Thomas.
Creating div.ui-draggable-dragging somewhere else
Hi, I have a jQuery setup such that I can drag table rows about, an it creates a nice little ghostly helper div of the row. The problem is that this div is created inside the <tbody> element inside the table and, although absolutely positioned, screws up the table layout in Safari 4 (not Firefox 3.6 though, but I'm only concerned with S4 at the moment). So my question is, can I have jQUI place this helper div somewhere else, i.e. outside my table? (appending it to end of <body> would be ideal.) My
Using the new jQuery Position utility script at an FF extension
Hi all, I'm trying to use the following code at my FF extension with no success: $('#duck').position({ of: '#zebra', my: "left top", at: "left top" }); I also tried the following code where I supply the correct scope: var doc = gBrowser.selectedBrowser.contentDocument; $('#duck', doc).position({ of: $('#zebra', doc), my: "left top", at: "left top" }); Both without success.... on the other hand when I try the first code example at the web page code itself it work wonderfully...
check which handle withslider
hello i want to check which handle im using: slide: function(event, ui) { ///something like this if(ui.handle == 1) { do something with ui.values[0]; } if(ui.handle == 2) { do something with ui.values[1]; }
autocomplete positioning and limiting results
When using the autocomplete function and there are too many results, it renders the box of results above the input box. However, when the results are fewer then it is below. Is this an intended behavior? Is there a way to limit the results from a local database? Thanks!
ui.datepicker's "unselectable" rules now applicable to text input as well
We needed the ability to let users enter dates into the text field manually, but still wanted the field to validate against the same dates the datepicker doesn't allow you to select. After prying datepicker apart, I built a rule for the Validator plugin which copies datepicker's own logic. So even if you added a custom function to beforeShowDay, the validator will obey the same 'selectable' rules datepicker does when rendering the calendar. jQuery.validator.addMethod("vdate", function(value, element)
check if it is slider 1 or 2
hello i have a slider with two handles, how can i check which handle is moving? slide: function(event, ui) { //something like this if(ui.handle == 1 ) { //do something with handle value 1 : ui.values[0]; } if(ui.handle == 2 ) { //do something with handle value 2 : ui.values[1]; } }
sortable() dragged item position is incorrect - how can I customize?
My containers are all positioned within a big DIV with overflow:auto so it scrolls. I'll call that scrollable DIV the "wrapper". When the wrapper itself is scrolled down, dragging of items creates the clone in the wrong position. The top of the dragged item should consider the scroll of the wrapper DIV. How can I hook in my own custom positioning logic to account for this layout? Can I put in some offset value for the draggable items? How can I have more control over this, since UI gets it wrong
Dialog Widget, iframes and IE
I am currently doing some pre-development work on a site for a family member. One of the things I want to do on the site is to display a dialog containing an iframe with search results from Whereis.com so that directions can be printed for people wanting to find the business. I want this in a modal dialog so that users do not get moved away from the site. Loading the iframe into the dialog is not a problem, although the way IE (6, 7 and 8) handle that during the document load is another issue (to
when clicking on a link to jquery tab item
We have the page below: http://staging.nvcc.edu/current-students/career-services/new/student.html Each item corresponds to a jquery ui tab #. However when you click the item, the page dumps you off the bottom or the middle of the page. We would like to have it go to the top.
Custom build: not all dependencies autoselect for slider (i.e. jquery.ui.mouse)
Hi, not sure if this is the right place to mention that but when using custom jquery build site and selecting slider, jquery.ui.mouse is not being selected automatically. Regards
Draggable Image under transparent PNG?
Hi, I'm using the draggable plug-in and I want to overlay a static transparent png over the image being dragged, is this possible and does anyone know how I should be doing it. I have the dragabble image working but only when the image being dragged is on the top, I want to drag an image below a transparent image.
Is it possible to do something like this with UI?
Hi, I'm new to jQuery. I was wondering if it is possible to do something like this with jQuery UI: I have a list of criteria which need to be organized into sub-criteria (possibly more than 2 levels). So for example there are 5 criteria, and the user might want to place 3 of them into one of the others as sub criteria, and so on. I can't find an elegant solution to this problem. I've seen a few tree views (although not in jQuery UI), but they have a number of limitations. I want to be able to create,
tabs and forms
I have what I thought would be a simple thing, but I banged my head on my desk all day and now I am asking for help. Tabs via ajax with forms in them. I want to make sure that the form submits before switching tabs. I can do this all the way up until I need to check that the form validates. Basically I need to hold off on switching the form until the response from ajax comes back. What happens is the function doesn't wait for the forms ajaxSubmit to complete. Any examples or ideas on this? I
Why don't any draggable options work? (What have I done wrong?)
My Jquery code is: $(document).ready(function() { $('.dragme').draggable({handle: '.drag_handle'}); }); My layout is: <div id="quick_view_container_<%=getCurrentAttribute('item','internalid')%>" class="quick_view_container dragme"> <div style="position:relative; padding:0;margin:0;"> <div class="drag_handle"> <p>x</p> </div> ...other content here... </div> </div> The whole div.dragme is draggable. Where do I start looking for my problem? It doesn't appear that any options
avoid reopening of the datepicker in IE after $(this).datepicker("setDate", myDate);
Hello, I seem to only have this problem in IE (7) - when I run following code: $(this).datepicker("setDate", myDate);IE seems to always re-show the datepicker UI, which is not as expected... In FF, safari, and CHrome, no problem at all. Any clues as to avoid this behavior would be awesome. cheers, Greg
Tab plugin like dojo(dijit.layout.TabContainer and dijit.layout.ContentPane) using jQuery
Hi, is there a plugin the same as the image below? The roller (I don't know what it is called) only shows if the tabs cannot fit the size of the container. The left and right arrow moves the tabs and the down arrow displays the tabs and you can choose a tab. The sub tab will be display the same as the image. By the way this is from the dojo javascript using dijit.layout.TabContainer and dijit.layout.ContentPane. Thanks.
Using Droppable, Animate and Effects Together.
I am using the droppable function combined with some jQueryUI effects. When an element hovers over the droppable area, you can define a hoverClass. I use it to change the background color of the droppable box. I've also added the animate function to animate the background color from grey to red, the transfer effect to show the element dropping to the droppable box, then the animate function again to change the red slowly back to grey. This all works great. However, if I try to drop another element
Slider in UI - how to change dynamically width of ".ui-slider-handle" ?
I am using jQuery UI slider plugin and trying to set dynamically width of slider handle in javascript code. <!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <style type="text/css"> #slider { margin: 10px;
adding dropdown menus to UI Tabs
I've been using the UI tabs quite extensively in an app but I now have a feature request to add a dropdown menu to appear in a tab, where a user can make a selection before the contents of the tab is loaded. What is the best way to go about doing this? I've got Filament Groups Ipod menu semi-working with the tab but I don't know how to go about preventing the tab from being selected until a menu selection has been made.
JQueryUI Dialog causing page reload
Html: <button id="filter_launch">Filter</button> <div id="search_box"> <form id="search_form" name="search_form"> etc. </form></div> Javascript: $('#filter_launch') .button({icons: {primary: 'ui-icon-search'}}) .click( function () { $('#search_box').dialog({ modal: true, title: "Filter", width: 400, close: function(event, ui) { $(this).dialog('destroy'); }, buttons: {
Mutiple Modal Dialog close problem
I have two modal dialogs displayed on a page closing the topmost dialog closes the dialog but it removes the modal background for the remaining dialog box allowing the user to gain access to menus etc, that should remain disabled. I'm using the following libs: jquery-1.4.2 jquery-ui-1.8rc3 Any help would be appreciated
Dialog Position - don't extend below viewport
I want to open a dialog so that the top of the dialog is just below where the person clicked their mouse - so the click event has this: $('#dialog').dialog({ autoOpen:false, modal:true, width:740, closeOnEscape:true, resizable:false }); $('foo').click(function(event) { $('#dialog').dialog('option','position',[(event.clientX - 90), (event.clientY + 30)]); $('#dialog').dialog('open'); });In my case, the dialog is larger than the viewport - and I *do* want it to extend
DatePicker not working after a first call
Hi to all of you, I inserted two datepickers in my webpage, followed by a Submit button. The problem is that they work only for the first time, then if you click on any of the datepickers, no calendar is shown below. Simply the program doesn't enter in the function defined for onSelect. This is the code of the Datepickers: $(document).ready(function(){ var dates = $('#from, #to').datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true,
Collapsable tabs: How to detect if's there's an open tab
Hi, I have a collapsable tab like this: $("#tabs").tabs({ collapsible: true, selected: -1, fx: { opacity:'toggle', duration: 120 }, select: function(event, ui) { // do something, only when no tab is open }}); Say, I have three tabs and no tab open on start. Everything's ok when I open a tab, click on another one, and so on. But when I click on the currently open tab to close it I want something to happen. e.g. a message "all tabs have been closed" to appear somewhere. How can I achieve this? The
jquery ui tabs :: tabs content does not appear with IE7
Hi there, I have a weird problem with IE7, (though works perfectly on firefox, chrome or ie8). Tabs content do not appear unless I change content's size from developer toolbar or open firebug-lite (i.e. make any action that could change dom structure). I'm using: jquery 1.3 jquery ui 1.7 Any cluses? Thanks
Dialog popup onunload
One of the parameters for the dialog is: autoOpen: true, So it automatically opens when the page is loaded. Can this be changed to when the page is unloaded? My client would like to the dialog to appear when someone exits the page. Thanks, Scott
Is this possible with Jquery UI?
Hi all, im looking for a way to drag a box around a set of li element, with a box border going around all the selected elements. The elements are enclosed inside a div. Much like you would do to select meeting times inside a day view of a calendar. (only its different data, but thats where ive seen similar functionality). Can this be done with Jquery UI? Ive been looking around, and selectable comes close, but i cant figure out if instead of highlighting every element separately i can show 1 box
Progressbar help needed:
I have a simple function that loops over a known number of items $('#progress').progressbar({ value : 0 }); for (i = 0; i < number; i++) { doThis(i); $('#progress').progressbar('option', 'value', i); } The progressbar inits at 0, but when I change the value in my loop, nothing happens. Eventually, I'll modify it to actually update based upon the actual percentage of 'number' it has complete, but for now shouldn't it at least update every time the loop runs and show something? Am I completely misunderstanding
UI tabs does not work in iframe where parent instance of jQuery and jQuery UI is used
I'm playing around with using the parent instance of jQuery and jQuery UI from an iframe - trying to avoid loading multiple instances of jQuery and jQuery UI. In the iframe, I do: window.jQuery = window.$ = function (selector, context) { return window.parent.$(selector, context ? context : document); }; jQuery works fine but jQuery UI such as tabs does not work quite correctly. When you select a tab, it doesn't change panels. I corrected the problem by modifying jquery.ui.tabs.js
Accordion with multiple items expanded
I know the Accordion widget has been written to only allow one item open at a time, but why? The docs claim a multi-Accordion can be written in a couple of lines, but not with all of the styling and the icon in the header. It looks like I'll be copying the Accordion code and hacking it. I'm new to jQuery, so please enlighten me if there's a better way. Dave
Newb vs datepicker
Hi I just started playing around with jQuery yesterday. I'm impressed with most everything I've seen so far. I think, especially, that the documentation is really good. I'm having a bit of a problem with datepicker--when I use beforeShowDay to turn off certain dates and set the color of other dates, I can close dates just fine but the coloring of the dates fails. Looking at the behind-the-scenes code in Firebug I see: <td class=" CA" onclick="...yada...yada..." title="Oh happy day"> <a class="ui-state-default"
Why does this simple bind event work in firefox and not in IE?
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--Import jQuery and ui helpers--> <script type="text/javascript" src="../jQuery_v1_8/js/jquery-1.4.2.min.js"></script> <link type="text/css" href= "../jQuery_v1_8/css/custom-theme/jquery-ui-1.8rc3.custom.css" rel="stylesheet" /> <script type="text/javascript" src= "../jQuery_v1_8/development-bundle/ui/jquery-ui-1.8rc3.custom.js"></script> <script type="text/javascript" src= "../jQuery_v1_8/development-bundle/ui/jquery.ui.core.js"></script>
Next Page