Droppable behind a non-droppable.
I have a a droppable region that gets partially covered by a plain div. When I drag a draggable over an area of the plain div that covers the droppable and release, the droppable is triggered. Is there a way to prevent the droppable from triggering when the drop happens over the portion of the droppable that is behind the plain div? Here is a fiddle which demonstrates the problem: https://jsfiddle.net/m2wqaccL/5/
How to get y coordinate value with scrollbar.
Hi, I want show hide one div . The position of mouse is click is changed w.r.t expander. So when div is visible is position gets changed. i want to keep div position fixed i. e where the button is available, below that button div should be diaplay. How i will get the exact point of button using jquery.
Accordion style issue
I am testing the accordion code at https://jqueryui.com/accordion/ on one of my test sites and I am having an issue with the list style: http://marsden.robertobertuol.com/dealer-zone the height of the list is set to "0" although it should be 71px and not quite sure what is causing this and how to override this. ANy pointer is very much appreciated
Possible position bug and page jump on close
Hi, I might have found a problem with the .position method, but I wanted to see if anyone had any ideas. I have a jsfiddle example here with instructions: jsFiddle This is just a test to show it happening, but it seems that if you move a dialog with the .position method then when that dialog is closed with the 'X', the page jumps back to the first position of the dialog, if scollbars are on the page and you've moved it to a position where the original is not in view. It seems to only do this if you
Dialog position
Hi to all my name is christian rheinnecker i'm from germany, sorry for my bad english. I collecting video games and other stuff and i build my own little CMS shown in this video link [removed] i use jqueryUI for the dialogs and some other stuff. my question to the community is it possible to store the current position of a dialog inside a php variable to store it in some coockies or in my SQL database ?
jquery ui datepicker stops jquery malsup cycle
Hi guys, I tried to use on the same page jquery UI datepicker and jquery malsup cycle for rotating images, but cycle stops and loads all images on the screen. Is there a way to get them to work together? Thanks, Spyros Code on external js for malsup: $(window).load(function() { $('.slideshow').cycle({ fx: 'turnLeft' }); }); Code on page for ui datepicker: <script type="text/javascript"> var datefield=document.createElement("input") datefield.setAttribute("type", "date")
jquery ui checkbox button not submitting with ajax
I have a problem, where the checkbox is not submitting any values. The code snippets looks like this (html, JS, PHP): <div id="checkboxes"> <input type="checkbox" name="ed" id="ed" value="ed"><label for="ed">ed</label> <input type="checkbox" name="vw" id="vw" value="vw"><label for="vw">vw</label> </div> var $form = $("#meineprodukte"); var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "GET"; $.ajax({ url: $form.attr("action"),
jquery ui datepicker doesn't work on google Chrome
The jquery datepicker widget works on Firefox and IE but not on Google Chrome. All I get is the Chrome native datepicker, which is not customizable. Is there a way to resolve this issue? Thanks! Here is the code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Pancake Pavillion Application</title> <link rel="stylesheet" type="text/css" href="pplcss.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js"></script>
Jquery UI Autocomplete onselect ..!
There is a output box, where i need the autocomplete selected list (Multiple Items selected )to add into output box, I tried this http://jsfiddle.net/ej5wz8yg/
jqueryUI tooltip positioning with jQuery UI 1.11.4
I'm having issues with jQueryUI tooltips with version 1.11.4. With jQuery 2.1.3 and jQueryUI 1.11.3, I used the following: https://jsfiddle.net/gssege1k/ It produced the desired effect - tooltips slid out to the side of the elements when moused over. However, with jQuery 2.13 and jQueryUI 1.11.4 (the only change being the version of jQueryUI), the tooltips slide out from the side of the viewport rather than the side of the triggering element. They obey the animation config, but attempt to extend
Only allow specific selection in datepicker
I'm very new to jQuery and I'd like some help with the date picker. I'd like to use the "multiple months" demo with a slight twist. I'm creating some time reporting software and each pay period is 2 weeks long. So if an H. R. rep would like to see hours for a specific pay period I'd like them to use the date picker. Now I want the picker to only allow selections of 2 week intervals (but it can't be a simple select 2 weeks from the current date). For example our first pay period this year was from
Datepicker, First available date...
Hey there, i want to write a method to get the first available date from the calendar as the input value and minDate. I don't know where to start (i am actualy reading the documentation), I definitly need some help to find a good solution. I made a fiddle here Thanks in advance, Klaus
How to use accordion with non expandable elements
Hi everyone! I am not familiar with jQuery so sorry in advance if the question is pretty basic. I am using the Accordion to one of my pages. I have a list of items and I need some of them to expand/collapse and some of them not to. At the same time I need the ones that expand to interact with each other, so when one expands, another collapses. Everything works great but I have a problem with the elements that I don't want to expand, I just need them to stay simple headers. Right now, I had to add
Trouble setting Accordion to be opaque
For some reason, the background color of the jQuery UI Accordion seems to be transparent. This is a bit of an issue because some of accordions expand over existing fixed content, but I'm having some trouble setting it to opaque with the usual suspects. background-color: white; opacity: 1; z-index: 0; I've tried setting these in both the CSS .ui-accordion .ui-accordion-content as well as directly in the HTML. Any suggestions?
Accordion BeforeActivate load content dynamically
I want the first Panel of accordion to load the content on load, but it is loading the content after i clicked it here is the link http://jsfiddle.net/ng117reu/5/
Selectable :(
how do i disable Ui Selectable multiple selection i dont want ppl to be able to multiple select by Ctrl key or other ways !
Trying to get an accodion style within tabs
ok heres my question I am new at jquery so bear with me but I catch on quick here is my code. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="Testmain.css"> <script style="text/javascript" src="jquery-ui.js"></script> <script style="text/javascript" src="modernizr.js"></script> </head> <body> <div> <img src="tokeOfTheTown.jpg"> </div> <!-- this is original tab code --> <div id="container">
Syntax for adding function to jQuery UI Accordion Event
I'm fixing up some jQuery functions that I wrote eons ago, and I can't seem to get the syntax right for inserting a simple function that should be called when the event is triggered. It was nice and easy to insert the show() to the mouseleave function, but I've run into a wall on how to insert a simple hide() function into the event: "click hoverintent". $(".accordion_closed").accordion({ event: "click hoverintent", collapsible: true, active: false, autoHeight: false,
JQuery Modal Form
Hello all, I am trying to create a small table, with the following specifications: 1. there will be a button that user will click (Enter Your Details) 2.Under the button, there will be three columns with the following headings (Full Name | Password | emailAddress) 3. When the button in item 1 (above) is clicked, it will open a modal form 4. The modal form will contain a form with the following details (username | password | email 5. There will be two buttons below the form (Submit and Cancel) 6.
How don't execute a file.
Hi, I would like to know how to prevent the execution of the specified file when you press the cancel button. I have a html form on jquery dialog to input user name and password. The two input text are required attribute. When I press on "access" button I run a php file and then I access to my system, when I press on "close" button I would like to close the dialog, but it appers the required message. Demo: http://jsfiddle.net/xzwmwqsz/76/ Thanks in advance. Tegatti
Source Code Example License
I hope this is not a stupid question, but is all the source code examples on https://jqueryui.com/ go under the MIT license? Thanks!
jQuery datepicker error: Missing instance data for this datepicker
I am dynamically creating a textbox then adding a datepicker. The datepicker loads onclick, but when I change the month or change the month, I get the error message, "Missing instance data for this datepicker." How do I fix this bug. Here is the excerpt of jquery code $(document).ready(function () { $('.filter').click(functio n () { var pos = $(this).position(); var width = $(this).outerWidth(); var height = $(this).outerHeight();
jquery-ui draggable help
I've made a div draggable using jquery-ui and I'm trying to customize it in a few ways but it doesn't go well. What I want to do is make it so the div won't go over the scrollbar of the browser, I've constrained it to the window object as well as to the document object but neither succeeded. This is my code : $(function() { var container = $("#context-menu-container"); var header = $("#context-menu-header"); var options = $("#context-menu-options"); var steps = $("#context-menu-steps"); container.draggable({
Jquery selectable as table not returning ID
Alert(id) is returning nothing when used in a table. When I use jquery selectable on "OL" tag it returns the id of the "li", when I change the "ol selectable" to "table selectable", it starts showing empty in the alert message. Do I need to anything different when using table with a jquery UI selectable versus "ol" . Please suggest. $("#selectable").selectable({ selected: function (event, ui) { var id = $(ui.selected).attr("id"); var color = $(ui.selected).css("border-color"); alert(id); } });
breaking head over jquery autocomplete function
p>Hi i'm tryin gto achieve the following with different autocomplete form fields from different asp/sql json results. For one of the functions i had to add extra function, but because of this the functions below it are no longer executed. Could someone pleas help me on my way. I've tried a lot of different approached but the lead me further away from my goal. here is part of the code: $(function() { $( "#searchword" ).autocomplete({ source: "sourcename.asp", minLength: 1 }).data("autocomplete")._renderItem
wrapping up data in Accordion
this is the fiddle http://jsfiddle.net/11xm2q6n/ data for one header is long and another short vice versa.. i want the header (h3) to expand according to the data size. Like for first header the data is "Sample data large (xxxxxx)" the header should limit up to the data size. Is it possible?
Drag and drop text from iframe to input
Hi everyone! I want to drag text from an iframe that contains an application/pdf visualization and drop it in an input tag that is in the parent node (tag). It doesn't seem to work knowing that the domaine from which I get the PDF and my page are the same. When I try to bind the drop event to access the text that is being dragged I get a security error : SecurityError: The operation is insecure. here's is my code : $('#myInpytTag').bind('drop', function (e) var theDroppedText = e.originalEvent.dataTransfer.getData('Text');
jQuery Sortable refresh for cloned sections
Anyone to help with jQuery Sortable? http://jsfiddle.net/simbaley/a4sx7qu3/2/
Jquery Collision : absolute collision ?
Hello, I am currently trying to develop a little task "parking lot game", and I am using Jquery draggable, and the add-on Jquery-collision. my JS fiddle project I tried to show you the simplest I can do : you can see that I can drag the blue "car" to the red car, it indeed detects collision, but thereafter it will teleport on the other side or stack on eachother. Does anyone has an idea on how to prevent that ? (Hence the collision is detected, the piece should be stuck). Thanks in advance, Félix
I want to use the datepicker to query the data between two days.
I want to use the datepicker to query the data from MySQL database. I add the 00:00:00 and 23:59:59 because my data type is timestamp ,but the code can't work. Please help me ! This is my code. test_jquery2.php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Computer Facilities Temperature & Humidity Log</title> <style type="text/css"> .table_titles, .table_cells_odd, .table_cells_even { padding-right: 20px; padding-left: 20px;
My dialog has a close button instead of an X
When I use versions 1.11.1 of jquery and 1.11.3 of jqueryui respectively, when I create a dialog box I get no box and no X in the upper right corner. Instead, I just get my title followed immediately by a button labeled "close" and my contents floating in space below it. When I use fiddle to test this out, if I regress back to about versions 1.9, a perfect dialog box appears. There is no other javascript in use (like bootstrap for instance) so there is nothing to conflict with. What am I doing wrong?
Tooltip is not appeared if it overlays cursor position on element
Hello, Tooltip is not appeared if it overlays cursor position on element. The code is below: $(function() { $('#example tbody').tooltip({ content: function() { return $(this).attr('title'); }, position: { my: 'left top', at: 'left top', of: window, collision: 'fit fit' }, show: { delay: 400 }, hide: false }); }); Thank you in advance, LP
How to move multiple listbox's option to exact multiple listbox?
Hello, Friends, I'm totally newbie into jquery and jquery UI. I have implemented below jsfiddle with so many help from different resources. My problem is that I want to move back the option from 2nd listbox to first listbox. I want to add condition like...One can move options between first and 2nd listbox only and also between third and 4th listboxonly. And also when I move first then I can't double click on the option. And when I do the double click then I can't move the option element. Help me
Jquery Ui - Sortable :(
here: Jquery Ui Portlets Sortable! i want a column that items can be draged from-to another columns but would'nt be dragged from another columns into it ! how can i do that
How do I specify where the html for dialogs are place?
Hello, By default, JQUI Dialog boxes are placed just before the </body> tag. This is a problem because it prevents the Scope feature within the JQUI download builder from working. Is there a way to tell the dialog boxes to render themselves somewhere else in the HTML? Thank you, Akheem ------------------------- How it is normally rendered: <html> <head></head> <body> <div>Normal html content</div> <div>Normal html content</div> <div>Where a dialog is
Is It Possible to Pass multiple Classes into "dialogClass:"?
I need to be able to put more than one class into dialogClass: . Is this possible? Thank you :)
How to get the state of a non-initalized accordion?
Hello, I have an issue with the Accordion jqueryUI widget. I'm appling several times over the same html element the accordion with different data loaded from Ajax data. The problem is that it only works the first time (when page loads). I need to apply the destroy() method to the accordion before reload it again to solve this, but the problem is that I before apply this method, $('#my-layer-id').accordion('destroy'); the accordion must be initialized, but the first time is not initialized. There's
Avoid conflict with JQuery UI and Bootstrap
In our project, we have been using jQuery UI components like calendar. recently we have implemented bootstrap in the project. So here comes the issue. Some of the components are conflicted by the two libraries. One of which is jquery calendar. bootstrap calendar & jquery ui Both are sharing the same object name. So there is a conflict. What could be the ideal solution to handle such scenario. I am looking for a solution which will provide developers to specify which component they are intent to
Unable to set element offset positions
Hello, I am using the jQuery UI Draggable widget. Inside the 'create' event, i am setting the offsetTop and offsetLeft properties to some custom value, but these values are not being set and the element's position remains the same. Can someone suggest any way to do the same. I am posting my code: $(".myStyle").draggable({ grid: [198, 118], containment: "#containment-wrapper", cursor: "move", refreshPositions: true, create: elementCreated
JQuery Selectable not selecting correctly with radio buttons
EDIT: Working sample code here. I have two selection modes which I can choose from using radio buttons: One that lets me select <td> elements colored green One that lets me select <td> elements colored blue Consider the scenario below to describe my problem. Click Check Out radio button. This means I can only select green colored elements. So far so good. Now I click Check In. This SHOULD mean I can only select blue colored elements. But I can still select the green colored elements (albeit only
Next Page