Best way to create a jigsaw puzzle?
I'm trying to create a jigsaw puzzle with jQuery UI. I've looked at the various functionality and I think I need some kind of cross between draggables (with snapping), doppables and sortables. Here's my "specification": - Assume for example a fixed size, eg 400x400 with 16 100x100 pieces. - Drag pieces onto a 'canvas' which would be 400x400. - Each piece must snap to 100x100 within the canvas (but not necessarily outside it). Extras: - One alternative to the canvas would be to just have a blank area.
Multiple Datepickers
Hello. I have a page where I have about 50 boxes where I need to choose a date. I want to use the datepicker for that function but I dont want to put 50 datepickers script. ie. 50 <script type="text/javascript"> $(function() { $('#datepicker_1).datepicker({ changeMonth: true, changeYear: true }); }); </script> How can I display multiple datepicker boxes without having to repeat that per every box? thanks!
Cookie for portlets?
Hi, Can someone point me to some sample code for using a cookie to store the state of portlets? example: http://dukey.gdd.net login/pass is guest/guest I'd like to store the state of the portlets on that page when a user rearranges the boxes. -- ______________________________________________________________ Clayton Dukes ______________________________________________________________ --
What is the reason the datepicker doesn't allow you bind on the custom UI events
What is the reason that the datapicker doesn't allow you to bind to its events? $('.selector').datepicker().bind('datepickeronselect',function(){ console.log('hello'); }); All of the other widgets allow you to do so but the datepicker seems to be left out.
Autocomplete question
I have two inputs, A and B, where I want to use autocomplete. A is a normal autocomplete but I want B's autocomplete to depend on input A when it makes the query to the database for the candidate words. For example, I want to search for matches between two teams. When I write into input A, the autocomplete shows all the teams. When I write into input B, I want autocomplete to show only the teams that played a match against the team written in A. Is that possible?
Extending autocomplete
Hi there, I'm using the code you can find here: http://jqueryui.com/demos/autocomplete/#remote-jsonp to give my users the possibility to choose their city and country. Everything works fine at this moment, except I would like to add also the country to an input field called "country". Is there a way I can achieve this with the same code? Thanks in advance for any help it's appreciated.
Where do I find instructions for installing UI?
This is crazy! Which files are needed to run the UI? I've downloaded the 'bundle' but I keep getting missing file messages! ARg!
installation instruction?
I managed to get jquery UI working somehow but it wasn't easy. I could not find instruction on how to get jquery UI installed or integrated into my site. At first I downloaded the development bundle 1.7.2. I copied out jquery-ui-1.7.2.min.js and put it into my app. I got one datepicker attached and voila. It worked but it was also ugly. I figured out after some searching that I must have not copied some css/images, etc. This is where he doc is inadequate. In the downloads, there is no installation
H.apply is not a function - JQuery Tabs
In the Jquery Tab, I am displaying forms which has some fields. When I cilck on those field like focusing the text field or checking the checkbox. It gives error "H.apply is not a function". Can you help into this
IE 8 Accordion not functioning...
I'm a bit new to js/jQuery , so this could be a beginners error... What' I'm trying to do is just get a plain accordion setup that will work through multiple platforms. FF3.5 - no problem. IE 8 - ??? it just explodes. No accordion functionality to speak of. The page I'm working on is here: http://www.moxdom.com/the-goods/ For js includes I have this: <script type="text/javascript" src="http://www.moxdom.com/wp-content/ themes/InterPhase/js/jquery-1.3.2.min.js"></script> <script type="text/javascript"
Display issue with IE with JQuery Accordion
Hi, I found the display issue with IE with JQuery Accordion/Tabs/Rounded corners/etc. Then I found even the "JQuery Demo UI" also has the same problem. http://ui2.jquery.com/demos/tabs/ How to tune IE to work with JQuery UI or vice versa? Please help me out.(Obviously you can make it out as I am newbie :-)) regards -Hari
Problem with Accordion and IE7/8
Hello! I'm having really big trouble with getting Accordion to work under IE7/8. I've even tried running older versions of jQuery/jQueryUI. When I'm running my website using IE, I get an error: "Unexpected call to method or property access" I checked lines where it occured and looks like that it's connected with appendBefore function (jQuery). I think jQuery UI uses it in order to create code needed for Accordion. Unfortunately, I have no idea what's wrong. I'm using whole <div> with sub-<div>s as
Accordion with IE
I am trying to to the accordion and it is working just perfectly when viewed in firefox. It is super super choppy when trying to view the same page in IE. What can I do to fix this? What causes The UI to be choppy on IE? Thanks
"weird" things happening with .clone(true), button widget, and .remove()
I'm trying to setup a system where on load, i take the first row of the table and use it as a template. i then i have a click event that clones that template and adds it as a new row to the table. each row has a button withthe button widget applied to it that removes the row. Initially, i can add all the rows i want and they get the button styling, however, if i remove all of the rows after i've added one, adding more adds them without the button widget styling, but it still has the click event.
Radio Buttonset Scaling
Hi, I'm trying (for the first time!) to create a Radio Button set. The body text is scaled using a pretty standard "body { font-size:62.5%; }" The buttonset which is created has unequal button borders. The line which separates adjacent buttons appears wider (2px) in some places than others. Has anybody else come across this? Is there a fix? The default body text size looks perfect, if a little large, with a 1x seperator. Any help much appreciated. Andy
Clear text box after autocomplete
I'm trying to clear the text box after the select event has fired. The following code does not work: $("#conditions").autocomplete({ source: availableTags, minLength: 2, select: function(event, ui){ $('#conditionList').append("<li>" + ui.item.value + " <a href='#'>[Remove]</a></li>" ); $('input#conditions').val(""); // <- This does nothing } }); Any ideas on how to get this to work? Thanks, David
Jquery Dialog Overlay problem when dialog is bigger than page content
I'm stuck at a problem and I don't know the answer. After a lot of debugging I figured out what went wrong, but I don't know the answer. When I use a basic Dialog, set modal to true and the content of the dialog is bigger than my viewport, the overlay isn't calculated correctly. The height is wrong, therefore I get a vertical scrollbar. My guess is that since I have suddenly a vertical scrollbar I also get a horizontal scrollbar. I tried a clean html file with only standard css and js files from
Need dialog to extend past vertical viewport
I'm using a single jQuery UI dialog on a page of mine. The page has numerous buttons that can trigger the opening of that dialog with a click event. Prior to opening the dialog, I want to reposition it so the top of the dialog DIV appears at the same top offset as the button (basically covering the button). Here's my problem: let's say that the dialog DIV has a fixed height of 500 pixels, and the "open" button appears right near the bottom of the viewport. When I click the button, there isn't enough
Autocomplete with custom data and display
Using this source code I've faced the challenge: custom data displays fine when there is an only "autocomplete" text input. I have two and both of these works as autocomplete, but only second works with custom data. I think that problem is in this function: .data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; Tell me please, how to fix this?
Draggable has offset when page is scrolled
Hi I have a page with a (long) list of object on the left and a droppable on the right. When the page is not scrolled, I can drag and drop items to the right normally, but when page is scrolled if I start dragging an object from left list to the right area, the helper (moving object) appears with some distance from mouse cursor, this distance increases with increase in page scroll size; How can I fix this? Best Regards
basic livequery and dialog question
I'm loading data from a mysql db on a page - if certain criteria are met in this data, I put up a button, where I'll want the user to click the button and have a dialog appear (with yet more data from a mysql db). I can't get the liverquery part to work - seems simple and I get no errors. Here is how I'm getting my button: [code] if ($row['location'] == "home") { ?> <button id="bttn1" value="volunteer">Volunteer</button> .... [code] up top in js, I've got what I think is livequery
Autocomplete - trigger search + show all results
Greetings: [Jquery UI 1.6rc2] * Is it possible to use autocomplete methods to trigger a search based on text like so. $('#textbox') .val('my name') .autocomplete('search') This does not have an effect when I execute it. * Is there a method/option to show all data in an autocomplete? For example, by clicking the down button? Thanks, John
Dialog error in IE6/7
Hi, I am using jQuery UI 1.6rc6 together with OpenLayers (http:// www.openlayers.org/) and have come across som issues running it in IE6/7. When I try to move the dialog i get the error "Error: Failed", this occurs only when i have a vector layer in OpenLayers and I havent been able to reproduce this in any other way. Here is an example: http://www.lindmark.org/temp/test/dialogtest.html Any ideas, it works perfectly in firefox... Fredrik
Link inside an accordion
When I add a url link inside an accordion it adds another accordion section. I'm using the accordion for content not navigation. How can I avoid this and just get a link to another site in a blank page. I'm using 1.2.6 and ui.accordion.js
jQuery UI 1.9 release date
When jQuery UI 1.9 likely to be released?
Any news regarding shadow for modal dialogs? I'm new to jQuery and I can't make it work
Hi, I have created my own theme using themRoller, and I liked the shadow that is being showed in the overlay dialog. How can I apply it? I have searched and seen that like over one year ago it was removed because of some problems for 1.7, but right now we are in 1.8, so I guess it could be solved. I can't find anything in the API. Is it still TODO feature? Thank you!
Accordion - expand all?
I am implementing J. Zaefferer's accordion plugin. Is there a way (or option, but I couldn't find one) to have a specific header 'expand all' or 'open all' the sections? I have written a snippet of jquery to show() all the sections, but then the accordion loses track of what is open. I'm not sure how to expound on this any further, so let me know what you need to know...
Datepicker don't work in IE 9 ?
In Chrome works well and in other versions of IE too, but in IE 9 don't work. Is this a compatibility problem?
ie8 transparency problem with datepikcer
hello, datepicker work properly in firefox but in ie8 the background is transparent ... i cant find the way to remove the transparency in css datepicker. You can see it here : http://www.locordi.com/?page_id=159&type=2 by clicking on date livraison or the one under ... May you can help me ? Cordialy, Olivier
Accordion - multilpe sections open?
The UI Widgets demo page mentions that it is not possible to have multiple accordion sections open at the same time. But I really need to have multiple accordion sections open. Basically I want click on the header to open it, and click on the header again to close it. I do not want the sections to close automatically when a different header is clicked on. Does someone have a patch that I can use that will allow multiple accordion sections open at once? I am using autoHeight: false so the overall
Slow performance when initializing AutoComplete
Trying to apply the AutoComplete bundled with UI 1.8.2 to 280+ input fields on a page. I noticed that the initial rendering of the page is somewhat slow and upon investigation I see that the initialization of the plug-in is the culprit. The following code takes over 7 seconds to execute in FF 3.6.3 with IE7 taking even longer. console.time('autocomplete'); $("input[id$='Project']").autocomplete({ minLength: 3, source: function (request, response) { $.ajax({ url: '<%= Url.Action("FetchProjects",
AutoComplete - Combobox option js error in IE "Stop running this script
We have a simple combobox we are trying to convert to autocomplete - combobox. This provides the typeahead search as well as the clickable arrow for normal combobox functionality. Works fine in CHROME and FIREFOX but IE pops an error "Stop running this script". There are about 800 items in the combobox. We don't have issues with Combo boxes that have less items but why would IE be stuck in some kind of loop when chrome and firefox don't. any fixes or adjustments to initialization to solve this
Accordion: how to set "active" to last-child?
I can't set the "active" panel to be "last-child". Shouldn't the following work? $(function() { $("#accordion").accordion({ active: "h3:last-child" }); }); I'm just using the source from the demo site: http://jqueryui.com/demos/accordion/ Thanks in advance, Bob --
iPad and jQuery Dialog
Do the jQuery dialogs work on iPad and iPhone?
dialog shadow
I have seen the property shadow:true with dialog could someone give me the heads up about what I need to get this working is this a css or plugin issue is there an example in the wild?
datepicker works - doesn't work
I am using the datepicker in a very basic way: click in the textbox, it pops up, you select a date, it closes after putting the date into the textbox. In the dev environment it works fine. No problems. When I deploy it to the production environment, datepicker opens when I go into the textbox, but when I click a date, nothing happens. I ran it in the script debugger of IE8 and the _selectDay() function is never called. I checked to make sure all the same files were there as in the dev environment
vertical toolbar using buttonset?
I need a vertical toolbar. Is there an easy way to vertically-orient a buttonset? Thanks for your time.
my .click with UI Dialog is making me have to double click instead of one click to open it
I cant really figure this out, the only thing i could see messing it up is the javascript:void(0) inside the anchor link but since there is a double click function and a click, it should only be one click. Does anyone have an idea as to what is wrong here? I put autoOpen which i think is also causing it, but i did that so the user can open it, close it, and open it again so the delay "double click" is saying for the first time initialize and then the second click is opening?? if so how do i get around
ui dialog - inputs dissapear on second open
i posted this earlier, but it disappeared from the forum (irony)... below code doesn't work when the dialog is opened from the link second time <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <link href="App_Themes/Default2/custom-theme/jquery-ui-1.8.5.custom.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"
UI Dialog: .dialog("open") is not working for me
This is the first time I am using the dialog box and obviously I am doing something wrong. I am not able to get the dialog to open. Initially it is hidden with "autoOpen: false,". In another a JS function I call SaveSuccessufll(); but the dialog popup never pops up. Any suggestions? Thanks Code in the HTML: <div id="dialog-modal" title="Your data has been successfully saved."> Thank you for waiting! </div> jQuery(document).ready(function() { $("#dialog-modal").dialog({
Next Page