Connected sortable grid lists behave weirdly, when dragging from second, third etc. row of a grid to an one-line grid
I have two lists as grids, so <li> elements have float:left. There is a list with the height of a single <li> element (so it looks like it's only one row). Below this, there is another list which has got no limit to its height. When I have one element in the first grid, and I move another element to this list from the second, third etc. row of the other list, the placeholder appears at the first place in the one-line list wherever I move the element. And this also happens when I have two or more
how to click to know the position in sortable list
i have the following code to get the change of position, I dont know how to make the list tell me the position of a specific element when i click it. please give some idea. $( "#sortable" ).sortable( { start:function(event, ui) { startpos=( $(ui.item).prevAll().length ); }, stop:function(event, ui) { stoppos=($(ui.item).prevAll().length ); } });
Sortables Question
The first paragraph in this post explains my question well. I was wondering if there was an option to make elements that are moved by the item you're sorting to do a sort of revert to their new area, rather than just jumping to it. Is such an option in existence?
building customer jQuery UI fails
When unzip the the built file, it always says the zip file is invalid.
Sortable and cookies: how to restore order after a page update ?
I'm at first try with JQuery UI and i'm trying sortable. All is working fine, but now i'd like to learn how to save sort order and restore after a page load. I've latest jquery + jquery ui + jquery cookie plugin.
jQuery UI Dialog - rearraning DOM
I noticed that when calling .dialog() it moves the html elements to the very end of the document. This is a problem for me because I want my forms submit button in the dialog (while other form elements are not) - however, because it re-arranges the HTML, my submit button is no longer within my form tag - so the submit button does not work. Is there a way to prevent dialog() from re-arranging the DOM? Example: JS $('#saveDialog').dialog(); HTML <form method="post" action="/whatever"> <input type="text"
getting id of button that triggered dialog window
hi. i'm using the dialog widget, and i'm wondering how do you get the id of the button that triggered the opening of the dialog window? for example, the demo here http://jqueryui.com/demos/dialog/modal-form.html has: <button id="create-user">Create new user</button> I want to be able to get the "create-user" id, but how? thanks!
creating dynamic jquery tabbed panels
hi everyone! i'm trying to create an dynamic jquery tabbed interface and need some help. so far i've managed to draft a rough idea of how i wish the interface to look like and would currently appreciate suggestions on how to get production under way. 1) this is default tab that is opened once the page loads 2) there is an open control right besides the default tab 3) once the open control is selected a drop down appears querying my database of all the categories selected, once a category has been
Using similar dialog styling in custom dialogs
I'd like to be able to have a consistent look between the default jQuery UI dialog and custom dialogs I create with markup. The buttons on the default dialog are smaller than buttons I add to a dialog which I have created using .button() There is also a border around the div that contains buttons on the default dialog. I tried adding the "ui-dialog-buttonpane" css class to my inner div that contains the submit button and the button disappears.
About the big interface created by JQuery UI...
Hi everyone, I just tried the customizable jquery-ui, but in the application of $("#MyButton").button(), it created a really big button, nothing like a normal size, just like in "http://jqueryui.com/docs/Getting_Started", I didn't modified any original setting, I wonder if you can help me? or am I doing something wrong? Thanks in advice (Y)
Help me improve this effect
I have simple script that loads an image. I've used fadeOut to hide the current image, and the call back function to load the next image after the first has finished fading away. My problem is that clicking quickly across the links, faster than the images fade and load and fade in, often ends with the wrong image displayed. What's best practice for something like this, how can be make sure the last image clicked is the image that loads? $('#icons a').click(function(event){ event.preventDefault();
How work with jQueryUI Datepicker?
Hello! Can you give me example how react on user click on datepicker? For example, i have inlined datepicker and want to show alert with selected date. If i write code like that: $(function() { $("#datepicker").datepicker({maxDate: "Today"}); $.datepicker.formatDate('ddmmyy'); $.datepicker.setDefaults($.datepicker.regional['ru']); $('.selector').datepicker({ onSelect: function(dateText, inst) { alert(dateText); } }); }); Nothing happens! Please, give me example of working code!
Adding content to datepicker markup
I am currently messing with the jQueryUI datepicker plugin, and have so far managed to get it working. However, I need to add some html to the datepicker when it is shown. What I want to add, is a link to a help description (but it could just as well be a custom image or a paragraph of text). From what I have been able to deduct from the documentation (http://jqueryui.com/demos/datepicker/) there is no method or event I can just out of the box. I've tried adding my content in the "beforeShow" event,
Timing issue with connected sortable?
Hi all, I am trying to build a connected sortable that will maintain a column height of 10 items, and preserve the sort order across two columns. Everything looks like it's working when I slowly drag items from one column to another, however, if I hover over multiple columns before dropping an item, or drop really quickly, the list becomes unbalanced. I can't reproduce it when I set breakpoints in Firebug; not sure if this is an issue with my logic ( I know I am exploiting closures..which can be
Diferent IE8 PROBLEM
Did someone knows why this is showing in IE8 ?
Dialog with combobox with around 100 items getting javascript "stop running this script" when clicked on in IE only
I posted this a few minutes ago but I can't find it, maybe moderator didn't approve? We are simply calling ajax to get html from an action then placing it in the div used by the dialog. It has two comboboxes and one works fine with less than 20 items but the one with roughly 100 works fine when you use keyboard up/down keys but if you click on the dropdown to view it, IE throws some popup about "Stop running this script". There is no script on the combobox that we call. Any idea, pretty new to
Dialog - form based with combobox, STOP SCRIPT RUNNING in IE
First off I am a newbie. We are switching out all our prototype with JQuery. We are trying to use dialogs for all of our popups. We have an odd situation with a combobox. The page actually has two combo boxes and one work and the other(which has about 3 times the data) gets an error in IE. "Stop running this script". There is less than maybe 100 items in the list. In firefox this works just fine. The popup is dynamic and based upon an ajax call. Once the ajax call is complete we open the dialog
Form is displayed outside the dialog in Firefox
Hello, I have faced problem, please look into my code and say it's correct or not. <style> #dialog_link<?php echo $cnt; ?> {padding: .4em 0px .4em 0px; text-decoration: none; position: relative;} #dialog_link<?php echo $cnt; ?> span.ui-icon {margin: 0 5px 0 0; position: absolute; left: .2em; top: 50%; margin-top: -8px;} </style> <script language="javascript" type="text/javascript"> $(document).ready(function() { $("#dialog<?php echo $cnt; ?>").dialog( { autoOpen: false, width: 600,
jQuery UI Tabs selected index
Hi, I am trying to figure out how to solve an issue where I want to select the previously active tab. I have been playing around with cookies to store the tab index. But now my problem is, how can I use the tab index to manipulate content in the specified tab index? for example what can someone do when you retrieve the selected index? Is there a way to manipulate the content of the selected index? var $tabs = $('#example').tabs(); var selected = $tabs.tabs('option', 'selected'); // => 0
Ui Tabs and middle click
Hi, I am using ui tabs in non-ajax mode. For a unique tab I am following this method (http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax )to follow an url. It works fine. But if I click on this tab with the middle click (scroll click) of my mouse, this method doesn't work : a new browser tab is opened, and an Ajax request (GET) is sent to load the target instead of follow the URL. In my case, I'd want a middle click open my anchor url in a new window.
jQuery UI Dialog: modal overlay problem with page height > 4096px
Hi I'm using a jQuery UI dialog, with modal: true. Works fine in Firefox 3.6.3, Chrome 4.1.249.1064 (45376). jQuery core version is 1.4.2, and UI components are the latest and the ones designed to work with core 1.4 and up. However, in IE8, with a page greater than 4096 pixels in height, the modal overlay starts misbehaving. This was found by crafting a simple page (using the guts of the downloaded demo) with a couple of height-styled divs. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"
Suggestion: Separate overlay plugin
I've been playing with the 1.5 release candidate and am really pleased that dialogs now have an optional modal operation state and can generate an overlay layer. I do have a suggestion, though. The overlay seems to be integral to the dialog plugin, but there are circumstances where you might want the overlay functionality in things other than dialogs. Likewise, if you're not using the modal and overlay functionality then having the overlay in the dialog code is a waste of bandwidth. I'd suggest moving
[datepicker] Change color of date cell ?
Hi, I try to change the color of some date cells. I have set the class "blocked" for some dates with the help of beforeShowDay callback function, the classes are added correctly. The problem is that when I add some CSS to the class "blocked", the jquery ui css override my class, here some code : $('#datepicker').datepicker({ beforeShowDay: formatBlockedDates, [...] function formatBlockedDates(date) { [...] return [false,"blocked"]; .blocked, .blocked span { background-color:#F30; } Firebug
Examples on documentation doesn't work
Try this http://docs.jquery.com/UI/Effects/Explode The example aren't working, the jquery library is not loaded correctly. And like this there are more examples in the documentation wich doesn't work. Please fix it! Thanks
Sortable adding height to Draggable Helper
I have a draggable list connected to a sortable list. When I drag list items from the draggable to the sortable the helper has height added on to the element. Dependent on the amount of copy that is in the helper the helper grows more. How do I prevent the sortable adding any height to my helper?
how to get onchange select id
Hi, In my page i have 4 dropdowns when on change event occurs, i want to know from which select box it is fired. How to know that? Help me. Thanks, Mohan
Display jquery-ui-tooltip when jquery-validation detects form errors (almost there)
I'm trying to display a jquery-ui tooltip when validation detects form errors. I can make it happen using the following code, but the effect is that a new tooltip gets created each time validation fails. Any idea how I can either tell ui-tooltip to reuse the existing tooltip OR tell validate to clean up the old tooltip first? $('form').validate({ errorPlacement: function(error, placement) { var text = error.text(); placement.tooltip({ content: function(){ return text; } }).tooltip('open');
IE UI Button refuses to work as link.
I wrap the button with an <a href... but it does not work in IE. Is there a jQuery UI way to make these links work?
dialog issues - accessing the dialog object, scrolling inside the container...
Hello, I'm having some troubles getting going with the ui.dialog widget. I'm using it to display content that often extends beyond the bounds of the dialog. I've tried putting the content in a div with overflow:auto, and creating a dialog from that div element, but I still need to resize the height of the div element to match the dialog when it is opened/resized. Here's what I have at the moment, which resizes the contained div based on the dimensions of the elements within the dialog on resize/open
Themeroller as basis for own custom themeing service (OS)
Hi Is the whole themeroller website script downloadable so that i can take this as a basis to further work on? This would also make the documentation for some of us jquery-newbe's redundant since its pretty easy to understand the processes behind the scene if we face such a complex/big demo with structured code-view. Thx for any hint on this. Regards
Accordian Example Non-Functional
Hi and thanks I have worked with jQuery for years and I am a big fan, I tried the accordian finally and I can't get the basic example working, I used the code below, if there is something I missed I apologize but I get no response at all and I tried on multiple browsers, Safari, FF, IE,Chrome,Opera. Any help would be appreciated thanks $(function () { $('#accordian').accordion(); }); <div id="accordion"> <h3> <a href="#">First header</a></h3> <div> First content</div> <h3> <a href="#">Second header</a></h3>
What grid?
Hi I would like use a grid for my apllication (symfony) but i have seen many grid on the web. What is the best grid? Could you give the advantage and disadvantage of grid? Thanks !
ui draggable live event
Hi, I was wondering if somebody could point me in the right direction for attaching draggable ui as a live event. I have divs that need to be draggable but can also be created & removed as well. At present I have: $('.panel_button').live('mousemove',function(){ $(this).draggable({containment:"#skeyb_design",distance:10,grid: [50,50],delay:10,zindex:9, start: function(){ }, stop: function(){ }, }); This does work & I get the result I need, but
Using any plugin inside ajax tabs
Is there a way to get any jQuery plugin to work within ajaxed content of tabs? Or is a general solution impossible and one would have to customize with .delegate or .live every time?
jQuery UI theme alternatives
Hi all, I've been using the jQuery UI code to build some intranet sites, and it's working very well. However, I'm not crazy about the "look and feel", even using Themeroller. I've looked at the alternative theme Arista, which I might make use of, but I'm wondering if there are any other jQuery UI based themes out there? Thanks! Doug
Making it easier to customize style of buttons in jQuery UI Dialog boxes
I wanted to add some styling and icons to the buttons inside a jquery UI Dialog boxes and this proved to be very difficult to figure out how to do. As far as I can tell there's no good documentation on it, official or unofficial. This post from filament didn't really help at all: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/ I put together a solution with some things I found on stackoverflow, but this kind of thing should be much easier, and it should
Range slider: put min and max values into separated fields
Currently the range slider outputs min&max values into single text field. I think that's wrong behavior, at least for me :) Is there a way to separate these values using two different "input" fields? Thanks!
Dialog lose mouse tracking when resizing
Hi everybody. I have a problem when resizing a jquery ui dialog which was created with a setup like this: $('<div><iframe/></div>').dialog(); the problem is, if I start resizing the newly created dialog, and the cursor moves inside the iframe in the dialog itself, it seems to lose mouse tracking and so it stops the resizing, immediately restarting as soon as the cursor is outside the frame. you can check it out here: http://jsfiddle.net/Lmbjj/ I have been able to verify such behaviour in Firefox
[accordion] Sortable example on jQuery UI Website is buggy with IE7
Hi, I just noticed that the sortable accordion demo on the jquery website has a bug with IE7 (7.0.6001.18000). http://jqueryui.com/demos/accordion/#sortable I notice strange behavior when I attempt to re-sort the accordion panel. I can drag the panel properly but when I drop the panel into its new position it disapears (the panel i am moving). Has anyone noticed this or know of a fix? Thanks
How to change size of datepicker - in conflict with existing style sheet
G'day, Just a quick question. I have my own style sheet for my page. And because of the conflicts between my style sheet and the one provided through the theme in the jQuery UI, the date-picker is aprox. double in size as to what it should be. As i understand it, the main jQuery style sheet sets its font size as 62.5%. How can i change JUST the size of the date picker??? thx
Next Page