Modal Dialog positioning problem
Hello, First post to the list so please bear with me.... I'm using the dialog plugin with the modal mode on quite a long HTML page. Reading the documentation it creates a new semi-transparent layer over the original page and then places the dialog contents on a layer above that. My problem is that when I invoke the dialog with a link near the bottom, the original page (the bottom layer) scrolls itself back up to the top of the page, leaving the modal content out of view at the bottom. So if you were
Accordion rendering issue in IE8 compatibility view: Help me Rhonda!!!
Good Evening! I have a brand new installation of jquery 1.3.2 and jquery ui 1.7.2 custom theme on two sites: www.artfulsole.com/massage.html and www.marykatecreate.com/wib/research.html Everything is working fine on all browsers, including IE8. Except when I put it in compatibility view in IE8, which obviously show how it looks in older versions of IE, it does not render an accordion at all. However, when I visit the Jquery UI site and go to the accordion demo, the demo renders perfectly fine on
How to add 1 year to selected date?
I'm trying to add 1 year to a textbox from a date picked by and end user can someone help me with this? Currently this is what I'm using but its just appending 365 to the end of the date... <script type="text/javascript"> $(function() { $("#vis_los_date").datepicker({changeMonth: true,changeYear: true, onClose: function(set_date) { document.getElementById('los_date').value = document.getElementById('vis_los_date').value; } }); $("#pol_effdate").datepicker({changeMonth:
ui.accordion doesn't resize its width in IE7 -- scrollbars appear
Hi, there, I have an application that uses ui.accordion, and it looks great in firefox and ie8, but in ei7 it it looks horrible because instead of having a correct resizing of the menu's width, it sticks to the size of the menu and includes the scrolls when the menu would be too big. Any pointers on how to fix this?
jQuery UI and Rails form submit buttons
I'm writing a rails app, and want to quickly and easily style my submit buttons so to go with the rest of my site, but i'm finding that: <%= f.submit 'testing', :class => "ui-state-default" %> provides me with the wrong code, rather than creating a button, it creates <input id="user_submit" class="ui-state- default" type="submit" value="testing" name="commit"/> While this still looks nice, it doesn't do exactly what I would like. (Cursor changing to pointer on hover, color change on hover,
Resize animation after dropping sortable
Hi ! I use sortable to make something like "panels in columns". I have tree columns: each have different width. Now when I drop a panel they "resize" in a very ugly way. Is there any way to resizing it to the column width by animation ? How ? Greetings from Poland -- Jan Koprowski
deep linking / back button / history / tabs
hi there! i know that the history feature is currently not implemented for the current version of UI Tabs. Does anyone know, if this will be implemented somewhen? see: http://docs.jquery.com/UI/Tabs#Back_button_and_bookmarking thanks + greets, walter ps: if anyone needs the history feature now, you might consider the old version of Tabs: http://www.stilbuero.de/jquery/tabs/
Another toggle question - replacing text with images
Hi, I'm new. ;) I have a jQuery toggle script, which works just as it should, but it prints text and I want it to print an object instead (specifically an image object). The script uses the following code to toggle a container and show different text within the toggle link depending on if the toggled container is showing or hiding: //toggles div $(document).ready(function() { $('#toggled').hide(); $('a#show_toggled').click(function() { $('#toggled').slideToggle(400); $(this).text($(this).text() ==
Tabs ui
I am trying to work with the tabs ui, however I have one issue. Basically once somebody goes to the page where I have my tabs I want the data to be static. But right now everytime they switch tabs the data is getting reloaded. I just want the to be able to go from tab to tab and have the same content. Is this possible and if so how?
How do you get the value of draggable?
Hi there Is it possible to get the value of draggable once it has been dropped? Many thanks
Sortable/draggable - ugly and unpredictable sorting
Hi all, I've got a page that puts together a horizontally scrollable gallery that contains draggable LI elements, an editor window for dropping items from the gallery that is sortable, and a trashcan that accepts items dragged from the gallery or the editor and is defined as a droppable area. Basically, the sortable area does not sort smoothly whether accepting items from the draggable area or when sorting within the sortable area. The gap in the sortable jumps around unpredictably and doesn't seem
The rest of the page...
Hi all! I'm new to jQuery.UI, and I love the widgets. But, I would like to be able to use the "look and feel" created by UI to control the appearance of non-widget items on the page. Specifically, I'd like to be able to make buttons, , textarea, and others adopt the colors and fonts that will match the ones in the UI. Is there a guide as to how to apply the css classes in UI to other items? Thanks in advance! Sloan
jQuery draggable clone with y axis restriction
(originally asked here: http://stackoverflow.com/questions/1534667/jquery-draggable-clone-with-y-axis-restriction/) If I have this markup: <table id="sometable"> <tr> <td class="x"><span>111</span></td> <td>aaa</td> </tr> <tr> <td class="x"><span>222</span></td> <td>bbb</td> </tr> </table> And this jQuery code: $(".x span").draggable({ helper: 'clone', axis: 'y'}); When dragging the first column the cloned span is snapping to the second column rather than the first column. If I try to drag the table
Scala lift tablesorter checkboxes
I have a webapp for putting data into a table built with scala and lift (of which I am very new) I'm trying to get a row of checkboxes for selecting the rows. I've seen it many places, but am having trouble replicating the effect. the table here: http://beta.ksscholl.com/jquery/tablesorter.html# is the effect I am looking for. The scala code for populating my table is: def doClaimWorkQueueTable = { if (!selectedRow.isEmpty) selectedPatentFileHistory = Box(Full (selectedRow.open_!)) <thead><tr><th>
Themeroller css validation
Hello, I'd like to know if you have plans to validate the code of the css in themeroller. This is very important for some projects. Regards, Adrian.
Sortable issue with overflow
I've done a few Google searches and turned up some solutions to allowing sortables to be dragged between div's with overflows set to either auto, scroll or hidden. The issue I'm having is as follows: I have multiple sortable lists in different divs. These divs can be tabbed between. To move items between each list, I use a droppable item. From my Google searches, it appears the best way to dela with the overflow problem is to clone the dragged sortable element and insert it into a temporary 'swap
problem with sortable
Hi, I am using the jquery ui sortable plugin to move widgets in my dashboard application. Each connected list is a div floated left and each widget's html is designed by absoulutely positioned div elements containing some table elements within them. When I register sortable on my columns, the sort events are fired but the widgets do not actually move, they are reverted back to their initial positions. I tried with revert option, but none of them worked. Please suggest the probable reason for this.
Reject sortable and draggable items if condition not meet
Hi all, I am first time posting on this list and hope to get and give some answers. I have connected sortable lists and draggable objects that are connected to the lists. Now,what I am trying to achive is that each of this lists receive items only if some conditions are meet. If conditions are not meet item should be returned to sender list or destroyed if it is draggable clone. I made some code that is working, but I feel that it could be improved. Here is the excerpt of the code: $(".sortable").sortable({
Ajax Tabs label doesn't change to "Loading"
In this demo, I believe the tab labels should change to "Loading" when AJAX content is being fetched: http://jqueryui.com/demos/tabs/#ajax I don't see that behavior though. Any thoughts? I searched around and only found one mention of this, but no solutions.
jQuery UI tabs 1.7.2 - how to make the page up & down movement smooth
Hello I'm using the jQuery UI tabs 1.7.2 and have successfully integrated it. However I need some help from you all on the movement of the page when I move from one tab to another. http://www.dezigncentric.com/Projects/NachleExpress/10082009/contact.html Solution requested for: Each tab content is different in length so when i move from one tab to another, the page moves up and down. Can you guide as how to make the movement of the page up and down more smooth then it is right now? Do I need to integrate
How do I know if I'm leaking memory?
I'm building some of my own widgets, but I'm not yet confident with all those references and closures. Thus, using and passing them here and there. Is there a convenient tool or something to tell whether I'm leaking memory?
draggable with "clone" and scrolling div offset is off
I have this test file: http://devel.getitdoneapp.com/drag_problem.php If you try to scroll a draggable, you will notice the droppables are all off. I'm not sure what is going on, it looks like the offset (from the top of the div?) for the droppable never gets reset when we scroll. any one have any ideas?
Prevent dropping by asking a question
Hi, i'm using the last version of jQuery & jquery ui (1.3+1.7). I'm using "sortable" to manage element sorting between a series of lists. Can i prevent dropping by asking a question to the user? If the user answer 'No' i want to abort the current sort. Thanks in advance for you help.
Troubles with jquery ui datepicker in ie6. Ie6 has a 'white screen' while it's closing.
Hello, guys. Maybe, you can help me. I have next trouble: In ie6 when i choose date while datepicker is closing, ie6 has a 'white screen'. After inserting a date it's ok. ShowAnim option is "fadeIn". But other options have same effect. The same trouble exist when i use 'dialog' component with draggable effect. I read many forums and spent much time, but can't find answer to my question. I understand, that ie6 isn't a good thing, but i should use it. Thanks.
Dynamic images - how can I tell when they are ready to be viewed by the browser?
I'm building a slide show using jQuery and I am having sporadic issues displaying an image before it's fully loaded. e.g. Images are stored in a database (binary not the image path) and I use an image handler to retrieve the images. Because the amount of images for each slide show is not predetermined, I load the first image and next image initially, then each time a slide (next) is selected I fetch that slide and the next slide. I don't want to pre-load each image as there could be well over 50-60
How to make inline dialog
Hi there, Does anyone know how to make an inline dialog using UI dialog widget. I want it to appear in the content DIV like the datepicker. ..somewhere in <head> $(function(){ ... $("#inline-dialog").dialog(); $("#inline-datepicker").datepicker(); ... }); ..somewhere in <body> <div id="content-wrapper"> Content <div id="inline-dialog"></div> Another content <div id="inline-datepicker"></div> Footer </div> Thanks.
$.datepicker.formatDate after picking a date
Hi. I use an input text that on focus shows a datepicker. $("#dt").datepicker({ showOn: "focus", dateFormat: "yy-mm-dd", }); When I pick a date I want to use it to make some stuff, ajax calls, etc. I dont use the onSelect event by now because I let the user write the date by hand, so I have: $("#dt").change(function() { console.log($(this).val()); // debug -> ok var ts = $.datepicker.formatDate("@", $(this).val() ); console.log(ts); // do other stuff }); Now, the ts variable
How to emulate pseudo classes with jquery?
This following code works on <li>'s when hovering the mouse over them. $(".user-info-right-button").hover( function () { $(this).addClass('user-info-right-button-hover'); }, function () { $(this).removeClass().addClass('user-info-right-button'); } ); But what do I do if I want to change i.e. the background-color when it is activated while deactivating the background-color from its sibling <li>'s? I tried this code but of course it does not work. $(".user-info-right-button").click(function(){
Session Timeout w/Tabs
So I have a tabbed system setup on my customer support portal, but I am running into a problem with the sessions. When the user is on a page for a specific product, they are only navigating within the jQuery UI tabs, so the system thinks they are inactive and eventually logs them out. Anyone have any ideas how I prevent this from occurring? I need to have a 10 minute log-out for inactivity built in, so there is no way around that.
Download not working
Whenever I try to download Jquery UI I end up with a .zip file that only has an HTML file in it. On the download page it always says 0 of 25 components selected, no matter how many I have selected. I've tried deselecting all, then selecting all, but it doesn't help. Does anyone have an idea of why this is happening? Thanks
Tabs - all closed on page load...?
Hi there, sorry if this is simple but I'm the tabs UI and would like the first tab to be shut by default. How could I achieve this perchance? Any help appreciated!
Gif in the Button Bar of a Dalog
H, How can I show a loading gif in the button bar of the dialog. Thanks in advance
Slider click event
Hi, I want to select a radio button on click of slider. Is it possible? Thanks
droppable and pointer question
I'm working with a draggable/droppable/sortable application, and have an issue with draggables going into the wrong box after being dropped. There are 3 or 4 parallel columns with multiple DIV's in each column. I drag a DIV to a different column, with the mouse pointer clearly within one column... but the DIV is wide enough such that right edge of the DIV crosses over the column border into the next column to the right. When the draggable is dropped, it does not go where the pointer is, but to the
Newbie jQuery & theming question
I started looking at jQuery today because an open source project I'm using is using jQuery for tabs. From what little I can tell, it's using jquery-flora.tabs.css and also jquery.tooltip.css and it's on jquery 1.2.6. When I started looking into theming jQuery, I came across this http://docs.jquery.com/UI/Theming And in particular, the use of ThemeRoller app that generates pre- rolled themes. I don't understand jQuery UI well enough to know how the 2 differ, if anyone can offer some high level insights,
elem.parentNode is null
Hello All. i am usgin jquery ui tab system. when i remove a tab i got this error : <div class="errorTitle focusRow subLogRow">elem.parentNode is null</div><div class="errorSourceBox errorSource-exec focusRow subLogRow"> <img src="chrome://firebug/content/blank.gif" title="Break on this error" class="errorBreak a11yFocus"><a class="errorSource a11yFocus"> siblings: function(elem){return jQuery....ing(elem.parentNode.firstChild,elem);},\n What is the problem. My code is : <br style="background-color:
How to change overlay color in dialog?
here is my code : <div id='basic-modal'><h2>Basic Modal Dialog</h2> <a href='#' class='basic'>Demo</a> </div> <div id="basic-modal-content"> <h3>Basic Modal Dialog</h3> <table id="list4" class="scroll" cellpadding="0" cellspacing="0"></ table> </div> <script type="text/javascript"> $(document).ready(function() { $('#basic-modal a.basic').click(function (e) { $("#list4").GridUnload(); $('#basic-modal-content').dialog({ autoOpen: false, width: 700, modal: true}); var gridimgpath = '/css/ui-lightness/images';
Tabs in IE7
Hi all, I this is a common issues, but I couldn't find a proper solution while browsing on the internet. Tabs work fine in firefox, opera, safari...but when it comes to IE7, tabs are not working. I mean the tabs are not rendered, and all the div are shown on page. I have already checked with w3c validator and jslint, but both javascript and code are fine. Can you point out what I am doing wrong ? thanks Leonardo
jQueryUI animations in firefox 3.5.3
Hi, Im jQueryUI's animate to resize the page's content area and fade into new pages on navigation (progressive enhancement). It's working great, heres some code of it: <code> $('#content').css('height', heights[$('.current').attr('href').match(/ [a-zA-Z\.]+$/)]); $('.load').bind('click', function(e) { $('.current').removeClass('current'); e.preventDefault(); var page = $(this).attr('href').match(/[a-zA-Z\.]+$/); //run
Dynamic Tabs
Hi, I am creating a web application and I want to use the Tabs widget to replicate the tab functionality you find in most web browsers. I want the user to be able: to move (sort) the tabs around, create tabs dynamically, close tabs dynamically. The problem I find is that to close a tab you need to have its index and when considering the fact that other tabs can be opened, closed, and sorted dynamically, you need to retrieve/get the tab's index when you want to close it. Any help will be greatly appreciated.
Next Page