1.6rc5 tab widget not always converting all tabs, with solution
I have a weird situation where a call to .tabs is only tabifying the first one. I tracked it down in the source to be the following query in the _tabify function: this.$lis = $('li:has(a[href])', this.list); It is only returning the first "li" element even though there are 3. If I change it to the following, it works: this.$lis = this.list.children('li:has(a[href])'); Here is the markup that was failing: <div id="profileEdit"> <ul> <li><a href="#tabProfile"><span>Profile Information</span></a></
Fix for DatePicker in IE7
Hello, I've found what might be considered a bug when using the DatePicker in IE7 with the changeYear and changeMonth properties enabled: Problem: The header is not properly displayed. Solution: Use overflow:auto .ui-datepicker-header { position:relative; padding:.2em 0; overflow:auto;}
UI Calendar selector problems
I have 2 text boxes with the class calendarSelectDate set on them. I am using the following code to setup them up as Calendars: <script type="text/javascript" language="javascript"> $(document).ready(function(){ $('.calendarSelectDate').datepicker(); }); </script> <label class="label-date">Start </label> <input class="calendarSelectDate" id="StartDate" name="StartDate" type="text" value="1/20/2009" /> <label class="label-date">End </label> <input class="calendarSelectDate" id="EndDate" name="EndDate"
form outside of a dialog window
I have a problem with a class attributed to fields into a dialog window: This code runs perfectly with IE7 and FF: $("#creerDialog").dialog( { modal:true, autoOpen:false, width: 415, height: 250, resizable:false, buttons: { "Save":function(){}, "Clear":function(){} } }); <div id='creerDialog' style="display:none" > <form action='' id='form1' enctype='multipart/form-data' style='font- size:85%'> <table > <tr><td>Nom: </td><td><input type='text' size='30' id='nom' name='nom' /></td></tr> <tr><td>Prénom:
ui-dialog css problem
Hello, I don't know why but theres a border on my dialogs which i couldnt get rid of. I deleted all my other css files. Now i have just; js/ui.core.css js/ui.dialog.css js/ui.theme.css js/ui.datepicker.css and no change. still have a border on dialog. I spend my all night to fix this issue but i couldn't :)
JQuery -- Slide Effect and Layering Spans
I have two spans laid out side by side. What I want is for the span on the right to "slide" under the span on the left. The problem with the code below is that the right-span can't get under the left-span, so it has to skip a line and then slide into being invisible. I've tried using z-index and a number of other fixes and nothing seems to be working -- the issue appears to have something to do with the borders of each element. Can anyone help out? Thanks, Chris Here's the code I have so far: <!DOCTYPE
Events on links in spot
Hi, I need to make a script using Jquery that can find all links in a spot and mark them. 1. Need to find all spots on a page 2. When it finds a spot, I need to find all links in the spot 3. When all links has been found, i then need to store what number the link is in the markup. In the example underneath the "link number 2" is number 3 in the markup. Example mark-up --------------------------------------------------------------------------- <div class="spot"> <h2>Spot header</h2> <a href="page.html"
JQuery UI Slider trigger
Hi I've got a page with 6 sliders on it and each slider has a textfield underneath it which contains the 'value' of the slider. Each slider has three values - 0, 100, 200. These are translated into 0 years, 5 years and 10 years in the textfield. The initial values of the sliders will eventually come from a database, but for purposes here, I've put the values into an array. This the code I'm using: var guaranteedSliderText = new Array("0 years", "5 years", "10 years"); var guaranteedSliderValues =
Datepicker yearRange direction
Anyone know of a way to reverse the direction that the yearRange lists the years? I would like it to go from new to old (2009, 2008, 2007...) instead of old to new (2007,2008,2009) like it currently does. thanks, ^_^
UI Dialog show - minimal test case
Here's a minimal test case I put together for the UI Dialog. It illustrates a few minor problems with the show function. http://jsbin.com/ivuqu/edit
Show/Slide - minimal test case
I've noticed some problems animating a horizontal menu using .show and .slide. I've put together a minimal test case here. http://jsbin.com/iruxe/edit
Autocomplete API
I realize autocomplete will not be released in 1.6, but can't the API be left up on site?
Themeroller Bug: ui-helper-hidden-accessible
Hello all... Just wanted to throw in a quick bug report & fix, and Trac seemed to be broken, so I thought I'd post here. The CSS for ui-helper-hidden-accessible is not 100% effective as generated by Themeroller. In some situations--such as the site I'm developing--I noticed that an initialized but unopened datepicker causes the addition of 20-30 pixels (or 1-2 em, something like that) worth of extra space at the bottom of the page. Upon opening a datepicker, this space disappears, causing scrollbar
jquery UI Demo carousel
On the old jquery UI demo site there used to be a carousel which was pretty cool. However, neither the carousel nor the old demos are there any more. I like the new site and new demos but the old demos were much cooler and more real world. For example the demo where the slider was used to control price boxes on the page. Does anyone know if the old demos can still be found somewhere? and whether the carousel used for demos is available as a plugin or the code? Thanks
[accordion] Jquery accordion menu opens for a spilt second when navigating pages in internet explorer
hi, I'm developing a site where I'm using an accordion as menu. The problem only happens in internet explorer both 6 and 7 when I'm browsing the site. When ever i go to a new page the menu expands all the way for a split second and closes again when the page is done loading. I can't figure out if it's a browser issue or a code issue. I've tried to place the jquery code both in the head section and before the closing body tag, but it renders the same way. It works perfectly in Firefox, Crome and safari..
Resizables and handles
Hi, I'm having some problems using resizables with handles. I want every div with a certain class to have a south-resizable hande, however only the first div is being made resizable. Secondly, I've found that I need to use the ui-resizable-handle and ui- resizable-s classes on my handles, but the docs make no mention of these classes (I'm looking at http://docs.jquery.com/UI/Resizable/resizable#options). According to the docs, I should be able to use any class for my handles, as long as I specify
Modal Form Example
I have struggled with forms inside a modal dialog for weeks now. I've posted questions to many different sites and users and still no one has come forward with a full working example of what I am looking for. So I will try here and just maybe the ui team will read it and give a full working demo. Nothing against the the dialog demos online but they are seriously weak in explaining anything useful. I've seen here and many other sites (stackoverflow) that people are looking for real world example when
Loading tab content when it is selected.
Hello: I'm trying to use a flash element inside of one of my tabs. I would like it that when a user clicks on the tab, it loads (or reloads) that content. Thanks in advance! -Giselle
Draggable, Firefox 3.0.5 and <pre>
If I place a draggable after a <pre> element, I get floating point values returned for the absolutePosition.top. The decimal portion is always .06666564941406. This only happens in FF 3.0.5, using jquery-1.3.1.min.js, and ui.core.min.js together with ui.draggable.min.js from the 1.6rc5 of jQuery UI. Values are as one would expect from IE7, Safari for Windows 3.2.1 and Opera 9.63. Anyone know what's up? I can post the source for a repro if that helps. Mike
Draggable scroll position bug
Hello, I have a page that is using the draggable/droppable - it has the scroll option set to true. Now everytime I try to scroll up/down the dropping position changes - i.e: It doesnt match with where the mouse position is. I have created a reproduceable example: <html> <head> <script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="jquery-ui-personalized-1.5.3.min.js" type="text/ javascript"></script> <style type="text/css"> .styleInfo{height:300px;overflow:auto;width:600px;}
inside page div that is replaced with AJAX, tabs() is not a constructor problem
JSF application, using rich faces. I'm having a problem with jQuery tabs as follows: I have a page with a right-hand side navigation div that allows users to select items, basically a menu of what's available. The main div on the page gets replaced with the details of the selected item; this detail div includes tabs. Some items have tabs, some don't depending on the type of the item from the list. On initial page load, most often the "default" item is a kind of item that doesn't have any tabs. So,
Tab height auto siez
I'm using tab plugin with the tab ajax loading. I have dinamic pages to render in every tab and I initially don't know the page height. Since at the beginning i didn't see any content I had to modify the css setting height hard coded as reported. .ui-tabs-panel { border: 1px solid #9a9a9a; padding: 10px; background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */ height: 1000px; } Is it possible to set the height in automatic mode? Kind regards Massimo
Draggable events not fully working
When I moved to jQuery 1.3.1 and UI 1.6rc5, draggable didn't work completely anymore. Objects are still getting dragged around, and the "drag" and "stop" and "start" methods are being called, but the events passed to them aren't complete. The biggest irk for me is that they don't have pageX and pageY properties anymore. I can get at the originalEvent object and it has everything, but not on the event object passed through jQuery. Here's the example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Tabs and <base> tag in my html
Hello. I'm trying to use jquery tabs UI components, but when I'm trying to switch tab - page navigates to some location and tab page is not switch. I guess that the problem is that I have <base> tag in my <head> section: <base href="http://megliosoft.dyndns.org:4949/supervipphoto/"/> Now look at tab definition: <a href="#vipPhotoCat-1"><span>flowers</span></a> When I mouse over to this link - FF shows me this link: http://megliosoft.dyndns.org:4949/supervipphoto/#flowers ... which I think is incorrect
Sortable Tree / Nested Sortables
Hello, I have been using jTree for my sortable tree, but it has a few issues and is no longer under development. I was wondering what else I could use. I have seen: http://ui.jquery.com/demos/sortable#droponempty And it seems to do everything I want except for the nested part - is anyone working on this?
form plugin and ui-dialog plugin
Someone could show me how to use the form plugin (jquery.form.js) within the ui-dialog plugin.
$.widget instances in $.widget and is it possible to extend?
Hi Im toying with the possibility to build a webgui out of $.widget factory made widgets because I find it an easy and approachable oo pattern for people who haven't much oo experience with javascript (like me myself). This has led up to two questions: Is it a good or bad idea that a widget instance made out of $.widget contains instances of other $.widgets or other jquery plugins? My guess is that its doable, droppable depends on draggable for example but I just wanted to check if there's any precautions
Datepicker allow select dates with beforeShowDay, works in everything but IE
I apologize if this is a repost, I tried posting this issue this morning and it doesn't appear to have posted. I'm working on a custom Datepicker that is used in conjunction with php to pull dates from a database and then allow only those dates to be selectable. The code looks like this: <?php $test="natDays=[[1, 22, 109, 'us'], [1, 21, 109, 'us'], [1, 20, 109, 'us'], [1, 19, 109, 'us']]; ?> <script type="text/javascript"> $(function() { $("#datepicker").datepicker({ beforeShowDay: nationalDays})
UI Tabs CSS question
With my tabs, I don't want the size of the div to change when I switch tabs. If it's too big, I just want it to overflow with a scrollbar. My general setup is this: <div> <ul></ul> // the tabs are in here <div id=tab1></div> <div id=tab2></div> <div id=tab3></div> <div id=tab4></div> </div> My container div has a height and width. I was thinking I would just have to give a height and width to the .ui-tabs-panel class (which is the class given to the areas that swich, right?) and an overflow. But,
Cancelling a sortable from beforeStop handler
I have a series of linked sortables, and a collection of items that can be dragged between. Based on the class of the sortable, I need to be able to cancel the drop action and return the item to its original position. It seems like I should be able to use the "cancel" method on the sortable to accomplish this from within the beforeStop handler, like this: beforeStop: function(evt, ui) { $target = ui.placeholder.parent(); if ($target.hasClass("full")) { $target.sortable("cancel"); } } However, this
get request problem in update function using connectWith
Hello I have been trying make a sortable list that sorts elements among different unordered lists and sends the data to a script to update the order in a a database. The problem I'm having right now is that the get request is only sending the id's from the <ul> that the element is dropped into. How do I make it send the id's from all the both unordered lists in the url? Here is my code so far: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
Clicking on a selected Tab
Hello, I have used the Tab UI and i have run into two problems. I have searched quiet thoroughly for an answer with no luck. I will display the code and then explain my problems. My html code is as follows; <div id="tabs" class="tabPannelClass"> <ul> <li><a href="#fragment" name="reports.html"><span>Reports</ span></a></li> <li><a href="#fragment" name="password.html"><span>Password</ span></a></li> </ul> <div id="fragment" class="tabClass"> <div id="loadImg" style="text-align:center; margin-top:
Exactly which JS and CSS includes do I need?
I'm trying to get the Dialog plugin working but it looks extremely plain. The demo page doesn't mention whether I have to include a CSS, but I'm sure I have to: http://ui.jquery.com/demos/dialog Where do I get the CSS or whatever for the Dialog plugin? I've downloaded a theme and the complete jQuery UI set of files, and have made the following references in my file (I've stripped the HTML to make this post): ./jquery/jquery-1.3.1.js ./jquery/ui/ui.core.js ./jquery/ui/ui.dialog.js ./jquery/themes/ui.dialog.css
Themeroller UI Accordion Problem
I am having a problem on the UI Accordion in Themeroller. I don’t know what is the exact and correct html code to use because it uses div unlike other accordions which uses the ul and li tags base on my observation when I viewed the static source in the browser. Can you please send me a full html code and instructions on how to use this. Any help would be appreciated. Thanks!
Make <Span> Slide Under Another
I am using the slide effect on one span in order to attempt to have it slide under another span. The problem; however, is that the second span seems to be unable to get around the first, skips a line, and then slides into being invisible on that line. I'd like for that not to happen. Here's the code I have so far: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script
Themes/CSS
I can not use the themes downloaded form the site with datepicker? I am using jquery.ui-1.6rc5. Please help
AIR and DatePicker
Hi, Has anyone been able to use UI's DatePicker in AIR? The calendar pops out fine and the lost focus works fine too, but you cant : 1. Navigate between months 2. Select a date Can anyone assist? Kind Regards,
handle rtl in tab
hi i am using jquery tab how can change the css file to be showen from rtl direction?
tab direction
hi I WANT TO USE THE JQUERY TAB BUT I HAVE PROBLEM TO USE IT WITH DIRECTION:RTL I WANT MY TAB TO BE SHOW FROM RIGHT TO LEFT HOW TO CHANGE THE CSS TO SUPPORT THIS PROBLEM THANKS
jquery datepicker display problem in IE 6.0
Hello all, Not sure if my first post went through. Hope this is not duplication. I am using a datepicker theme downloaded from ui.jquery.com. I have a display problem with jquery datepicker in IE 6.0. The border of the datepicker pop-up is not shown in IE 6.0, the background of the pop-up window is white (should be gray) and the back- and forward navigation icons are shown in a wrong color. FF and later versions of IE are showing the expected correct result. Am I missing something here? Thanks a
Next Page