Suggestion to enhance ui-tabs list selector to allow for alternative markup
The ui-tabs plugin is hard coded to assume that the tabs <ul> is a child of the current element. The code in question is in the _tabify method: _tabify: function(init) { this.list = this.element.children('ul:first'); ... } Some css limitations in a recent project required that my <ul> needed be within a <div>, causing the tabs plugin to fail to locate the <ul> list. I changed the code to use find() instead of children() and added an option to the defaults as follows: (Note the use of ">" in the selector
Using draggable on div with position right
I ran into something today that I wonder if there's a way around. I have a div that I give an initial position using "top" and "right" in the CSS, and then I set it to "draggable". When I drag it, the right edge stays at the starting point, so the div stretches out in. It's an interesting effect, but not what I want ;-). I solved the problem by changing the CSS to position using "left", but I'd prefer to use "right" if I can, as I really want this div to start out hugging the right side of the screen,
Set default / focused button in dialog
I have a jquery UI dialog with two buttons: OK and Cancel. When the dialog opens, I want the OK button to be in focus. Here is my code: $('#confirmationDialog').dialog({ autoOpen: false, width: 400, height: 200, draggable: false, resizable: false, modal: true, closeOnEscape: false, bgiframe: true, buttons: { "Cancel": function() { $(this).dialog("close"); }, "OK": function() { window.location = 'somepage.html'; }
positioning the Jquery Tabs on the screen
My question is quite simple, forgive me, css got so complex in the last few years. I want to position the JQuery Tabs on the top right side of the page. I cant find how to manipulate the CSS. Tried something with left: 200px etc.. but that didnt work Who can help?
binding the dialog resizeStop event /after/ dialog creation
Using jQueryUI 1.7.2 index.html, the Welcome to jQuery page, and FireFox 3.0.13 under Linux , refer to the link that opens the dialog // Dialog Link $('#dialog_link').click(function(){ $('#dialog').dialog('open'); return false; }); Attempting to bind an event handler to the resizeStop event /after/ the dialog has been created has no effect. e.g. // Dialog Link $('#dialog_link').click(function(){
Toggle Options
Hi all, I'm desparately looking for an options list for the toggle effect. On the Demos & Docs page it says "A object/hash including specific options for the effect." But where can I find a list of options that I can use with this effect? Thanks for any help! Best, B,-
How to respond to an indefinite-size list of submit buttons
I have a list built dynamically in django template: <form> <div id="ajax-response"> <ul id="test-list"> {% for case in caseList %} <li id="listItem_{{case.id}}> <table><tbody> <tr> <td>{{case.subject}}</td> <td> <input id="button_{{case.id}}" type="image" src="{{MEDIA_URL}}/icon.gif" name="submit"> </td> </tr> </tbody></table> </li> {% endfor %} </ul> </div> </form> I want JQuery to respond to any one the submit buttons by sending a GET request to the server and receiving an HTML result that replaces
Prevent dropping by asking a question
Hi, i'm using the last version of jQuery & jquery ui (1.3+1.7). I'm using "sortable" to manage element sorting between a series of lists. Can i prevent dropping by asking a question to the user? If the user ask 'No' i want to abort the current sort. Thanks in advance for you help
Example of Linkable Header and Persistent State - Accordion
Hello, I was wondering if anyone had an working example of the accordion menu using a linkable header and maintaining the menu state. I found this post in this forum but for some reason I am not able to get it working on my test page. http://groups.google.com/group/jquery-ui/browse_thread/thread/3f9c749bc7624a76/eac535bdf5b62e53. I was hoping to compare a working source to what I have to debug. Thank you.
append and selector problem
Hi, I am facing one problem In jquery. For easy understanding, below html code created. Before clicking on CHANGE label if click on 12345, I am getting hiiiiiii alert message. After clicking on CHANGE I am not getting alert message.(I am experting hiiiiii should come on click of 67890 also). code sample <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $('#change').click(function(){ $('#div1').empty(); $('#div1').append('<table><thead><th>NEW
drag and drop on ie and 1.7.2
Hi, I am having a problem with drag and drop on all versions of ie. Whenever anything is dropped, ie get an error that says 'data (...).options is null or not an object'. The drop happens successfully, but there is a ghost of the item being dragged at the last position. Anybody run into anything like this before?
jQuery UI 1.7.2 selectable lasso css
Hello all, Is it possible to change the css for the lasso of a selectable in jQuery UI 1.7.2? Example: change the lasso to be of a tan color? Thank you.
resizable with parent containment not working vertically
Resizable containment doesn't seem to be working for me. In my example below, a draggable is cloned after being dragged to a droppable. The new div is set as resizable with a containment of 'parent'. The parent is the div with id=2. The new div can be resized horizontally and this resizing is being contained. The problem is that the new div cannot be resized vertically. If containment is set to 'document', the new div can be resized both horizontally and vertically, but this is not the containment
jQuery UI Progressbar Plugin Issue
I have been trying to use the progressbar plugin, but have had no success so far. The problem is that it would not refresh the current percent while the heavy back-end process is still running, only when it reaches 100%. It means the progressbar goes from 0% to 100% without displaying values in between (25%, 50%, etc). Maybe I am missing some sort of flush method. The back-end process is triggered by an AJAX call via MPAJAX plugin. I had to make use of multipart response messages in order to get
jQuery Accordion Navigation
I have 15 panes, the content (of some the panes) is longer then other. So if I expend the first pane then expend the 10th pane, all the pane moved up and left looking at blank part of the page. Is the navigation option of the Accordion use to anchor the pane? Thanks, Jamie
UI/API/1.7.2/Dialog and current position
I've got a dialog box displayed on a page which is moveable. I want to be able to get the position of the dialog after it's been moved and store it in a cookie so the next time the user loads the page the positions of the dialogs are retained. Can you let me know how to do this? Thanks Steve
Find and replace if found more then once
Is this possible? I want to look in a div element with a certain ID and if the word Subtotal is found more then once then replace the second instance of it with Total?
multiple select and drag/drop
Hi guys, I am trying to allow for multiple items to be selected and dragged/dropped - anyone know of how I can do this? Thanks,<br clear="all"> -- Kevin
Scrollable Image Gallery - Looks Like a Grid Instead of a Carousel??
Hi everyone, I'm struggling to find something and hoped someone here would be able to help. I'd like to implement a thumbnail gallery in the form of a 4x3 grid (the number of items is irrelevant though) on my web page. I would like to be able to page the grid, so that you could click on left and right hyperlinks to scroll the grid page by page. So if I had 36 images, 12 would be shown at a time, and by clicking on the left / right links the entire page would scroll and present 12 new images. A good
Draggable isn't switched on in cloned div?
I already posted this in the non-UI general discussion, just realized that this might actually be the right place. Regards, Olav --- Hi everyone, spent the whole day trying to locate the problem here, so I would really appreciate any ideas you might have on this one: We have several "modules" in some sort pool (actually called "pool") and want to drag them into a selection box ("auswahl") where we change the CSS class from "pool_modul" to "auswahl_modul". So we clone one module-div and can drop it
accordion and IE6, 7
I'm using the accordion function to display a dynamic menu on the left of my page. Using firefox this works perfectly and scrolls the menus as expected. Using IE the output is not corrected. The menu options are not correctly folded, etc. I'm using the following code; <script type="text/javascript"> $(document).ready(function(){ $('#accordion').accordion({ autoHeight: false }); }); and then the php to generate the menu structure; <div id="menu_items" title="Links"> <div id="accordion"> <?php
multiple select and drag/drop
Hi guys, I am trying to allow for multiple items to be selected and dragged/ dropped - anyone know of how I can do this? Thanks,
Dialog, tabs, and ajaxForm plugin, multiple dialogs appearing
On one of my tabs, I have a contact form, which I'm submitting using the ajaxForm plugin. On submission of the form, it displays a dialog with the results. Problem, it's creating two of the dialogs on top of each other. I have a function to create the dialog onload. function createDialog(element){ $(element).dialog({ modal: true, autoOpen: false, show: 'slide', hide: 'slide', buttons: { Ok: function() { $(this).dialog('close');
Thai Buddhist year
I impress on Jquery UI so much and would like to use it in our development team but I have a problem with Year in datepicker. I tried to setting localization of date picker to Thai. Month display very nice but year display as Gregorian Year. In Thailand we using Buddhist year. This year will more than Gregorian year around 543. If Gregorian year is 2009 Buddhist Year will be 2552. How to setting datepicker to show Buddhist Year?
Nested tabs sample code?
Does anyone have some sample code for nested tabs? By nested tabs, I mean two rows of tabs such that the list of tabs in the second row changes depending on which tab in the first row is selected. Thanks, Alex
Possible bug with datepicker on IE8
Hi, I've ran into what I believe is a bug with datepicker, and decided to run it by the list before putting it in the bug tracker. We're in a process of adopting jQuery UI (v.1.7.2) for our site, and one of the requirements for the datepicker is to be able to disable the input field once the picker is opened, and re-enable it back when the picker is closed. The following picker event handlers accomplish that on Firefox: beforeShow: function(input) {input.disabled = true;}, onClose: function(dateText,
Smart Banner Modification Needed
On the site I am almost finished developing at http://www.murphytx-online.com/murphy/eating-out-american.php I am using the "Smart Banner" jQuery script from http://www.webresourcesdepot.com/smart-floating-banners/ This script keeps the content of the two sidebars always visible as the visitor scrolls down through the main content. However at any time other than when it's at its beginning position it is too low. I realize it is being kept at its starting position but when it doesn't need to be there
Theme setting - why I always get the default one?
To my understanding, the theme is up to the CSS file under the CSS directory. I down my custom package with the smoothness on http://jqueryui.com/download. For some reason, I always get the default theme, but not the smoothness theme. What I did wrong?
How can you check if a dialog has been initialised?
Is there a way to check if a dialog has been initialised or not? i just want to check if it exists and if it does then open it, otherwise create one etc. eg something like this (which dosent work); if ($('#mydialog').is('dialog') { $('#mydialog').dialog('open'); }else { $('#mydialog').dialog({ autoOpen: false, modal: true, draggable: true, width: 470, height: 'auto', resizable: false, draggable: false, bgiframe: true }); }
Div / li effects on browser resize
Hi all, I need a little help. I'm trying to achieve something similar to www.ogilvy.com (which i know is done in flash). I have a simple list contained within a div laid out like on the ogilvy site which I would like 2 things to happen with. 1. When the page loads I would like each li to either fade in or move and fade into place, one at a time. 2. When the browser is resized I would like the li's to have a smoother action than the standard html of shuffling them all down. I hope that makes sense
How make just a few dates selectables?
I have a JSP page with a calendar on it (datepicker). I need to display one different calendar for each user. For each user, I have the days that user can choose. I would like to know how do I put those days on the datepicker so just those days can be selectables. Thank you in advance! (I'm sorry about my English)
Set the draggable containment to an element relative to the current draggable object
Hope this makes sense. But I'm having trouble figuring how i can set the containment property to an element relative to the current element being set as draggable. The idea here is to avoid repeating code. I have this HTM: <div class="items_drag_area"> <div class="contentBlock offeredItemsBlock"></div> <div class="contentBlock userItemsBlock"> <div class="user_games"> <div class="user_item rounded_corners5"> And im currently experimenting with this js: $(document).ready(function() { $('.user_item').draggable({
When Dialog is loading, data isn't passed properly
The page I'm working on right now is a cart checkout page, in which I want to make sure all the cart quantities have been saved before moving on to complete checkout. I have it set up so that if any quantities have been changed without also being saved, a dialog box pops up allowing the user to either save the changes or continue without saving. To save the changes, I have to loop through the changed quantities and send each item individually to a pre-existing page that updates the database. Now,
Toggle default: hide
Hi I am a web designer from Belgium and I wanted to thank you first of all for these really nice looking "apps". second, I am having a problem with the toggle effect. I want it to be hidden by default and have it visible once you click on the link. Could you modify the code and show me how this could be done. thanks you.
problem printing a page with a dialog in IE
When I print a page with a dialog on it, everything looks good in FF, but in IE (7) the page content bleeds through the dialog (the dialogs prints as if it has transparent background). Does anybody know a workaround for this? Thanks!
Slider Grouping
Hi, I would like to know how I can group sliders in a way that if want has a value different than zero, set the other ones in the same group to zero. The tricky part of this is that I have 8+ sliders in a form. Any ideas of what would be the best solution? Thanks in advance.
Datepicker of Jquery UI need help
Hi, I need help adding the jquery date picker to my existing code, but not reconstructing the whole HTML file. my code, <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>calenar</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js" type="text/javascript" charset="utf-8"></script>
Datepicker undesired today date on field & appendText
Hi everyone, I have a problem: when I load my page I want to see written in my date field a string passed with php but instead I see the today date put there by datepicker. How do I avoid this? Second: I used this function $('.selector').datepicker('option', 'appendText', ' 00:00:00.000'); but nothing happens when I choose a date, no text appended =\ is there someone who knows the problem? Thank you in advance =)
repeated use of ToggleClass to run script
I'm a jQuery UI noob. For an admin page, where the admin has the ability to publish records, I set it up so they can click on a ui-icon- bullet next to the record listing. This works like a charm the first time. It changes the ui-icon to an open bullet, it runs the php script that its tied to it also works the other way around to publish an unpublished record. But when I try it more than once without refreshing the page (to toggle it between published and unpublished), it appears to be working (it
jquery sortable can not work？
Could anyone can tell me how to add effect to all divs？ jQuery： data = $("#sortable_list1").sortable("serialize"); update:function() { $.ajax({ data:serial, url:"list.php", type:"post", success:function(data){ $("#serverResponse").html(data); } }); } Html： I have 2 divs which id is sortable_list1 <div id="sortable_list1">
Next Page