Cannot call twice: $("#foo").mywidget()
[Originally post on jQuery-en] I created a widget and figured that it can only be called once per element: $.widget('ui.mywidget', { _init: function() { alert('hello'); } } $.widget("ui.mywidget", mywidget); $("#foo").mywidget(); // alerts hello $("#foo").mywidget(); // doesn't do anything now I understand this is by design because _init acts like a static constructor. however, I want to create a widget to add a panel to #foo each time it's called so: $("#foo").addpanel(); $("#foo").addpanel(); But
.effect('explode') bug in Safari 3.1 and 3.2
Here's my code: $("#container *").fadeOut(0,function(){ $('#metaImg').fadeIn(1000,function(){ $("#amp,#amp > *").fadeIn(1000,function(){ $('#tecImg').fadeIn(1000,function(){ $('#tecImg,#amp,#metaImg').effect('explode',{pieces:18}, 700,function(){ $('#joint,#joint >*').css('fontSize','100px').fadeIn(1000); }) }); });
Sortable z-index issue in FF2
Hi everyone, I'm hoping you can help me with a strange issue I'm experiencing using sortable in FF2. The page where the issue is occurring is here: http://chrm.tribbledesigns.com/drag_drop.html In FF2, when I drag an item from one list to another list to the right, the dragged item goes behind the list it is being dragged to. I believe this is some type of z-index issue but I don't see why it would occur as the lists themselves are not absolutely positioned and do not have a z-index set. I've done
Sortable helper problem
Good day! Did someone figured out how to fix the problem described at this[1] thread? I'm with the same problem. It works for IE but not in Firefox, Chrome, ... Thanks! [1]: http://groups.google.com/group/jquery-ui/browse_thread/thread/d40f01ba3384c8da
2 different themes on the same page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#ffffff" text="#000000"> <font size="-1"><font face="Tahoma">Is it possible to have 2 different themes on the same page? I want the dialog and buttons to look 1 way and my tabs to look completely different? Is it possible to have just the css for the tabs without affecting the other buttons and the look of my dialog window? Will I need to change the names of the classes? And also modify the names
UI tabs - Content outside of tabs div
I'm not a total newb, but I haven't used the UI tabs in a while, and I'm having a problem. I'm using: jquery-1.3.1.min.js & a personalized version of ui<span class="attribute-value"> core + tabs version 1.6rc6.min.js </span>Is it possible to have your tabs in one div and your content in a separate div? I know there has to be a way, but I couldn't find any documentation. HEADER STUFF... <script type="text/javascript"> $(document).ready(function() { $("#main_navigation ul.tabs").tabs();
Embedding one jQuery UI into another
I thought I posted this earlier but I can't see it anywhere. Anyways, I want to put an accordion UI inside of a tab UI. The problem is, the accordion does not display correctly when embedded into a tab. Here are my tabs: http://gbanker.com/test/tabs.html (the meal tab is where the accordion should load) And here is the accordion by itself: http://gbanker.com/test/meals.php
Help with dialog boxes
I am trying to write an app that has a table, and upon clicking each row, it needs to load a dialog box that will be loaded via AJAX. The challenge is, I need to pass the variables as I'm echo'ing the HTML. This is how I've tried to do it with a funky result. First off, this is a typical row of the HTML: <tr> <td></td><td><a name='1091234825' href='#void' onclick="jqticket('1091234825','Adam S');">Adam S</a></td> <td class="priority3">Normal</td> <td class="date">6 hours ago</td> <td> </td>
missing ui-widget* classes when activating widgets
jquery UI 1.5.3 with jquery 1.2.6 I have downloaded a personalized package of jquery UI with a the "UI darkness" theme, when opening the example page I'm missing all the round corners ect.. when I look at the markup I see the ui-tab-nav(for example), there's no js errors and the widget loads but no ui-widget* or ui-corners* classes are added to the markup. shouldn't those classes be added automatically? am i missing something? Thanks, Rudy Attias
Toggle callback destroyed by UI effects?
Hi there jQuery gurus If I use jQuery UI effects with toggle, my call backs doesn't seem to fire. If I change say: $(document).ready(function() { $("button").click(function() { $("p").toggle("slow", function() { alert('hey'); }); }); }); into using the jQuery UI effect "slide" instead of the build in jQuery "slow": $(document).ready(function() { $("button").click(function() { $("p").toggle("slide", function() { alert('hey'); }); }); }); the anonymous call back function isn't called anymore. Why is
About JQuery DatePicker Latest RC Version
Hi All, I recently use JQuery Date Picker. I'm trying to disable it through javascript which is this line of code $("#id").datepicker("disable"); It works well in IE but failed to work in Mozilla T_T Any idea to fix this? Thanks.<br clear="all"> -- Best Regards, N3T
ui.dialog issue with IE6 (1.6rc4 / jQuery 1.2.6)
I've been building an application using the various ui plugins and came across an odd bug in IE6 when trying to put tall content inside a dialog window. Around line 465 of ui.dialog this code block causes IE6 to throw an error if the dialog content exceeds a certain height: this.element .css({ minHeight: options.minHeight - nonContentHeight, height: options.height == 'auto' ? 'auto' : options.height - nonContentHeight }); The code can safely be hidden from IE6, which will simply expand the modal
end animate() at current style and specify a starting style
The call to animate({ fontSize:'20px' }) starts with the current size and ends at 20px. Can I pass any params to make it start at 20px and end at the current size? Thx -- Aleem
Keyboard( arrow keys) controls for slider not working with slider.js 1.6rc6 and core.js
HiI raised a ticket regarding the same in http://dev.jquery.com/ticket/. they asked to raise the UI related queries in this link..... Query : I am not able to use the keyboard(arrow keys, home, end keys..) control for slider to move the slider bar by using slider.js version 1.6rc6 and core.js. In slider.js 1.6 hhen i remove the ui in the below code the keyboard (arrow keys, home, end keys..) control is working. And noe code is written for UP and DOWN arrow keys. switch (event.keyCode) { case $.ui.keyCode.HOME:
Suggestion -- More items in the discussion list
May I propose to make the list of discussion topics longer? Currently we just see 30 of 3,300 topics, and it only goes back about 3 or 4 days. If the list were longer, much longer, users could search with Ctrl+F in a rather larger pool of potential subjects. 30-items is probably fine for users accessing jQuery-UI with dial-up connections. We're not in the 1990's anymore, and usere here are quite likely to be developers with very decent connection speeds, so serving more data per page just makes sense.
JQuery Tab's Jumpiness in Mozila Firefox
Hi, I have jumpiness problem when trying to run toggle animation transition between each tab. It happened in Mozilla Firefox. I make the toggle animation slow and I have long tab. When the tab doing animation, I scroll down my browser, and the animatioin is really like a mess T_T. Anyone know how to solve it? I'm currently new with JQuery. Thanks.<br clear="all"> -- Best Regards, N3T
sortable + blur - broken?
I'm having trouble with a sortable setup and I believe it's a bug. I have setup a very simple standard sortable like the following: <ul id="items"> <li>item 1</li> <li>item 2</li> </ul> When the user clicks one of the items in the sortable I am doing an "edit-in-place" textfield. So basically I overwrite the text content of the <li> with an <input type="text">. I do this all via jQuery and that all works great. The rub is that I want the edit-in-place textfield to go away when the blur event is fired
Free App: Combo. Menu: divs of Tabs with inner Accordians
I am now giving away a free Combo. Menu App, made of switching divs, tabs and accordians -- all downloadable from a link. Directions are also provided. Demo, download and directions are at: http://mynichecomputing.org/testpage/alone.html (app requires UI 1.6rc2 or above ; app does work with all the newest stuff, including jquery 1.3.1) Comments and input appreciated.
[accordion] Links inside the accordion
I'm having trouble with Accordion effect when there's one link after another inside the div being used by the script. It occurs even if I use a different class for the link used to activate (open) the sections. For example, try putting two links inside any of the examples of the demo. It only appears the first one.
sortable + blur - broken?
I'm having trouble with sortable and the blur event. I have a pretty standard sortable setup with a <ul> populated with <li>s that are sortable. I have attached a 'click' event handler to <li> that initiates an "edit-in-place" textfield. That works fine. However, I have a blur event handler registered with the edit-in-place textfield that reverts the textfield to text. The blur event handler works fine if I click somewhere on the page other than the <ul>. If I click somewhere inside the <ul> (ie.
iPhoto-like Resizing of Images
Hello, I'm trying to use jQuery UI to create a similar effect like this: http://interface.eyecon.ro/demos/slider_resize.html I tried playing around with that demo but it seems that the site is no longer maintained and the example does not work with the latest version of jQuery. I'm sure UI can achieve this same result but I'm a bit lost as to where to start. Any insight or links would be much appreciated. Thank you.
jQuery UI Resize Images Using Slider
Greetings, I'm attempting to create an iPhoto-like image resizer, similar to this example: http://interface.eyecon.ro/demos/slider_resize.html. Unfortunately, the Interface Elements website seems to have been abandoned (or is this what jQuery UI turned into? They seem so similar.) so the script is outdated and does not work with the latest version of jQuery. I'm sure the UI can achieve this same effect but I'm really lost as to how to make this work. I did see the jQuery UI slider examples but none
marquee inside a jquery tab
I tried to put a <marquee> inside my jquery tab but it doesn't work. Do i need to do anything special to get it to work?
Loading tab content when it is selected
Hi: I would like to have it so that when users click an a tab it reloads that div's content. http://docs.jquery.com/UI/Tabs/tabs Thanks in advance!
using accordion for navigation
Hi there I'm developing website and for navigation I'd like to use slide in and out accordion like navigation. for each link there will be sublinks. My problem with this is that when i clock on link from the main menu it will populate the page inside the widged instead of loading the page. If there is a sub link in the menu which points to page it works fine. I'm guessing it has something to do with the sintaxis of the main navigation links: <div id="tabvanilla" class="widget"> <ul class="tabnav">
Accordion Collapsible
I've searched and can't figure it out... This is my code and its all working except for the collapsible switch. The accordion loads with all headers closed, but I can't collapse a header once its open. $(document).ready(function(){ $('#content').accordion({ active: false, collapsible: true, autoHeight: false, header: 'h3' }); });
mcDropdown plugin not working in Safari with initially hidden div
The plugin mcDropdown (http://www.givainc.com/labs/ mcdropdown_jquery_plugin.htm) will not work properly in Safari/Chrome if you place it in an initially hidden div and later unhide it. The reason, in the source code you will find: // safari will not get the correct width until after everything has rendered if( $.browser.safari ){ setTimeout(function (){ $self .width($divInput.width() - $("a", $divInput).width()); }, 100); }
accordion inactivate
Hi, I'm using this option to open programmatically a menu option by getting the value from the url because I'm developing an ajax accordion menu and works: var menuItem=$("a[href="+menuSelected+"]"); $('#navigation').accordion( 'activate' , menuItem.parents ("ul").siblings(".head")); what I'm trying to do is close that previous item when I click on other menu items, is there an 'inactivate' method to close it? Thanks
About JQuery UI
Hi All, I have some feedbacks. It seems like the documentation here, <a href="http://docs.jquery.com/UI/Tabs">http://docs.jquery.com/UI/Tabs</a> is created for Tabs version 1.6RC. Is it possible JQuery also include the documentation for the latest stable version? as is for JQuery Tab 1.5.3? Thanks.<br clear="all">-- Best Regards, N3T
About Jquery Tab ui.index
Hi, I bind function in tabsshow as in $('#tabs > ul').tabs().bind('tabsshow', function(event, ui) { alert(ui.index); }}; why ui.index is always undefined? I tried to solve this but although spent a lot of hours still cannot solve T_T Any idea? Thanks a lot.<br clear="all"> -- Best Regards, N3T
About JQuery Tab Custom Selection
Hi, I have some issues when trying to implement latest version in JQuery Tab. I have created custom function in Javascript function Previous() { var $tabs = $('#tabs > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'normal' }}); $tabs.tabs("select", 0); return false; } function Next() { var $tabs = $('#tabs > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'normal' }});
droppable issue
I have two droppable rectangles with 10 px margin between them. I have a draggable square of size 100px by 100px. When I drag and drop the draggable in middle of two droppable rectangles the square kind of sits in between both, partially overlapping both droppable rectangles. I want it to be in one or the other droppable but not in middle with partially overlapping both. I am already using revert: 'invalid'.
jQuery dialog add/remove button on the fly
Hi, I have created a simple modal form in dialog and I want to update the buttons according to some events in the form. More specifically I do an ajax request and I want to remove "Send" button after it's clicked. Is there a simple way to do this? Thanks for replies, Jan Brucek ----- The dialog is specified like this: $('#contactform').dialog({ bgiframe: true, autoOpen: false, width: 490, modal: true, overlay: { backgroundColor: '#FFFFFF', opacity: 0.5 }, buttons: { "Send": function() { $('#form_contact_form').ajaxSubmit(contactformoptions);
jQuery UI Support on the iPhone
Hi all, I've came up with a solution to allow most of the UI widgets that depend on mouse events to work on the iPhone. It's a variation of a script that Ross Boucher (http://rossboucher.com/2008/08/19/iphone- touch-events-in-javascript/) started, but meant for use with jQuery. I have set up a demo of what works and doesn't work (yet). I figured you guys might like to check it out! It's a little temperamental, but it's a start. I've noticed that on an actual iPhone/Touch it's slow with animating
drag and drop: how to restrict dropping on specific divs only
I have a some draggables items and some droppables divs (rectangular areas) on screens. Right now I can drag and drop draggables pretty much anywhere on screen I want user to be restricted to dropping the draggable items into only these droppables divs and nowhere else on page. If user tries to drag and drop the item to unallowed area of page then dragged item should revert back to its original position. How to accomplish this in jquery?
Event handling problem with nested tabs
Hi: I met a problem about event handling with nested tabs. Here is the simplified source code. <div id='container'> <ul> <li><a href='#sub-container-1'><span>subcontainer</span></a></ li> <li><a href='#tab-2'><span>tab2</span></a></li> </ul> <div id='sub-container-1'> <ul> <li><a href='#sub-tab-1'><span>sub-tab-1</span></a></li> <li><a href='#sub-tab-2'><span>sub-tab-2</span></a></li> </ul> <div id='sub-tab-1'>sub-tab-1</div> <div id='sub-tab-2'>sub-tab-2</div> </div> <div id='tab-2'>...</div> </div>
Tab won't load on ajax page!
Hi, I'm developing an application which calling external php using $.ajax (..) calls. Inside the php page, I have tabs. Unfortunately, the tab wont display as required but it display as normal list, instead! Here is the snippet... ...in calling page $.ajax({ type: "GET", url: "a.php", data: { srch: search}, dataType: "html", error: function(){ $("#error").html("Oops, there is error."); }, success: function(data){ $("#main").html(data); } }); ....and
Tab Trouble
hi i have a little trouble while using the tabs. you can view the test site her: http://test.divexit.de/ the problem is the slow pageload so i would like to load the contents only on demand(klick) since a few days i am trying reading and so on but i don´t get forward. hopefully someone in here can help/point me to a solution thanks :-)
Questions about JQuery Tabs
http://dev.buytough.com/tb_30.asp at the bottom of this page is a set of JQuery ajax tabs, Our Problem is that we would like to keep the focus down on the tab section when browsing through the varous tabs. the issue is when clicking on the next tab it moves you half way back up the page.
Loading XML/File into DIV makes jQuery fail
http://9publishing.co.uk/test/xml/jquery/ The links at the top load XML/file/content into the DIV. This works ok. I then want the images (from 2nd link) draggable to the right hand menu. It doesn't work. However if I select everything, view source code, save the file and view it (http://9publishing.co.uk/test/xml/jquery/jj.asp ) it works fine! Can someone shed any light on the situation please? TIA
Next Page