NEWS: This Week in jQuery UI vol. 4
See blog post: This Week in jQuery UI vol. 4 <a href="http://blog.jqueryui.com/2009/04/this-week-in-jquery-ui-vol-4/">http://blog.jqueryui.com/2009/04/this-week-in-jquery-ui-vol-4/</a> - Richard
Multiple dialogs and form fields
Hi, I have a dialog with a form and a button. The button opens another dialog with another form. When closing this other dialog I cannot place the cursor in any of the form fields of the first dialog. Nothing happens. The button (which is just a div with appropriate classes) works fine with hover and clicking (to open the second dialog again). Any ideas why I cannot use any of the form fields after displaying another dialog over them? Thanks, -dennis
dialog close()
I would like to perform a function at the same time I close a UI dialog. Accordingly as an experiment I am passing the following: close: function (){console.log($(this).dialog('isOpen'))} I had assumed that the passed function would happen after the dialog closed, but alas I see that .dialog('isOpen') always returns true. If the provided "close" function is not the means to perform a task after a dialog closes, what is the best way to approach the task? Thanks in advance for your time. Paul
How to restrict ui.draggable.js to the current image height.
Hey there, im currently working on a little project where i use the ui.draggable.js functions. i have an image that is getting always resized to fullscreen. most of the images that will be included will be in portrait style so i came up with the idea of including a drag function, so the user can drag the image to the top to see the rest of it. i built it up with the ui.draggable.js and it works fine. but now i want to restrict the movement. i tried to use the command "containment" but this doesn't
Load PHP Code Into A Dialog
Hi, I was just wondering if it was possible to load php code into a dialog. Basically I am trying to call a dialog for each time someone clicks a member of a list of dynamically generated shopping cart items. The php that is generating each link looks like this: <a class="detailsLink" href="<?php echo $_SERVER['PHP_SELF']; ?>? view=detail&oid=<?php echo $od_id; ?>"><?php echo $od_id; ?></a> About 10 of these links are generated on a page, and I want each one to have its own unique dialog pointing
jQuery Date Picker default input value
Hello World :) I am new to jQuery and I think is great, anyway, i Use date picker with alternate field,. and when i load the page I want to input a date from mysql to date picker to fill not just the date field but the alterField as well. Is it posible ? If not I think it should be ... Thakns
jQuery Tabs Problem: All content divs showing at same time
For some reason, when my first div loads, I'm seeing all 3 text show up even though they're in different <div> containers: <script type="text/javascript"> $(document).ready(function() { $('#Tabs').tabs({ fx: { opacity: 'toggle'} }); }); </script> <div id="Tabs"> <ul> <li id="PTab" runat="server">tab1</li> <li id="OTab" runat="server">tab2</li> <li id="RTab" runat="server">tab3</li> </ul> <div id="TabsMain"> <div id="PContent"> form </div> <div id="OContent"> examples </div> <div id="RContent"> test
a accordion problem in ie 6
just use the demo page index.html at the jquery ui package download from jquery.com. you can see the problem. the javascript code is blow. $("#accordion").accordion({ header: "h3",autoHeight:false }); the accordion conent is <div id="accordion"> <div> <h3><a href="#">First</a></h3> <div><a href="#">testlink</a>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> </div> <div> <h3><a href="#">Second</a></h3> <div>Phasellus mattis tincidunt nibh.</ div> </div> <div>
Is there any way to unselect all selectables?
I have selectable items in a few different areas of the page. They are all contained in their own <ol> elements. Is there a way that I can unselect all of them at once when a user clicks a reset button? Thanks!
Unwanted scrollbar on non-default panes of accordion widget
I have a jQuery UI accordion where the first pane has little content but the third, non-default pane has lots of content. I create the accordion with default parameters. When I switch to the third pane, it gets a scrollbar, which I think is a bug. It should accommodate the whole content, shouldn't it? I tried swapping the panes and the behavior is correct then. When the default pane has the longest content, it doesn't get a scrollbar. What also puzzles me is that you can see this same behavior on
Theme Zip File Not Working
Hello, I've been trying to put together a custom theme, using the ThemeRoller application (http://jqueryui.com/themeroller/) but once I've downloaded the resulting ZIP file, my ZIP program tells me there's an error with the file and won't open it. I've tried both WinRAR (what I usually use) and WinZip. Neither was able to open the file. Thanks in advance.......
Icons not displaying right.
I'm trying to use icons on buttons (anchors) with text, but every time i do they end up about 70 pixels to the left (way off the button) as well as the button being 2 lines for some reason. I've used firebug to isolate out the offending CSS property. If i remove the "display:block" property from ".ui-icon" the two lines goes away, but the icon goes away (duh, so that's a no go) I've tried some forced fixes that "work" but of course applying the globally will not be an option. I can not find ANY documentation
Multiple instances of modal dialog box
Hi, I have 3 links to difference modal boxes on a page. Quite messily I've just duplicated the code in the head[1] 3 times, mainly due to being a jQuery/javascript novice. Is there a way to neaten this up a bit? [1] <script> $(document).ready(function() { $('#helpInfo1').load("includes/file1.html").dialog({ autoOpen: false, width: 600, modal: true }); $('#helpInfo2').load("includes/file2.html").dialog({ autoOpen: false, width: 600, modal: true }); $('#helpInfo3').load("includes/file3.html").dialog({
Custom Theme
Hi, I'm trying to create a custom UI theme. Love the interface for creating the theme. Unfortunately I have not been able to unzip the archive it produced. I am able to unzip any of the pre-build themes, but when creating a custom one I get this: Archive: jquery-ui-1.7.1.custom.zip End-of-central-directory signature not found. Either this file is not a zipfile, or it constitutes one disk of a multi-part archive. In the latter case the central directory and zipfile comment will be found on the last
Resizable / Draggable grid - using percents instead of pixels for snap-to dimensions
I'm trying to set up a div to be draggable and resizable, on a grid. Think of Google's Calendar, where events can be dragged from one day to another, or spread across days, or resized within a specific day. That sort of thing. The problem is that all of the documentation dealing with the "grid" property talk about it only in terms of pixels. But my layout has the events on a calendar whose days are a percentage of the total screen. That is, they're a fluid width. I'd like for the elements to snap
Datepicker over Slider
Using both datepicker and slider in a form, when the datepicker shows, it displays underneath a slider which is right below it. Is there anyway to change this?
Big Widgets?
For some reason, the widgets are HUGE on my site, except in the demo page downloaded with the UI. Any clue why this is? I even removed all of my CSS to see if it made a difference and it did not...
Annoying Datepicker input field infelicity
Background: BluePrint CSS framework (simple, lightweight) with jQuery and jQuery UI 1.7 layered on top. I have a Datepicker that I show as a dialog upon an object's click. Invoked like this: $("#datepicker").datepicker('dialog', ....); $("#datepicker") is an empty div. PESKY PROBLEM: Datepicker creates a small, VISIBLE text input field that is displaying in the top left corner of the displayed calendar. I can't seem to rationally make this ersatz and unwanted input field to go away. This input field
None of UI functions work when called inside of a JS object?
Hi, I am using objects in JS and I am trying to add draggable() into a DIV that works when I move the function out of the object context. Example: function obj_xxx() { this.init = function() { $(function() { $("#test").draggable(); } } testobj = new obj_xxx(); testobj.init(); That does not work. However, if I do this: testobj = new obj_xxx(); testobj.init(); $(function() { $("#test").draggable(); Then it will work... because the draggable is not within the object. I need this to work within the object,
Accordion and dynamic content
Anyone know how to be able to load content when clicking the header? thx, Derek
resizable not working - theme required?
Hello, I am trying to use resizable() on a div. I am running jQuery 1.3.2 and jQuery 1.7.1, custom build with core, draggable, droppable, resizable and no theme. When creating an absolutely plain div with nothing but some css to make it visible, .resizable() does not work. The proper handle divs are generated to surround the target div, but they are empty and I am wondering since I did not download a theme, the CSS classes that make these divs "grab-able", they do not function properly. Is a theme
Bug in datepicker
Hi, i found a bug in datepicker, if i have chosen a date and try to change it using keyboard then i can only choose an earlier date, if i choose a later one in same month then it wont get changed. It might be an easy bug, but i couldn't find where the error happens. Hope anybody could solve it. Thanks
jQuery UI Dialog and Keyboard Disabled
Hello, I am using jQuery UI 1.5.3 along with jQuery 1.2.6. I am creating a modal dialog that displays some text and has two input boxes. The dialog appears and everything works fine with the exception that all keyboard action seems to be disabled. The user cannot enter any text in the input boxes at all. Mouse actions appear to function properly. For example, I can cut and paste text into the text boxes. If I set the modal property to false, I can enter text into the input boxes. The problems mentioned
How to do stuff when a tab is select?
Hi I want to to set certain fields back to default when a person switches a tab(so if tab one is shown then tabs 2 and 3 controls will go back to default). None of the tabs are ajax but I am unsure how to do this. I tried looking at the documentation but I just can't figure out how to do this. I tried to use shown but I could not get it too work: $('.selector').tabs({ show: function(event, ui) { } }); I don't even think I have the .selector class. When I pasted it in and tried to see through the
Custom these not included in ZIP
After using theme roller to customize a theme, none of our customizations appear in the resulting download. Instead the download contains a default, uncustomized theme. Any suggestions?
Help! Accordion content disappearing in IE6
I've isolated the problem here: http://grahamhuber.com/test/accord_test_R2.html This is the default install of jQuery UI 1.7 Accordion. THE PROBLEM: Any content placed inside a table or nested DIV disappears when the accordion is used in IE6. It displays fine on load. Also, when the IE6 window is resized, it reappears. As far as I can see, the code is fine. This appears to be a display bug with the way IE6 is rendering the content after an accordion movement. Any suggestions for a fix, hack, or workaround??
Jquery UI Datepicker
Im trying to get the datepicker to show in DD-MM-YYYY format, but I cant seem to be able to do it. Could anyone give me a helping hand? The code below is the code im using without success .... $(function() { $('#datepicker').datepicker({ changeMonth: true, changeYear: true }); $.datepicker.formatDate('dd-mm-yyyy', new Date(2007, 1 - 1, 26)); }); Thanks in advance
Tabs external link, pretty please help?
I'm trying to have my tabs UI open a new page in the same window (for SEO purposes so that I have multiple pages instead of all of my data on one page) but have it look/function the same as it does in default. I tried putting the external link with the #tabs-2 after it to go to that page and go to #tabs-2 on that page but when I do that the whole tabs system stops working and I get text links showing below the tabs and it becomes a mess, is there an easy solution to this?
exponential an logarithmic positions for sliders
Hi, I'm working on a shop that sells jewels. I added a slider so the customer can choose a price range. I have more than 4000 jewels in my database and the price range goes from $400 to $400'000. But only 10 jewels are over $40'000. So, i'd like to have an exponential slider. something like 90% of the witdh of the slide bar is for prices between 400 and 40'000 and the last 10% are for prices over $40'000. I think we could have a parameter in the slider definition ('method' ? ) whith values that could
I can't seem to get bgiframe to work at all
Hello, I'm rather new so please bare with me. I'm trying to get the bgiframe to show when I use the dialog widget, no matter what I do, it just doesnt show - The dialog window appears, but the bgiframe doesn't. I link to the bgiframe like so: <script type="text/javascript" src="js/bgiframe/jquery.bgiframe.js"></ script> And I link to the jquery main files like so: <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery- ui-1.7.1.custom.min.js"></script>
next and previous buttons to the Jquery UI slider
Hello everybody on this list. This is my first post here. I am new to Jquery and have during the last days been trying to get an understanding for how everything works, but it is still some concepts I do not get. In the code below I have successfully been able to add next and previous buttons to the Jquery UI slider. The problem is that I'm not able to get the new values back. In other words I can click the Next button ones and it works but nothing happens if I click a second time. $(function()
changing space between dialog buttons?
Hi, How would I increase the spacing between the buttons generated using jQuery? pseudo code... $("#mydialog").dialog({ bgiframe: true, autoOpen: false, width: 600, modal: true, buttons: { "Button Two": function() { $(this).dialog('close'); }, "Button One": function() { $(this).dialog('close'); }, close: function() { } }); Thank you lots in advance! Scott
how to resize a dialog after load content on it
How can i resize a dialog when user take an action that load content on it?
Crash with DatePicker and dynamic content
Hi, When a DatePicker is attached to a javascript generated input field, the DatePicker crashes when the user click on the input field the 2nd time after reloading the content. Here is a sample code to reproduce (explanation follow): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-ui-1.7.1.custom.js"></ script> <script type="text/javascript"> $(function() { refresh(false);
Why won't this work in firefox?
The alert box works, but the datepicker never comes up. I'm just trying to figure out why. I have referenced all the libraries correctly. Thank you for any help. <HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>My Title</TITLE> <META content="text/html; charset=utf-8" http-equiv=Content-Type> <link type="text/css" href="jquery-ui-1.7.custom.css" rel="Stylesheet" /> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <STYLE type=text/css media=screen>
Problem with clientX and Selectable lasso
I'm a newcomer to JQuery UI, and I've just spent a bit of time tracking down a problem we had with Selectable, which I thought might merit more discussion, as I'm not sure if it could or couldn't be handled better by Selectable. The basic symptom was that the lasso ('selection helper') was being drawn considerably to the right of the cursor, although the actual effective selection region was clearly correct. It turned out that the amount of offset was the same as the amount of automatic left margin
Showing positino when dragging
Hello, I'm using jQuery UI's dragging and resizing functionality. When the user is dragging or resizing I want to show the position but the way I've done it (calculate the position in the drag event the dragging and resizing becomes very slow. Is there any suggested way of doing it? -Martin
[autocomplete] Problems with empty results and JSON
Hi! I have played around with Jörns autocomplete a lot recently and like it a lot. I hope for a more robust implementation soon with full support for JSON and some other things discussed here and on the plugins homepage. I have followed the undocumented example of emails to implement my autocomplete with JSON-resultset given from the server but have problems with dealing with empty sets [] since I the formatItem fails if "row" is undefined. I have trapped that in a if-clause but no matter what I
Photos inside UI Tab
Hi, how do I get a photo slider inside of a particular tab?
Creating new draggables at a specific position
Hi, I'm attempting to create draggable elements within a container, but at a specific location. It seems like no matter what I try the new draggable elements want to position themselves in a somewhat random spot. (Its like a combination of where it would fall in the had I not positioned them + the new position) I've tried all sorts of trickery that I can think of: Removed the snap grid Set the css to use absolute positioning and then back again Tried to animate it to the correct spot with various
Next Page