JQ Dialog and JAWS reader
We are implementing a jq dialog terms and conditions on page load but are having issues with accessibility. By default, focus is set on the dialog close button. We are able to to give focus ( .focus() ) on the header but when using the keyboard arrow keys to read the proceeding content, the browser window responds by scrolling down. How can we provide accessibility for JAWS to read content within a jq dialog using the keyboard?
Is there any way to prevent Textbox from duplicate entries?
I am working in asp.net project.I want to prevent my textbox from repeated same entries.I use autocomplete and checkbox values as input for my textbox.Is there any way to prevent Textbox from duplicate entries from pasting,typing,etc..once i click on the existed values from autocomplete means it have to disappear from the textbox..Please help me out guys
Accordion - centering display on active div content panel?
I have accordion working fine It really helps me organize a lot of data on a subject. The "problem" I have is I want the active div content panel to be centered or moved to the top of the display. If I have a long winded set of details on a subject in one div content panel then the next may have an image of the subject then the next div content panel may have some reference material on the subject. And this all works great, except when I open the first long winded div content panel I scroll down
JQuery Accordian form with required fields (ASP.NET)
I'm baffled, hopefully somebody could help. We have an ASP.NET (VB) website and have a form that I've sectioned out into JQuery Accordian tabs, with a submit button at the bottom of the page. The only required fields are in the 1st accordian pane. When somebody is not in the 1st accordian pane and clicks submit, I would like the 1st pane to open if there are required field validation not filled out. Right now it just sits on the last pane opened. How would I go about opening this 1st pane on submit?
Jquery date picker current year issue
I am using jquery 1.11 which is latest one. $(".datepicker").datepicker({ dateFormat: 'mm-dd-yy', changeMonth: true, changeYear: true, yearRange: '1930:-18' From my date picker default year is showing as 1930 and current month but current year is displaying on text box once i select date . If i select another year from drop down then it is showing correctly. Problem with initial one only, please let me know how to fix this issue.
A tooltip program does not work.. Why ?
I am studying jQuery and am practicing with an example on tooltips function. The program does not work despite it is free from any error. I applied another on tooltips function example and it worked normally. The example is listed below. I would so grateful for any enlightening tips. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World</title> <link href="http://localhost/3rd/_css/jquery-ui.min.css" rel="stylesheet"> <link href="http://localhost/3rd/_css/site.css" rel="stylesheet">
problems using redmon theme (1.11.3), style not being applied
Hi All, I am using asp.net mvc 4 with jquery, and i am trying to use the redmon theme. I have downloaded this from the site and here is what i have done: 1. Under Content/Themes I have created a folder called : redmond 2. Under Content/Themes/redmond I have copied the following content from the jquery ui theme roller .zip file: a)image folder b)jquery-ui.css c)jquery-ui.js d)jquery-ui.structure.css e)jquery-ui.theme.css 3. Then I created the bundles: bundles.Add(new
how to drag and drop into iframe
how to drag and drop into iframe
drag and drop jquery bug at 50% of parents width?
Note: I am new to this drag & drop, but this appears to be bug. I attached my code. If you open it up as HTML you will notice three lines at the left, and one line at the right. The line at the right can be drag & dropped on the first two lines. Anytime you drag & drop to the first line it will always work. But if you drag & drop to the second line it will only work if you drop the item on the text that is within the first 50% of the width of the cell. In this example the cell is 600px width, so
Sortable Icon
Hi, I'me searching for an Icon for a sortable List. Any Ideas how to visualize that a list is sortable e.g. a list-item is draggable? The only thing I could imagine is a [css]cursor:move but that would work not until mouseover. In my opinion it is an icon like the resize-icon in the lower right corner of textareas but not vertically. Any Ideas? best, heinetz
jquery-ui-1.10.3.css UI-tabs does'nt switch the tabs when clicked.
Hello All, I have an issue on changing the tabs, when we recently upgraded JQuery 1.10.3.css. Which works great for jquery-ui-1.8.9.css. For the tabs to work using JQuery 1.10.3.css, does it have any dependencies for .js files. Do I also need to upgrade any of these... jquery-ui-1.8.10.custom.min.js jquery-1.10.2.js Please let me know. Thanks, MNK.
Width of selectMenu in jqueryui.
Hi, I use several selectMenu to filter a table. I've item option with image and/or text I use this code for this : $("select.TFOlstJquery").TFOiconSelectImg({ create: function (event, ui) { var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last"); var elem = $(this).children(":first"); var styl = elem.data("style"); var HasTxt = ($.trim(elem.text()).length > 0); if (HasTxt && styl) { $SpanTxt.addClass("TFOselectmenu-textDecalTxt")
JQuery drag and drop to making a flow model or binary tree
I have a OL with three LI. When I drop an element onto that ol it creates a new LI node. This new LI node needs to allow other similar elements to be dropped on it but it isn't recognized as droppable. How do I update the DOM or the jQuery object to know that the new nodes are droppable? thanks in advance Js fiddle
How to set DatePicker so that when it get focus it doesn't show Calendar Window?
Hello, I have tried both jQuery UI DatePicker and Bootstarp-DateTimePicker so, that when they get focus e.g. using TAB-key their Calendar window is NOT shown. Only click to DatePicker or DateTimePicker should open Calendar Window. How should I implement this? Thanks, Michael
VERY new to jQuery-UI!
Hello my people! I am about to start using the jQuery-ui and downloaded it about an hour ago but it is not working. I specifically wanted to try the datePicker and accordion widgets to experiment but they are both not working. I beleive the problem is that I connect to the regular jQuery through Google by using the following scripts: <script type = "text/javascript" src = "http://www.google.com/jsapi"> </script> <script type = "text/javascript"> //<! [CDATA[ google.load("jquery",
JQUI Newb, Accordian unable to finish when appending..
Greetings, I am a newb with Jquery UI. Trying a side project that pulls in some JSON data, formats it, and displays it. I have a working demo here (no JqueryUI): http://majorgeek.azurewebsites.net/ajaxjson.html I want to play with an accordian on the page. Here is a demo: http://majorgeek.azurewebsites.net/ajaxjsonaccord.html My accordian Div is created in the DoM, and I have Jquery creating the content and appending it to the Div. It appears jQueryUI is firing, and styling the accordian DIV,
Draggable droppable resizable and clone
Having a error when i try to resize element after i'v been dragged it inside of container. And another thing is that i cant send right width and height after element is resized. It sent element last size. http://jsfiddle.net/pqxmbcdh/
.effect('slide'… not showing next object
I was browsing around for slider and found this one http://jsfiddle.net/skram/tHZLY/2/ (Somehow I can't find the topic...) but I want to replace .animate with .effect here I wrote another jsfiddle with effect : http://jsfiddle.net/tHZLY/12/ but somehow the next div that is suppose to show is not showing. code : var $pages = $('.page'); $('#nxt').click( function() { var $cur = $('.active'); var $next = $cur.next(); if ($next.length == 0) return; $cur.removeClass('active'); $next.addClass('active');
jQuery ui selectmenu vertical position offset (relatively to buttons in this line)
In my form I place control elements in a line: button, select box, checkbox. It looks logically right. But since I've started using jQuery UI I see strange vertical of select box. Here's the example from jquery-ui site, a little bit shortened: https://jsfiddle.net/Tertium/z829pay7 $(function() { $( "#speed" ).selectmenu( { width: 200}); $( "#files" ).selectmenu({ width: 200}); $( "#but1" ).button(); $( "#but2" ).button(); }); Tested on jquery 1.11.2
problem with my dialogbox code
hey guys, I am trying to work on this dialogbox,I managed to do it,but still got some problems with position property even I use normal direction like top and left and use coordinates,but still both of them don't work here is my code: <html> <head> <html> <head> <link rel="stylesheet" href="jqueryui/jquery-ui.min.css"> <script src="jqueryui/external/jquery/jquery.js"></script> <script src="jqueryui/jquery-ui.min.js"></script> <style> </style> <script type="text/javascript"> $(document).ready(function(){
Link to a specific tab from the same page tab
Hello, I need to be able to link to a specific tab from a menu that is present on all the pages. This means that the link has to activate a particular tab while on the same page (this is important, I can get it to work from another page). In the current version of jquery UI, I can link from another page directly to the tab, no problems. But not the same thing happens if the link is on the same page with the tab I am trying to access. I have 2 questions: 1. there something I can do to make the link-to-tab
jQuery Draggable stoped working in IE when iframe document reloads
Try this http://jsfiddle.net/jzo5et11/9/ My problem is after pressing "ReLoad" button draggable stops working. Please help
How to use multiple autocomplete with categories in same page.
Hi, Need to implement multiple auto-complete with categories in same page. I have implemented single auto-complete with categories.. Please guide me solve this issue.. This is my code, $.widget( "custom.autocomplete", $.ui.autocomplete, { _create: function() { this._super(); this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" ); }, _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; ul.append('<li class="ui-autocomplete-category" style="background-color:
How do i update dynamically created dependent variables when the dynamically created independent variable changes?
When my dynamic independent variable change, I have been able to create a handler that works. However, every time an independent varable changes, I need to change the three dependent variables. I have not been able to get his to work. There is a js fiddle at http://jsfiddle.net/ztgzkpus/5/ . The fiddle only tries to update one dependent variable. I figure it I can do one, I can do three. It is a mystery to me. The '. on' handler can find my dynamically created independent variable but not
Connected Tabs issue
Help needed in jQueryUI code (tab+sortable+droppable+draggable) I'm working on a project and I've designed a "Connected Tabs" interface, based on jQuery-UI's demo pages for: Sortable - Connected Lists Droppable - Shopping Cart Draggable - jQuery UI Draggable + Sortable Tabs - Sortable The (visual) part I'm struggling with is as following: After re-ordering any Tab the visual effect hide/show Tab does not seem to work on a "drop" action. If the Tab order is re-arranged in the original order, the
Setting tab url dynamically - jQuery UI Dialog
I am unable to set the tab url dynamically. Idea is to conditionally load different views(.html) into #tabsDynamic (fifth tab). Have tried every means but it doesn't work.Idea is to make Ajax Calls to different views and populated the tab <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Simple manipulation</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/cupertino/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script>
Jquery UI autocomplete
Hello Guys, I think you know the search engine of facebook with autosuggestion. it shows the profile photo of the members on the left site and name and city on the right side, see the image... Could you please give me some hints, how can I configure the styling of the return data from data base to get something like that. You can give me some links about that. thx
Problem with refreshing a jquery UI accordion
Hello, I have a problem with a jquery UI accordion. The first time the page is displayed, it appears something like this, that is a tree that contains other subtrees recursively. This is ok: http://awesomescreenshot.com/0dd4ge5gc8 This tree is created by calling a JS function called fillTree(). The problem appears when I call again fillTree() without refresh whole page, the first nodes in tree appears at top-level without the rest of the subtrees not associated with them: http://awesomescreenshot.com/05e4ge6fdb
Convert select's to ui range slider
My question is how can I convert <select class="filter" <option value="771" selected="selected">от 1995 г.в.</option> <option value="782">1970</option> <option value="873">1980</option> <option value="878">1985</option> <option value="883">1990</option> <option value="884">1991</option> <option value="885">1992</option> <option value="886">1993</option> <option value="887">1994</option> <option value="888">1995</option> <option value="889">1996</option> <option value="890">1997</option> <option
Sortable Scaling Issue
After scaling <body> tag to 1.5 or 2, sortable creates or showed a weird issue. Items that are placed below in the list are not visible while dragging.
Problem with autocomplete and modal...
Hello, I've got a big issue using Jquery Autocomplete with modal. the following code works good if not used in modal : <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="jquery autocomplete"> <meta name="keywords" content="jquery autocomplete"> <meta name="author" content="muni"> <title>jquery autocomplete using
draggable droppable stopped working with IE , when iframe child page renders 2nd time.
Hi All I am getting following issue when using draggable droppable jquery-ui functionality. sample code to re-produce : Create following two pages for replication of issue. [1] Main Page Code : <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script src="../Scripts/jquery.min.js" type="text/javascript"></script> <script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script> <script> function
Error when passing Javascript value from one page to another.
Can one of you experts please help resolve this problem? I have this js: <script type="text/javascript"> $(window).load(function () { $("#txtFromDate").datepicker(); $('#timeStart').timepicker({ showPeriod: true, onHourShow: OnHourShowCallback, onMinuteShow: OnMinuteShowCallback }); $("#txtToDate").datepicker(); $('#timeEnd').timepicker({
How to show dialog on top?
My dialog always seems to display with a z-index of 101. This appears under another (Telerik) window element with a z-index of 3000. I have no control over the z-index of the Telerik Window. Is there a way to change the z-index of my jQueryUI dialog so that it appears over my Telerik Window? I'm a novice using jQueryUI 1.11.3 (the latest version) Thanks for any advice!
datepicker not working
Hello. ive created 2 projects (simple projects as i am new in it). in one project(without angular) date picker is working fine but in other one(with angular ) its not working... there is no console error .... code is below... <div class="form-group"> <div class="form-group "> <label>Today date:</label> </div> <div class="form-group form-inline ">
jQuery UI Draggable is not working when element is copied from one DOM to another DOM using clone() method in Chrome?
Hi, I have an application, where User can open any screen(loading HTML into a child iframe), and it loads the HTML elements into it, User can move the objects around in the screen and save the screen. So, I have screen with Draggable objects in it. Added draggable behavior to elements like below: $(selector).draggable({ cancel:null, revert: 'invalid', addClasses: false , cmargin:5, stack: { group: selector, min: 1 } , scroll:false, grid:[gridSize,gridSize],
How to load pre selected items of a jquery selectable
I am currently using a jquery selectable which stores values to a database i would like to create a view page where the users can view which elements were selected. I was given the following code $(function() { $("#selectable").selectable({ create: function( event, ui ) { var list=JSON.parse(localStorage.selectableList) $(this).children().filter(function(){ return $.inArray($(this).text(),list) !== -1 }).addClass("ui-selected")
Set the Tab Created as Active Tab
Hi, New to jquery UI...was working with jquery UI - Tab Control http://jqueryui.com/tabs/#manipulation After the tab is created, i want to have it selected. This code is based of the sample in the link above function addTab(controld) { var tabTitle = controld; var tabContent = "tab Content "; var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>"; var label = tabTitle, id = "tabs"
How to change the product of a calculation during a "slide" event with JQuery UI slider
Hi there I've got a UI Slider in a site that allows the user to set one of a number of values that are then calculated through the JS script. I've created the function 'calculate' for this. I would like 'calculate' to occur on the slide event, so the product of the calculation changes on screen as the user moves the slider. I thought this might relate to the order in which I call the scripts, but in the console it looks like the 'calculate' function is simply not happening, which makes me think
Why does this event not work?
Hi, This is the event I have, but I need to change it so it can accept dynamically created elements being dropped on it. the time-line-schedule element is permanent, but the event-box class comes and goes. $('#time-line-schedule .event-box').droppable({ hoverClass: "hoveringAbove", activeClass: "hoveringAround", drop: function( event, ui ) { } }); I change it to this but the event never fires. Any idea what I'm doing wrong here? $('#time-line-schedule').on("drop",".event-box",function(event,
Next Page