How to show, hide, or disable one header in a jQuery UI accordion widget?
I'm building my first page using ANY jQuery UI. I have set up an Accordion Widget, and I would like to be able to hide or disable one of the lower headers in it based on some actions in an upper one. Also, to re-enable based on the same sort of thing. I know how to detect the action that should trigger this to fire a function, but I don't know how, within the jQuery UI system, to hide (with animation would be nice) or disable (with dimming or something would be nice, but not expandable in any case)
Auto-complete with pre-populated data in an input box
Hi, How do we go about doing jQuery UI autocomplete with an input box with some populated data? See below <input type="text" name="myField" value="Some prepopulated data here," class="vest"> Notes: (1) The "Some prepopulated data here" is retrieved from a database via a query (2) The autocomplete list is supposed to show up when a user moves cursor into this field Outcome for the field would be: Some prepopulated data here, An Unmarried Woman if "An Unmarried Woman" is selected. $(function() { var
Tooltip positioning collision: flipfit not doing it's thing
OK. So here's the deal. I'm pulling my hair out trying to figure this one out. When the user hovers over images, the tooltip sometimes shows up properly positioned and sometimes does this thing where half of it disappears beneath the boundary of the browser window: Then, as if to mock me, when the cursor leaves and re-hovers, the tooltip shows up properly on the exact same element. It should at least be consistently wrong don't you think? First hover: maybe shows up properly Second hover: always
How to make datepicker screen disappear upon selection?
Intention: After a user selects a date via datepicker he/she continue to type something after the date. Thus, it's very desirable to make the datepicker date selection screen disappear upon selection. Doable? The doc is not obvious on this. If so, how? Thanks. <input type="text" name="myField" size="115" class="gdateComma"> (function() { var d = new Date(); var maxD = new Date(d.setDate(d.getDate())); $('.gdateComma').datepicker({changeMonth: true,changeYear: true,yearRange: "-31:+0",maxDate:maxD,dateFormat:
LightBox
By using any free jQuery framework. I need that on clicking an anchor tag Open a gallery of images in a lightbox . Use a modern lightbox which has swipe functionality on mobile.
Can datepicker return just year?
If so, and then I'd like to get a list of the values of the past 5 years. Thanks.
datepicker.parseDate
Hi, I have a curious problem with datepicker.parseDate: $.datepicker.parseDate('dd/mm/yyyy', '22/04/2010');generates this error in the FireBug console: uncaught exception: Missing number at position 10 Curiously, with this format, there is no position 10 (0-based indexing) However, adding a 0 at position 10, like this: $.datepicker.parseDate('dd/mm/yyyy', '22/04/20100'); does not generate an error, but it does not parse the date correctly either: Sat Apr 22 2000 00:00:00 GMT+0200
How to adjust datepicker settings from inside a on('change') function?
I have the following function: $("#mySelect").on('change', function() { var mySelectValue = $('#mySelect').val(); var promise = getAvailableDates(mySelectValue); promise.done( function(data) { var array = data; $('#a_date').datepicker({ dateFormat: "yy-mm-dd", beforeShowDay: function (date) { var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [array.indexOf(string)
Reposition draggable element to initial position
I have 2 issues which are as follows: I have prepared js fiddle for my issue: I'm having left and top position assigned to each draggable item. Now, when draggable item is dropped outside of droppable area then draggable item doesn't position itself to initial position. As per my reading, I have also tried to set top and left to 0 but it didn't work. After dropping element in droppable area, what changes are required so that draggable item covers entire droppable area? Can anyone help me with this
JQuery UI inline DatePicker loses selected date after ASP.NET postback, How to keep it?
Hello to All I have a jquiry datepicker and the code is as below: <div id="test"></div> <asp:TextBox ID="txtRDate" runat="server" Width="120px" ClientIDMode="Static" AutoPostBack="True" OnTextChanged="txtRDate_Te xtChanged"> </asp:TextBox> Javascript code is: <script type="text/javascript"> $('#test').datepicker({ dateFormat: 'yy/mm/dd', minDate: new Date(2017, 1, 1), defaultDate: new Date(), onSelect: function(date, obj){ $('#txtRDate').val(date); //Updates value of date $('#txtRDate').trigger('ch
Datepicker altFormat issue
The documentation seems to indicate, altFormat:"MM dd, yy" would return April 07, 2017 for today, but it actually returns "04/07/2017", what's going on? Did I misread its doc? Thanks.
How to add some static data to Datepicker date?
For a jQuery UI's datepicker field and I'd like to add a static timestamp to a selected date value upon date selection. I've looked at all the attributes for datepicker, however, none seems appropriate for this need. And I attempted to trigger onblur and onMouseout respectively to call up a function to append the static timestamp, however, it quickly shows up and then disappear. So, what to do this? And I wonder if there's a special event, which essentially kicks off after all other events are
Help from a datepicker master please! Trouble setting the date correctly.
Hi there, could really use some pointers from an experienced datepicker user. I have a gridview in an ASP.net webform. One column of the grid is composed of both an <asp:label/> and an <input type="hidden"/> control. I have managed to get a datepicker to appear in every row of this column and for the date of each datepicker to be set by the value of the <input type:hidden> control (a list of dates). The label shows the same data as text. When I click on an icon in the row the datepicker appears
Datepicker same width as the input in a bootstrap grid layout
I have an input field that has a bootstrap class of "col-xs-6". This input has a datepicker associated and I need it to be the same size. I used the beforeShow event to calculate the width of the input and place it on the datepicker. However this works only if the user does not change the month. Can this be achived? I saw that you can change the size using css but as you know the grid layout is dynamic so I can not use the css change since it will make the datepicker with fixed size.
Autocomplete Caching and using _renderMenu correctly
I am trying to make the following autocomplete code work but cannot identify the errors in the code. A very basic autocomplete works but I’d like to add caching and the ability to change the list that pops up, but I could not do so following the jquery instructions. Here is the code first: <style> .odd { background: blue !important; font-size: large; } </style> And here is my jquery, at the bottom of the page: <script> $(document).ready(function() { $.ajaxSetup({type:
Set value of the textbox equal to the first activated date in datepicker
Help please, my code is working, and it is activating only the day of week that i want, but by default the textbox has no value, i want the value of the textbox to be equal to the first date activated in my datepicker, My code is: <input type=text name='dtpick' id='datepicker'> <script> var j = 3; $(function() { $('#datepicker').datepicker({ minDate: 0, beforeShowDay: function(date) { var weekDay = parseInt(j, 10); if (weekDay === date.getDay()) { return [true, '', '']; } return [false, '', ''];
array datepicker
hello i want show datepicker in my array. here my code. i can click on 1st box & show the date. but when i click on 2nd box nothing happen. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="../apps/css/jquery-ui.css"> <script src="../apps/js/jquery-1.12.4.js"></script> <script src="../apps/js/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); } ); </script> </head> <body> <form
[Datepicker] First or last week of the year is wrong
Hi, I have the following problem: I have 'showWeek ' option set to 'true '. The first week of the year is shown as '52' (the last week of the previous year). You can observe this behaviour in this sample (https://jqueryui.com/resources/demos/datepicker/show-week.html). Steps to reproduce: 1. Open the sample 2. Navigate to January 2012 3. Take a look at the first week Actual result: The week number is '52' Screenshot attached Expected result: The week number should be '1' Note: The same issue can
JQuery UI - Draggable Viewport (overflow:hidden)
Hello I have jQuery content slider ( http://bxslider.com/ ) and I would like to drag (copy) images from this slider to another container (droppable) on the page using JQuery UI. I managed to make the images draggable, but since the slider has a "viewport" (overflow:hidden), the images are getting invisible, as soon as they move outside the bxslider viewport. How can i solve this? Is there an example for this situation? I would like to copy the images onto the droppable. The original image should
How do I invoke a JS script once a datepicker date has been selected by a user?
$( "#datepicker3" ).datepicker({ changeMonth: true, changeYear: true, onChange: ??? });
How to use the easing in the toggle() function?
I'm newbie in jQuery UI as well as jQuery, so I've encountered a one problem: how to specify the easing in the function of toggle()? What is the certain place it should be there? I'd tried searching for it but haven't found exact answer.
Close "Cross" image not displayed when I simply copy the sample and run it.
Hi, Please kindly advise when I copy the http://jqueryui.com/dialog/#modal-form and press the "Create New Button" the cross is not displayed in the top of the Dialog? All the other functionality works fine. I believe the style.css is just : body { font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; font-size: 62.5%; } Perhaps I am missing another script or reference. Please kindly advise, thank you. Regards, Anil
Range slider, getting min/max handle value to variable
Hi, I am completely newbie, working mostly on ready made code fragments. I am learning using 2-handles slider with some data analytics, e.g. selecting data ranges from an array based slider range. How can I do below: min-max: 1-5 after moving handles: 2-4 varLOW = 2; varHIGH = 4; Thanks Horsten
Question about sortable refresh
Hello, JS Fiddle: https://jsfiddle.net/29re1xbt/1/ I have a system which allows to sort both tables and the rows inside them: - you can click the "GROUP HANDLE" and move the table. - you can also click the "ROW HANDLE" and move the row from one table to another. You can also add new rows to the tables using the "Add Row" button and they will be automatically made sortable. Up to there, no problem. Then, if I add a table using the "Add Table" button, the table will be automatically made sortable.
How to save and highlight the selected value in the Autocomplete dropdown?
I am able to pick any value in autocomplete drop down menu but next time when I click on the dropdown menu, it does not show the selected value from the first time. The dropdown always shows the options from starting. This can be a problem for users if anyone wants to see the selected option in the dropdown menu, How to save and highlight the selected value in the Autocomplete dropdown? Using thie autocomplete dropdown menu: https://jqueryui.com/autocomplete/#combobox Can anyone please suggest a
Slider range not setting handles properly
I'm trying to get jQueryUI Slider w/ two handles working (range). It keeps generating 8 slider handles instead of just two and they aren't being set to the initial values. ON change, I call ValSlider to get the values to update in the input box. I'm using data to pull the required settings into the slider function (I have to share this data w/ other scripts, so using this as easiest way), but I don't see any problems w/ doing that. Here's a demo: [ Removed ] Here's the related simplified code
Clone + autocomplete not workink
I can not understand where the problem is. Could you give me a hint on how to solve this? var buttonadd = '<span><button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button></span>'; var fvrhtmlclone = '<div class="fvrclonned">' + $(".fvrduplicate").html() + buttonadd + '</div>'; $(".fvrduplicate").html(fvrhtmlclone); $(".fvrduplicate").after('<div class="fvrclone"></div>'); $(document).on('click',
Disable Buttons
I am trying to disable buttons after the page loads. The code is located in an linked script but when the $(document).ready section: $(document).ready(function () { $("#btnMoveDesigns").button({ disabled: true }); }); When I hit the above code I get on 'Object doesn't support property or method 'button''. The jquery.js, jquery-ui.js and jquery-ui.css are all linked in a masterpage that the page calling the .button reference is using. I cannot supply a jsfiddle example but if anyone
jquery tabs not posting parameters to php file
m trying to post parameters to php file and after that to load it in to a jquery ui tab. the problem is that tabs are not posting. GET is working fine but i want to use post. here is the script code : HTML <div id="tabs"> <button id="add_site">Add Tab</button> <ul id="sortable_tabs"> <li id='site_10'><a href="engine/make?dobavkata=10" data-url="10" title="public buildings" data-make="make_content" data-id_site="10">public</a></li> <li id='site_4'><a href="engine/make?dobavkata=4" data-url="4" title="News"
jQuery Dialog - scrollbar positioned at top of dialog after scrollTop()
Using: //ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js //ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js I launch a jQuery UI modal Dialog containing an iframe. The contained document has anchors with corresponding navigational links. When a link is clicked I use: $(window).scrollTop(anAnchor.position().top); This brings the content identified by anAnchor into view however the dialog's scrollbar is positioned at the top of the dialog making it impossible to then use the
jQuery UI memory leaks
Need some information on jQuery UI memory leaks fixes. Are there any memory leaks in jQuery UI 1.10.0 which are fixed in later versions? especially in jquery-ui-custome.js components like resizable selectable,etc.., on chrome Can you provide details on in which version they are fixed? I want to upgrade to that version
Angular JS
Dear All I am new in AngularJS anyone can tell me how to achieve this task. When i select something from dropdown menu the related information in the readonly fields through JSON file. The below is the image .... Thank you in advance
jQuery UI Tooltip with AJAX loaded content
The title says it all. I tried to bind tooltip using $( document ).tooltip(); - but my website freaks out and starts loading a blank page instead of showing the tooltip as soon as I hover the element O.o. If I use $( '.tooltip' ).tooltip(); - everything works fine. Except that with AJAX loaded content, the tooltip is not working (of course, because the plugin is initialized upon document.ready). Any hints? Thanks. Paddelboot
Autopopulate datepicker fields based on another datepicker field
I have form with multiple datepicker fields. Monday through Sunday. I would like to populate Tuesday through Sunday's dates based on Monday's selection. Here's where I have gotten with no luck: $(document).ready(function () { if ($('#form_44084').length) { var DAYS = ['#element_2_datepick', '#element_3_datepick', '#element_4_datepick', '#element_5_datepick', '#element_6_datepick', '#element_7_datepick']; $('#element_1_datepick').datepick({ onDate: function(date) { return {selectable: date.getDay()
Issue with duplicate fields and autocomplete
Hello, I have a form with duplicate fields including autocomplete input. The issue is : when i duplicate the fields, the autocomplete doesn't work on the new fields. I spent time googling my issue and often it's a clone('true') issue, which i don't use already and still have the problem. Can you help me please ? I made a JSFiddle : https://jsfiddle.net/vqnaedvx/ Try with the letter j or s HTML : <div id="projects" class="content"> <button type="button" id="btnAdd" class="btn btn-primary
Custom download - which files?
I just did a custom download and I am wonder just which files I need to use? I can see full and minified versions of .css .js structure.css and theme.css as well as two folders. I guess I need the min.js and min.css but I am not sure about the structure and theme files.
jQueryUI draggable fails at least with <input> element
I have problems to set elements draggable using jQueryUI 1.12.1. There is no problem, when draggable element is <div>, but when I switched it to the <input ... >, it does not move from place. I tried to disable element too in order to make it more "stiff", but it makes no difference. The similarly pitiful outcomes I had with resizing <label> for <input>. I could move it on the screen, but I was unable to resize it. Here is code I just copied from the page and made minor changes: <!doctype html> <html
Blur event inside jQuery UI Sortable elements is not triggering in Firefox
I am using jQuery UI Sortable on the list items having input type number inside each list item.I was listening for blur event on input. But it is not triggering only in Firefox.Jsfiddle Link
How do I use the jquery autocomplete to read a specific column of a *.xls file?
I'm trying to find a way to build a "script writer" in order to more easily write executable scripts if I can download the document, but not put anything on the server as far as code goes so far. What do you recommend for having the JavaScript read the *.xls, and populate the autocomplete from the data available?
UI Tabs - Mismatching fragment identifier?
What is this error meant to signify? There have been a few threads about this, but they contained nothing conclusive. The error seems to only be thrown by the switchTab() method, but it doesn't even appear that my tabs are initing properly - classes are applied, but the content of all the tabs is visible. I've got tabs 1.6rc2 running great on one site, yet on this one (it's Drupal, granted), I can't seem to get it going. Any insight on this error and what it is indicative of? Descriptive exceptions
Next Page