Issue with nested sortable and Internet Explorer
Hi, I have in my application a SQL query builder (as seen in screenshot query.png). Basically my screenshot shows a query like: (attr1 like foo% AND attr2!=bar) OR (attr1 like moo% AND attr2=bar... With this query builder you can add as many attributes as you want (attributes are the dark green blocks) and group them together with logical OR/AND parenthesis (the light green blocks). Each attribute can be edited/deleted and the whole structure can be reorganized. For instance, I can move an attribute
Dialog does not updates its content's height when its height is changed programmatically
Versions: jQuery 1.3.2 with jQuery UI 1.7.1 Use case: size a dialog's height so that when the browser window is resized, the dialog resizes to fit vertically on the page. Problem: setting the height option and setting the "height.dialog" property programmatically do not end up having the dialogs _resize method invoked. As a result the dialog is resized, but the content is not Code to reproduce (page_help_icon is just a DIV that can be clicked on to open a help dialog): $( function() { $('#page_help_icon').click(
Theme-rolled button with additional background image?
I have no idea if this is possible, but thought I'd give it a shot In the past (and currently for that matter) i do this for "buttons" to kick off my various functionality... almost always jQuery calls of some sort: CSS: div.button { background-repeat: no-repeat; background-position: 3px center; padding: 4px 4px 4px 23px; cursor: pointer; width: 110px; background-image: url('/images/icons/right.png'); background-color: #eee; border: solid 1px #000; color: #000; display: inline; } HTML: <div
JQuery Tabs style issue - navigtion panel tabs are shifting (I want them to wrap and be on one line)
Hi All, I need to spread tabs evenly on one row and make the text wrap, when I am using fixed width for .ui-tabs-nav li the panel and nav are not aligned. I don't want the tabs to shift to the next line. PLEASE HELP!! Kobi
Zip Corrupted
Hi, I'm trying to use some customer packages but it seems that the zip file is corrupted when I download them Any help ? regards, Stan
[accordion]
Please can someone help me? I have 2 accordion examples: This one http://www.cc-hs.com/testing/ is perfect cross-browser but I have a problem in that the accordion doesnt follow the browser through each page. I need the accordion to open on the relevant heading for each page. This one does the job, [i think] but is terrible in all versions of i.e! http://www.cc-hs.com/demo/ The first one is the one I want to stick with and I got it from here: http://www.i-marco.nl/weblog/jquery-accordion-menu-redux2/
1.7.1 ui-icon hover CSS bug?
I have been fighting to get hover to work correctly for a ui-icon and discovered the problem only appears when the ui-icon is enclosed in a ui-widget-container. So I created a test page (included below). Then I started digging into the core css. I found the line that causes the error. Line 22 of ui.theme.css from 1.7.1 The selector list for that line is ... .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus This doesn't make sense to me. It appears
theme roller download error
i'm trying to create with Theme Roller a theme for jquery UI. i make some changes (just font-size, border-radius, some colors and some background image) and then i click on "Download theme" and then again on "Download" (without any changes on the "Configure download" page). what i obtain is a zip file from which i cannot extract anything (it seems damaged or something). if i browse the directory structure in the zip file i cannot find any css files in the "css/custom-theme" directory. there are only
Problem with UI 1.7.1, Sliders and IE
I'm upgrading our codebase from UI 1.5.2 to 1.7.1 and have run into a showstopper problem in IE6 and 7 that I can't seem to figure out. We're using a range slider, with no UI themes and custom handle images. In fact the version of this slider that works just fine in UI 1.5.2 is usable here: http://www.forsalebyowner.com/search?szLocation=chicago When trying to set the initial values of the sliders like so: $ ('#priceSlider').slider('values', 0, currMinPrice); I keep getting an "Invalid Argument"
How to add tabs panel to a different div?
jQuery UI 1.7.1 My initial structure for tabs functionality with the ui-tabs plugin is: <div id="ddblock-tabs-1" class="ddblock-tabs ui-tabs"> <ul id="ddblock-nav-tabs-1" class="anchors"> <li><a href="#ddblock-tabs-1-t0" class="ddblock-tab">Tab 1</a></li> </ul> <div id="ddblock-custom-pager-1" class="custom-pager ddblock-pager custom-pager-bottom clear-block border"> <div class="custom-pager-inner clear-block border"> <div id="ddblock-tabs-1-t0" class="tabcontent ui-tabs-hide"> <div class="custom-pager-item
Tabs with cookie
Hi I'm using tabs in my website, but on a page refresh it has to remember the last active tab, and not going to the first tab each time. I've read in the documentation that it's just 1 option that has to be added like this: $(function() { $("#tabs").tabs({ cookie: { expires: 30 } }); }); But when i add the cookie option, my tabs don't work anymore, the whole content is over the whole page... Anything i have to add to get it work ? Thanks in advance
Datepicker div added at bottom of page messes up footer
Hi, When I add a datepicker to a page, the first time the page loads there is a ~30px gap at the bottom of my page below my sticky footer. This adds scroll bars to the page and breaks the effect. When I access the date field for the first time this gap disappears. I can only assume that the gap is caused by the datepicker div in an initial position and when this first gets activated it moves to the correct position next to the text box. Is there any way to stop this happening or control where the
Modal window and load function
Hi All, I am facing an weird issue in IE6 when I use load and dialog at the same time. The form isn't getting submitted it just throws js errors $(document).ready(function() { $("#dialog-div").dialog({ bgiframe: true, buttons: {}, closeOnEscape: true, width: 650, minHeight: 300, autoOpen: false, position: 'center', resizable: false, draggable: true }); }); <a class="anchor-link"
Jquery conflict
Who knows how can i The destruction of jquery conflict. for example one of them work with jqery1.3 and one of them work by jquery 1.2.6. 2 program sideshow and tabs.
Using callback function on show() effect
Hello all, I am trying to use a callback function on the show() effect. http://jqueryui.com/demos/show/ For the callback argument it tells me this: "A function that is called after the effect is completed.". That's exactly what I want. But, I can't seem to figure it out. $('#details_'+onderwerp).show('blind', options, 500, onOnderwerpChange (onderwerp)); function onOnderwerpChange(onderwerp) { alert(onderwerp) } The problem is that the alert() is executed before the effect is completed. The effect
Dialog + DatePicker = FAIL
Hi I've put a datepicker inside a dialoge, but when I click on it I only get 1px white line in Safari, and nothing in Firefox, when I move it out of the Dialog, it works fine. Is this a z-index issue and if so how do I fix it? I tried just setting the datepicker id to z-index 10000 to no avail. Any insights appreciated!
Localization
According to the demo / documentation of datepicker "localization is built in". However it doesn't seem to be. It always shows in English and when I briefly looked at the jquery-ui code I only saw an array of the English names of months and days. So how do I get a localized version?
ThemeSwitcher CSS Over rides
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#ffffff" text="#000066"> Working on app with theme roller, did a few minor UI css over rides in separate file ( minor padding etc to suit my needs). Once i put it together I tried themeswitcher. Themeswitcher introduces ajax loaded UI css file however it seems to take "last in" control and the over rides I did are now second inline to the default of the UI css. Before turning on themeswitcher these
alow many selectors on option "accept" of dropable
Hi all, my situtation is fullly simple! I have a dropable container! I want let this container accpet many elements type via option 'accpet'! Something like this: $gallery.droppable({ accept: ['li', 'img', '#trash li'], activeClass: 'custom-state-active', drop: function(ev, ui) { recycleImage(ui.draggable); } }); i tried above code, but it doesn't work at all!!! Thank you!
sortable.serialize doesn't return new sort order
I suspect I'm missing something obvious, but the following code always seems to return the same (original) sequence when I move an item. Any suggestions: <!doctype html> <html lang="en"> <head> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { $("#pages").sortable( { items: $('.sortlist'), update: function (event, ui) { alert($("#pages").sortable('toArray')); alert($("#pages").sortable
[off] new project
hello people i started a new project called jplanet. it's a content aggregator about jquery. see more in http://jplanet.tumblr.com/ thanks
Can't Refresh List of Sortables After Adding DIV to DOM
Hi. I'm going crazy trying to get .sortable('serialize') to recognize new additions to the DOM. Any help would be appreciated. I'm working on a drag and drop thingie using draggables, droppables and sortables. The problem is like this: the user drops a "new" widget onto the page, which is some form elements to fill out. Rather than have the user have to save each new widget and then save the layout/ order of the widgets, I have one save button which looks for any new or modified content, saves it
added padding in error/highlight div
I think the UI javascript is adding padding on the fly to error and highlight div tags. I want to customize the style myself, but it is throuwn away because the style is changed inline. How can I alter/remove that?
How to install properly
Hi, I am looking for the right thing to allow me to add javascript code to blocks on site developed in drupal. I downloaded jquery UI and added it to my modules folder but its saying I don't have it installed properly. Any suggestions?
Server side failure breaks tabs
One my site where I am using the jQuery tabs when i go to submit a form when it fails on a server side test and you are returned to the form with an error (it is using an update panel) the jQuery tabs have gone all weird, actually it's like they haven't been loaded they are all listed down the page?
disableSelection
A few of the UI demos show code such as: $ ("#sortable").disableSelection(); I see that this function (and its enable counterpart) exist in the core. However, I could not find it documented anywhere. Has this been superseded by .selectable( 'disable' ) or am I missing something? Thanks, Dave
How to change url after click on dialog button
Hi pls i want to logout user after confirming modal logout dialog. Looks like this : $(function() { $("#dialog-logout").dialog({ autoOpen: false, bgiframe: true, resizable: false, width: 400, modal: true, overlay: { backgroundColor: '#000', opacity: 0.5 }, buttons: { 'Logout': function() {
Drupal Form API + jQuery UI Slider: fieldset #collapsible=TRUE renders slider twice
Hi Has anybody experienced that if they uses jQuery UI slider within a Drupal Form API type fieldset with #collapsible=TRUE, that the jQuery UI slider is rendered twice? Just curious Jeff in Seattle
Themeroller does not work
ThemeRoller is not working AT ALL for me at the moment. Custom themes do not get downloaded, although everything looks OK in the web browser. In IE I just got a .zip file containing a single binary file named "jquery-ui-1.7.1.custom". In Firefox and Opera, I get a .zip file containing the full folder structure. However, even though the theme name is "custom-theme", the CSS and image files are all the defaults. Before I downloaded the file, I copied the URL, and spotted a mistake. The beginning is
customize layou of jquery slider
im trying to customize my slider with the ui.slider.css but to no avail... i just would like to add some color the the handles and bars, but cant figure out what im doing wrong. Here is the css file... /* Slider ----------------------------------*/ .ui-slider { position: relative; text-align: left; width:500px; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default;} .ui-slider .ui-slider-range { position: absolute; z-index: 1; font- size: .7em;
jQuery sortable accordion clone across multiple tabs
So far I have an accordion like widget that functions almost the same but is sortable and allows for more than one draw to be open at once. Its currently displayed on tab one of a multi tab interface, standard tabs, sortable too. I am wanting to allow users to drag draws from the front tab to an area in one of the others, so each user can rearrange the front page to display only whats needed. Anyone care to help me out? Heres the Jquery for the interface: $(function() {$("#tabs").tabs().find(".ui-tabs-nav").sortable
Datepicker button position/style
Hi The problem is that the generated button is badly positioned and there is no way to alter it's style (or size and margins at least) without touching the compressed js core code. There are two options in this case. And sincerely I prefer the second one. 1. Could anyone point me where the button object is in the code so I could alter its properties using js directly? 2. How could I initialize the datepicker so it uses my own trigger button based on a div (by default if called on a div the datepicker
Dialog Issues In IE7
I'm having a lot of problems with sizing of dialogs in jQuery UI 1.7 and IE 7. Everything works fine in Firefox but I find the following behaviors with IE: 1. Something seems weird with the content size. If I have a table in my dialog with 6 rows and set the height of my dialog to 325, the dialog "collapses". The content height is set to about 5 pixels and I'm left with basically a view of the title and dialog buttons. If I grab the resize handle and move it, the dialog snaps into the correct size.
Slider - assigning values and display them.
$('#slider, #slider2').slider({ animate: true }); //getter var animate = $('#slider, #slider2').slider('option', 'animate'); //setter $('#slider, #slider2').slider('option', 'animate', true); <!--/ANIMATE--> <!--MAX--> $('#slider, #slider2').slider({ max: 5 }); //getter var max = $('#slider, #slider2').slider('option', 'max'); //setter $('#slider, #slider2').slider('option', 'max', 5); <!--/MAX--> <!--MIN--> $('#slider, #slider2').slider({ min: 1 }); //getter var min = $('#slider, #slider2').slider('option',
Using resizable overflow:auto doesnt work properly
When applying resizable to a div that has a style = 'overflow:auto;', the div will always have a scroll bar on it even when the contents of the div doesn't exceed its capacity (width, height). The expected behavior, is to have scroll bars only when needed! Any advice on this? Thanks.
Datepicker for hidden fields
I have a field that is initially hidden and later becomes visible throw a .dialog() call. I can't get the field to be have a datepicker attached to it because of this. I tried making the datepicker() call in .dialog()'s "open" handler but that didn't work. If I make the div which contains the field visible when the page is initially loaded, everything works fine. However, I'd like the div to have a style of "display:none". Any ideas?
Using the keyboard to start a drag (rather than a mousedown)
Hi, I'm working on a drawing application which has two operations: copy and move. The problem I am having right now is that I need to initiate a move by pressing the "m" key rather than be clicking the mouse and dragging it. (Similarly, pressing the "c" key will clone an object and then start dragging it). I thought that I could use something like this: $(".draggable").trigger("mousedown") ...but I just can't seem to find any way that makes it actually work. Does anyone have some suggestions? What
How to format date without need to use the select box
Hi i want to change the date format without using the select box in the form.How to do it? i want to set yy-mm-dd as the default format for date.
Tabs not working correctly
Hi, I have used earlier versions with not much trouble but am now working on a site with jQuery 1.3 and UI 1.7 and for the life of me I can't work out why this problem is happening. http://howesandbrown.jaijaz.com/products/ The tabs are kicking in but it is like it isn't finding the tab panels and there fore creating it's own with the entire page. Any help would be great. Thanks.
sortable accordion across two tabs
I am at the last step of something I have been coding for work, I have a tabbed interface, where currently one tab has a single accordion, of 10 drawers, The draws are sortable, and the script is written to allow multiple draws open at once. The jquery and HTML will follow, but I have one question, how do I make the accordion-like feature work across two tabs, I want the draws from each to move between the tabs easily, allowing users to display their main used and relocate the ones they dont to a
Next Page