FAQ Database Discussion Community


How to set the jquery draggable with margin left?

javascript,jquery,html,css,jquery-ui
On body load scale_roll div normally drag the full area of the main_scale div in x-axis. Then while clicking click function, the scale_roll div shall be move by margin-left css style. Then drag the scale_roll, only drag the balance div tag, not able to drag full div tag (before 100px)....

How can I add tooltip on content of table

jquery,jsp,jquery-ui,jtable,tooltip
I am very new to java script. I wanted to add tooltip to given below content. There is one way of doing it that is we can do by Adding title to every td tag. Now How can I add title to every td with same value. I am not...

I can't push items into jasvacript array quick enough

javascript,jquery,arrays,performance,jquery-ui
I have a jQuery UI slider that when a user triggers a slide function, I need to push the current slide value into an array. The problem is, when a user slides the handle too quickly, the length of the array and the current index value fall out of sync....

Checkbox isn't clickable inside a accordion list [duplicate]

jquery,html,css,jquery-ui
This question already has an answer here: jQueryUI accordion with checkboxes 3 answers I have a unordered list with some objects, when you click a <li> the list will minimize and when you click it again it will expand. I'm using jQuery UI's API on Accordion, the problem is...

How to apply result to html page by using jquery ui?

javascript,jquery,jquery-ui
I wanna create a hidden input tag automatically by using jquery ui (dialog). It's excuting correctly. But the result cannot be applied to html page. I design a button to call dialog box, like this: <input id="btn" type="button" value="Click me" /> <div id="dialog-box" title="My dialog"> <span>Any text here...</span> </div> and...

What $('.element'); returns?

javascript,jquery,jquery-ui
Some sources say: var objectA = jQuery('.someClass'); // returns new instance of jQuery object. Some say: var objectA = jQuery('.someClass'); // returns an array of elements with class='someClass'. If the above statement returns a jQuery object, then how objectA is behaving as an array? Thanks....

JQuery draggable div [duplicate]

javascript,jquery,html,jquery-ui
This question already has an answer here: Setting boundary limits for a draggable object 3 answers I am trying to create my first JQuery-based webpage. At the moment there is a little problem with my draggable div. I am able to move it and it works well but I...

How to make element inside table switch tabs using jquery ui tabs

javascript,jquery,jquery-ui,tabs,jquery-ui-tabs
Hi what I'm trying to do is to create a a tabbed paged in which the elements inside the table can also be used to switch to another tab. I was able to make the tab work using jquery ui but the problem is when I click the element inside...

How to show a div depending on the numbers of games

javascript,php,jquery,jquery-ui,php-5.3
I have a question and I can't resolve it. Can you help me please? So my php code : $aTicketsGames = array(134, 137, 165, 136, 177, 181, 190); $b_isRapidGame = false; if(in_array($i_jeu, $aTicketsGames)){ $b_isRapidGame = true; } In .js after click on the button I do : if(obj.google_analytics.is_rapid_game == true){...

jquery sortable scroll infinitive

jquery,jquery-ui
I have problem with jquery sortable with scroll. Example available on - http://jsfiddle.net/n5eL2e55/1/ My code: HTML: <ul class="list"> <li class="item">item 1</li> <li class="item">item 2</li> <li class="item">item 3</li> <li class="item">item 4</li> <li class="item">item 5</li> <li class="item">item 6</li> <li class="item">item 7</li> </ul> Javascript: $(function() { $(".list").sortable({ items: ".item", axis : "y", helper:'clone',...

JQuery SlideShow doesnt display all images

javascript,jquery,html,jquery-ui
<html> <head> <meta charset = "utf-8/"> <title> Jquery </title> <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.3.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link rel = "stylesheet" type = "text/css" href = "RizzStyle.css"/> </head> <script...

Setting dateFormat of jquery ui datepicker restricts free text in input

jquery,jquery-ui,datepicker
I am using a jquery ui datepicker. I simply want to set the dateFormat to something like: "dd/mm/yy", so my javascript is: $("#datepicker").datepicker({ dateFormat: "dd/mm/yy" }); And the relevant html is: <input type='text' id='datepicker'> However, doing this restricts the text that can be entered into the input element (I can't...

Progressbar won't reset properly

javascript,jquery,jquery-ui,progress-bar
I'm having some difficulty getting my progress bar to reset and continue counting. In my code I have a button that opens a JQuery ui dialog box with a progress bar which counts up to 100% then closes. When I click the button again to reset the progress bar, it...

Tooltip not working

javascript,jquery,ajax,jquery-ui,tooltip
Since $(document).ready(function(){ $('.notice').tooltip(); }); doesn't work for me - probably because I am loading the element with the class .notice dynamically with Ajax - I have tried to go ahead with another way. So this is what I have so far: $(document.body).on("mouseover", ".notice", function() { $(this).tooltip(); }); This makes it...

jquery ui datepicker not working with tabs

php,jquery,jquery-ui,tabs,datepicker
When a user switches tabs in the jquery ui code they can click on a button to add data to a jqgrid. The only thing that is not working is datepicker; it will launch one time and after that when switching to a new tab it will not launch again....

How to add jquery autocomplete UI functionality to each cell in my table

javascript,jquery,html,jquery-ui
I have a project requirement where I need to create a dynamic table using Jquery. I have reached a state where I am able to add dynamic columns or rows to a table. You can have a look at the fiddle code here : DEMO LINK HERE HTML CODE here:...

jQuery mobile Multiselect doesn't update selected attribute

javascript,jquery,html,jquery-ui,jquery-mobile
I have a jQuery mobile custom multiselect, but when I select one item we have the list of items on the HTML select tag, but it is not updated with the selected attribute. Using the Multiple selects example of the page: <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"> <label for="select-choice-9" class="select ui-select">...

Parent div does not scroll on dragging a child inside of it

javascript,jquery,jquery-ui,jquery-ui-draggable
I have a parent div with many child divs. I want when a child div is dragged inside the parent div, then the parent div to scroll. When the parent div is the body, it works. But I want it to work with my own parent "content" div. Here is...

Animating a range slider back and forth (loop)

javascript,jquery,jquery-ui,jquery-animate,range
I am trying to animate a range slider that slides to the max and down to the minimum over a duration of about 2 seconds for each movement and in increments of 1. I do not want to it to be instantaneous; I want the user to see the slider...

Unexpected data representation

javascript,jquery,jquery-ui,jquery-mobile,local-storage
So I have an app, that allows you to add data, and then it displays all the data(still wip). So I made a Create and Read functionality so far using localStorage and jQueryMobile and jQueryUI. But for some reason when I switch between pages(main page/add data page), I see cloned...

sortable check boxes with a tag

javascript,jquery,html,jquery-ui,checkbox
hi bit of a noob to this, but is it possible to have 3 check boxes and hide my a tag when one is checked but the if checkbox 2 is checked it hides that as well then when you uncheck checkbox 1 it will still stay hidden if the...

Jquery ui tabs error

html,css,jquery-ui,tabs
I create tab with jquery ui and I want to tab appear after on click. But tabs title appear before on click in index page. How can I solve this problem? (Hourly Forecast, 10 Day Forecast in shared image) CSS #tabs1{font-size: 14px; } .ui-widget-header { border: 1px solid #b9cd6d; color:...

Loan Calculator Using jQuery Slider Passing Inaccurate Value

javascript,jquery,jquery-ui
I have a loan calculator that is using the jQuery UI slider element. As the slider moves I am displaying that value in a label to the user. However, I'm also using that value to calculate other values such as monthly repayment etc. I can't seem to figure out why...

Get instance of JQuery UI popup

jquery-ui,dialog,instance
I am creating a JQuery UI popup this way: function ShowJQueryStandardDialog(searchTarget, title, width, height, closeFunction) { var $dialog = $('<div id="dialogDIV"><iframe id="dialogIFrame" frameborder="no" scrolling="auto" src="' + searchTarget + '" width="' + (width - 50) + 'px" height="' + (height - 50) + 'px"></iframe></div>'); $dialog.dialog( { modal: true, title: title, show:...

jQuery UI slider comma separated values

jquery,jquery-ui
I'm using jQuery UI slider plugin to filter some divs based on the price, in the slider i want the prices to be Formatted with a comma separated values when showing the output. HERE's the jQuery jQuery(document).ready(function () { jQuery('#slider-container').slider({ range: true, min: 1200, max: 34000, values: [1200, 34000], create:...

Showing Jquery Variable in HTML

jquery,html,jquery-ui,datepicker
I have used jQuery Datepicker successfully for some time to input two dates ("ArrivalDate" and "DepartureDate"). Now I am trying to adapt the present page to show the difference between the two. This should be revealed (jQuery slideDown) after the second date has been inputted. My HTML is <form action="tba.php"...

alphanumeric range slider in jquery

javascript,jquery,jquery-ui
I am trying to create a simple range slider for alphanumeric characters (example AAA12, AAB11, BA21, BC33, FG34), but no success. I am using the https://jqueryui.com/slider/#range-vertical but looks like there is no support for alphanumeric. Here is the fiddler: https://jsfiddle.net/99x50s2s/66/ JS $( "#slider-range" ).slider({ orientation: "vertical", range: true, values: [...

Jquery UI Slider & Percentages not working

javascript,jquery,jquery-ui
Right I am messing around with Jquery UI slider's and have been fine up untill now. I am trying to get it to display percentages that update to the right of the slider and all the slider's stay linked. Which I have done a few different ways but with varied...

Adding a secondary element to show where user has dragged slider to in JQuery UI

jquery-ui
Using the normal implementation of JQuery UI slider with this code: $(function() { $('.slider').slider(); }); JQuery UI only creates the surrounding slidable area, and then the handle to drag. Does anyone have experience extending this add an secondary element that shows where the user has dragged to? What I want...

Displaying the JqueryUI dialog box at a given coordinates of the screen

javascript,jquery,css,jquery-ui,fullcalendar
I am devoloping a calendar web app using fullcalendar.I wanted to imitate the google calendar to display information about an event and a delete button when it is clicked.I tried doing this : element.bind('mousedown', function (e) { if(e.which == 1){ var Xcord = e.clientX ; var Ycord = e.clientY ;...

jQuery resizable and draggable window can't resize

jquery,html,jquery-ui
I was using this demo example which had working dragging and resizing but when I downloaded it only the dragging is working. <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="jquery-ui.css"> <style>body,input{font-family:Calibri,Arial;margin:0px}h1{margin:0 0 0...

How to add new elements to the page via function calls, and attach event handlers to them, without specifying them inside the function?

jquery,jquery-ui,jquery-mobile
So I have an app. It's written on jQuery(UI & Mobile). I have this page structure: Main Page: <!-- Main Page --> <div data-role="page" id="home"> <header data-role="header" data-theme="a"> <h1>Running Tracker</h1> </header> <div data-role="navbar"> <ul> <li> <a href="#add" data-transition="fade" data-icon="plus">Add Run</a> </li> </ul> </div> <div data-role="content"> <h3>Welcome to the RunningTracker App</h3>...

Using jquery-ui autocomplete in combination with dynamic form generation

javascript,jquery,html,jquery-ui,autocomplete
I have a form that can be dynamically updated by using a js script based on this script. A select-list is dynamically generated to allow selection of an attribute for the dynamically generated field. However, the list contains hundreds of unique attributes and I therefore want to add a "search"...

quick way to add checkbox jQuery UI datepicker

jquery,jquery-ui,datepicker
I want to add the check box "no end date" to the end of my date picker widget. I see people using "beforeshow" method under datepicker but it doesn't seem to work. Here is what I have. $("#to").datepicker({ dayNamesMin: ["S", "M", "T", "W", "T", "F", "S"], firstDay: 1, dateFormat: "d...

Score if drag&drop to the right category and make img disappear Drag&drop Jquery game

jquery-ui,drag-and-drop,jquery-ui-draggable
I'm very new to j Query UI. I was trying to design a drag&drop game. I looked into lots of answers in stack overflow but not getting very similar examples(or maybe I couldn't figure out). Basically, I tried to do a recycling game where you can drag and drop different...

targeting jquery ui buttons

jquery,jquery-ui,jquery-mobile
I am trying to change the jquery mobile ui button class into a plus sign. What I have used below. New code trying to use: $('[id*=new] span.ui-btn-inner').removeClass('ui-btn-inner').addClass('ui-icon-plus'); Below is the current code -- <td align="left"> <a href="javascript:submitAction_win0(document.win0,'$IF$new$0$$0');" tabindex="51" id="$IF$new$0$$0" name="$IF$new$0$$0" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" style="padding-top: 8px; padding-bottom: 8px;" data-corners="true" data-shadow="true"...

Cursor is off the sorted item of jquery-ui-draggable when its parent is hidden out of screen during sort

javascript,jquery,jquery-ui,jquery-ui-draggable,jquery-ui-sortable
Demo In the demo, the sortable items are in container .area which has a fixed position. When items being sorted and dragged into another container, I want .area to move out of the screen by using transform: translate(0,0). But the problem is that the sorted item is way off the...

jquery UI slider does not show up (css attached)

jquery,css,jquery-ui
Having looked at many similar issues I still can not figure out why I can not display jquery UI slider. Below is my code. The js file is being loaded and the css file is in the same location. (in the same folder as the html file) I know jquery...

Multiple jquery-ui value sliders affecting eachother

javascript,jquery,html5,jquery-ui,sliders
I am trying to make a loan calculation using 3 jquery-ui sliders. The parameters are: Amount to borrow Duration / Amount of months to pay back Interest rate While changing the sliders I would like to display the values of: Monthly amount + Interest rate (amount to loan / amount...

Jquery-ui Autocomplete and Bootstrap 3 fixed navbar

twitter-bootstrap,jquery-ui,twitter-bootstrap-3,jquery-ui-autocomplete
I am trying to make a autocomplete search using jquery ui and twitter bootstarp. I have added a facny search box to the nav bar and everything seems to be working fine. Please take a look on code snippet below or you can also see the same code here on...

Jquery UI Dialog with AngularJS

html,angularjs,jquery-ui
I'm learning AngularJS, I searched in google but can not find even a solution to my problem. I am using jQueryUI for dialog, bootstrap for CSS and I want AngularJS for events and queries to the database. I have the following files: index.html <!DOCTYPE html> <html lang="es-MX"> <head> <meta charset="UTF-8">...

Multiple jquery ui tooltip positioning

javascript,jquery,jquery-ui
I was using Jquery UI tooltips for my project and wanted to position tooltips for the entire document except divisions with a class in a certain way. $( document ).not(".t_l_overview").tooltip({ position: { my: "center top", at: "center bottom+5" }, show: { duration: "fast" }, hide: { effect: "hide" } });...

jQuery tabs: How to avoid display of tabs while loading? [duplicate]

javascript,jquery,jquery-ui,jquery-ui-tabs
This question already has an answer here: jQuery UI Tabs not hiding inactive tabs on load 3 answers I am using jQuery tabs for displaying certain lists. I was able to make the tabs work. Apparently, it displays all the content while it loads the tabs. Is there a...

Leaflet slider group by year

jquery-ui,dictionary,slider,gis,leaflet
I'm using leaflet slider - https://github.com/dwilhelm89/LeafletSlider - but I can't get the desired result, even if from the plugin description it seems it can do. I have a collection of features, geometry type is polygon, where I've inserted a property "time" as requested by the plugin. I've tried bot with...

How to eliminate the jQuery tooltip fade effect

jquery,jquery-ui
I am using jquery ui tooltip function and I feel like the fade in tooltip is a little annoying. I had added delay : 0 but its still does the fading. Does anyone have a solution to this or can recommend another tooltip functionality? Thanks! Below is my code $(function...

Show UI dialogs using data-popup attributes

javascript,jquery,jquery-ui,dialog,jquery-ui-dialog
I am using jquery ui dialog to show more than one popup on one page, each popup will have its own ID and it will be triggered by an anchor with a data-popup="" attribute. For example, <a class="popup-button" data-popup="#popup-a">POPUP A</a> Will trigger the popup that has the ID #popup-a Below...

Weird behaviour of sortable UI jquery

javascript,jquery,jquery-ui
I've made a simple jQuery which allows me to drag boxes into placeholders. This works fine, but when I try to sort those placeholders (even before dragging a box into them), it has a weird behaviour... Removed the original code as the snippet shows my problem. $(function() { $("#dropzone").sortable({ revert:...

Adding validation to auto complete .each

javascript,jquery,validation,jquery-ui
I am trying to add validation check on this auto complete, however for some reason because its in an each() block it's causing me so many problems. Full code: <input type="text" class="productOptionSerialNumber" value="@opt.SerialNumber" data-part-num="@opt.PartNumber" /> $(".productOptionSerialNumber").each(function () { var partNum = $(this).attr("data-part-num"); $(this).autocomplete({ source: "@Url.Action("SerialPartNumStockSiteAutoComplete", "Ajax")?stocksitenum=LW&model=" + $("#Form_Prod_Num").val() + "&partnum="...

Capturing a value in a jQuery UI datepicker and alerting it back to the user

javascript,jquery,jquery-ui,datepicker
I need your help. How can some functionality be added onto the existing code below such that it will make the options below possible: If the date1 field is blank and the user selects a date, an alert message will popup and say "User has selected [date]" If the date1...

Detect when the jQuery UI slider is being moved?

jquery,html,css,jquery-ui
I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

How to search and filter which table columns are displayed

jquery,jquery-ui,datatables
I have a data table that has 100+ columns: California - Los Angeles California - SF Illinois - Chicago Texas - Austin Texas - Houston ..... etc How can I create a search input field that allows me to filter which columns are being shown? I'm thinking something similar to...

Select Attribute value and field value Using jquery autocomplete

jquery,html,jquery-ui
I have multiple input field like this <input type="text" name="loksabha" data-name="loksabha" class="form-control lokVidhan" placeholder="Loksabha"><br><br> <input type="text" name="zila" data-name="zila" class="form-control lokVidhan" placeholder="Zila"> <script> $('.lokVidhan').autocomplete({ source: function(request, response){ var name = $.trim(request.term); var data_name = $('.lokVidhan').attr('data-name'); console.log(data_name); } }); </script> I want to select current field value using: var name =...

jquery-ui modal dialog background

jquery-ui,jquery-ui-dialog
Trying to change the background of a jquery-ui modal dialog as it is transparent but it's not working. As per jquery-ui documentation what I tried is: .ui-dialog, { background: black; } .ui-dialog-content { background: black; } in my main CSS file but with no success. ...

jQuery ui drop (move) elements between tabs

jquery,jquery-ui,tabs,draggable,droppable
I want to realize moving elements between tabs using jquery ui. If I want drop element to another tab - droppable block (.elements) doesn't catch hover event (outline doesn't want to apply), but dropping works correctly. $( "#tabs" ).tabs(); $('.elements').children().draggable({ appendTo: 'body', opacity: 0.9, helper: "clone", zIndex: 1000, cursorAt: {...

How do I keep the hover state of a div even after I clicked it?

jquery,css,jquery-ui
I have a Nav menu and I want the list item's hover state to still be 'hovered' even after I clicked it and even if it hides. I want it to stay hovered no matter what until I click another list item. How do I do this? Here's the JSFidde...

jQuery UI Draggable - drag beyond absolute positioning [closed]

javascript,jquery,css,jquery-ui,draggable
I am unable to see the elements that i am dragging once they leave a parent element that has absolute positioning. (Cant see the draggable helper as it moves) Check out the example at http://nairobi.io/tests/jquery-ui-draggable Kindly help me fix this problem....

jQuery - Draggable resize to fit placeholder

javascript,jquery,jquery-ui
I have different draggable elements. They can be dragged into placeholders (100px x 100px), but the draggable elements has a width of 100% (body width). Now when I start dragging I trigger a resize function: // Dragging itself function dragging () { $("#draggable li.to-drag").draggable({ connectToSortable: ".items", helper: "clone", revert: false,...

Jquery UI Rotatable - sudden jump while dragging

html,css,jquery-ui
I'm having a weird behaviour while trying to dragg a rotatable div in my Project. I'm not sure if this problem is related with Jquery UI or something else. Go to my project, click the black square(in left toolbar), then click the simple edge arrow button on the left tool...

jQuery draggable clone doesn't stay where it is dropped

javascript,jquery,jquery-ui
I'm using jQuery UI to clone a element from a div, drag and release at another div. At first time I drop the cloned element, it change the position and goes far from where was released. But, it still draggable and stay where must be at the other times. $(document).ready(function(){...

JQuery ui in not working with mfc htmldialog?

javascript,c++,jquery-ui,visual-studio-2013,mfc
This code perfect work with asp.net c#. I am using this code but not working with mfc htmldialog. Error is Object does't support property or method tabs. <HEAD> <title></title> <link href="jquery-ui-1.8.8/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> <script src="jquery-ui-1.8.8/jquery-1.4.4.js" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="jquery-ui-1.8.8/ui/jquery.ui.widget.js"...

jQuery draggable / sortable on dynamically-created elements

javascript,jquery,jquery-ui
After some blood, sweat and luckily no tears I've managed to create a drag and drop system which fits my needs. There are only 2 things that are almost triggering my tears... Here's the jsfiddle The problem is in these lines of code, but can't find it: if (dropped ===...

jQuery: Counter for draggables (again!)

javascript,jquery,html,jquery-ui
This is a follow up of the post: JQuery Drag and Drop Count Content of Drop Area? I'm rather new to programming so, apologies for a dull question. I am trying to count the number of draggable elements dropped in a a droppable. Rather than initialising a count variable at...

jquery show div below svg circle

jquery,css,jquery-ui,svg
I have an SVG with a line of circles and each time you click on a circle i want a pop up to appear directly below the circle with an arrow like tool tip, The problem I'm having is that the tooltip positioning is dependent on the where the mouse...

jQuery accordion not working due to error with sources

javascript,jquery,jquery-ui
Can anyone tell me what is wrong with the following? I know it is something to do with my sources as if I replace them with google apis versions it works fine. But I just can't see what is going wrong. My folder structure is like: <?php ?> <!DOCTYPE html>...

validate jquery datepicker

jquery,html,jquery-ui,datepicker
i am looking for how to validate that user has selected a date or not. if he didn't selected a date form date picker he should be notified to select the date. i'm using jQuery datepicker. script i'm using is <script> $(function() { $( "#inputdate2" ).datepicker({ dateFormat: 'yy-mm-dd' }); });...

Tooltip shows the same message for different element

javascript,jquery,html,jquery-ui
I am using the jQueryUI tooltip in my application. The tooltip is working fine for all browsers except for ie11 for one case. If select is used in IE11 dropdown close automatically. For this, I found This link to solve this issue. It's working perfect for one element, if we...

jQuery dialog shows up undecorated

jquery,jquery-ui
My jQuery callback is firing correctly, but the the dialog looks completely bare (see image). Here's my javascript: $(".info").click(function(event){ event.preventDefault(); $id = $(this).attr("id"); $.ajax({ type: "POST", url: 'my_code.php', data: {query:"info", rowid: $id}, success: function(data) { try { obj = JSON.parse(data); var str = ''; for (var i in obj) {...

JQuery UI slider - value slider 2 determined value slider 1

javascript,jquery,html,jquery-ui,jquery-ui-slider
Ive been trying to get with JQuery UI slider the following to work. Ive got 2 sliders, one is a amount the other is a duration. When the amount is lower then 200 you can select 15 and 30 days. If the amount is higher than 200 only 30 days...

keep aspect ratio of .ui-dialog-content when resizing

jquery,jquery-ui,dialog,aspect-ratio,jquery-ui-resizable
I have an image within the dialog. when I resize the dialog, the aspectRation is working on the complete dialog, not only on the image, when I resize it. $("#videoDialog").dialog({ resizable: false, autoOpen: true, width: 300 }).parent().resizable({ aspectRatio: true, minWidth: 300 }); The more I resize the dialog, the more...

Multiple jQuery UI Tabs on Page: Close all other tabs when another is opened

jquery,jquery-ui,tabs,jquery-ui-tabs,jquery-tabs
I've got several rows of of separate jQuery Tabs. How do I get the separated tabs to close when another is opened (so at max, 1 is open at any given time on the page): Markup: <!-- First Leadership Row --> <div id="leadershipTabs1" class="leadershipTabs leadershipContentContainer contentContainer clearfix"> <ul> <li><a href="#leader1-slug">Leader...

Changing color of each row with jQuery dialog .append

javascript,jquery,jquery-ui
I am building an application that would allow adding tasks to the list and changing the colour of them according to what selections were made. I am using it to build a list of items, now how could I achieve something like this http://s4.postimg.org/npplicbnh/2222.png Here is my .append code that...

Add a background behind loader to hide loading screen

javascript,jquery,jquery-ui,jquery-mobile
How can one add a bgcolor behind the loader before a page is created just to hide the white screen before the page is loaded. this is my code. setTimeout(function(){ $.mobile.loading('show', { text: 'Chargement en cours...', textVisible: true, theme: 'a', html: "<span class='ui-bar ui-overlay-c ui-corner-all' ><img width='50px' height='50px' src='http://www.shougun.it/images/loading.gif' /><br><h2>Chargement...

how to update a css class dynamically onclick a dropdown jquery

javascript,jquery,html,css,jquery-ui
I have a dropdown with multi select enable.I am able to retrieve a value from the dropdown and am passing the value to css class. ex: Andorra United Arab Emirates Afghanistan Antigua and Barbuda am retrieving the country code from the drop down using $( this).val() i have a seperate...

jQuery ui autocomplete with Django return 404

python,django,jquery-ui
I'm implementing an autocomplete search using jQuery UI and Django models. Here is my view: def get_ticker(request): if request.is_ajax(): q = request.GET.get('term', '') symbols = Symbol.objects.filter(name__istartswith=q) results = [] for symbol in symbols: symbol_json = {'name': symbol.name, 'symbol': symbol.symbol} results.append(symbol_json) data = json.dumps(results) else: data = 'Can\'t get data...' mimetype...

List of conflicts between bootstrap and jquery-ui?

jquery-ui,twitter-bootstrap-3
I can't find such list (bootstrap and jquery-ui conflicts) in the internet. If you have used both together in one project may be you could aware me what kind of conflicts bother you? What I have met: tooltip function h? styles ...

jQuery UI Slider - Change background color ONLY between handlers/sliders/markers

javascript,jquery,jquery-ui,jquery-ui-slider
I am using jQuery UI Slider. I have multiple hanldes with range set to false. Is there a way to color the range between two handles/sliders/markers whatever you want to call them? I have not found a solution to this yet. This is my code/initialization that I am using. var...

Parent container have children with different width

css,html5,css3,jquery-ui
I have used auto-complete J-query as the following shows : (function( $ ) { $.widget( "custom.combobox", { _create: function() { this.wrapper = $( "<span>" ) .addClass( "custom-combobox" ) .insertAfter( this.element ); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children( ":selected" ), value = selected.val() ? selected.text() :...

jquery change class when sortable

javascript,jquery,html,css,jquery-ui
//JavaScript $(function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); }); /*CSS*/ #sortable1, #sortable2 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px;...

jquery append() is creating two div elements

javascript,jquery,json,angularjs,jquery-ui
I am adding div elements dynamically to the DOM using jquery append(). I have made a controller that takes json data using $http.get() and calls a function create_mission to add the divs to DOM. I have to create a div for every object of the json, so i have done...

jQuery Expand a tag not working correctly

javascript,jquery-ui,collapse,expand
I have been trying to get the Expand Collapse on an anchor tag work but somehow I'm missing something. I went through almost all links here but wasn't finding the difference between my code and the help options. All I want is a simple expand on click of the "+"...

passing php array to ajax/jquery

javascript,php,jquery,ajax,jquery-ui
hi all i know there is a few results on this topic but I am not trying to do anything too advanced just yet trying to understand the basics. For some reason this code the alert works and prints out the correct array information but i can't seem to get...

Sortable Jquery table not working in new Jquery version

jquery,jquery-ui,tablesorter,jquery-ui-sortable
I have a table with sorting function with Jquery version jquery-1.7.2. When i upgrade Jquery to jquery-1.11.1 sorting function is not working. How can i solve this? Here my html code <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.7.2.js"></script> <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> <script...

Setting date of datepicker

jquery,jquery-ui,jquery-ui-datepicker
http://jsfiddle.net/t3n9p7kp/1/ I have a datepicker which is set up to select a whole week. I have two buttons which are supposed to move the selected dates forward and backward a week. The forward button works all the time, but the backward button only works if the month changes. If the...

angularjs datepicker directive “Missing instance data” on dynamic form fields

jquery,angularjs,jquery-ui,datepicker
I have an angularjs app that tracks household member data. One of the more important fields is DOB. I used the following overflow post to make a custom datepicker directive jQuery ui datepicker with Angularjs here is the code //jquery datepicker through angular angularApp.directive('datepicker', function() { return { restrict: 'A',...

Display Datetime picker on tiny mce plugin

javascript,jquery,jquery-ui,datepicker,tinymce
I am using j-query tinyMce plugin as editor . Everything was going fine . But now i need to add a custom button so that i can insert date from a date picker . What i did is added a button in the toolbar . and its working to show...

Jquery Mobile: Horizontal Buttons, fill container

javascript,jquery,jquery-ui,jquery-mobile,mobile
Working on a mobile app, I am trying to create two buttons, that should grow and fill their container. So in portrait view, the two buttons should use up the entire width of their parent, and in landscape view, they should also grow to fill up their entire parent. I...

Get data-attribute value from dynamicly created tabs with jQuery UI

jquery,jquery-ui
I'm currently working on a chatsystem that uses jQuery UI tabs for each room and each private chat. Ofcourse these tabs are dynamicly created. Underneath is very simplified example of the way I'm doing this. var tabs = $("#tabs").tabs(); var ul = tabs.find("#tabs-ul"); $("<li data-user='test'><a href='#test'>test</a></li>").appendTo(ul); $("<div id='test'></div>").appendTo(tabs); tabs.tabs("refresh"); For...

Nestable / sortable serialized list without removing the original item from list

javascript,jquery,jquery-ui
I have been using the Nestable JS from Bushell (https://github.com/dbushell/Nestable) for a while and have lots of usable code to generate the menus from Mysql, but I need to drag available options from one list to another list without removing it from the source. I just want to append it...

How to get Ember compoment's “ID” attribute?

jquery-ui,ember.js
I am using a ember components in a recursive manner and im going to make particular components as draggable in jquery-ui. so,i need to get its corresponding view id like "ember143" for the following HTML view, <div id="ember143" class="ember-view"></div> is there a way to get the id attribute? NOTE: i...

Move a drag and dropped DIV back to it's previous location programatically using jQueryUI Sortable

javascript,jquery,jquery-ui,jquery-ui-sortable
I am using jQueryUI Sortable to build a KanBan style board. THe boards will be used to hold Order records from a database. Each bBoard/Column is a "Status" that the Order record is currently in. So as an order progresses through the assembly line, it can be drag and dropped...

How to get top level object under the mouse function?

javascript,jquery,jquery-ui
Title says it all. I've got child div's with absolute positions inside a relative parent div, and would like to know whether the mouse is over a child or a parent div at a "random" point in time. Hypothetically, I'd like to call the .mouseover method and perform a .hasclass...

How to save a nested JqueryUI accordian's state and reopen it by reading later

javascript,jquery,jquery-ui,jquery-accordion,jquery-ui-accordion
Hi I am dealing with a very nested accordion. What I want to do is whenever the user changes the state of the accordion I want to record that change in the URL so that when I refresh I can read the URL and create a new accordion with the...

Adding method/function to jquery ui slider

jquery,jquery-ui
I am trying to add a function/method to jquery ui slider that I can play with adding another handle to my slider with. I have my slider like this right now: var initialValues = [180, 435, 1080, 1320]; // this gives me 4 slider handles updateValue = function (ui) {...

Why jquery UI sortable don't work on AngularJS templateURL?

jquery,angularjs,jquery-ui
I'm trying to have sortable panels on each of my tab. If I put panels on index.html it works, but when used inside directive templateUrl: tabs.html it doesn't. Please see the Plunker example here My html file: <body> <div class="container" ng-controller="testCtrl"> <app-tabs></app-tabs> </div> <script> $(document).ready(function () { $(function () {...

Sortable in Rails 4

ruby-on-rails,jquery-ui,ruby-on-rails-4
I'm following Railcasts #147 using Rails 4 instead of 3. The method below is not passing in Rails 4. So far all, all is working except for updating the databse with the new sorted position. Any idea how I can mass update the records? def sort params[:faq].each_with_index do |id, index|...

startDate and endDate validation

javascript,jquery,jquery-ui
I'm trying to make a validation between 2 dates, startDate and endDate, 2 inputs using jquery, my code from js $('#start').datepicker({ onSelect: function(selected) { $("#end").datepicker("option", "minDate", selected) } }); $('#end').datepicker({ onSelect: function(selected) { $("#start").datepicker("option", "minDate", selected) }); HTML <input type="text" class="form-control form-fixer noEmpty" value="" id="start"> <input type="text" class="form-control form-fixer noEmpty"...

jQuery Toggle on Hover Multiple Instances

jquery,jquery-ui
Currently hovering over one div causes all three to toggle at once. Trying to figure out how to get only the item being hovered over to toggle at that time. While I could give each a unique ID and duplicate the javascript rules for each, I would assume there is...

Creating boundries in JQuery/javascript

jquery,jquery-ui
Hello my problem is that I'm working on an online WebOS and what I wanted to do is say that the div-class .application-frame can't be dragged any further then down the the top of div-id taskbar. How would you go about this.I use jquery ui .draggable(); to drag the .application-frame....

jQuery tabs enable horizontal scroll

jquery,css,jquery-ui,jquery-ui-tabs,jquery-tabs
How to enable horizontal scrolling on jQuery tabs within a specific width on a single line. By default, jQuery UI plugin moves the last tab on next line. So, I've been using a workaround to increase the width by a bit by setting the css style as below, #tabs_div .scroller...

MVC 5 with @Scripts.Render(“~/bundles/jquery”) Compilation Error

jquery,asp.net-mvc,jquery-ui
I'm developing an MVC5 project that have Payfast implementation. I have a View that submit all the information to the Payfast website for payment. If i run the project it always give me Compilation Errorpointing to @Scripts.Render("~/bundles/jquery"). I'm confused please help. This is the view that is giving me the...