How adding <input> in each <td> in datepicker by clicking
Hello. How can I realize the following: I want by clicking on the <td></td> with 'date', <input> with value = 'date' was inserted between <td></td>? Its possible with datepicker UI? How I have this: <div id="datepicker"></div> <input id="input"> <script type = "text/javascript"> $(function() { $("#datepicker").datepicker({dateFormat: 'mm/dd/yy', altField: '#input'}); $("#datepicker").change(function() { var date = $(this).datepicker("getDate"); $("#input").attr('value', date); }); }); </script>
JQuery Slider is not working
I am using JQuery UI Slider framework and I am not able to move the slider handle. The issue can be reproducible by accessing the below mentioned URL links: http://74.209.247.77/testing.html OR http://liveweave.com/K9KMaA There are two question items, the first question item is a multiple choice question item which is displayed initially when the page is loaded, and when we click on the "Next" button in the page then the Bar Graph question item is displayed where we can reproduce the issue, the slider
Swapping tabs
I am very new to JQuery and appreciate some help. I have a list of tabs, lets say Tab1 Tab2 Tab3, and each tab has many content (i.e. text fields, check boxes, etc...). Is there any way I can swap the position of Tab2 and Tab3, so that the user would see Tab1 Tab3 Tab2 ? All the contents of Tab2 and Tab3 should stay with it. Thank you for help!
Popup to notify the user has selected an External Link.
I am new at jQuery and JavaScript and what I need is: 1. When user selects a link that is going to an external site, (All External links on my site have a class of “ext-link”) Individuals seeking employment with us need to visit www.jobsearch.com 2. PreventDefault() to prevent the link from directly going to that selected URL. 3. Popup notifies them they are leaving my site. You are leaving our site: 4. The link user selected (there are many external links) shows here To proceed to www.jobsearch.com,
Looking for feedback
I am a novice web designer and am close to completing my first full project. I have utilized an responsive nav bar that uses jquery (which I found online.), jquery and jquery ui throughout the site and was seeking some advice as far as best practices and ways to clean up the code. I also have an issue where my site is not recognizing my phone screen size, and is showing the desktop version. Is there a way for me to edit the css with ' @media and screen ' possibly? Also, I had intended for the jquery
Datepicker custom button disappears when date selected (
Hi, I am trying to create a datepicker where a user would be able to pick multiple dates (datepicker stays open when date is selected). Datepicker closes when clicked outside or Done button clicked. The problems is that when I select a date, Done button disappears. I keep datepicker open with $(this).data('datepicker').inline = true; $(this).data('datepicker').inline = false; I thought keeping datepicker open and having Done button should be a common objective, but I couldn't find any solution
Is it possible to use the latest jQuery with the latest jQueryUI?
I'm using jQuery UI 1.11.4 and this zipfile comes with jQuery v1.10.2. I replaced this old version with jQuery v2.2.4. I didn't notice any problem with our application. Am I risking something with using the latest stable version of jQuery?
To enable 3 options on accordion widget just started
Hi. Please help me turn on three options of Accordion just strarted: Default functionality, Collapse content & No auto heigth in the html tags <script> ... </script>. Thanks a lot
Draggable touch screen
I've got a couple of sites with draggable elements, having just got a touch screen laptop I would like them to work with that, please consider the following: The example on https://jqueryui.com/draggable/ works fine, I can drag the little box around with my finger. The Source from the above, cut and pasted, doesn't. All my draggables work perfectly with mouse moves. All the buttons on my sites respond to a tap. So can anyone tell me what I'm missing?
Rendered HTML has no ID associated with the dialog buttons
This is the JS displays a standard 'OK' dialog using jQueryUI: function genericPopupDialog(dialogTitle, dialogBody, closeButtonText, dialogWidth, parentContainer) { parentContainer = parentContainer || "#bodyDiv"; $("" + parentContainer + "").append($("<div id='genericPopupDialog'>" + dialogBody + "</div>")); $("#genericPopupDialog").dialog({ autoResize: true, autoOpen: true, width: parseInt(dialogWidth), maxHeight: 500, title: dialogTitle, modal: true, closeOnEscape:
Autocomplete display v value
I have replaced a drop-down box on a form with a text field and added autocomplete. This works fine and when I post the form, the value is saved. However, with a drop-down box I can add a value which is returned by the post, rather than the displayed text. Is it possible to do this with the autocomplete? I know you can use an array of objects with label and value properties but this doesn't seem to work in the same way. Thanks.
Months not displaying round year on dropdown menu.
My issue is that the dropdown menu of the months is only displaying the remaining month of the year and not the whole 12 months. This is the code to initialize the calendar: initializeDatePicker:function(){ $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' }); $(".datepicker").datepicker({ minDate: 0, maxDate: '+1y', beforeShowDay: function(date) { var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#arrDate").val()); var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat,
How to capture browser close event in jquery smart wizard
Hi There, I'm new to jquery. Need inofrmation on smart wizard. We are using https://github.com/mstratman/jQuery-Smart-Wizard and would like to know how to capture browser close event ? Thanks in advance !
Having accordion collapse open the last panel
I would like to get an accordion behave as follows: You click the header on the open panel, it collapses and the last panel activates.
Object doesn't support property or method 'dialog'
I have a very strange issue. On a sharepoint page i have two Jquery webparts. When first webpart loads it add links and shows dialog box. <script type="text/javascript" src="/siteCollection/_layouts/15/releasesearch/js/jquery.js"></script> <script type="text/javascript" src="/siteCollection/_layouts/15/releasesearch/js/jquery-ui.min.js"></script> When another webpart loads it adds Jquery link. It is in same site collection but different folder. <script type="text/javascript" src="/siteCollection/_layouts/15/project%20search/js/jquery.js"></script>
Accordon menu, how to make a submenu with icons using an unordered list?
I only have a basic understanding of jQuery, I hope someone will be able to help, I have already spent 2 days trying to figure this out. I used the accordion with icons from jQuery-ui to create a menu. When the selected main menu item is clicked the accordion opens up to show a submenu with icons exactly like the parent menu item. I am using an unordered list for the sub-menu. I am having 2 problems: 1.) When the accordion opens up, the area where the sub-menu is takes up only half of the area.
Display dialog while page is loading
Hello, I want to display a dialog with a busy indicator on it while my page is loading. Then, when the page is fully loaded, I want the dialog to disappear. Using output buffering, I can flush the buffer containing the code I want to display then continue with server side processing. I put the following line in my code but the dialog doesn't display until after the whole page loads. <body> <script> $("#progressdialog").Dialog(); </script>I'm loading the jQuery scripts in the head section which is
How to edit an existing theme?
There does not seem to be any way to edit a theme once I have created it. It would be very useful to be able to save a theme as a text file e.g. fwDefault=normal fsDefault=1em cornerRadius=3px bgColorHeader=cccccc ... and to be able to modify this and regenerate the CSS. This would enable be to iterate the theme design. As it is, at best I can do is to save the URL (which is just some hex sequence).
Trying to develop a rating system with drag and drop
Hello, This is my first time using this feature, and I'm afraid I'm a bit lost. I'm trying to develop a solution whereby you can drag 6 divs onto a bar, and depending where you place the item on the bar it will recieve a rating out of 100. Here is an image of what I would like; Here is a plnk of my progress; http://plnkr.co/edit/wSS2gZnSeJrvoBNDK6L3?p=preview So I guess the easiest way for this would be for me to list my problems, and then I can update as I figure them out/someone else kindly offers
Combine Jquery UI Accordion and Tab Widgets
I am just starting with JQuery and am trying to combine the accordion and tab widgets. I have tried figuring it out myself but can't seem to quite put my finger on it. Any help would be very much appreciated.
problem with cropping Jquery script .
$(document).ready (function (){ $(function (){ var imgfulldivtop = $(".imgfulldiv").position().top; var imgfulldivleft = $(".imgfulldiv").position().left; $("#croptool").css("top",imgfulldivtop + 50).css("left",imgfulldivleft + 50); $("#croptool").resizable({containment:"parent"}); $("#croptool").draggable({containment:"parent"}); alert($(".imgfulldiv").position().top); $("#cropit").click ( function (){ var imgfulldivtop = parseInt($(".imgfulldiv").position().top); var imgfulldivleft = parseInt($(".imgfulldiv").position().left);
I want a calendar that allows to select the month and year
Hello Excuse my english. I developp a website. I want a calendar that allows to select the month and year. I want this type calendandar : But in my website, i have this calendar (it is difficult to select birthday) :
how to stop triggering href when jquery ui tab get active
how to stop triggering href when jquery ui tab get active
How to make the perfect horizontal menu
Here's a simple way to make a menu like this: CSS code: #menu { overflow : hidden; width : 500px; } #menu > li { float : left; width : 100px !important; } #menu .ui-menu { width : 200px; } JS code: var menu = "#menu"; var position = {my: "left top", at: "left bottom"}; $(menu).menu({ position: position, blur: function() { $(this).menu("option", "position", position); }, focus: function(e, ui) { if ($(menu).get(0) !== $(ui).get(0).item.parent().get(0)) {
jQuery Tabs backgroundcolor issue
Hi jQuery community I’m having trouble changing the color of the background behind the jQuery Tabs. As you see in the screenshot, I managed to change it into blue, but the problem is the white area in the middle. I can’t figure out where this belongs to in order to modify it. Hopefully you guys can help me out here. Thanks in advance HTML file: <body> <div id="toolbar"> Toolbar </div> <div id="tabs"> <ul> <li><a href="#tabs-1">Benutzerverwaltung</a></li> <li><a href="#tabs-2">Beitragsverwaltung</a></li>
How to set global onSelect event on all datepickers?
Hi, I am trying to set global onSelect event on datepicker using setDefaults method, but without success. Below the code I use: jQuery.datepicker.setDefaults({ showOn: 'both', onSelect:function(){alert(2)}, buttonImageOnly: true, buttonImage: 'calendar.gif', buttonText: 'Calendar' }); When I am trying to set onSelect on single element it is work perfect. But I need to do it globally. Thank you for help.
Download separate ui min js files??
Hi, We are used to be able to download standalone ui files (like jquery.ui.mouse.min.js). I can´t find a way of doing this with new version 1.11.4. Everything comes in one large jquery-ui.min.js file. Can someone please guide me in the right direction? Thank you.
JQuery UI Dynamic Loading and using Dialog method
Hi I have a situation that I am end up loading the script dynamically and use its method as shown below, but by the time code for dialog execute the JQuery UI method doesn't get load in the browser. can some one help where the issue in the code?? <html> <head> <title> test Dialog </title> <style type="text/css"> body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; } .ui-dialog-osx { -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
why there isn't a repeat parameter for animation?
if your want make an animation repeat forever you need to call the current function in the callback of the animation so in this case,the call stack will quickly extend it seen that this is not a good strategy
After scroll page in ionic jQueryUI .draggable function not reverting on right place
Hello , My name is Ashish kumar .I am facing issue with jquery UI .draggable method .when page in not scrolled down my draggable element is reverting on correct place and same for drag .but when i am scolling down the page little bit,revert is not happening in correct position.Please Help me. I am using :- jquery2.0.js, jquery.ui.1.11.2.js, Ionic ,cordova(for android app)
themes and webpack
Hi, I'm using webpack with JQueryUI and it only downloads the base theme. To use the smoothness theme I had to manually add it into the jquery-ui node_modules. Should I be able to select this as part of webpack? Thanks David
Position option in jQuery UI menu: y axis can only be centered (top/bottom don't work). (Bug?)
I'm using jQuery-ui 1.11.4. I've set up a menu to run horizontally across the top of the screen (by floating top-level li's to the left). The submenu default position is "my top left at top right". I want it to be "my top right at bottom right", so it won't interfere with movement in the top-level menu. When I specify this (or any other value), the y-axis is always "center". I've tried using various pixel adjustments as well, with no change. Sounds suspiciously like a value is being set to
Accessing dynamically generated dialog using JQuery
Hello Everyone thanks in advance. I am initiazializing a dialog on the fly using the following code: $("<div id='timeOffDiv'><div id='timeOffDivInner'>loading....</div></div>").dialog({...options go here....}); I use this often in my app and it works well..usually on open, I populate the content of the dialog dynamically using ajax. later, based on user controls, I need to change the dialog buttons, and I use the following code: $('div#timeOffDiv').dialog('option','buttons', [ { text:
Why logging the textcontent makes it go to the scrollbar when scrollbar is not pinpointed to in the codes?
Hi Folks, How are you? I wish you are fine. May I seek your inputs as I am stuck with something below? Refer to the following html codes, and what I don't understand is why clicking on the last button, ie 4th button, which would print the text on the button to the log would actually get transferred to the scrollbox. Because clicking the 4th button merely logs the textcontent, but does it specifically identify the scroll box as the area to dump in the text? Yet it works, astonishingly. click(function
faster use of jquery-ui via class iteration
I found it a bit of a hassle to "register" every div that I want to use with a jquery-ui widget. So I wrote a little bit of code. Basically, every widget type gets a class name. For example: if you have multiple buttons you dont have to write " $('#id1".button(); $('#id2".button(); $('#id3".button(); etc anymore. You just add the class "btn" to any div in your html code and my code does the rest. <div class="btn"> <button onlick="">Button</button> <button onlick="">Button</button></div> Widgets
dynamic drop event is not triggered on droppable
I have this piece of code. The problem is that the drop event never called.. What could be the reason? I want to be able to drop the element just after the target element is initialized as droppable. $('.draggable').draggable({ iframeFix: true, helper: 'clone', revert: 'invalid', drag: function (event, ui) { externalIframeContents.find('.getting-hovered-by-helper').css('box-shadow', ''); externalIframeContents.find('.ui-droppable').droppable("destroy"); var m_ui = ui; clearTimeout(timer); timer
Drag from sortable to sortable
Some helpful member in this forum provided me with the following: * Having sortable rows inside table, with different sections (made with tbody) * Save the reordered rows in local storage. I'm very happpy with the solution. Now I have created a second table, with the same structure. So I want to drag rows from "Table Sortable 1" to "Table Sortable 2". I have made some efforts doing this, but the problems that occurs is the following: 1. When rows are dragged between the sections of Table Sortable
Can´t submit form content of a jQuery UI modal windows
I like to use the jQuery UI modal dialog, to create new users in a database by using php code. I get the modal code example from the jQuery UI page and the form is opend in the modal window. The orignal code example just adds the form datas into a table on the page with /$( "#users tbody" ).append... and so on. But I need to submit the form datas to a php file. So far so good. I thought, okay I´ve just to replace the append code part with $("form#modal-form").submit();and it´s should be working.
Want to use jQuery UI Widgets in Wordpress but don't know where to put the code/function
Hi I have installed jQuery UI Widgets in my Wordpress site. I can see all the script in the page source code. While I can see the code " jQuery(document).ready(function($){ //Add jQuery code here…}); " in the admin page of the extension with all the possible effects, I can't figure out where to put that code to make it work. I have then try it with jQuery(document).ready(function($){$( "#accordion" ).accordion();}); I have tried all day to make something appended. I've tried to put it in the function.php,
Reordering rows as well as drag them to another target
I have one table where I'm reordering rows, then I have added a second table where I want to drag n drop rows from table one. As for now I can drag rows from table 1 to table 2, but then the rows is moved from table 1. What I want is a clone, so that all rows still remains in table 1, and only a copy is made to the targeting table 2. Can I have both? Reordering rows in table 1 and still be able drag a copy to table 2? I guess the starting position (table 1) won't know if I'm just gonna reorder the
Next Page