Sortable, Draggable and Droppable combined
I'm trying to implement something a bit complicated. What I want is a sortable hierarchy of "zones" (basically a OL with LI elements) and a list of "controls" I can drag-drop inside this sortable hierarchy. So I have two lists, basically like this: <ol class="zones"> <li class="zone"> Zone 1 <ol class="zones"> <li class="zone">Zone 1-1</li> <li class="zone">Zone 1-2</li> </ol> </li> <li class="zone">Zone 2</li> </ol> <ul class="controls> <li><div class="control">Control 1</div></li> <li><div class="control">Control
jQuery UI in the wild (1)
The CakePHP Google Group to which I subscribe keeps a pae listing 'Cake Apps in the Wild', where readers can post some sucess cases of their use of the framework. There's no such page here, but I'd like to share a simple site I lanched a couple of weeks ago in which I made use of some jQuery UI elements. This is certainly not to be considered spam of any kind. If this offends any rules to the group, pelase do tell me and I will remove this post immediately. The website is at http://www.liananigri.com,
Draggable fires click event when dragging stops
Hi, At the moment when I drag an element (using the ui-draggable api), the click event is fired when the dragging stops. At the moment I have some code to popup a larger image when a thumbnail is clicked, but now it always opens up whenever a user drags a thumbnail. Is there a way to prevent this? I've tried doing things like $('.draggable').draggable( { stop:function(event, ui) { event.stopPropagation(); } }); to no avail. I've also tried insert preventDefault(), but nothing seems to do the trick.
Thickbox 3.1 min
Does anybody have a link to the min version of this code? I don't mean the compressed code.
draggable("disable") problem
Hi, i'd like to stop a draggable element after a clic on a button. I tryed to use the draggable("disable") but it doesn't really work. Here's my source : //Script $(document).ready(function(){ $(".block").draggable(); $(".stop").click(function(e){ $(".block").draggable("disable"); }); $(".Go").click(function(){ // lorsque je clic sur le bouton Go $(".block").draggable("enable"); }); }); //HTML <div class="block">drag
select onchange trigger
guys help me please ... i have select and options inside it . every option has it own ID ... how to trigger particula option in a way to call onChange of the select here is small demo to explain better <select name="somename" onchange="someFunc(); something.value=this.this.options[this.selectedIndex].id"> <option id="o_id1">text1</option> <option id="o_id2">text2</option> </select> so i can select particular option but have no idea how to force onChange of the select :( $("#o_id2").attr("selected",
UI Tabs - show tab question
Is there a way to show a tab without triggering the click event for that tab? In more detail: I'm using the 'select' event on the tabs to initialize a new form for data entry. There is a summary list below it, that when clicked, will populate the corresponding tab with existing data. So...when someone clicks on the summary row, I'm issuing an Ajax call to get the data. I then want to "show" the appropriate tab and then load the data I received from my Ajax call. I tried initially using the tabs to
Unaccessible dynamic content
Hi all. First excuse me for my bad english. Im new in jquery, but im getting better :) I wrote the script who adds new <tr> into <table>. First cell in that new table row contain <select> element with options and changing that options update another <select> element in the second cell of that <tr> through $.getJSON() function. When i click the "Add" button a new <tr> appears with new "selects". The problem is that these new elements are inactive and when i use them they dont change the second <select>
Resizable div with overflow:auto
Hi there. I've got a resizable div, and (almost) everything works fine. The only problem: the div contains a lot and is set to overflow: auto. whenever I scroll within the div, the south handle (the only one I'm using) is scrolling with the content, which makes it pretty much unsuable. Any Ideas how to solve this? It's maybe just a question of a more clever style definition. Someone else seems to have the same problem: http://groups.google.com/group/jquery-en/msg/24dfba578dfba261 Thanks in advance,
Draggables/Sortables and window scrolling?
It's been awhile since I've checked in on the UI project and I was just wondering if the drag/drap/sort will scroll the browser window if you drag an item out of the current viewport and into the area beyond the scroll bar. google.com/ig does this when you drag a box, and I need similar functionality. I don't recall the old Interface plugin supporting this. -- View this message in context: http://www.nabble.com/Draggables-Sortables-and-window-scrolling--tp14850167s27240p14850167.html Sent from the
Help on Droppable tolerance
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta http-equiv=Content-Type content="text/html; charset=us-ascii"> <meta name=Generator content="Microsoft Word 11 (filtered medium)"> <style> <!-- /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0in; margin-bottom:.0001pt; font-size:12.0pt; font-family:"Times New Roman";} a:link, span.MsoHyperlink {color:blue; text-decoration:underline;}
Problem with dialog in IE with selects showing through
Hi everyone, I realize that this problem has been fixed, but it's still happening to me. I looked at the page for ticket #1801, but (color me stupid) I don't understand the fix. I tried adding: $.ui.dialog.defaults.bgiframe = true; to my $(function(){}); area of my script, but that doesn't seem to help. There's also some mention of adding this code: if ($.fn.bgiframe != undefined) { $(dialog).bgiframe(); } But, the way I read that, this seemed like a workaround until the bug fix came in. What am
UI Datepicker: using $(window).height()...
Hi, another suggestion: INSTEAD OF using twice these lines throughout the code: var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var browserHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; USE: var browserWidth = $(window).width(); var browserHeight = $(window).height(); , greets
UI Tabs (and other UI components): Fail silently on error? Please discuss.
Hi all, I was thinking about tweaking UI Tabs to be a little more robust. Have a look for example on the API methods invocation code as it is now (quite similiar to all the other UI modules): return this.each(function() { if (method) { var tabs = $.data(this, 'ui-tabs'); tabs[method].apply(tabs, args); } else new $.ui.tabs(this, args[0] || {}); }); Now if the matched element has no tabs instance attached as data the line tabs[method].apply(tabs, args); will throw a nice error. It's easy to (accidently)
Draggable on mousedown
I have code that creates a draggable container using a handle. I would like to enable the draggable on mousedown events on the handle and disable the draggable on mouseup events. Basically, have the draggable enabled only when the user is holding the mouse down. nDiv.draggable({ handle: '#toolbar', stop: function(e,ui) { } }).draggable("disable"); cDiv.mousedown( function() { $(this).css("cursor", "move"); $(this).parents(".tile").draggable("enable"); } );
recent datepicker changes
3.3 was a fairly significant update with lots of changes to how things are called, and my team just barely got done updating a number of our scripts to it. Now I see that datepicker was updated to 3.4 today with more significant changes... some back to how 3.2 was... datepicker() to attachDatepicker() and now back to datepicker() http://docs.jquery.com/UI/Datepicker/ChangeLog As I look forward to more updating of scripts, I have to ask if I will be doing this again in a month. This is naturally a
Tabs - js Within Remote Tabs does not work
As you can assume from the title I am having problems getting any jQuery or just js to work from within a tab I have added via a URL. There has to be a way to work with jQuery from within tabs, no matter how they were created. Any help is greatly appreciated. Thanks, Seth
UI Tabs strangeness in IE
I'm using jQuery UI Tabs / Tabs 3. I'm using the css on this page (I think it's much more attractive than the green stuff): http://stilbuero.de/jquery/tabs_3/ In IE7, when I just hover over the tabs, weird things happen (such as disappearing content down in the content area). In addition, the tabs themselves are borked (chopped up below the text in the tabs and above the rule). I'm pretty optimistic that I can track this down, as the home page for the tabs works correctly. I'm thinking it must be
ui.slider 1.5b bug in Internet Explorer 6-7
With the new slider 1.5b, I get the following error when I start to drag the handle on IE: 'this.currentHandle' is null or not an object I have a test site setup so you can see the issue, it is at http://gmaps.adceval.com/slider_issue/ Hopefully its an easy fix. Great job on everything. -marc
UI.TABS - disabled
Using the setup below: jQuery(document).ready(function($){ $("#mytabs> ul").tabs({ disabled:[3, 5], ajaxOptions: { cache: false } }); This creates a disabled tab 3, but the tab 5 is enabled. I think I have the correct code. Any suggestions? TIA
Sortables Serialize returns blank with sortable IDs.
I have been trying for a while now to get serialize to return my values. I have started with the following: HTML: <pre> <div id="mastaWrapper"> <div id="sort1" class="groupWrapper"> <div id="image" class="groupItem"> <div class="itemHeader" id="0"><span>Image </span><a href="#" class="closeEl">[-]</a></div> <div class="itemContent" ></div> </div> <div id="shop" class="groupItem"> <div class="itemHeader" id="1"><span>Hi</span><a href="#"
Serialize sortable string to MySQL database using PHP?
I did a quick search on the group and found a few examples, but nothing is working for me. I have something like... <ul id="photoTable"> <li id="item-1"><img src="sections/portraiture/thumbnails/p01.png" /></ li> <li id="item-2"><img src="sections/portraiture/thumbnails/p02.png" /></ li> <li id="item-3"><img src="sections/portraiture/thumbnails/p03.png" /></ li> </ul> I'd like to re-order the photos, and then Save (or effective put the new order into a string) to a MySQL database. There was one post
Ext like templating?
Greetings, Just wondering is the UI folk had considered a macro-based templating piece to UI, similar to what Ext has in it? Pax, - Stan
enchant getColor
Is there any plan to make getColor a public part of the interface? I have very similar code I wrote for parsing css units and css colors. Its nice to have the helper function cssUnit why not getColor? Thanks Jon
UI dialog('destroy')
$('#test').dialog(); $('#test').dialog();dialog( "destroy"); cause error dialog[options] has no properties http://blogself.ru/panel/js/ui.dialog.js Line 14 The function $.ui.dialog.destroy not exists in ui.dialog.js
setting initial status of a checkbox
Hello- How do I ensure that a checkbox on a page is set to "unchecked" when the page initially loads? Thanks
Submitting patches
Hi, I have a small feature (non-bug) patch for UI tabs. What is the process for submitting this? Thanks, -scott
UI Tabs: Leave Auto-Scroll On
I've got a project I'm working on for a client and they're trying to move away from the Flash on their site to use something like jQuery instead (easier for them to update if they need to). I saw something about the auto-scrolling tabs, but noticed that when you click on a tab, the auto-scroll stops. Is there any way to change that so the auto-scroll doesn't stop, but instead, keeps going? Any help would be awesome. Thanks! David
How do you do add close function to tab ?
Hello everybody I use Ui Tabs version 3 to my site. (http://stilbuero.de/jquery/ tabs_3/). I have 2 questions/problems. 1. I would like to add a little button in tab created with tabsAdd('#new-tab', 'New Tab', 4); method. But I don't any idea to do this. Can you explain me how do you do ? If it is possible of course. In fact I need this function for my project. 2. Moreover, I would like count my tabs created. Because I create a tab when I click on marker in my google map. So I need the last number
Tabs on top of dialogs
The jQuery tabs are showing on top of jQuery dialogs. I believe the default z-index for the active tab is too high. How can I adjust this?
Bug with negative values in slider (jqueryUI 1.5b)
I have made the upgrade to jqueryUI 1.5b and I get a bug using the slider with negative values. I initialize the slider with something like : $("#example").slider( { minValue : -100, maxValue : 100 } ); Now when I drag the slider handle, it works fine. Bug if I click anywhere on the background slide, the handle moves with a 100 pixel offset to the right. This used to work fine in the previous version of the UI. I made a quick hack in my code to set the range between
remove a custom JQuery function
Is it possible to remove a JQuery Function? Example $('#textBox').sum(); I would like to be able to add and remove functions dynamicly.
Tabs within tabs not working
I am trying to create a set of tabs that when one is clicked more content with other tabs with their own content shows inside. However, what I am getting the those inner tabs showing up below what should be their parent tabs. <script type="text/javascript"> $(document).ready(function () { $("#outer_tabs > ul").tabs(); $("#inner_tabs > ul").tabs(); } </script> <div id="outer_tabs" class="flora"> <ul> <li><a href="#tab_1"><span>One</span></a></li> <li><a
UI 1.5b drag and drop inside of tabbed div.
So I'm trying to do a simple drag and drop in a div that is hidden by the tabs(); method. Everything works fine (dragging, the droppable changing classes) except for any handlers after dragging begins. The over:, out:, and drop: options won't fire. This problem completely goes away when I don't invoke tabs();. Does anyone have any idea what's going on here? thanks for all of your help in advance. Matthew
Reverting the draggable to it's original position on the move
Hi, I am using a few draggables on a page and I initiate an ajax call on 'stop'. Depending on a few variables the response of the ajax call might sometimes be 'error' and when it happens I want the draggable to revert back to it's original position. A bit of code might clarify things a bit.. $('#d').draggable({ stop: function() { $.ajax({ type: "POST", url: "post.php", data: "data=foo", success: function(msg){ if ( msg.indexOf('error')
Fire off validation based on selected radiobutton
I have an ASP.NET MVC View page. I have a radiobutton list in it using a helper method. How can I fire off certain validation examples on a textbox based on what radio button the user selects using JQuery? I'm not sure how to capture selected items using JQuery and then do something with that...in this case fire off only certain validation on my web form.
Getting the total height and width of all elements in a DIV
How could I use jQuery to get the total height and width of all elements in a DIV including what results from their padding and margin style settings? I want to create a jQuery dialog that is automatically sized to fit all elements in it without needing resizing as soon as dialog() is called.
Setting the height on an open dialog
How would I change the height on an already opened Dialog using JavaScript?
Trying to close a datepicker at the same time a dialog is closed
I tried binding the click event to a form field in a jQuery Dialog box but it does not work: $(document).ready(function () { $(this.update_ship_date.new_ship_date).attachDatepicker(); $(".ui-dialog-title:contains('My title text') + .ui-dialog-titlebar- close").bind('click', function () { $("form[name=my_form_name] > input[name=my_date_field]").datepicker('hide'); } ); } ); The datepicker shows up as expected when I click the
tab open by current page URL
hi, this is my first post here, i tried searching for this information for a while to no avail - i'm using tabs on a page, and want all tabs to be closed when the page is loaded. so far no problem. but i also have a big clickable map on a different page, and when an area on the map is clicked, i need the tabs page top load, with a certain tab opened (depending on where one clicks on the map). kind of like when you call a page anchore in the URL (something.html#something). is this doable? what should
Next Page