customized resizing and rotating
Hello, is it possible to resize and rotate object using customized controls like on the image
drag into different divs and containment
Hello,I want to drag divs into two different divs (drop1 / drop2). It works for one box as desired (drop1). But I want this for both divs (drop1 / drop2) and it should be possible that the drag-container can be moved between the two divs (drop1 / drop2). View code and result on JSFiddle.net var num1, cnt1 = 0; $(function() { $('.drag').draggable({ revert: 'invalid', containment: '#drop2, #drop1', snap: '#drop2, #drop1', stack: 'div', opacity: 0.7, start: function(e, ui) { num1
Spinner control Spin event | Keep on firing again and again
Hi , I am trying to use Spinner control and wants to control the next value that should be set in textbox if user either directly enter or use step-up or step-down buttons. for this i am listening to "Spin" event and assigning a function to this event. in this event i am trying to check if next spin value is one those that i do not want then i increase the value and set it using "value(value)" function. what happening is this event keeps on firing even if i remove all my code from this event ,
Filter
Hi I have Menu like this with Checkbox in front of each. I want that if user selects H.P , Dell from Brand then it should show like this in another Div without PostBack Brand : H.P X Dell X Ram : 2.0X Clear all If user click's on Clear all then it should clear all options Brand H.P H.C.L Dell Ram 1.0 2.0 3.0 Size 14.2 15.5
How to implement cupertino JQuery UI ThemeRoller theme in a jsFiddle project?
I have implemented the datepicker widget into my jsFiddle, seen here: https://jsfiddle.net/MrSnrub/g7u14p10/ I want to incorporate the cupertino theme to that datepicker. But the only options I'm seeing is a downloadable set of files, which a jsFiddle cannot use. Is there a way to do this?
jQuery UI for jQuery 3.0
Hi, we are about to upgrade jquery to version 3. It looks like there are some compatibility issues with the actual version of jQuery UI. We are using jQuery UI 1.11.4. Is jQuery 3.0 on the roadmap of jQuery UI? Best regards Marc
.switchClass() animating undeclared properties
I'm using waypoints.js to trigger a sticky sidebar and disable it once a specific div scrolls into view. From my CSS below, you'll see it only switches the bottom, position, and top properties. If I use .removeClass()/.addClass() the positioning is correct, but nothing seems to get animated and there's a jerky jump when the positioning changes. If I use .switchClass(), instead of just a jerky jump, the sticky sidebar moves diagonally away from its container and reappears in position, and the animation
Dialog not opening properly
Hi I have the below Code . I want when user click on below Anchor Tag li><a href="#" id="login"><i class="fa fa-lock"></i> Login</a></li> myModalLogin div should open in Dialog Box . On click it is changing Login to Logout but Dialog is not properly visible. Thanks JavScript File -------------- $(document).ready(function () { $("#myModalLogin").hide; $('#myModalLogin').dialog({ autoOpen: false, modal: true, }); }); $('#login').click(function () { $(this).html('Logout');
Problem with slide()
Hello. I have weird problem and i have followed many tutorials and got slide() to work, my side menu is fading out and doing up and left sliding effect. The problem is that i only want it to slide left. When i add direction like so: .hide( 'slide', {direction:'right'). script stops working, nothing happens but style gets attribute overflow:hidden. When the script works, it does display:hidden and some numbers quickly run by, viewed in firefox inspect element tool. So, slide works but not with any
Login Form
Hi I have the below code and i want that on Click Jquery UI Dialog should open for Login and Login Html should change to LogOut. <li><a href="#"><i class="fa fa-lock"></i> Login</a></li> Thanks
drag and drop
Hello! I have a problem obviously... On my page there are three images and six icons. Images are droppable and icons are draggable. Images have ID names "nar", "bijela" and "zel". Icons have ID names "nar1", "nar2"..., "bijela1", "bijela2"...and so on. When "bijela1" or "bijela2" is dropped on "bijela" image the correct icon will be shown... I have some of the code here but I don't know how to check icons and images. <!doctype html> <html lang="hr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible"
Help getting custom select menu's to work
Hello, I am trying to get the Jquery custom select menu's to work so that each option will show a an image beside it, a language selector with the countries flag beside the countries name. I found a solution on Jquery UI ( https://jqueryui.com/selectmenu/#custom_render ), but it does not work. I am using dreamweaver building a mobile application and I use Jquery mobile there as well, I am wondering if there is issue between Jquery and Jquery mobile that is not allowing the custom select menu to work,
how to set height vs window size
So I have a dialog which pops up and contains a random amount of data pushing the container down below the window. The main page contains a random amount of information. A fix of this is to fix the dialog and have it set to 80% height of the window. The problem is, when the data is smaller than 80%, there is empty space between the last line of data and the bottom of the dialog. My question is, is there a way to set the dialog height to auto, but if the data pushes the container to within 20% of
Smooth scrolling when using resizable
Hi there all i the new guy hoping i can get some feedback on my code and how to make it work. So what I want to know is how can I scroll the page down smoothly as I resize a div past the bottom of the browser. So far what I have set up is that when you resize the div and it gets to the last 30px of of the browser, it starts to scroll the page down. That part works, but it's jerky when doing so. My code: // $maxHeight is set above this, it just takes all the elements within the div and and get's
Some icons in Jquery UI 1.12 have changed slightly their position?
I'm upgrading from version 1.11 to 1.12 and I noticed that in the stylesheet definition some icons changed their location on the sprite 1 pixel. For example: Now: .ui-icon-triangle-1-s { background-position: -65px -16px; } Before: .ui-icon-triangle-1-s { background-position: -64px -16px; } Now: .ui-icon-arrow-1-s { background-position: -65px -32px; } Before: .ui-icon-arrow-1-s { background-position: -64px -32px; } Other position changes involve ".ui-icon-caret-1-s" and ".ui-icon-arrowthick-1-n"
[SOLVED] Page not scrolling right while dragging ui draggables
I would like my page content to scroll right on smaller screen sizes while dragging draggables. How can I achieve this? You can see the issue here Login using user demo p/w demo99 Navigate to the menu planner under "menu planning" in the top dropdown menu. Reduce the browser width so that some of the menu planner is not visible Open the left menu, navigate to a recipe in the Recipes menu and try dragging it to somewhere on the menu planner that is not currently visible.
Autocomplete - Custom data and display
I cannot make it works. There is a Products table (codigo, descripcion, precio, cantidad), typing part of the codigo field should appear the other fields on the list, to select one. However, the list appears with the correct amount of records but with UNDEFINED on every value. Any idea about why the script is not taking properly the values sent by search.php ? Thank you ! INDEX.PHP <script> $( function() { $( "#codigo" ).autocomplete({ minLength: 0, source: 'search.php',
Running the datepicker library initialization code after loading in using getScript.
I'm running datepicker controls on several pages and I want to put as much of the datepicker management in one place/file as I can, so to this end I have created a wrapper for datepicker, that loads the datepicker library and contains several functions that patch datepicker features/functionality to work the way that I need. The wrapper file is loaded in each page using the normal <script src> tag, after the JQuery library is loaded. Inside the wrapper file the datepicker library is loaded using
Jquery - Sortable : How to prevent the drag should not goes to below after a desied row.
Hi All, I have a query that , I am using jquery sortable http://jqueryui.com/sortable/#default Open the above link , My requirement is that if any user drag the item 1 in y direction and when the item 3 goes up the y direction drag should be stopped. Means dragging element should not drag below the item-3. Only possible drop area of item 1 is between item 2 and item 3 between item3 and item 4 help me to do this.
draggable object is pushing divs out of the way instead of hovering over them
I have a draggable card. I have drop targets in a container div. If I drag the card over any other part of the page then then the card hovers over the page. If I try to hover the card over the drop box container it pushes it down the screen andrefuses to enter it. You can see it in action here: https://jqueryuiexperimentscratchpad-gedq.c9users.io/ Click on the card stack to generate a card. Why should a drag item refuse to enter one div but not another?
show all names found in table (tb) when click display button
I need to show all names found in table tb and display as list when click button display by jquery by code below i can add success but how to take data from column name and show as list this what i need actually [code] @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.js"></script> <script> $(function () { $("#btn").click(function ()
inline datepicker beforeShow not occurring
Here is the JSFiddle that I created to show this issue: http://jsfiddle.net/howardb1/2qq7canm/ From what I understand, the beforeShow 'event' calls the function assigned to it before actually displaying the calendar part of the datepicker. So in that function I put an alert( 'hi' ); statement, but it never shows. The demo shows this in an always open inline datepicker calendar, but I've tried this in a 'regular' datepicker and text box field, too, and both ways fail to show the alert. I'm using
How to use autocomplete and work with different input
I have a form that has a zip code input and state dropdown list (pre-populated). The zip code input is before the state dropdown and was looking for a way where when I enter the 5th numeric value of a zip code it calls the autocomplete and then it calls something like http://ZiptasticAPI.com/90120 and then based on the return state it will set the dropdown for the user. So wondering if anyone has a similar function or is autocomplete not the right way of doing this? Thanks in advance.
Vertical Tab go up after click
Hello there, I have a problem using vertical tabs. First, it's really suits my need but I have a little problem on click, every time I click on a #tabs the scroll go up a little bit but I don't know why. Do you have any ideas what it could be ? Thanks. Valentin.
[SOLVED] ui draggables staying behind main content
I have a toggle left menu that contains draggable elements, and on the main part of the page is are droppables. My issue is that the draggable stays behind the main page content while being dragged. You can see the issue here Login using user demo p/w demo99 Navigate to the menu planner under "menu planning" in the top dropdown menu. Open the left menu, navigate to a recipe and try dragging it to anywhere on the menu planner
Datepicker
I just downloaded the latest files needed to use the Datepicker from GitHub, and I've found two issues that may already been addressed here, but looking back two years though this form, I didn't see anything addressing these two issues and a question: 1) When I first open a page containing a datepicker, if I press the enter key in the datepicker input field or type an incomplete date, say 1 or 12, into the datepicker's text box while the calendar is showing and then press enter key, the current date
inline datepicker previous month link not working
When I click the prev(ious) month link nothing happens. It shows normally and when I hover the mouse pointer over it, it shows the 'priv' tool tip. On the same form I have three other datepickers, who's prev(ious) month links work normally. I am using the latest JQuery UI datepicker in Chrome Version 51.0.2704.103 m on a Windows 10 system. The working datepickers all share the same options initialization setting, which the inline date picker does not. Here is the 'code' for the inline datepicker:
Is the jquery ui download builder broken or what?
Hi all, I am wondering if the jquery ui download builder is broken. I have used it many times before, but now it doesn't seem to be working. I untick all the stuff I don't want and click the button at the bottom marked download. A message comes up waiting and nothing happens. It did say to report this on github, but I am not a member. Also on themes page when you click on a theme it doesn't load into the screen like it used to so that you can see the theme. I am desperate to get a new theme for my
Cannot find jquery-ui.css file after install
Hi, I'm going through simple tutorial on tabs using the link: Collapsible example. I am using it in Asp.Net MVC application. I've installed jquery-ui.combined through Nuget. In the above example it uses jquery-ui.css file, but I cannot find anywhere within my solution. I believe as a result my Tabs do not function properly. Also, in that example it uses jquery-1.12.4.js, but the most recent version available from the Nuget packages is 1.11.4. Can anyone hint on what do i need to do?
Draggable containment undesirable behaviour with handle
When you contain a draggable element, the actual element itself will be contained to whatever containment you specify. This is not desirable though, it would be better if the handle be contained instead of the element itself. If you use a handle (without containment) it is very easy to drag the handle above the window and if you drop it there, the element will be 'lost' in the sense that you can't drag it anymore. Specifying a containment resolves this issue, but if you want the handle to be outside
Manually moving a dialog.
I've been looking for a way to manually move a dialog box (use case is that the positions and sizes of all dialogs on the screen are saved to a server and reloaded when a user logs in). In this case I need to use pixels. I'm finding this incredibly hard to do (my google-foo is failing me). I can easily do this via setting the style.left and style.right of the element, but constraining doesn't update (move the dialog off the screen, it stays off the screen). I can manually recalculate and set it back,
jQuery 3 dialog generates errors
Hello, I can't open a jQuery dialog in jQuery 3.0 without getting "Object doesn't support property or method getClientRects" errors. Here is a link to my example: http://jsbin.com/tefoquhogi/edit?html,output To see the error, use the F12 tools. This happens on the major 3 browsers I have tried. As a result of the error, positioning the dialog is impossible. The implementation is very basic and I can't figure out if there is something different in version 3 that I am not doing correctly. Any help
Where is Datepicker dates stored? altField seems empty
Hi I have a Drupal site where my form has two Datepicker: end and start. I'm trying hook into Datepicker change i.e. get date from the picker. Unfortunately the input fields designated for date seem be empty all the time. altField is used per specification. Are those dates stored in a variable until submission when value are set into inputs? Or why those inputs arent updated correctly? At least I get correct value on the server side so in that perspective it does work as planned. I need keep submit
[jQuery-UI Dialog] Positioning problems with jQuery 3.0.0
Hi. I have downloaded jQuery 3.0.0 + jQuery-UI 1.11.4 .. and now my Dialogs are not vertically centered. They strangely jump to bottom of my page. I tried various jquery "position" settings, and also some CSS option, but they seem to be ignored. I have also another previous jQuery version (don't know the exact number), where dialogs work nice, and centered! Any ideas??
Help with CSS Styles For Buttons or Buttonset
There seems to be quite a lot of code in the three css files. I'm trying to build a button set (3 actually). I was able to do this much. The code is below (assume there is html and a question for each one. Answers are "yes" or "no" for each of the questions. "No" is the default. All this works. I need help with the CSS below. <link rel="stylesheet" href="jquery-ui.css"> <link rel="stylesheet" href="jquery-ui.theme.css"> <link rel="stylesheet" href="jquery-ui.structure.css"> <script
Accordion - Expand/Collapse multiple sections
I want to expand and collapse all accordion sections with one click or have 4 different links to close each of the accordion divs. Right now it works with <a class="accordion-expand-all" href="#" target="_self">Open/Close All</a> for <div id="accordion"> but I want it to work with <div id="accordion2"> through <div id="accordion4"> as well. All the accordions in the different tabs works fine but when I click the Open/Close All link it only opens and closes the accordion sections in <div id="accordion">.
Comparing Dates with dateFormat: 'MM, yy'
I'm using this 'Monthpicker' plugin to let users select month/year: https://github.com/zorab47/jquery.ui.monthpicker The issue I'm facing is that when the dateFormat is set to 'MM, yy' in the 'From' date field, the till field shows a future date: 2182 in my case. Here's my code: $(".resumeExperienceFromYear").monthpicker({ defaultDate: '-20y', yearRange: 'c-60:c', changeYear: true, changeMonth: true, dateFormat: "MM, yy", onSelect: function( selected ) {
On a modal how do I show the URL of the "hyperlink" that was clicked to bring up the modal?
Please help!!! I have spent 10 hours on this issue alone. When an external link is clicked a modal pops up to state that the clicked link goes to an external site. That all works fine. I need to add in my text on the modal, the URL of the external link (for example: "http://www.notMySite.com") that was clicked and to go to "http://www.notMySite.com" when the continue button is clicked. I have a class named ext-link (for example: <a class="ext-link" href="http://www.notMySite.com"></a>) added to
Send a date in the database from the calendar datepicker UI using ajax
Hi,Please, tell me how can I send a date in the database from the calendar datepicker UI using AJAX? I have this HTML: <div id="datepicker"></div> <form method="post" id="myform" name="myform"> <input id="input" name="input" type="text"> </form> And this JAVASCRIPT: jQuery(document).ready(function() { $( "#datepicker").datepicker({ dateFormat: 'dd/mm/yy', altField: '#input', onSelect: function(dateText, inst) { $.ajax({
Change dateFormat in beforeShowDay in the Datepicker UI
Hi, please help me I have an array of the dates: <?php $seq = array("2016-6-27", "2016-6-28", "2016-6-29", "2016-6-30"); $json = json_encode($seq); ?> and script witch marked dates in the datepicker: <script type = "text/javascript"> var disabledDays = <?php echo $json;?>; var date = new Date(); jQuery(document).ready(function() { $( "#datepicker").datepicker({ beforeShowDay: function(date) { var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); for (i = 0; i < disabledDays.length;
Next Page