Questions tagged [jquery-ui]
Discover an exceptional assortment of user interface interactions, captivating effects, dynamic widgets, and stylish themes meticulously designed with the jQuery JavaScript Library at its core.
I am having trouble adding custom styles to my jQuery UI tabs. I have a specific design in mind for how the tabs should look. Unfortunately, I haven't been able to figure it out yet despite my efforts. Here is the code I currently have: <div id= ...
I've been attempting to adjust the date format for my datepicker, but it refuses to change. Below is the code I'm using: $(document).ready(function() { $('#dateselect').datepicker({ format: 'dd/mm/yyyy', o ...
Currently, I am in search of a unique solution or plugin that can replicate the same effect as Kickstarter's crowd fund long term progression bar. It seems like existing solutions only offer short term dynamic progress bars that indicate the percentage or ...
I came across this code snippet on Ajaxian, but I am having trouble using cursor.y (or cursor.x) as a variable. When I call the function with it that way, it doesn't seem to work. Could there be a syntax issue or something else causing the problem? functi ...
Is it possible to dynamically insert a label into current categories using jQuery UI custom autocomplete? I have implemented a customized autocomplete following the example outlined here in the jQuery UI documentation: <html lang="en"> <head> ...
Currently, I am experimenting with the toggle div function and utilizing images as triggers for toggling. For instance, when a div is closed, an image of a "plus" sign indicates to the user that it can be expanded, and vice versa for compressing the div. T ...
I am in the process of developing an audio application. My goal is to change the id of the Play button dynamically to "paused" when it is clicked. However, despite my efforts, clicking on the "paused" button does not pause the audio as intended. $('#p ...
My jQuery UI element has a bounce effect with a color change. After the bounce finishes, I want to set the color back to normal. Is there a way to achieve this? $(div).effect("bounce", { times:2 }, 200); Are there any event handlers in jQuery that are ...
Currently, I have implemented two different datepickers on my website, but I am interested in switching to jQuery's Datepicker for a more unified solution. Here is the current format that I am sending to our backend API: However, I would prefer to i ...
Can you disable mouse clicks and then re-enable them for a jQuery UI slider? The jQuery examples don't seem to work Sample code To initialize a slider with the disabled option specified: $( ".selector" ).slider({ disabled: true }); To get or set ...
I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner: $("#151").dialog({ autoOpen: false, autoResize: true, buttons: { "OK": function ...
Hey there, I'm looking to display an image on half of the page and a table on the other half when hitting a URL. In Android, I would use a webview for this. However, I'm wondering how to achieve this in jQuery Mobile. Is there a widget similar to the webvi ...
Is there a way to implement this autocomplete feature for multiple textbox elements? I am struggling with the need to dynamically change the element binding and data source based on which textbox is triggering the function. $("#element").autocomplete({ ...
How can I retrieve the panel numbers of jQuery UI tabs and adjust their visibility using CSS? I am looking to identify the panel numbers of each tab and control the visibility of certain tabs. <div id="tabs"> <ul> <li><a href="#"> ...
I am currently using jQuery UI Autocomplete in conjunction with ASP.NET. The process involves serializing Good names into a string array and then passing this array to the source of the jQuery UI AutoComplete. //PageLoad tadok.Entities.TList<tadok.Enti ...
I currently have 3 nested divs. Using jQuery $(function() { $("#div1").resizable({ handles: "n, e, s, w, nw, ne, sw,se" }); $("#div1").draggable(); }); Within the HTML structure <div id="div1" style="left: ...
$("#see1, #seeAlso1, .see").is(':checked') This code snippet will give you a boolean result. Are you looking for a way to retrieve the first element that matches and returns 'true'? ...
Just a general question here: If dynamic classes are added to an element (e.g. through a jQuery-ui add-on), and the element already has classes, does the dynamically added class get appended or prepended to the list of classes? The reason for my question ...
Solved: Find the solution in the comments section below. I recently built a Tabs feature within a Dialog box, but ran into an issue where the height of the Dialog did not match up with the height of the tab. The problem arose when a form was placed insid ...
Unique Case Study I'm currently facing a dilemma involving the integration of jstree and jquery-ui datepicker. The scenario is this: I am attempting to utilize jquery-ui-datepicker on an input element that is dynamically inserted into the DOM after an AJ ...
I am experiencing an issue with a comments form that has 2 fields: Author and Message. Upon clicking the submit button, the validation does not trigger initially. However, if I click the submit button again, then the validation works as expected. Any tho ...
I'm having trouble figuring out how to properly set the height for a jQuery UI dialog. My goal is to have the height adjust based on the amount of content present, but if it exceeds 400 pixels, then I want a scroll bar to appear. For instance, if the con ...
My goal is to customize the order of taxonomy terms for each individual post in Wordpress. I have created a metabox on the EDIT POST page that contains custom taxonomy terms and made them sortable using JQuery. Here is my setup on the Wordpress backend: ...
As a newcomer to Javascript, I am facing challenges navigating my way around. Currently, I am attempting to create a jQuery plugin that will facilitate resizing elements using the jQuery UI resizable plugin. My goal is to implement logic that dynamically ...
Can I check if a key in the formdata object already has a value assigned to it? I am looking for a way to determine if a key has been previously assigned a value. I attempted something like this but did not get the desired outcome data = new FormData(); ...
I've been having some trouble with Jquery UI and it's been quite frustrating. To try to understand better, I have created a simple test case which you can view here: http://jsfiddle.net/vmZap/ Essentially, I have included JQUERY, JQUERY-UI, and the JQUERY ...
I'm currently working on an Android app that utilizes jQuery Mobile within my web-based application. I have multiple pages in the app and I am considering adding a splash screen to display when loading a new page or while the page is being loaded. Any reco ...
Handling forms can be done in various ways. One way is to submit the form and retrieve variables in PHP, while another method involves sending data with AJAX. During this process, a dialog can be displayed with information about processing the data, along ...
I am having an issue with my horizontal scroll feature. Despite inspecting in Chrome and finding no errors, I still cannot locate the problem. Can someone please help me identify where the issue lies? <html> <head> <script src="http ...
I'm curious about how to prevent jQuery UI from adding any classes when initializing $.tabs(). This is the structure of my HTML: <link href="smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" /> ... <link href="estilos_scor ...
How can I show the selected element after choosing from the autocomplete list? This is my current code: $(function () { $("#SearchString").autocomplete({ messages: '', source: '@Url.Action("GetProducts","Search")&apos ...
I have created this HTML code snippet <ul class="all-products"> <?php while (have_posts()) :the_post(); ?> <li class="single-product"> <div class="outer-block"> <div class="inner-block"> <div c ...
While exploring the Snapwiz website, I came across a captivating scroll effect that I would love to implement on my own site. The background picture changes seamlessly as you scroll, with the front image sliding elegantly into view. A similar type of scro ...
My objective is to start with one element upon loading the page, and this element should have an ID of "something_O". When the user clicks on an add link, a new identical HTML element should be added underneath the existing element. The new element should ...
I am currently utilizing the jQuery library's autocomplete() method on a text input field, setting Object.getOwnPropertyNames(projects) as the source: $(function() { $("#project").autocomplete({source: Object.getOwnPropertyNames(projects)}); } B ...
HTML: <input type="text" id="shop-id"> JS: $(document).ready(function(){ $( "#shop-id" ).autocomplete({ source: "/ticket/get_sids", select: function(event, ui){ //... } }); }); Encountering an unusual i ...
I am using $(selector).dialog(); function to invoke a tag in my HTML code. However, when I click on the link that directs me to this dialog, it seems like the tag is being removed by Firebug (a Firefox add-on)! The content inside the tag initially displa ...
I have integrated the LeafletSlider library into my project to slide through multiple layers with different timestamps in Leaflet. My goal is to initialize the slider at the timestamp closest to the current time. In SliderControl.js, I made the following ...
At the moment, I have a script that allows users to input an item name, along with its size, color, and other options. Each of these entries is saved as individual items with their custom specifications, such as a black t-shirt in large size. The script c ...
element, it's strange that I am not receiving any error messages. However, despite this, the jquery datepicker function and numeric plugin are not working on the intended input fields they are supposed to be linked to. This particular page is a simple cr ...
Wishing you an amazing New Year! I am looking to create a smooth sliding effect for a div when a button is clicked. I want the adjacent div to slide alongside it seamlessly, without any clunky motions or delays. Currently, the adjacent div only moves afte ...
Utilizing unordered lists in this web application. I am looking to implement tab navigation with keyboard functionality. How can I achieve this? The first tab should contain text boxes, and when the user fills out a text box and presses the tab key, they s ...
I am working with a widget that looks like this $.widget("ui.myWidget", { //default options options: { myOptions: "test" }, _create: function () { this.self = $(this.element[0]); this.self.find("thead th").click(fun ...
Hey there! I'm currently in the process of upgrading my web application system's jQuery to version 1.12.1 and I've run into an issue with the overlay not functioning properly in the new jQuery version. My setup involves using ajax to displ ...
After encountering an issue with the autocomplete feature in a web application, I posted a question on Stack Overflow. The provided answer solved the problem in Chrome, but unfortunately, it did not work in Internet Explorer 8 or 9, and possibly earlier ve ...
I am facing an issue with jquery sortable and contenteditable. The problem arises when I try to use jquery sortable along with contenteditable, as the contenteditable feature stops working. After searching on Stack Overflow, I found a solution. However, up ...
Utilizing jQuery UI dynamic tabs in my application requires updating the URL hash value when a user clicks on a tab. After researching solutions on SO, like link1 and link2, I attempted the following approach: Javascript: $( "#tabs" ).tabs({ select ...
I have been attempting to update my comboboxes to utilize autocomplete, so I found this code (which worked beautifully for my dropdown menus) The problem arises when I also have a listbox on the same page with the following code: <%= Html.ListBox("Car ...
Currently, I am utilizing the jQuery Tabs library within a small application. Within this page, there are 5 tabs that load content using Ajax. However, an issue arises when a tab is loaded and remains in the browser's memory along with its HTML elemen ...
Currently, I am dealing with an issue involving the following image: The main problem arises when the jQuery UI tooltip fails to close properly after I close a modal window that was opened by clicking on the link associated with the tooltip. Interestingl ...
In my quest to create a customized jQuery slider, I encountered the need to change the background of the slider handle. After experimenting with some code on this link, I am still unable to achieve the desired effect. Following the documentation, I have a ...
After testing this code snippet on a fiddle and seeing it work perfectly, I attempted to implement it on my website only to find that there is no border appearing, and the layout appears disorganized. Even after removing all the CSS styles and inspecting ...
I am facing a minor issue with the JQuery .selectable function. My goal is to bind events to each tab. I have successfully handled the click event for each tab, but I'm struggling when it comes to selecting two or more tabs. For instance, if I click on ...
Having an issue with a jQuery slider on my local HTML page. The sliders are not showing up as intended. I want it to display like this example: http://jsfiddle.net/RwfFH/143/ HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery ...
Having trouble with a few sortable tables and here is how I initialized the sortable object: var options = { helper: customHelper, handle: ".moveTargetDeliverables", containment: "#fieldset_deliverables_summary", tolerance: 'pointer' } $( ...
Here is a code snippet that I am working with: $(document).ready(function(){ $(".subscriptions").click(function (){ if($(".pollSlider").css("margin-right") == "-200px"){ $('.pollSlider').animate({"margin-right": '+ ...
I have a list of countries displayed as an unordered list inside a table column. I would like to implement keyboard search functionality for quicker navigation within the list. <ul class="country-search"> <li id="1">Country 1</li> ...
Hello, I have implemented jQuery dialog with the following code: $("#div1").dialog({ dialogClass: "county-dialog", modal: true, draggable: false, title: statecode, closeOnEscape: true, ...
Having issues with jQuery UI events. I have sliders in my app and occasionally need to adjust the "min" option. However, I'm facing a problem where the change() event is not triggered after making the adjustment. I would assume that every time the value ...
Is there a way to incorporate JQueryUI into an Ember project after upgrading and dismissing Bower, which is the recommended platform? My project relies heavily on using JQueryUI dialogs. $ ember -v ember-cli: 3.3.0 node: 8.11.3 os: linux x64 Do I nee ...
When I load an editing form asynchronously on my web page using jQuery.get and display it within a jQuery dialog, multiple instances of the div that I apply .dialog to are unexpectedly being appended to document.body. Here is the code snippet for loading: ...
I have a Login dialog that triggers an alert dialog when the user fails to fill in all the required fields. Pressing escape closes the login dialog instead of the alert dialog. Libraries used: jquery-1.7.2.js jqueryui-1.8.18.js // Function to display ...
I am currently working with jQuery UI tabs using jquery 1.11.1 and jQuery ui 1.11.1. Within the <base> tag in the head>, I have the following: <base href="http://mytestdomain.com/" /> Upon loading the page, jQuery UI creates two tabs from ...
Which event in jquery ui can I utilize to detect when a panel collapse has finished on the browser? I require this information to perform calculations based on the screen layout after the collapse has occurred. If I use the select or show event callbacks, ...
I want to create a draggable popup with Jquery UI functionality, but I'm facing an issue where the cursor does not stay aligned with the popup element when dragged. When dragging the popup element to the left, the mouse cursor goes beyond the div elem ...
Recently, I integrated RequireJS into my Spring MVC application to manage dependencies for various libraries, including jQuery and jQuery UI. Although I have successfully implemented it, I am facing an issue whenever the page is loaded or refreshed. Initia ...
Loading Google Visualizations via AJAX in jQueryUI tabs After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs wit ...
Recently, I encountered an issue with jQuery-UI's datepicker where it was restricting me to select birthdays only within the last 10 years. This basically meant that users older than 10 years couldn't be accommodated :) I attempted to override this limita ...
Can anyone guide me on using jQuery UI for drag and drop to transfer data between multiple divs? I'm currently working with jQuery in conjunction with an asp.net core api. The task is similar to a calendar system where entries can be moved across differe ...
Is there a way to maintain both the original element and its clone after a successful drag operation? $('.definition').draggable({'revert':'invalid', 'helper':'clone'}); ...
Here is an input field: <input id="DeviceId" class="form-control deviceCatalog" data-bind="value:DeviceTemp, valueUpdate: ['blur']" required /> This input is connected to the following viewModel: var ViewModel = f ...
I currently have two JQuery UI dropdowns. When I select an option in the first dropdown and set a checkbox to true, I want to copy that selected value to the second dropdown using the .change() event of the checkbox. To retrieve the selected value, I use ...
For a demonstration of the issue, please visit http://jsbin.com/omuqo. Upon opening a panel by clicking on the handle, there is a slight jitter in the panels below during the animation. In the provided demo, all panels should remain completely still as t ...
I have been working on setting up my Jquery UI autocomplete field to pull data from an ajax connection. Here is the progress I've made so far: $("#mainIngredientAutoComplete").autocomplete({ source: function (request, response) { $.ajax({ ...
Currently, I am utilizing the jQuery Autocomplete plugin 1.1 for a project. Below is my calling code: $("#txtCombo").autocomplete("http://www.example.com/autocomplete.php", { autoFill: false, width: 550, minChars: 3, ...