Having trouble with tabs...
Tabs don't work in the app that I'm developing. To test, I went back to a remedial example and it is failing as well. Here is a URL It is meant to hide the inactive tab panels and it is also meant to turn the tab a different color for the active one. http://colleenweb.com/testsa/JQ-redex/ex16.html It seems like I may be leaving something out. What am I doing wrong. thank you
Datepicker after removing and re-adding an element
Hi, I'm trying to use a datepicker on a element that I'm removing and adding (depending on values in a form). The problem is that, when the initial elements are re-added (via append) to the document, the datepicker no longer works, even if I put the datepicker again after re-inserting the element. Does anyone know how to make the datepicker on a re-inserted element work again? (I'm trying to avoid show/hide, because I'd rather not have the field submitted as part of the form when it's hidden.) Best
Changing default cursor on buttons
I have a few questions... How can I change the default "hand" cursor that jQueryUI uses with its dialog buttons? And I also have a cursor of a closed hand that I want to be shown during a drag process. How can I do that? And I noticed that the "x" icon used for closing a dialog is copied in the bottom, left corner of every dialog in IE. Is that a bug?
using selectable with a table
I have a table that represents a physical 12x8 grid. Each <td> contains the text name (A1-H12) of the grid co-ordinate. I've added the jquery-ui selectable interaction to the table. I want users to be able to select an arbitrary set of grid co-ordinates. As well as selecting by <td>, I'd like the user to be able to select entire rows and/or columns by clicking on the row or column <th>. Selection by <th> is causing me some difficulty: How do I determine which <td>s are in the same column (or row)
Tabs: Adding hash to URL ?
Hi, I use tabs and I would like to have a http://www.mywebsite.com/#anchor as url not only http://www.mywebsite.com/. How can I do that ? I'm using http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js $(function() { $("#page").tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); }); Many thanks for your time and help.
UI Sortable problem
Hi to all; I´m having an issue with the UI sortable that is breaking my head, maybe someone could help me. Th thing is that I have an <ul> with the id="gallery" and when I attempt to do a $('#gallery').sortable('serialize') is empty :-( Does anybody knows why ?? Thanks in advance
Modal dialog over embedded object or iFrame (ugly solution)
I see that ticket # 4841 hasn't yet been addressed after 8 months. http://dev.jqueryui.com/ticket/4841 An ugly solution for me was to hide the embedded object before invoking the dialog and showing it again after the dialog is closed. Not the ideal solution, but certainly better than having parts of the dialog sandwiched between the parent page and the embedded object. Embedded pdf: Result of modal dialog: Code as follows: <html> <head> <link rel="stylesheet" type="text/css" href="../css/custom-theme/jquery-ui-1.7.2.custom.css">
jQuery UI 1.8.1 and jQuery UI 1.7.3 have been released
Check back frequently for development status updates and news about the jQuery UI library and community. jQuery UI 1.8.1 The first maintenance release for jQuery UI 1.8 is out. This update brings a bunch of fixes to Autocomplete and a few fixes to other plugins. For the full list of changes, see the changelog. You can download it here: Download File Downloads Development Bundle: http://jquery-ui.googlecode.com/files/jquery-ui-1.8.1.zip Themes Package: http://jquery-ui.googlecode.com/files/jquery-ui-themes-1.8.1.zip
Tabs + IE & Opera rounded corners
Hi, I'm trying to get JQuery UI Tabs with rounded corners on IE and Opera. To do, I use curvycorner library (http://www.curvycorners.net/) ; I've tried the jquery.curvycorner librairy but it doesn't work. The rounded corners are well generated, but when I switch tabs, the ui-state isn't updated. The first tab always as ui-state-active and others have ui-state-default. And the tab height still the same for all tabs (the first tab height). I'm trying to fix it, but if someone as the solution, it would
Sortable + <table> + <ul>
Hi, I am trying to use something different from a <ul> as source for dragging an item to a sortable. I mean, the user have a table from where he would drag lines (<tr> elements) to a <ul> (sortable). This beast even works (I can see <tr> elements inside a <ul> element, horrible combination). The problem is that I wanted to grab the <tr> and "transform it" in to a <li> before dropping it into the <ul> target. JQuery provides a way to access the item (via ui.item on its callback methods) but it seems
Tabs header is way too large
I'm a jQuery / UI newbie and I have a strange problem with tabs. The tabs header size is way too large. You can take a look at it here: Tabs problem. The same HTML code placed into the index.html file (the one distributed with jQuery UI) works fine: Tabs demo. You can find my CSS here: my style. (I just hope my server won't go down.) I don't get it. I tried to place my tabs content into the sidebar section, and it worked fine. It gets too large only in the content section... Any ideas? (I'm really
Tolerance in Droppable and Snap in Draggable incompatible ?
Hi Guys, I have a row of divs (droppable) some of them containing other divs (draggable) of varying width. The problem I have is that I'm trying to have the snap option set to the droppable divs so that my draggable will only move by "steps". However when I set snap, the only tolerance that seems to work for a droppable is 'intersect' and that value is not working for me (mainly because it doesn't detect the right droppable). if I don't select snap, the 'pointer' and 'touch' tolerance work fine.
JQUERY DIALOG: close failed when I use load
Hello everybody, I have a little problem with the dialog. When I load the content of the dialog using load() method of jquery I can't close my dialog using $(this).dialog('close'); Here is the code I used: $("#finishTaskDialog").load(urlFinishTask).dialog({ autoOpen: true, resizable: false, width:560, height:300, modal: false, overlay: { backgroundColor: '#000',
move to another tab with javascript
Hi all, I am doing validation on a page that has jquery tabs. I'd like that if a form field has not been entered, it will alert the user and then switch to the tab containing the relevant field. How do I switch tabs with jscript. Thanks
jQuery UI 1.8.1 change log
Hey just wondering if theres a change log or list of fixes for jquery ui ?
Make an iFrame object sortable ?
Hi, i have an iframe called #iframe and inside that iframe i call a basic html homepage with an ul called #nav with some li's, i wonder if there is a way to make #nav elements sortables without modify the original html loaded through the iframe. For example i have 2 files ... the one with the iframe (iframe.html) and the one with the homepage (source.html) In iframe.html i tried this on the head tag: <script type="text/javascript"> $(document).ready(function(){ $('#iframe').load(function(){
How can i use ui.slider to animate content scroll .
when clicking on the scroll line(not drag slider) content not animated scrolls! how can i change this!? var slider = $("#mid_slider").slider({ animate: true, change: handleSliderChange, slide: handleSliderSlide }); function handleSliderChange(e, ui) { var mid = parseInt($("#mid_inner").width()); var maxS = parseInt($("#mid_inner").attr("scrollWidth")); var maxScroll = maxS - mid; $("#mid_inner").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000); } function
accordion open from bottom to top?
is there a way to let the accordion open from bottom to top instead of top-down?! thanks in advance, marv
Can I drag multiply elements at once in sortable list?
Hi all, Now I'm trying to build a menu navigation in my back office panel, where I need to move more then one elements. When I drag parent menu item, the child menu items also must be dragged. How can I do it ? Thanks
Pass params into position()?
Hi All, I'm trying to write a generic positioning function so that I can pass in various jquery objects and position them... The only things that will change are the object passed in and the offsets. Passing in the object works fine, but I can't seem to get the syntax for the offset to work. Can anyone tell me what I'm doing wrong? function doPosition(object, offsetX, offsetY){ j(object).position({ of: j('#stage'), my: 'left top', at: 'left top', offset: "'"+offsetX+' '+offsetY"'"; }); } doPosition(j('#myView'),50,60);
Sortable: clicking on item doesn't unfocus focused control
By default, when user left-clicks outside a form control, the currently focused control (if any) loses focus, possibly triggering change event. This does not happen when the element clicked is an item of a ui.sortable. Note very, very well: the click() handler attached to the sortable item, if any, does get called. Only the default behavior (unfocusing the focused control) is suppressed.
span in autocomplete items
Hi, I'm using the autocomplete widget with our own remote JSONP datasource. The server provides highlighted items that contain <span>s around the emphasized text. As expected in this particular case, autocomplete doesn't select the item if the user clicks somewhere into the <span>ed area. Is there any work around to this behaviour? How about event bubbling or adding a listener to the #highlight in the source? Thanks for any hints, Arnold42
Recreating the Modal form example
I'm trying to recreate and run the dialog modal form example at http://jqueryui.com/demos/dialog/. The source seems to be at http://jqueryui.com/demos/dialog/modal-form.html. But when I copy the page and try to run it, the modal dialog doesn't appear. The original source has a ton of js src files: <script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
Droppable / draggable in a table with divs.
Hi everyone I'm having a problem with draggable and droppable in jquery UI. I have a sort of horizontal calendar I'm developing for a specific bunch of clients. Here's how it works : Basically I have a table (I know, not my original idea, can't really change it now). Each row has 5 tds representing a week. Each Td has 7 divs aligned horizontally representing a day. Each day div can contain one div called a "reservation" or none at all. A reservation is a box that starts in a specific day and has
autocomplete max length
How can I make the autocomplete widget limit how many characters the results have based on the the maxlength="" option on the input
Containment Height
Hi, I'm using the Sortable/Portlets UI Code. Is it possible to auto-resize the Containment Height's. Bascially I have a DIV that acts as a container with a black background, when I sort these elements I want the container DIV height to change to match. OR is it possible to stop the bottom sortables from having sortables placed underneath them? Thanks,
troubles with tabs script
Hello, I've some troubles with the script of my tabs menu. I insert the original code found here but it contains only text and in my case, I would like to insert different php file. So could you please tell my what I have to write in order to get them ? Here under, you will find the example on a website which gets the tabs menu containing similar php file, and that's what I would like to have on mine. Thanks in advance, Cheers Isabelle http://www.lokaltvader.se/budskar/wxsim.php?tab=2
Filament Group Menu and ascx controls
I have implemented the filament group menu plugin. I added it to my master page and all was working well, until i added an asp.net ascx control to my page. this control does use jquery, but not the same functions as the menu. Has anyone come across the problem before?
Using the buttons in JQuery UI
Hey all, I cant seem to get this working, and I have no idea why. I have 1 set of radio buttons, and I am using Jquery UI buttonset command on them. They appear, but when you click on one of the buttons, the other one still stays selected. The functionallity still works(the correct value gets passed), but looks really confussing. Here is the code: <div class="avaChoices"> <input type="radio" id='avaChoiceFree' value="1" alt="#09F" name="avaChoices" checked="checked" /> <label for="avaChoiceFree">Available</label>
How to retain relative links in ajax retrieved tab
Hi, Is there a way to keep the links relative to the directory in which you are loading the tab from? For instance, I want to load a page in a tab in this directory: /mydir/ the page I'm loading is found here: /mydir/mytab so when I load the page in the tab, the relative links in /mydir/mytab refer to the wrong places because it thinks we're here: /mydir/ I hope that makes sense. It seems like it wouldn't be too hard to do, just curious if the feature is already available and I've missed it.
jQueryui.com is down?
When I visit jqueryui.com the following message shows: Welcome to nginx! What is that "nginx"?
ajax tabs works fine except in chrome and safari for windows
I'm using the Ajax TABS option to load links into a particular div ( #posts ). Everything works fine except in chrome and safari for windows. I also checked it out in safari on a mac where it also worked fine. In chrome and in safari for windows the content that is suppose to load simply doesn't load. The content that is by default in the div completely disappears. I've tried everything I can think of including trying older stable version of jquery-ui and jquery. if I use version 1.3.x of jquery
Loading existing html pages into a jQuery dialog window.
Before I dive into the jQuery UI I wonder if I could ask a question to see if it will easily do what I want. I have about 20 html pages that I popup with the "old school" window.open. These allow the user to build items on a virtual lunch menu. Selecting the "classic sandwich," for example, pops up a window and loads classic.html into it, which shows the user the attached classic.png display. Selecting "drinks" on the main menu pops up a dialog and loads drinks.html, which shows the attached drinks.png.
maintain dialog center with dynamic content
I have a dialog with the following $("#statusbox").dialog({ autoOpen: false, bgiframe: true, modal: true, width: 'auto', height:'auto', title:"Check Order Status", buttons: { Find: function() { get_status(); }, Close: function() { $(this).dialog('close'); } } }); and when the user hits the find button it runs ajax and returns orders to the dialog and
jQuery UI dialog - multiple IF problems
I definitely don't think of myself as a jQuery/javascript expert, but I know enough programming to get by - but on this project I ran into a problem where jQuery UI fails to initialize the 2nd dialog. I have 2 if statements to test before initializing each of them, but only the 1st if statement seems to be kicking in. Here's my code: $(document).ready(function(){ // regular dialog box $("#dialog").dialog({autoOpen: false, modal: true}); $("#dialog_link").click(function(){ $("#dialog").dialog("open");
Ctrl + Click to deselect an item on selectable list
You can use ctrl and a mouse click to select items that are non- adjacent. However if you try to click a selected item while holding control it does not deselect it. A sample is windows explorer. Make your selection either with ctrl to select individual items or a lasso for multiple items, or a combination of both. After you do that you can deselect whatever you want and keep the rest selected by holding ctrl and and click a selected item. Can this be mimicked in a selectable list? Thanks,
Slider Widget
Hi JQuery Geeks! In one of my project I am using slider widget of JQuery UI. I have 3 main need. 1) I have to 2 different color on the same slider. For example let suppose I have a range from 0-40, if user slide between the range it shows green color, once if user slides beyond the range, the rest part of the slider filled up with red color as he/she drag the on the slide. 2) I also want to display the measuring scale above the slide, user has options to use either by dragging the slider or by clicking
Draggable - Droppable (auto scroll droppable DIV when drag clone is over it)
Hi all, I have a draggable objects and one droppable object. Droppable object may contain list of items in it, contained in a DIV. Now, the problem is when there are lots of items in droppable box then scrollbar appears. Now, when a draggable clone goes over to this droppables then DIV doesn't scroll. I had already used scroll:true property of Draggable UI but this only scrolls the main window (ie, browser's scrollbar) but not my droppable DIV. Below is the sample code : $(".lidocument").draggable({
Drag/drop to multiple targets
I have 3 tables on a page. The 1st is a source table; the other 2 are destination tables. Here are their defs (I am using ASP.NET MVC 2.0): Source: <table id="sourceTable"> <tr> <th> RegionID </th> <th> RegionDescription </th> </tr> <% foreach (var item in Model) { %>
jQueryUI Accordion - overflowing parent <div> container
Somewhere along last week, my two accordions broke. I wished my company operated a cvs. but oh well. I have my accordions set up as such: $('#left').accordion({ header: 'h3', fillSpace: true }); $('#right').accordion({ header: 'h3', fillSpace: true }); Here is the css for both accordions: div#weapon div#left { display: none; clear: both; float: left; width: 47%; height: 250px; margin-bottom: 5px; border: 2px solid
Next Page