radio button error placement
I have a table with my rows in it and a row contains 3 td's with radio button's in them (im open for a redesign idea). When i validate i get 'big' red boxes around each radio button and the text goes below and 'This field is required' appearing after the first radio button. ( bec i havnt got any validation on the page for it) How do i create validation just for these and put some error msg somewhere appropriate? <tr rowheight=40 valign=bottom class="normal"> <td class="normal"><input
Highlight weeks in datepicker
Hello, i'm trying to highlight weeks in the datepicker. Since i updated my jQuery UI to v1.10 it does not work anymore. (I used v1.8.14 before). Here is my code that worked well before : $( "#top10week" ).datepicker({ dateFormat: "yy-mm-dd", firstDay: 1, showOtherMonths: true, selectOtherMonths: true, changeMonth: true, changeYear: true, showWeek: true, beforeShow: function(dateText, inst) { $(".ui-datepicker-calendar tbody tr").on("mousemove",
Jquery UI Draggable problem with IFRAME
HI.. I have an iframe inside the DIV element. EX:: <div id="UPGRADE_LICENSE" style="display:none;width:575px;"> <iframe id="UPGRADE_LICENSE_SRC" scrolling="no" width="100%" height="550" src="/html/blank.html" frameborder="0" align="center" ></iframe> </div> Inside the Iframe i have a div and onmousedown function on it. that function not working... I used draggable() function. Inside that function i tried draggable ({iframeFix:true}). that too not working.
Menu events not firing
Hi, I'm fairly new to Javascript and I've just started playing around with jQuery UI. I've written a very simple example which responds to menu events, but the events never fire! Here's the script:- http://jsfiddle.net/JcrfK/4/ I want to be informed when someone clicks on a menu item. Please can someone tell me what I'm doing wrong, I've been floundering around for hours! Thanks, John
Themeroller-generated dialog CSS not working
I put together a page that shows what's happening.here. The dialog is a confirmation that an email was sent, so you'll need to fill out the form to get the dialog to pop up. (I wanted to retain as much as the original functionality as possible.) As the title says, I generated a UI theme using Themeroller and the dialog I'm using is completely void of all styling. To the point that the dialog is complete transparent and all that shows is the text in the dialog and the unstyled close buttons. I tried
I'm lost with Deferred and loops, Please help to find myself
Hi there! I'm getting mad about this, I was searching for a answer 2 hours but i can't find anything. The Plan: I have 4 DIV, each one has 100px width. When you click one, it turns to 200px i.e., the following DIV gets de property "left" to -100px to cover it. Then an animation starts, discovering the rest of the DIV clicked. I could handle it nicely, the problem cames when you click in other DIV. To make it smart, I tried to: 1.- The following DIV's of the open one animates their "left" property
dragging object does not trigger blur event upon dragging
I have a focusout event listener attached to a form field which is triggered anytime i click or tab outside of the form field however, it is not triggered if i drag one of the dragging items I have on the page. The drag action seems to cancel the events previous to the drag. Is this by design and can it be configured to prevent this default behavior?
How to keep an accordion menu state after link is clicked?
How do I do this with jQuery?
jQuery tabs has Safari and Chrome bug
Hello, When I click on one of the tabs, it becomes active but shows a border (see blue border below for Safari browser): It also happens in Chrome except the color is yellow. Does not happen in IE and Firefox.
Can we expect better touchscreen support soon? Is there some roadmap to jQuery UI concerning this?
Hi. I've being using jQuery and jQuery UI for some time and they're tremendously useful. I think jQuery UI does a great job on the typical desktop but I'd like using it for touchscreen and small devices too. It's already working there but it isn't as usable, lacking some features that would make it more appropiate for those devices. On the other hand, it seems jQuery Mobile does a good job on touchscreen devices but doesn't fit as well for non-touchscreen. Also, it's lagging behind jQuery UI in some
Making dropzone droppable again after element has been dragged out
I'm trying to build a website where the user can drag some items (one item in on div) to other divs on the page. It' not a table or so, just divs somewhere on the page (Example). With html5 drag&drop it works well, now I try to do this for mobile devices. I can drag items to divs, drop them there and block this dropzone, because only one element should be in a dropzone. I also can drag this element to another div if I've had make a mistake. but then I cannot drop another item in the div which is
I want to build simple UI pages which consists of free scattered buttons
Hi! I want to hook up my spring project into some simple client pages which contain mostly buttons. I have a basic knowledge in html,css and java script, so i'm looking for some plugin that will give me the option to select an item from a development wizard and drag it to my page a resize and relocate it as i wish (luck you can do in swing) . Can i do it using JQueryUI? Thanks!!
Toggle/Select 3 Div's location within another div, maybe using position absolute or insertAfter
I have a album Page, with 4 images per page, images are displayed in a container div. This container has 3 DIV's, top one is NAME of image DIV, next ones is IMAGE DIV and the 3rd one is DESC DIV I wanna be able to Toggle/Select the Location of the NAME or DESC to be either be above or below images for all 4 images I like example one better, but have not been able to get it to work with multiple containers EXAMPLE ONE this example does not use absolute position but i can only get it to work if I remove
Can I call dialog from c#
I'm a new user of jQuery and I want your help I want to display jQuery dialog from c# after inserting data into database like an example how to do that ? Thanks
JQuery sortable list - attempting to cancel a drag throws strange errors
I'm trying to create a screen where you can only drag three items from one list to another. I'd like to prevent the use starting another drag if three items already exist, but the control gives very peculiar behaviour. I'm getting a jquery-ui outerWidth exception thrown. Can anyone help me out by explaining where I'm going wrong? http://jsfiddle.net/N3KcC/ Thanks, Jason
.position() against two targets
I want to position an item relative to two elements, using 'top' from one element and 'right' from a different one. I thought I would try callig position() twice, one for the vertical position and again for the horizontal. Unfortunately, as anyone who actually reads the documentation knows, if you specify only one value in 'my', the other is added for you. What I tried was this: $("#page_tools").position({ my: "left", at: "right+2 ", of: "#layout_wrapper" }).position({ my: "top", at: "top-40", of: "#page_content" });
Ajax Autocomplete
Hi there, i am trying to get the jquery autocomplete to work, but i am new to javascript and jquery and i got a problem. I want to realise autocomplete via ajax call on my wordpress site. I think the json call is working. Firebug shows me that ajax returns a response in the form of: ["Name1", "Name2", Name3"] But my search field does not display the list of suggestions. How can i put the ajax response into the autocomplete suggestions? jQuery("#s").autocomplete({ source: function( request,
How to get current/firing element of autocomplete combobox?
I use the autocomplete/combobox solution as explained here: http://jqueryui.com/autocomplete/#combobox Finally applied via a $('element').combobox() as in the example code. I use several comboboxes and I want to "empty" the value of, say, "combobox 3" if, say, "combobox 1" gets changed. The problem is that I cannot find out the id of that element. The cause of this is that combobox is actually "converted" to an INPUT element that shows the current selection of the comboxbox/select and it doesn't
UI Portlets
I'm currently working with the portlets from the UI Library which is going well. I have coded the page so that when it is loaded all the portlets are collapsed, I was wondering if there was any way to make them open only once they have been dragged to a different column (i.e. Closed in Column A but then they open once you drop them into Column B). ? Any help with this would be appreciated
Why does jQuery UI hardcode Verdana in the font-family?
I'm using jQuery UI via the jquery_update module in Drupal. It seems that the default theme for jQuery UI hardcodes font-family to Verdana, thus overriding my default font family and size. Why is this? Wouldn't it be better for the default UI theme to assume that there are already font definitions and just theme the special widgets?
I would like Autocomplete dropdown to follow caret
The behavior I'm trying to create is to have a jQuery UI Autocomplete widget attached to a multiline textbox (either textarea or contenteditable) that drops down the autocomplete suggestion box directly below the input text (i.e., just under the caret position) rather than beneath the textarea itself. The position of the dropdown should follow the caret as more letters are typed. I believe it will be easier for the user to see the suggestions closer to what he's typing instead of having to scan
Datepicker was not hiding while pressing back or forward browser button
hi current working in jQuery Mobile site.i was displayed a date picker on a text box click .While date-picker was displayed then i click back or forward button in the browser then the date-picker (calendar) was not hide it still displaying on other windows. Please help me to slow this issue On a text box click date-picker: If we click back button while above date picker was in display state then the date-picker displayed in other page also the image is below PLease help me to slow this issue
Menu with tabs
Hi, does anyone know if it's possible to include a menu within a tab header as per this mockup. This appears to be a very common UI pattern these days.
Problem adding data-attribute to form.
Hello, I'm trying to add data-validate="true" to my page form element. I can't hardcode it in, so I have to inject it in after with jQuery. Turn Below: <form id="eself-contact-us-form"> Into This: <form id="eself-contact-us-form" data-validate="true"> I created a fiddle to help show where I'm currently at. http://jsfiddle.net/XFgXd/3/
First item in Accordion is open by default
Hi, I'm using Accordion for a FAQ page, and when accessing the page - the first "question" is always open. How could I set the accordion to be closed by default? Thanks!
JQuery UI tabs crashing in IE7
Hi, I am trying to fix a problem on the following website http://mvc.whclpreview.com/ToolSelect When a user clicks on the i on one of the coloured tabs a popup of a set of UI tabs appear. All is working fine on all browsers but on IE7 the website is crashing the page. Can anyone help please? Thanks.
Helper in sortable not working as expected.
Hi all, I have a problem with the sortable functionality. I have to sortable lists, and I want to drag elements from #sortable1 to #sortable2 (but sometimes the other way around), but the elements from #sortable1 must not dissapear. I build up a small test site in jsfiddle (http://jsfiddle.net/N73e6/) to show the problem. Declaring helper as clone or not makes no difference (as I see). An alternative method (as you may now) is to use a draggable and a sortable (http://jsfiddle.net/dxuJv/), and thus
unordered list inside the tab panel not working
My HTML <div id="tabs"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <ul> <li> list 1 </li> <li> list 2 </li> <li> list 3 </li> <li> list 4 </li> </ul> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
Changing Accordion colors
Hi, I'm pretty new, and don't know Javascript etc. I am using the jQuery accordion code, but I don't find where I can change the accordion colors (headers background, text color, etc.). I have no CSS file - I just downloaded the two js files: "jquery-1.9.1.js" "jquery-ui.js" And I can't see color options in these files.. I know I'm being stupid here.. any help? Thanks!
How to bold text in autocomplete
As the user types in letters I want to bold the letters types in the autocomplete Here is the script that I am using: //Create Autocomplete //Uses jquery.ui.autocomplete.html.js extension
var createAutocomplete = function () {
var $input = $(this);
var options = {
source: $input.attr("data-jax-autocomplete"),
minLength: 3,
html: true,
};
$input.autocomplete(options)
};
Display Markup of selected autocomplete item
I used jquery.ui.autocomplete.html.js in-order to display data with html markup in the autocomplete list, but when I select an item from the list it is displayed as: Apo A-1 KO - [Allele Common Name] -> <i>Apoa1<sup>tm1Unc</sup></i> <b>By Search Term</b><br /> <input type="search" name="searchTerm" data-jax-autocomplete="@Url.Action("Autocomplete")"/> <input class="submitSearch" type="submit" value="Submit" style="width:100px"/> What do I need to do so that the selected item is displayed as html?
Help needed on accordion with sortable & droppable feature..!
Hi folks, Can i just do the opposite of this shown in the below example,i.e, drag from a (shopping) list and drop back to any of the sections of accordion.http://jqueryui.com/droppable/#shopping-cart Thanks in advance..!
Datepicker: add +1 day to selected day
So, this drives me crazy, I have googled for hours: $("#return").datepicker({ minDate: 0 }); $("#departure").datepicker({ minDate: 0, onSelect: function(selectedDate) { $("#return").datepicker("option","minDate", selectedDate); } }); How do you add another day to "selectedDate"? example: if I select march 5 for departure, make sure that return date minimum day is at least march 6 Here is full code: $(document).ready(function() { $("#continents").change(function
(Q) Fixed footer at bottom anh adapto to div height?
Hi, I'm newbie in Javascript I try to build a website for my own business This is my website layout Is there solution to make this Thanks & sorry about my Bad English
Problem with Dialog in Chrome
Hi All I am using the Dialog widget in my application using the following command: var opts = { title: "My Dialog", modal: true, height: 700, width: 800 }; odialog = $('<div id="newdivid"><iframe width="100%" height="100%" id="randomid"></iframe></div>').dialog(opts); $( "#randomid" ).attr("src",curl); In the above code, "randomid" and "newdivid" are randomly generated. The dialog opens properly in IE with the correct width and height. But doesnt come correctly
UI Tooltip - how to keep it visible?
I want to keep tooltip open, when i hovering it.
How to render submenu in multiple columns
Menu has 3 levels. First level has only single item called "Show all". Second level contains product categories. Third level contains subcategories. There are no more menu levels. Subcategories must displayed horizontally. I tried jquery ui menu menu widget to implement this. Subcategory is displayed vertically. How to change this so that subcategories are displayed horizontally? Can jquery ui patched for this or is there some other control which allows this. Submenus must opened on mouse hover.
DatePicker and ui-state-hover
Hello, Seems that someone already reported on this a few years ago but the problem, if it is a problem, remains. To recreate the problem, create a DatePicker. I use the following code: var now = new Date(); $(".datepicker").datepicker({ defaultDate: now, maxDate: now });Then in the widget go back one month by clicking the left arrow in the top left corner and select (click) any day. Then go forward to the original month by clicking the right arrow in the top right corner
SOLVED: Using jQuery-ui Tooltip with dynamic ajax content on click instead of hover
I'm trying to implement this in a template where a variety of items may have the class assigned to implement the tooltip. I have had success getting the tooltip on click only, and some success on getting the tooltip populated with ajax of the url is fixed, but I can't seem to extract the url from the link and get the content for the tooltip from that link and have the tooltip work on click rather than hover. I had success doing something similar with dialog. I added a rel property which contains
Major performance problems with Selectable
Selectable seems to work fine only as long as there aren't many elements to be selectable. With 50 elements performance is terrible, with more (I needed ~500) $('#selectables').selectable() really takes it's time - on a fairly decent hardware Chrome 4.0 takes over 30 seconds and Firefox 3.6 over a minute (but tends to crash). Any ideas?
Next Page