Running Javascript on pages loaded via AJAX Tabs
Hello, I'm sure this problem has come up before, but I've searched and I can't find an answer. I'm using jQuery UI v1.6rc2, and I have a page that has tabs on it. Each tab will load a remote page. Here's the code that I have: <div id="tabBar"> <ul> <li><a href="page1.html">One</a></li> <li><a href="page2.html">Two</a></li> <li><a href="page3.html">Three</a></li> </ul> </div> The tabs
Better way to tell if widget already rendered?
Seems like this is an easy one, but I'm not having luck. Currently I do this. if( ! $("#widget-id").hasClass("ui-dialog-content") ) { // setup dialog and do other expensive stuff } But of course that depends on the CSS class names used. Is there a better way, using only the public API? Thanks.
Themeswitcher - broken image src
Hi, It appears that the src for the thumbnail images are broken in the themeswitcher tool. The have a "http://jqueryui.com" prepended to them. If you remove it, the thumbnails show. You can just browse directly to the themeswitcher code and see this in var switcherpane declaration on line 20. http://jqueryui.com/themeroller/themeswitchertool/ Thanks, Dave
Draggable/IE6 Performance Issue
I'm using jquery-1.3.2 and jquery-ui-1.7. I'm making an "chart album creator" page. In the left pane there will be albums and in the right pane there will be a list of available charts to add to the albums using dragging. It works well in FF and well enough IE7, but there are major performance issues in IE6 whenever the number of available items is more than about 100. And the performance degrades quickly on multiple reloads (via ajax) of the available list. There is a test page here that shows the
Rich Text editor inner Text
I have this rich text editor taken from http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html i am simply doing this <tr><th valign="top">Body</th><td width="100%"> <textarea id="rtetext" name="rtetext" class="rte"></textarea> </td> ..js... document.getElementById('rtetext').value // giving undefined $('#rtetext').text(); // givnig empty $('.rte').text(); // givnig empty ...js... Plz Advise
Problem with west handle on a div floated to the right
Hey there, I'm stuck on trying to accomplish the following: I have a div, and in it is another div. Parent div is 800px wide, child is 100px wide. The child is floated to the right, with a resizable handle on the west side. When I try to resize the container to drag it left, the container grows, but also moves to the left, beyond the point of the resizable handle. the right margin also moves left, instead of staying against the side (it is floated right). You can see the most basic case of it at
1.7 - Sortable revert / placeholder problem + fix
Hi all, I update all my work from 1.2.6 / 1.5.3 to the latest release 1.3.2 / 1.7. All works fine and faster, greetings to the dev team ;-) I have found a problem in Sortable revert option, the placeholder margin left / top don't change the original position calcing. I've include these parameters in ui.sortable.js and the problem is solved Hope that will help, Regards Jeff Tested in FF 3+ and Safari 3+ ( line 288 - function _mouseStop ) ..... if(this.options.revert) { var self = this; var cur = self.placeholder.offset();
[jQuery] clone of an element to be dropped draggable
hi i want to a clone of an element to be dropped and dragged. i am using the standard jquery 1.3 and jquery ui 1.7. i tried the helper clone option. it creates a clone when dragged, but when it is dropped it just reverts back to the original position. but i want a clone also to be dropped. for example: http://jqueryui.com/demos/draggable/revert.html i tried this demo with revert set to false. but still a clone is not dropped. thanks a lot!
Dual sortable issue
Hey guys, Great work on 1.7. We are having a problem which we were not having with previous versions. There are two simple sortable lists on the page. We automatically call 'disable' on the start event, and then call 'enable' on the stop event. This is because we have experienced problems caused by overly-anxious user dragging items before the last one settles. The problem happens when the first list is changed; the second list is then no longer sortable. If the second list is changed, the first
Downloads of themes are without CSS folder
Downloads of themes are without CSS folder in ThemeRoller.
Call for contributors: A simple, fast and flexible grid/spreadsheet component
Hey All, I've been working on a grid/spreadsheet control prototype during the last couple of weeks. Seeing how there doesn't seem to be a lot of other choices for this sort of thing, I had to write my own. I've put the project up on Google Code and am looking for experienced developers who can pick this up and turn it into something that everybody can use (a jQuery UI grid plugin?). The project is hosted at http://code.google.com/p/slickgrid/. Below is a copy of the project home page. Looking forward
How to cancel the draggable event, when ever some html id or class occurs on the page.
Hi Richards, I don't get any response for my previous doubt from you. I think you are busy with your work. It is understandable. Now my problem is, I have div on a page, which contains three div's. Those are draggable. Now i would like to restrict them with out overlapping each other. I read your document, there is cancel option, i think it works only for elements like button,input like wise. In my case is it work for me? if so, please let me know, how to do this. <div id="maindiv" class="maindiv">
Documentation of datepicker i18n?
I'm trying to find the documentation for the use of the i18n part of the datepicker, but I can't find it. I don't think it's entirely clear how to use it, what files is needed and where they are. In the development-bundle/ui/ there's a folder named i18n that contains the i18n files. It seems like these files are not part of the jquery-ui-1.7.custom.min.js created by the download tool, right?
make jquery UI datapicker transparent?
is it possible to jquery UI datapicker transparent a bit for example 60%? thanks
Limits on sortables?
Perhaps this is too simple of an application for the richness and flexibility of jQuery UI's "selectables," but is there any way to limit the number of items the user can select? In fact, I'd even be interested in disabling multiple selection entirely to let the user just choose one element from a list (and replacing my own mediocre code to do the same). Is there any support for this? Thanks! Adrian
ui-icon overflow
For Example (open window 'dialog'): <a href="#" id="dialog_link" class="link-icon ui-state-default ui- corner-all"> <span class="ui-icon ui-icon-newwin"></span> Open window </a> Problem: Only in Internet Explorer 6, icon overflow. Solution: .link-icon { position: relative; font-size: .75em; padding: .4em 1em .4em 20px; color: #006287 !important; /*solution*/ float: left; }
Tabs: Select previously dynamic added tab
Hello, first post on this list :-) using ui 1.7 (thanks so much for this final release) & jquery 1.3.2 I add dynamically tabs when clicking on links inside tab contents. The added list item gets an attribute rel and is selected right after it's added & loaded via ajax reqiest. Now I try to select it when I click on the same link again - don't want 2 tabs with the same content in it. Since the select method needs an index for selecting a tab I try to get the tab's index and select it with its attribute
ui 1.7 dialog problem
Since i've upgrade to 1.7 , the dialogs (all working with 1.5.3) only works first time. If i close and try to reopen , nothing happens. code sample: <script type="text/javascript"> $(document).ready(function() { $('#solic<%=request("cod_casa")%>').click(function() { $('#divdt<%=request("cod_casa")%>').html('<center><img src="/images/ ajax-loader.gif"></center>').load('data_pers.asp', { cod_casa: '<%=request("cod_casa")%>' }).dialog({modal: true, width: 500, title: 'Pedido disponibilidade',
Tabs CSS
Hi all. I am working on implementing tabs and I cannot get the CSS to work to save my life. I read some threads about there being a mix-up in the CSS class names with themeroller and tabs, but that appears to be fixed now. Yet, my tabs are still not being styled. I am importing JQuery and JQueryUI from Google. I downloaded the Cupertino theme from JQueryUI's Themeroller. I have not modified the ui.all.css file at all. Here are the relevant snippets from my code: <link type="text/css" href="js/theme/ui.all.css"
Draggables/droppables with live
I'm wondering what's faster, using livequery or live with draggables and droppables. I've been using livequery but as I just upgraded to jquery 1.3.2 and ui 1.7 I thought I would try live instead. I'm using these because the page with the draggables are loaded through ajax and needs to be reactivated somehow. This is how the code looks like basically: $('#div #div_list').live('mouseover', function() { $('.panel').draggable({ appendTo: 'body', helper: 'clone' }); $('.panel-off').draggable('disable');
calendar / timetable thoughts
Hello Group, i'm trying to create a calendar / timetable like application, inspired by the google calendar. My basic requirements are this: - an "event" is draggable from a list of events to an hour of a day - the event is resizable to span several hours of the day it was dragged to. The size (height) represents the duration of the event. Some events may have a fixed size/duration so they can not be resized. - the events of a day can be reordered Using ui.draggable, ui.droppable and ui.resizable
ui dialog with "live" click event not working
I'm using data from mysql db to produce a button the user will click to see a dialog: [code] if ($row['location'] == "PVI") { ?> <button class="volunteer" value="volunteer">Volunteer</button> <? echo "</td></tr>"; } else { echo "</td></tr>"; } [/code] Here is how I am setting up the dialog: [code] $('.volunteer').live("click", function(){ // this gets the game number var gameno =$(this).parent('td').prev("td").prev("td").prev("td").prev("td").prev("td").html();
Tabs html issue -- suggestions?
I have previously used the jQuery UI Tabs widget, and I'm trying to upgrade to the latest version, but it looks like the required HTML layout has changed. Here is the old HTML layout that I am using: <div id="header"> ... <ul id="tabs"> <li><a href="#tab1">tab1-title</a></li> <li><a href="#tab2">tab2-title</a></li> ... </ul> ... </div> <div id="body"> <div id="tabs-content"> <div id="tab1"> ... </div> <div id="tab2"> ... </div> ... </div> ... </div> And the JS was simply: $('#tabs').tabs(); Now,
Accordion question need help !
Hi, I am very new to Jquery UI and I need a little help My accordion (#accordion with 6 elements) are filled with content of variable heigth ( length ?) and I would like each accordion to open (when clicked or on mouse over both work fine) with heigth ajusted to length of content and not ajusted to the lengthiest content . I have seen options do do that like :$('#accordion').accordion ('option', 'autoHeight', false); is it the correct option to use if yes where should I include this line of code
Removing a dynamically created tab causes "too much recursion"
Sorry if this is a dupe, but my first post doesn't seem to have appeared. Here's the code Adding a Tab $(document).ready(function(){ $('.view').click(function(){ var url = '/groups/view/'+$(this).attr('id'); $('#tabs').tabs('add', url, 'View Group', 4); $('#tabs').tabs('select', 4); }); }); Removing the added Tab $(document).ready(function(){ $('#tabs').tabs({ select: function(e, ui){ if (ui.index < 4 && $('#tabs').tabs('length') > 4){ $('#tabs').tabs('remove',4); } } }); }); Basically, we want to
Advanced Easing
I've just added code and a link to the UI/Effects/AdvancedEasing section on documentation. http://docs.jquery.com/UI/Effects/AdvancedEasing Hope it helps
Problem with connectWith option in Sortables
Hi All, I have a problem with UI sortables. connectWith option is not working in my system. I have copied portlets example from http://jqueryui.com/demos/sortable/#portlets and used my jQuery UI scripts(1.6rc4, rc5). Them also I am not able to drag portlets in one column to another. I am using jQuery 1.2.6.
Setting defaultDate after init
Hello All, Having an issue setting the date of a datepicker after it's been initialized. I call the init function on page load, and the datepicker resides in a hidden div that becomes a modal dialog. When they click on an area of the page the dialog is launched and it's at this time that I want to set the date. Here is some code I'm using to try and achieve this, it's not working ,but it's not erroring either. //THE INIT FUNCTION $('#update_appt_datepicker').datepicker({ showButtonPanel:
Great work!!!
Great job!!! This is awesome stuff!!
Rotating Tabs. Page keeps jumping to top of page. Help please.
Hi, I have a rotating Jquery Tabs. The panels are part of the page only and I have content underneath it. However when someone scrolls down the page, whenever the animation rotates to the next tab, it automatically scrolls back to the top of the page. I was reading that this has something to do with the href="#" (hash). I tried removing but got errors in the page. What is the workaround please... Thank you.
jQuery UI with facebook
Hi All, I wonder if jQuery UI works with facebook. I would like to build an application using jQuery UI in the facebook, but it seems that facebook does not like jQuery UI. it does not display any functions. I have tried using, droppable, draggable, slider, resize, unfortunately none of them working. Is there any way to make jQuery UI working, please? Many thanks!
jquery UI Dialog resize with iframe content
When I load the dialog <div> with static or ajax content, the dialog resize works great. However, if the dialog content is loaded with an iframe, the resize is doesn't work very well, especially when contracting after an expand. In general, great new release. Congratulations.
Draggable bug in IE6
I'm using jQuery-1.3.2 and jQuery-ui-1.7. I'm setting up my draggable like this: $('img.ChartTemplateImage', $e).draggable({ helper: 'clone', opacity: 0.35, start: function(event, ui) { $ (ui.helper).data('mgr', {id: info.Id}) } }); In IE6 if the user begins a drag and abandons it w/o dropping on a droppable, the next time they start a drag, it drags the first item. You can see the issue here: http://sbillmassie.webfactional.com/horses/jQuery Steps to Reproduce: 1) Open http://sbillmassie.webfactional.com/horses/jQuery
[OT?] Styling a.ui-state-default and input.ui-state-default the same
Hi, I'm trying to style a "button like" link and a button the same way using the theme framework, but the button and the links do not look the same at all. <a class="ui-state-default ui-corner-all" href="#">Link</a> <input id ="save" name="save" value="Save" class="ui-state-default ui-corner-all" type="submit" /> Does anyone have any input on how I should "reset" the input element to get this to work? I tried creating an extra "button" class for this: input.button, a.button { font-size: 100%; padding:3px
Serious problem with jQuery Dialog and IE6
Seems to me I have to give up the jQuery dialog
Clash between new JQuery UI and quickmenu.js
I'm pretty new at javascript and JQuery but have to say that JQuery is simply amazing. My problem is not with JQuery UI, as it works seamlessly but rather with quickmenu.js. Quickmenu worked very nicely until I started using UI on the same page and it now gives me the following error: jQuery(this).children("div").attr("onclick") is undefined jQuery(this).AddBreadcrumbs(jQuery(this...r('onclick').toString().split ('\'')[3]); I'm really stuck. Any help would be greatly appreciated. thanks in advance.
IE6 issue with textarea + UI dialog
I try to finish these plugins http://maxb.net/blog/2009/02/26/dokuwiki-jquery-ui-autocomplete/ I want to use jQuery UI Dialog to write a link (internal & external) and put the value in the dokuwiki textarea. But I found a big problem. When the focus goes in another form field Internet explorer 6 looses "caret". I tested this alert(document.selection.createRange().text); if I select something in the textarea, open the dialog window (jQUERY UI not popup) and press the button "ok", alert return the
Removing a dynamically created tab
Hi All, I have a page with 4 main tabs on it. Each one loads a different page via the Ajax option. From links with in one of the tabs it is possible to drill down into data, the "View" link adds a new tab and loads the items page into the tab then selects it. This works fine. However, we want this new tab to be removed again when the user clicks on any of the 4 main tabs. I have managed this using the select: event, but it seems to break all the main tabs at the same time Add Tab Code $('.view').click(function(){
Is it possible to covert entire html code inside a div into json, using Jquery or any Json plug in ???
Hi Richards, Is there any plug in to covert html code in to Json format. If anything is there, please tell that name. I have to store my html data into json file format. If there is nothing regarding this, please suggest what should i do for this. with Regards sure.
draggable events not working with 1.3.2 version?
This code works with 1.2.6 version but not on 1.3.2. The UI library is the same on both tries. No errors are reported in the firebug console. Anybody got any idea? <script src="js/jquery-1.2.6.min.js" type="text/javascript" ></script> <script src="js/jquery-ui-personalized-1.5.3.js" type="text/ javascript" ></script> <script type="text/javascript"> $(document).ready( function(){ $("#test").draggable( { start: function( ev, ui){ $("#response").html("start"); }, stop: function( ev, ui){ $("#response").html("stop");
Next Page