Strange bug of jQuery UI Dialog in FireFox.
Hello jQuery UI team, I found the very strange bug in my FireFox browser when i used the jQuery UI Dialog component. Please look at the bottom picture that show the empty white are in dialog. Any solution to fix this? Regards: Sag-e-Attar Junaid Atari http://blacksmoke.plutohost.net/
Placing Slideshows inside the Tabs UI it just won´t go inside, stays out
Hello Yes, that is the issue. The tabs are displaying alright, also if I write text in it the div expands itself as I go along, and also I can create tables inside it dynamically the space will expand itself to leave room to the table. however, if I try to insert one div inside the div-tabs-1 the slide show is out of the box space of the tab, it wont go in. it is like supperposed in the middle of the whole page but not inside the Tab content area. Any hint ? thanks a lot
UI Tabs scrolling window
I have 3 UI tab areas on a site. The top most is set to rotate. Each time it rotates it does the classic anchor tag behavior of adjusting the pages scroll position to put the anchor at the top of the page. I am wondering if there is a way to disable this behavior so that when rotate is enabled it doesn't take over the entire window. HTML <div id="homeslides"> <ul> <li><a href="#tabs-1"></a></li> <li><a href="#tabs-2"></a></li>
multiple buttons to open same dialog
So I'm scratching my head here with trying to use several buttons to open the same dialog form. I have an accordion with a selector for each record returned by a query. Within the selector, other related data is queried and returned. I want the user to be able to click a button, see the form dialog, enter the data, and ajax takes over. Everything works on the first selector just fine. On the rest of them, the buttons don't open the form dialog. My button code: <a href="#" onClick="document.getElementById('GameUnitNum').value
jQuery tabs not working after ajax reload
Hello Forum, I've placed a tabs widget in my page with 3 tabs, comparable to the 'open on mouseover' demo on the UI page. The javaScript is triggered by the $(document).ready(function) This works fine when the page is first loaded. However when I do an Ajax update of the div element containing, among others, the <div id="tabs">, the tabs don't work any more, the currently displayed tab is displayed no matter what you do. (The data in the tab is updated). Do I need to take special actions to get
loading a UI Tab panel from an external menu?
Hi all, First, let me apologize if I'm retreading old territory. My problem is this: I have a set of flyout menus (from the filament group page - code fg.menu.js - http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/) These are set up in a separate sidebar div from my tabs. What I'm trying to do is 1) have the menu links reloaded each time I click on a tab 2) have the links from the menus load their content into the tab panels. I haven't started on #1 yet, but I can't seem to get #2
[accordion] Inpute elements om according header cause collaps/expand on focus
Hi, i have some text input fields inside a accordion header and got some strange problems: everytime a input inside a acc-header gets the focus the accordion attached to the header expands or collapse and the input looses the focus. once i get a "stable" focus inside a input a hit on "space" also leeds to an expand/collapse even if the collapsible:false option is set. I think this is due to the "click" event used on the main DOM element. enyone any idea howot prevent the accordion from collapsing
how to use datePicker in ie6
hii, I am using datePicker and it not looks good. what can i do? Thanks
JQUERY UI Position
I am certain this is a really stupid slip up on my part. But I keep attempting to use the JQUERY UI .POSITION utility to align a menu with my content. It works in Firefox, but it goes off screen in IE. Relevant code: <script type="text/javascript"> <!-- $(function() { $("#bulletin").click(function () { $("#poop").show("slide"); return false; }); $(".infotabs").position({ offset: "0 0", my: "left top", at: "left top", of: "#content" }); $(".infotabs").hide(); }); // -->
Alternative container for Autocomplete suggestions
hi, i have succeeded to fill the alternative container, but autocomplete still show an empty ul under the text field after init the widget i added this code $( "#item_name" ).autocomplete().data( "autocomplete" )._renderItem = function( ul, item ) { $("#tag_list").show(); return $( '<li class="ui-menu-item"></li>' ) .data( "item.autocomplete", item ) .append( '<a class="ui-corner-all">' + item.tagname + '<br /> category: ' + item.tagcatname
Strange default date with Data Picker
Hello ! I have trouble using Date Picker. It seems to be very easy but I meet strange behaviors. I add this widget in several inputs in a web page dynamically built in a template file (smarty). Here is my code : <script type="text/javascript"> $('#{{$idname}}').datepicker();//{{$idname}} is a smarty variable, here is not the problem. </script>The result is that each calendar widget is well built for each input, but the default date change, it is never the same and it is never today date. Why ? Thanks
how to use datepicker
Hi, is there any usefull and good documentation on how to use datepicker? The documentation on site http://jqueryui.com/demos/datepicker/#event-beforeShow and http://docs.jquery.com/UI/Datepicker is so bad that a 2 year old child could do it better. I would like to see some actually usefull documentation on how to set min,max dates on beforeShow event? How to disable visibility of Year in caledar and textbox? How to set different CSS to some of the dates, .......................................................................................................................................................................................................................................................................................................................................
UI Dialog - limit draggable area to a div element
I have a website that needs a dialog box opened, but i need it to open in a "div". I want the modal option, but the modal should only cover whats in the div, and not the whole page. example: <div id="content"> <div id="main_content">Blah Blah blah <a id="open_dialog">Open Dialog</div> <div id"second_content">Blah blah blah</div> </div> <div id="dialog_content">blah blah dialog box</div>When i click on the "Open Dialog" box, i want the dialog box to open in the "main_content" div, and
Conformation Dialog Box
Hi, just starting out with jQuery and UI. I have done some programming before but I a little lost. What I’m trying to do is: User clicks a button to delete a record from a database, a dialog box is shown to confirm the action, and if yes record is deleted, if not dialog just closes. The record is delete via PHP on another page after receiving the ‘id’ via POST, so I guess I need to target the actual click on the delete button / link. But how do I get the dialog to open another page? Many thanks
Dialog seems to destroy form data
Hi Guys, I am new to Jquery, so I apologize for any stupid questions, but I am stuck on something. I have a plain html form, with a button to open a dialog box with checkboxes for users to select multiple options. When I close the dialog and press submit, the data from the dialog box does not post to my action page! How can I keep the checkbox data and post this data to the action page?
jQuery works in example page, but not in other pages
jQuery works perfectly on the example page (http://www.troop21clayton.org/jquery-1.8.5/), but it wont work on any other pages (e.g. http://www.troop21clayton.org/site_new/test.port/) Here's my code: <html> <head> <link rel="StyleSheet" href="indexrc.css" media="screen"> <title>Test jQuery Dialog | Troop 21 of Clayton</title> <script type="text/javascript" src="/jquery-1.8.5/js/jquery-ui-1.8.5.custom.min.js"></script> <script type="text/javascript" src="/jquery-1.8.5/js/jquery-1.4.2.min.js"></script>
Tabs: how to set one tab non-closable and other tabs closable?
Greetings, everyone! While looking at the jQuery UI tabs demo, it looks to me that the closable tab is done through a custom tab template: tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>', which applies to every tab, if I am not mistaken. However, what I need is that when my tabs first load, there will be one and only one tab, which is NOT closable; every tab added afterward needs to be closable. Can someone please shed some light on this?
.position misbehaves in FireFox - can positions be chained?
I'm using UI 1.8 and core 1.4.2. I have the following script, which works in both IE and Chrome. In FireFox, the first div, #mainNav, positions correctly, but the second div scroll nearly off the top of the page with a position (in firebug) of -768px. In the original style, the divs both positioned absolutely, wrapped in a relatively positioned container div. Can these two not be chained? Do I need to do something between repositioning the first and second div, to get Firefox to recognize the
Disable appearance of datepicker on right-click
I've got the default datepicker set up, which means the calendar will pop up regardless of which mouse button used to click. I want to make it so the calendar does not appear when using the right mouse button. I've got a nice context menu, but on right-click both menu & calendar appear, which is visually confusing. Any advice much appreciated.
ui draggable: retain position of dragged element on page reload or going to new page
Hello, Is there an existing solution for the following challenge: (1) you drag a draggable element to a new position (2) you reload the page or go to a different page having the same element (3) you need the reloaded or different page to position the dragged element to the same coordinates it last had on the old page
How to use metadate in datePicker?
Hi all, i'm tring to use jquery dataPicker but i wont to use it with matadate. using this code: <input type="text" id="myDate" class="myDatePicker {maxDate: '+1w', minDate: '-1w'}" /> how can i do this? Shay
Linking to tabs and areas within tabs on same page
I have seen questions about this but can't seem to make people's suggestions work with my page (I'm not very skilled at jquery.) I am trying to make the links on the top right (under leadership, board advisory etc.) link down and open up the appropriate tab. Right now, they jump down the page but don't open the tab. I also want to be able to link to a section within a tab. Like "Heritage " under "Advisory Committees" http://www.4culture.org/test/about/leadership/ Any help would be greatly appreciated.
what is the include order of js files
Hi, I want to bundle myself the needed js files. Unfortunately I get the javascript error "base is not a constructor", if doing so. My included files are: 'jquery.ui.core.js', 'jquery.ui.widget.js', 'jquery.ui.button.js', 'jquery.ui.draggable.js', 'jquery.ui.mouse.js', 'jquery.ui.position.js', 'jquery.ui.resizable.js', 'jquery.ui.accordion.js', 'jquery.ui.progressbar.js',
theming gone bad
Hi, i modified jquery-ui.css so i can have tabs like this: and now my callendar and everything else looks wroooong Is there any way to use multiple themes on same page? Is there any other way to make this to work? Thank you.
Help drag drop does not work for me in input text
Help drag drop does not work for me in input text yes for item and drag drop in list move item in list and input text. view page http://www.sigem.cl/Test.htm it drag drop in input text without jquery. http://www.openagora.net/chw/index2.html Help drag drop with jquery with input text.
Upgrading existing custom theme to new jQueryUI
Hi all, I've got a custom Themeroller theme that I built with for an older (1.7) version of jQueryUI. I'd like to upgrade to the new 1.8.5 version, but I'd also like to upgrade my custom theme. Is there a way to do this? Thanks, Doug
selectableUnselected by select another entry ?
Hi there, i try to figure out in which way i can get the event selectableunselected ( or selectableunselecting) if i´m not unselecting it by click, but by clicking anoter element out of the selectable. Lets say we have 3 options in the selectable. I select the first one. The event selectableSelected for element 1 is fired. If i press STRG and click the first one again, selectableUnselected is fired. Now here comes the point: If i´m not using STRG+Click on the first element, but just clicking the
Accordion
So I'm having a problem when I append the results from AJAX to an existing accordion. The new HTML is returned into the page. However, the rollup doesn't appear; it's just the resulting HTML without the accordion. You'll see the highlighted section of my code where I've tried to reinitialize it, but I'm a newb with JS as well as jQuery. // Accordion $("#Units").accordion({ header: "h3" }); // Dialog $('#NewUnitForm').dialog({ autoOpen: false,
Datepicker displaying characters in empty days
Does any one have any idea why the datepicker widget is displaying characters in the blank day placeholders each month? See the attached images for examples. If I don't use the change month and year drop-downs, there is also a character between the month name and year. The three screenshots attached are from three different browsers - IE, FF and Chrome. jquery-1.4.2.min.js jquery-ui-1.8.2-min.js $("#txtUpdate").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear:
Problem with Accordion in Tabs in IE
I am constructing a front page news feed using 3 accordians stored in tabs. When you select each tab it loads a different accordian. In firefox this is fine. However, when you run it in IE, the tab that it loads with works fine, but the the other tabs, when clicked, do not have accordion functionality. It is like accordion loads on each tab call in FF but doesn't bother in IE. I was thinking about getting a function to call an accordion each time the corresponding tab is selected, but being a noob
tabsselect/tabsshow don't fire when re-selecting current tab?
Hi Guys, I want to be able to "reload" the current (ajax) tab after an action has been performed. I also need to re-bind forms and clicks and other events as well. When my function runs the following: function tabSensitiveReload() { if(tab_div_id) { var $tabs = $(".ui-tabs-nav").tabs(); $tabs.tabs('select', $tabs.data('selected.tabs')); } else { window.location.reload(); } } I don't get alerts that I placed for the tabsselect/tabsshow events: var tab_div_id = '';
sortable + handling "over" event
Hi! I'm using sortable plugin but I want also handle situtation when user drag <li> element and press e.g. CTRL key. I want then invoke special action without sorting - merging two <li> elements. Does anyone know how to achieve that?
IE8 droppable <tr> bug ?
Hello, I have a table which have a droppable <tr> and draggable <div>s . In the drop function, I'm always getting the 1st row of the table even if I drop on another row of the table when using IE8. It works in other browsers. Live demo : http://jsbin.com/anogo3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui-1.8.4.custom.min.js"></script>
What is the this.widget() method supposed to return from a Widget Factory widget?
Hi folks, I have been exploring the latest version of the Widget Factory as described in the upgrade doc. There is a section about the new widget() method that says A new common method has been added, called widget. This method will return the .ui-{pluginname} element. Depending on the plugin, in many cases this is different than the original element, otherwise it will return the original element. But it didn't behave as I expected when I experimented with it. I have a widget that I am creating
accordions in tabs broken in IE
Here's a simple example of using accordions inside tabs that seems to work in every browser but IE. Is there something I can do differently to get this to work in IE? You'll have to modify my link and script tags to point to the location of your jQueryUI files. <html> <head> <link rel="stylesheet" type="text/css" href="../../jquery-ui-1.8.4.custom/css/ui-lightness/jquery-ui-1.8.4.custom.css"/> <script type="text/javascript" src="../../jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
Set Position of Draggable div
How is it that I set the position of the draggable div. I see in the documentation that there is an object called ui.position. I assume I can some how set this? If not would I simply have to change the CSS using javascript and set a position? If so if someone could help me out with a code example that would be helpful. I have a button which changes the display from none to block so the div is visible. When I set display back to none and then back to block so it reappear it is still in the same place
UI Dialog and Ajax Query??
Hi, I have a list of projects that get displayed on my page dynamically via a server side query. For each project, there is a hyperlink over the name of the project. When the user clicks the hyperlink I want to display a jQuery Dialog box that fetches the "members" of the clicked project dynamically and outputs them within the dialog. The output in the dialog could be some basic like like the name of the project member on each line, but dynamic of course, as they the list of members would be
Drag item out of a sortable
I have two lists: a draggable and a droppable/sortable. When items are dragged from the draggable the helper is set to clone, so the original element remains in the draggable. Items get dropped into the sortable where they can be arranged. I want to set it up so that users can remove items from the sortable simply by dragging them out of the sortable list. I don't care where they drag it, and I don't want to set up something like a recycle bin, I just want to detect if they try to drop the sortable
.draggable in Firefox gives bizarre positioning on drag
Hi folks On testing a draggable, simple div show below, Chrome works as intended, Firefox on the other hand positions the element while dragging above and around the central div on my page, as though it hasn't attached it properly to the body of the page or its position is way off. $('#bookmarks').draggable({ helper : 'clone', containment : 'body', appendTo : 'body' });I have tried attaching it to the main div wrapper, other divs by name, by id and by element - but the results are pretty much the
jQuery 1.3.2 + jQuery UI 1.7.2 + Autocomplete 1.8.?
Hi All, I have to integrate the autocomplete widget into an application which have jQuery 1.3.2 and jQuery UI 1.7.2. I can't upgrade the jQuery version. I added the autocomplete 1.8.1 + position widget. I don't get any errors, but it doesn't works. Any ideas? Thank you, Davide
Next Page