What is that "#myMenuButton" in the menu widget?
I read the article about the Filament group menu at the following URL: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/ The above mentioned menu, which may be the future jQuery menu widget, is as excellent as other jQuery widgets. The above article mention the following (example) code to be used to create this menu: $(document).ready(function(){ $('#myMenuButton').menu({ content: $('#myContent').html(), maxHeight: 180, positionOpts: { offsetX: 10, offsetY:
jQuery UI-Tabs with iframes
Hi, I'd like the jQuery UI-Tabbar to render the content not to a <div> but to an iframe. Is this possible? I tried the option "panelTemplate: '<iframe></iframe>',", but this results in empty iframes... I don't know how to set the iframes' src-Tag. HTML: <div id="tabs"> <ul> <li><a href="filter.php" >Filter</a></li> <li><a href="data.php">Data</a></li> <li><a href="job.php">Job</a></li> </ul> JS: $("#tabs").tabs({ panelTemplate: '<iframe></iframe>' }); Thanks, Josch
Customizing Dialog colors.
Hi guys, I have two set of dialogs that I use in my application. One for general feedback and another for errors. I would like to differentiate between the two by having the red color dominating the errors dialog. I have seen, through the documention, the option dialogClass: "alert". Now my naive reaction was to just use this to initialize my error dialog which did not have the desired effect. Consequently, I am wondering what I need to do to change the title bar and the main area background colors.
UI Help
<div>Hello. I'm new to this group so please forgive me if this is a stupid question.</div><div> </div>I am looking for a way to have an accordion type selector without the headers. The interaction would be controlled by a select input. On change, I would trigger the next correct panel. <div> </div><div>When a new panel is selected, I want it to slide up from the bottom and overlay whatever is currently there like the accordion does. </div><div> </div><div>Basically, I might have hundreds of
UI 1.7.2 tabs enable/disable really supported?
I have two tabs on my page. I can enable/disable individual tabs with no problem. But .tabs('disable') and .tabs('enable') are *supposed* to do them all (ignoring the selected one which I would not care about), right? It's in the online doc and I see a few threads where people are suggesting that be done. But does it ACTUALLY work? Doesn't for me. Since I will have a variable number of tabs, I'd sure like to do them all without having to loop through them one by one. Are there caveats where sometimes
Can't load google maps via ajax on tab click
When I click the tab, it says loading then refreshes the page with a blank page trying to access this script, which is all that is in the source after all this. <script src="http://maps.gstatic.com/intl/en_us/mapfiles/193c/ maps2.api/main.js" type="text/javascript"></script> What I should be getting is this. Is there something here that would cause the tabs to flip out like that? <style type="text/css">.GM_InfoWindow {font-family:Verdana,Arial;font- size:12px;color:#000000;}</style> <script type="text/javascript">
Datepicker: setting the option will reset the date to today's date.
I have a form similiar to the example below. There is a default date of, say, January 1, 2005. I want the date format to be "yy-mm-dd". Problem #1: On page load, I instead get today's date populated in the field. It seems setting any option causes the date to be set to today's date. Problem #2: On page refresh, Firefox autopopulates the form with the last user set value. i.e., if I go ahead and pick "2005-01-01" and hit Forward and then Back on the browser, I should expect "2005-01-01" to be autopopulated
Why does scroll bar jump when starting to drag a Sortable item?
Hello I created a demo: http://pastebin.me/584b9a86d715c9ba85b7bebf0375e237 When the scroll bar is at the bottom and you drag items to sort them, it causes the scroll bar to jump up. It seems to do this in FF, Safari, Chrome, and IE (at least IE8). In Firefox on my Mac, it does the jump up when the scroll bar is at the bottom, but also adds a nice flash to the whole list. It just flashes the whole list right as it scrolls it up. I believe that if I figure out what is causing the scroll up (and if
datepicker's datastring?
I am trying to use the datepicker to insert a user-identified birthday into a database. My problem is that it doesn't insert anything. I am using PHP and MySQL. For simplicity's sake, I am currently As far as I can tell, the code itself is totally functional. Here is my JS code: $(function() { $('#birthday').datepicker({ changeMonth: true, changeYear: true, yearRange: '1919:2009', dateFormat: ('@') }); }); Here is the HTML: <input type="text" id="birthday"
zOrdering question
I probably missed something obvious in the documentation, but I can't seem to solve the following: I have a form which uses DatePicker to select a date. This form works perfectly, including the date picker. However, when I put the form in a Dialog, the DatePicker always ends up behind the Dialog, no matter what values I use for the zIndex option on the DatePicker and the Dialog. Has anyone got clues, or examples of situations where this does work correctly? Thanks already! --
Snap To Positioning, and getting elements Id
Hey With http://jqueryui.com/demos/draggable/#snap-to I was wondering how Can I during init set the specific element Id i want it to be placed at. Also, after it's been moved how can I get the element that it's snapped to's Element ID? Thanks, Bryce --
Themeroller - Switching between Custom themes
Hi, I'm using a custom theme created using the Themeroller app and it works wonderfully - thanks :) What I'd like to do, however, is to have a few more themes with slightly different colour schemes and either allow the user to switch between them or to do so with javascript. I know there is a way to do so using the themes in the gallery by using the Themeroller widget but am I bit at a bit of a loss on how the achieve the same but using custom themes hosted on my own site. I think I can work out
Draggable Issue - Image Overflow in IE7
I'm attempting to make a page that allows panning of a large image inside a smaller div using the mouse. I used the draggable interaction to achieve this effect. Here is a sample of the HTML: <!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" > <html> <head> <style> #div1 { border: solid 1px Black; width: 635px; height:
Did the method of instantiating a datepicker widget change in the 1.8 beta?
I just incorporated jQuery UI 1.8a1 into my website to see if the changes made to the datepicker widget fixed the browser-killing issue I was having, and both Internet Explorer 6 and Firefox 3.5.5 are telling me that datepicker is not a valid function. If I put the 1.7.2 version of the UI minified file back in, IE6 simply has the crashing problem and Firefox 3.5.5 works as it should. Please advise if you have any idea why this would happen. Thanks! -NL --
How to Create a Lean file base per widget
Guess I should try my best to find some good tutorials on the UI, but here goes a dumb question anyways. For my website application I only need the accordion widget, but may try some different theme's depending on the client's wishes. I'm sort of having troubles figuring out how to create a lean file structure, what can be eliminated. It looks like my downloaded files still include quite a few things I don't need to upload to the server. Any suggestions on keeping only the needed files and figuring
changing animation end position / duration mid-flight
I'm trying to write a simple slot machine widget. When a user clicks a button, 3 "wheels" with the usual icons "spin", and eventually come to rest at various random positions. Very easy. However here's the trick: I need to wait for a service call to return before allowing the wheels to stop spinning, as the response determines where the wheels stop. I realize I could wait until the call returned before even starting the wheels spinning, but if the call takes more than a split second the user will
Accordion with fillSpace: true in IE6 and IE7
I believe I've found a bug in the accordion with jQuery UI 1.7.2 where the accordion will not expand if fillspace is set to true in IE7. I am also getting a bug from this in IE6, but in this case the height for each element is way too large, and the child of the first accordion element is so tall that it displaces the display of other elements. The site in question: http://alliancenw.test.shomeya.com/ --
Dialog doesn't get closed
Hi everyone, I'm facing a problem with the usage of the UI dialog. I have a page that displays a grid. Each record in the grid has a delete button. When the delete button is clicked a jQuery dialog opens and asks for confirmation (it contains 'Cancel' and 'Delete' buttons). If delete button is clicked, an ajax call will be made to the server to delete the record and then call .dialog('close') to close the dialog. So, basically the following are the steps: 1. click the delete button 2. jQuery dialog
Usage of CSS Classe ui-widget
Hello, I'm trying to use the CSS classes from JQuery UI to style my page but it seems like the out of the box fonts and sizes are very large. As example, I apply the ui-widget class to a fieldset and then all of the widgets (input, select, etc) are then changed based upon the ui- widget class. They add a nice look to the contained controls, but everything is huge. Even if I don't use the ui-widget class and just try to use the datepicker. The datapicker seems to be extremely huge. I realize I can
Tabs within AJAX-created pages
I have a page that is basically an empty div at load; pulls multiple screens into a hidden buffer via AJAX, and then swaps buffered content in and out of the div as user navigates through the article. Tabs that work perfectly as standalone pages fail in this environment - I see the url changing in response to clicks on the tabs, but the action doesn't hit the target - the tabs don't change, and the content doesn't change. Anyone else encounter this issue? --
Help with draggable/droppable ui
I have one <span id='draggable'>. It uses <span id='droppable1'>, <span id='droppable2'>,<span id='droppable3'>, etc. This works perfectly. When I use ajax to add a new entry to mysql, the responsetext includes an additional <span id=''droppable4'>. The first three work fine, but this additional droppable span does not work until I refresh the page. I have spent hours double checking my syntax, css validity, xml, etc. Is it because I initialize the draggable function in the <head> of the page? If
Datepicker refresh
Hello, First of all, let me say that jQuery is really awesome! And what about the UI Datepicker, it is just amazing! Congratulations to all the designers of this wonderfull solution. I have been using jQuery UI Datepicker for few weeks now. I am at a stage where I need to refresh it in my code. Basically, I am displaying an inline Datepicker initialized with this code : jQuery('#date-pick').datepicker ({beforeShowDay:DaysOff,rangeSelect:true,numberOfMonths:2,inline:true, rangeSeparator: ' au ',onSelect:updateInlineRange,minDate:"-1y",maxdate:"1y"});
jQuery tab order stops droppable working
Hi everyone! I am stuck in a problem with jQuery. I try to make a list from elements, that can be dragged and dropped in many lists. But this whole thing is inside a tab. Here is it shown as it supposed to work: http://redbird.lv/problem/jquery_doeswork.html The interesting thing starts if I try to change the order of tabs. If the tab is not the first opened, than it's not working until there is a element in the lists you can drop in and move it (awake?). Here is my problem example: http://redbird.lv/problem/jquery_doesnot.html
Draggable buttons and other input methods?
Hi, I've been working on a custom UI for an application, and to prevent me having to deal with every crazy user request for layout changes, made it customisable. Works fine for divs etc, I can layout the the various objects that make up the UI, click my edit button that makes anything that needs to be draggable, draggable and then save the positions to a database for the next time the user pulls up that form. Except ... textareas, buttons and input fields all seem to be a problem ... wrapping them
jQuery doesn't operate correctly in Chrome.
Hello, I'm trying to get the datepicker working in Chrome, the funny thing is that is I try Chrome on the jQuery website it works all fine! But when I try it on my own webhost it just doesn't work because it conflicts with: TypeError: Object #<an Object> has no method 'compareDocumentPosition' I use even the same header files as the jQuery website itself: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/ jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all"
How Tooltip API return a jsp page?
The tooltip plugin I refer to is http://jquery.bassistance.de/tooltip/demo/ http://jquery.bassistance.de/tooltip/demo/ One of the function is return a HTML tag. $('#tonus').tooltip({ delay: 0, showURL: false, bodyHandler: function() { return $(" ").attr("src", this.src); } }); Now I have a FIXED and LONG ( Table of Legend )html tag to return from function above. I try to put the html to another jsp. Then point the return to that jsp as below: Example: $('#tonus').tooltip({ delay: 0, showURL: false,
Link a Tab from another Tab
Hi all, I'm new into jQuery UI. I'm trying to add a link in a tab that points to another tab. Here is an example : <div id="tabs"> <ul> <li><a href="#Home">Home</a></li> <li><a href="#My_preferences">My Preferences</a></li> </ul> <div id="Home"> <a href="LINK TO PREFERENCES TAB">My Preferences</a></ p> </div> <div id="My_preferences"> Some preferences </div> </div> how can do that that with jQueryUI ? Thank you very much ! --
How do I collapse a tab on an link click?
I have been searching around and can't seem to find anything on this. What I have right now is this... $('#close1').click(function() { // bind click event to link $tabs.tabs('select', 1); return false; }); and collapsible =true. I don't see anything about a toggle event. Any help appreciated. Derek --
Resizable only in one direction?
I must be going nuts as I have scoured the Demo and Documentation for the Resizable functionality and cannot for the life of me figure out how to make it so that the item is only resizable in one direction I'm currently using this code since I couldn't find the "right" way to do it <div id="#div1" class="resizable"> <textarea></textarea> </div> <div id="#div2" class="resizable"> <object></object> </div> $(".resizable").each(function() { var id = $(this).attr("id"); $(this).resizable({ alsoResize:
jQuery UI dialog and Ruby on Rails searching
Hello all, I'm looking to perform a search via dialog box and return the results within the box. I'm currently working in the Ruby on Rails platform. I can get the dialog box to open and display a search field and button. My next step is to do the search and return the results to the open dialog box. Thank you for any and all help on this. JohnM --
form in modal dialog submission problem
Hello, I've set up a search form inside of a jQuery modal dialog but when I submit the form I get an error indicating that I left the form empty. - - - - - - - - - jQuery: $(function(){ // Dialog $('#dialog').dialog({ modal: true, draggable: false, resizable: false, autoOpen: false, width: 600, buttons: { "Submit": function() { document.advSearch.submit(); }, "Cancel": function() { $(this).dialog("close"); } } }); // Dialog Link $('#dialog_link').click(function(){ $('#dialog').dialog('open'); return
Jquery UI tabs jumping with Rotate
Hi, Can anyone help me out with JQ UI Tabs. i am having same problem that they are jumping the page to the top Please help me out. Thanks --
[accordion] Inside Forms
Hi, I have a register form inside of the accordion, it doesn't work on IE7, why? this is my code: <html> <head> <link type="text/css" href="js/development-bundle/themes/base/ ui.all.css" rel="stylesheet" /> <link type="text/css" href="js/development-bundle/demos/demos.css" rel="stylesheet"> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script> <script src="js/cmxforms.js" type="text/javascript"></script> <script type="text/javascript"
GreaseMonkey & jQueryUI
I'm trying to inject through GreaseMonkey a script supposed to show a slider component. The code is (after including the right css and the @require lines for jQuery and jQueryUI) : $("<div id='container'><div class='slider'></div></ div>").appendTo("body"); $(".slider").slider(); But this throws an error: "Component is not available" ns_result:0x80040111 (NS_ERROR_NOT_AVAILABLE) Any idea?? --
Datepicker initialization
Posted the same thing in the datepicker plugin on pbworks but it was evidently the wrong place for it. I noticed that when you the datepicker is initialized the first time the ui-datepicker-div isn't hidden which sometimes can cause a layout glitch. When you've opened up the dialog the first time and closed it the div will be hidden, like imo it should be from start. It's not hard to hide it manually yourself but this feels like a bug. --
Remove Tab with confirmation dialog?
Hello, i have a page with some tabs and my users will be able to add and remove tabs. Is there a way to implement a confirmation dialog that asks the user if he is sure to delete a tab? Thanks for help, Dirk --
Accordion question
I'm new to jQuery and I have a very basic and easy question. I'm trying to use the accordion on my website. I've already created the page and have the layout done. What I'm trying to do is shown on the demo page: jQuery UI Demo -> Accordion -> Collapse Content. I need all my accordions to be collapsible but by default it's set to one always being expanded. On the demo page it says that this can be achived by setting the collapsible option to true. How do I do that? Is it done in my html code, or
datepicker event handler
Hi, I have start_date and end_date DatePickers. When selecting a start_date I'd like end_date to be initialized to the same as start_date. So I added this event handler to start_date: onClose: function(dateText, inst) { $("#end_date").datepicker('option', 'defaultDate', $("#start_date").datepicker('getDate')); } which works. But how could I use the passed 'inst' object instead of $("#start_date) ? Thanks, --
problem with Tabs unless I set "async: false"
I'd like to display 4 tabs with their content loaded by AJAX. However, if I click on tab 3 before tab 2 finishes loading, strange problems happen. From that moment on, the tabs sometimes are blank and othertimes contain info from the wrong tab. I can fix this by setting "async: false". However, then the content isn't loaded via AJAX and the page isn't responsive until the content loads. Is there another workaround to keep my tabs from getting messed up? Bob --
prompt before closing dialog
Hi, i'm having some trouble because i'm using a dialog witch has a form in it where someone can change info about their hotel. this dialog also has 2 buttons one to close and the other to save changes. what i'm trying to accomplish is - when someone made sany change and tries to close de dialog without saving he will be prompt if he really wants to leave without saving the changes an the dialog only closes if person choses 'yes'. when closing the window clicking the 'close' button i can accomplish
Next Page