Questions tagged [jquery-ui]

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

jQuery UI is a jQuery library that provides abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets, built on top of the JavaScript Library. You can use it to build highly interactive web applications.

Latest stable version:

Resources:

Best Practices and Commonly Made Mistakes:

  • Remember to include the jQuery file reference before the jQuery-UI file.

Stack Snippet Starter Pack

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

Related Tags

39788 questions
118
votes
6 answers

Using jQuery how to get click coordinates on the target element

I have the following event handler for my html element jQuery("#seek-bar").click(function(e){ var x = e.pageX - e.target.offsetLeft; alert(x); }); I need to find the position of the mouse on the #seek-bar at the time of clicking. I…
Roman
  • 10,309
  • 17
  • 66
  • 101
118
votes
3 answers

jQuery UI slider Touch & Drag/Drop support on Mobile devices

I have already styled and implemented jQuery UI slider into a project. Though it's responsive, the slider does not respond to being touched and dragged. Instead, you have to touch where you want the slider to go. I'd like to avoid swapping to jQuery…
Seth
  • 10,198
  • 10
  • 45
  • 68
117
votes
7 answers

How can I make a jQuery UI 'draggable()' div draggable for touchscreen?

I have a jQuery UI draggable() that works in Firefox and Chrome. The user interface concept is basically click to create a "post-it" type item. Basically, I click or tap on div#everything (100% high and wide) that listens for clicks, and an input…
artlung
  • 33,305
  • 16
  • 69
  • 121
116
votes
20 answers

jQuery UI Tabs - How to Get Currently Selected Tab Index

I know this specific question has been asked before, but I am not getting any results using the bind() event on the jQuery UI Tabs plugin. I just need the index of the newly selected tab to perform an action when the tab is clicked. bind() allows…
Mark Struzinski
  • 32,945
  • 35
  • 107
  • 137
115
votes
5 answers

jQuery ui dialog change title after load-callback

I like to change the title from an UI Dialog after i have submitted a form in this UI Dialog. So in the callback-function after load i should suggest, but i've tried and googled without result. Has anyone an idea?
Guido Lemmens 2
  • 2,317
  • 5
  • 23
  • 29
111
votes
9 answers

HTML Drag And Drop On Mobile Devices

When you add drag and drop to a web page using JavaScript, such as jQuery UI draggable and droppable, how do you get this to work when viewed via a browser on a mobile device - where the touch-screen actions for dragging are intercepted by the phone…
Fenton
  • 241,084
  • 71
  • 387
  • 401
111
votes
1 answer

Best Practice to Organize Javascript Library & CSS Folder Structure

How do you organize your js & css folder in your web application? My current project structure is like this one: root/ ├── assets/ │ ├── js/ │ │ └──lib/ │ ├── css/ │ └── img/ └── index.html But it's more complicated when I use many…
Willy Lazuardi
  • 1,806
  • 4
  • 26
  • 41
110
votes
6 answers

Trees in Twitter Bootstrap

I have been trying to work on creating a tree (like a directory tree) that uses as much CSS and as little JS as possible (only for states, etc), and I want to know if there are some good existing tree plugins for bootstrap or jquery-ui…
kumarharsh
  • 18,961
  • 8
  • 72
  • 100
108
votes
13 answers

Can I use Twitter Bootstrap and jQuery UI at the same time?

I am using Twitter Bootstrap and I want to use an "auto-suggest" which is not available in Bootstrap, whereas jQuery UI has its own methods for auto-suggest. Can I use both? Will it overload the bandwidth?
Sanket Sahu
  • 8,468
  • 10
  • 51
  • 65
104
votes
9 answers

How do I disable a jquery-ui draggable?

How do I disable a jQuery draggable, e.g. during an UpdatePanel postback?
ErnieStings
  • 6,333
  • 19
  • 47
  • 54
103
votes
6 answers

How to auto-center jQuery UI dialog when resizing browser?

When you use jquery UI dialog, all works well, except for one thing. When the browser is resized, the dialog just stays in it's initial position which can be really annoying. You can test it out on: http://jqueryui.com/demos/dialog/ Click on the…
Jorre
  • 17,273
  • 32
  • 100
  • 145
102
votes
8 answers

jQuery autohide element after 5 seconds

Is it possible to automatically hide an element in a web page 5 seconds after the form loads using jQuery? Basically, I've got
Project saved successfully!
that I'd like to disappear after 5 seconds. I've looked at…
Chris Conway
  • 16,269
  • 23
  • 96
  • 113
102
votes
6 answers

Clear form field after select for jQuery UI Autocomplete

I'm developing a form, and using jQuery UI Autocomplete. When the user selects an option, I want the selection to pop into a span appended to the parent

tag. Then I want the field to clear rather than be populated with the selection. I have…

Jon F Hancock
  • 3,349
  • 3
  • 23
  • 26
100
votes
13 answers

Combine multiple JavaScript files into one JS file

I am using jquery in my web application and I need to load more jquery script files into a single page. Google suggested I combine all the jquery script files into a single file. How can I do this?
Chandrasekhar
  • 1,205
  • 3
  • 11
  • 17
100
votes
14 answers

jQuery UI accordion that keeps multiple sections open?

I may be an idiot, but how do you keep multiple sections in jQuery UI's accordion open? The demos all have only one open at a time... I'm looking for a collapseable menu type system.
Walker
  • 128,495
  • 27
  • 68
  • 94