Autocomplete "problem"
Good morning, I have a simple page with a jquery autocomplete which calls a php file. It works fine. The problem is that sometimes the sugestions are too many, so the dropbox extends to the bottom of the page (the user has to scroll the page - a lot). Is there a way of defining a smaller dropbox with some kind of scroll?... Or placing the results in another area? Sugestions are welcome. Kind regards Miguel
Make controlgroup radio button look like buttonset
Is there a way to remove the circle in radio buttons used in controlgroup? I'd like to upgrade from 1.11, but it suddenly makes all of my old buttonset radio buttons much larger and uglier :)
How to Make jQuery UI Slider Smoother when the Step is 0.25
I know that we can change the step in short distance between min and max and Math round the UI value to create smooth sliding like step: .0001, ... $(".value").text("slider value: " + Math.round(ui.value)); but this is Ok when the step is 1. How about this case which is 0.25. Can you please let me know how to make the slider smooteher $( function() { var handle = $( "#custom-handle" ); $( "#slider" ).slider({ min:-12, max:6, step:0.25, create: function() { handle.text( $( this ).slider( "value"
showing an alert when the element is dragged and placed outside of parent
Hi, I am using jquery UI to make the soting but i am missing a piece of information here when >> 1. i want to move the childrens which are inside a parent - works cool 2. I cannot move childrens to different parent, i should be able to show an alert message: - This is not working Here is my Code: $('tr.childrow').mousedown(function() { var rowID = $(this).data('answer-id'); siblingRow = $('tr.childrow[data-answer-id=' + rowID + ']'); /* Hide rows that should not be sortable */
Post bock inside a third nested accordion panel will shifts to top 1 child panel
Hi All, I need some help regarding jQuery Accordions. i have developed an .Net web application using jQuey and CSS, application format looks like below <div class="accordion"> <asp:Repeater ID="repAccordian"> <h4 style="text-decoration: none"> ....... </h4> <div> some asp controls <div class="accordion"> <asp:Repeater ID="repAccordian1"> <h3 style="text-decoration: none"> .......
jQuery awesomplete autocomplete plugin
Hello, This is not directly related to the jQuery autocomplete. I am using something similar that I have found a little simpler to use as far as initial set up goes. I have everything working but I am needing some guidance on how I can have a user type something into a search input, the user only sees the label if you will but upon enter or button click it takes them to the corresponding URL. My data structure example: { value: 'Google', env: 'Prod', url: 'https://google.com' } Expected result:
ui-icon-triangle-1-s missing
I am using jquery.ui.combify to display combo boxes. In a test programme the south-pointing arrow is displayed as normal but when integrated into the live programme the arrow is missing even though the functionality works. I am guessing that I have a missing library or an old library. Any advice is appreciated. Thanks My header information is as follows: <script src="includes/jquery-3.2.1.min.js"></script> <script language='JavaScript1.1' src='scripts/ap-base.js'></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
Item ID lost after drag & drop
Hello, I try to create a drag & drop for my website since 4 weeks and I have a prob with the value of an item ID. I have 2 sortables and 3 droppables in a table. There is no problem when I drop an item between the 2 sortables. Each time the ID value is OK. If I drop the item in a droppable, no problem too. Same when I drop Inside all the droppables. But when I drop from a droppable to a sortable then the ID value is "undefined" You can see my code here : https://jsfiddle.net/cbh8anuL/12 Please can
How to Add Custom Increment and decrements Counter in jQuery Ui Slider
I am trying to increase the width of an element (.inner) using jQuery Ui slider. This is somehow working fine but I need to keep the center of the inner always in the center of .wrapper. so I think I need to add negative values for top and left but I do not know how to achieve them. Do I have to create two custom counter there or is there any better way to achieve this? Here is The Demo $(function() { $("#slider").slider({ range: "max", min: 300, max: 1000, value: 1, slide: function(event, ui) {
Is Jquery UI 1.11.4 EOL?
Is Jquery UI 1.11.4 EOL? Should I migrate to 1.12.1.
JQuery dialog box not showing close icon
Hi All, I am using JQuery dialog box. It is not showing close icon. Below is the code: open_menu.js ------------ <script> $(function () { $("#menu-dialog1_UC1").dialog({ autoOpen: false, width: 350, height: 250, title: "Menu for UC1", position: "center" }); $("#open-menu-dialog1_UC1").click(function () { $("#menu-dialog1_UC1").dialog("open");
jQuery draggable element detaches from resizable parent after drag
I have this: <style> #pic_wrapper{ display: block; position: relative; padding: 0; } #selected_picture img { width: 100%; height: auto; } .pin { display: none; position: absolute; height: 50px; width: 50px; padding: 0; margin: 0; } </style> <div id="pic_wrapper"> <div id="selected_picture"> <img src="map.png" /> </div> </div> and append markers to the image with: <script type="text/javascript" charset="UTF-8"> $(function(){ $('#pic_wrapper').resizable(); $('#selected_picture').on('click', function(e){
Creating a "spotlight" effect with draggable
Hi all, I'm aiming to create a 'spotlight' effect using JQuery draggable. For example, the area that is draggable reveals the image underneath it much like a 'spotlight' while the rest of the image remains black. Hope that makes sense. I've figured out how to use draggable but not sure if it is possible to tweak to do this. Thank you, Alex
two jquery-slider variables via ajax in php
Hello, I have two jquery scripts. These are two range slider which creates values between 1 and 25 (level) and 1-4. (qualityId) I send the values of these two sliders via ajax in the php_file.php. I need the values of the sliders get changed dynamically in a link since I need to create a link to a json from where I echo out some informations via php. So everytime a slider gets moved I want the both values gets changed dynamically and independently in a link without a page reload. The problem At
submitting a form with tabs
Hi, The following code contains tabs linked to php pages. Each one of those tab is independant from each other and I would like to save each information independanltly. I meet the following problem : My Form variables are empty when I check the values in the ajax call. Can someone help me solving this problem ? Here is the code <link rel="stylesheet" href="css/jquery-ui.css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery-ui.js"></script> <?php include 'utils.php'; ?> <form
Disabling a single thumb on range slider
Is there any way of disabling one of the thumbs on the range slider?
Dragging objects onto an image in specific locations on that image
This is possibly the most basic question a newbie can ask but I've spent a few days (obviously looking in the wrong places) looking for such: 1. My question does not concern the dropping of a file onto an image for the purposes of up/downloading the file or exposing a form; 2. I need to be able to drag objects onto an image as a dropzone - each specific object dragged and dropped on a specific part of the dropzone image. I've seen examples of objects being dropped onto a logo but I'm not sure where
How to set a headline for JQuery autocomplete
For my autocomplete I sort my results into 3 sections "title", "company", "tag". I would like to have a headline for each section: What I have: What I aim for: Here is my code: ... .autocomplete( "instance" )._renderItem = function( ul, item ) { if(item.option==="title") { return $( "<li>" ) .append( "<div><i class='fas fa-tags'></i> " + item.label + "<br> title </div>" ) .appendTo( ul ); } else if(item.option==="company"){ return $( "<li>" ) .append( "<div><i class='fas fa-building'></i> " + item.label
Get the value attribute of the selected LI element in jQuery UI menu
Hello fellow jQuery users, I have prepared a simple jsFiddle demonstrating my 2 problems: For that I have taken the jQuery UI menu with categories example and have just added VALUE="some_number" attribute to each <LI>-element: <ul id="menu"> <li class="ui-widget-header"> Category 1 </li> <li value="1"> Option 1 </li> <li value="2"> Option 2 </li> <li value="3"> Option 3 </li> <li class="ui-widget-header"> Category 2 </li> <li value="4"> Option 4 </li> <li value="5"> Option 5 </li> <li value="6">
TABs vs Layout
Hi everyone, I am using the TABs widget tool and would like to achieve the following. Currently, I have! <----------- -----------------> <----------- My Header -----------------> This looks good, fits nice, etc... <------------------------------------------------------------> <----------- ------------------> <----------- My Tab area ------------------> This looks reduced.... <------------------------------------------------------------>
I want to change the value of SELECT, the remote access dont change, why the error?
$(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); $( "#log" ).css("width","50px"); } var file='../ajax/'+Change_ItemToBeRead(); $( "#birds" ).autocomplete({ source: file, minLength: 1, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.label + " aka " + ui.item.label : "Nothing selected, input was " + this.label ); $('#code').val(ui.item.id); } }); }) function Change_ItemToBeRead()
I have a question about autocomplete，I want to change the value of SELECT, will change the remote access to the file, why the error?
<select id='sd'>
<option value ="111">aaa</option>
<option value ="222">bbb</option>
<option value="333">ccc</option>
<option value="444">ddd</option>
</select> <input type='text' id='mecode'> <script> $( function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } var file=("#select1 option:selected").val();+'jsp' $( "#mecode" ).autocomplete({ source: function( request, response ) { $.ajax( { url: file, dataType: "jsonp", data:
This code breaks from jQuery UI 1.8.21 to 1.8.22
The value is written to a text field when it changes. The thing that breaks is that when the year selector is changed it no longer updates the year in the text field. Code: $(function() { $('#datepicker1').datepicker({ changeMonth:true, changeYear:true, yearRange:"-100:+0", dateFormat:"mm/dd/yy", onChangeMonthYear:function(y, m, i){ var d = i.selectedDay; $(this).datepicker('setDate', new Date(y, m - 1, d)); } }); });
jQuery 3.3.1 and ajax tabs
Hi It does not seem that Ajax Tabs jQuery-UI works with jQuery 3.3.1. Is it posible to make Ajax tabs work together with 3.3.1?
Make dropped element again droppable indisde Iframe using Jquery
Hi guys. I trying to develop an web editor tool using Iframe and Jquery. I am trying to do drag and drop inside Iframe. What I want is that I drag and element into the Iframe and I want that element to be again droppable area inside an Iframe. As simple I want all elements to be droppable inside an I frame. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>Play It</title> <link rel="stylesheet"
Draggable / Droppable cancel action with ESC key
Hi, I did a lot of research the last couple of days but can't seem to find the solution... # Question 1 After I clicked the button of 'move' the <td> becomes draggeble. I listen to the ESC keyevent and then cancel the draggeble option (e.g. 'destroy'). In a dragging action of the <td> (after a click of the move button) I also listen to a ESC key; and the revert the action. The destroy or disable does not work and unfortunately the Droppable still fires. Because of the two listeners this also is a
Error with RSjQuery while using Microsoft.ReportViewer.Webforms 14.0.0.0 from VS 2015 and the toolbar for ReportViewer control is disabled
I am working on a ASP.Net website (C#). I have installed SQLServer.Types (version 14.0.314.76 from NuGet) followed by Microsoft.ReportingServices.ReportViewer.Webforms 14.0.0.0 (version: 140.802.134 NuGet) . I have followed all the steps (to add the control to a web page) and make sure web.config has the related entries for both ReportViewer.WebForms and ReportView.Common dlls, httphandlers, handlers etc. But, when I try to run (from Visual Studio 2015), it breaks at code line // Setup responsive
Leaving gaps in a sortable list
Hey, I am stuck in an epic conundrum. So I am trying to make a board with sticky notes. The notes can go from one column to another and can also be sorted with columns. This is all easily achievable by jQuery Sortable. I can connect as many lists I want and sort them to my hearts content. But there's an inbuilt behavior I want to override. When I remove an item from a list, the list automatically sorts itself and I want to stop it from doing that. Here's the JSFiddle As you can see, I have three
How to format JSON data
Hi there, Here is my jQuery function that returns an array of emails. Autocomplete shows the returned array of emails as I type in a text box in a form of bullet list. How do I change the form so that I can get rid of bullets. Here is my code <script> $(function () { $('#Email').autocomplete({ source: function (request, response) { var options = {}; options.async = true; options.url = "/Home/GetEmails"; options.type
jQuery Tabs
I've searched high and low for a good Tabs code snippet and I keep coming back to the jQuery version which works OK (up to a point) but is missing a crucial feature:- I want to be able to access an anchor on a Tab that is closed. (This means that when clicked the tab opens and the page is scrolled until the anchor is at the top of the screen. Exactly as if the anchor was on a normal page. I've managed to open a closed tab from an external link but have not managed include the scroll to the anchor.
Out an element with droppable
Hello! I have some images I put through draggable in my droppable. When I move one this image out, it destroys another image... Here my JSfiddle : http://jsfiddle.net/xpvt214o/174732/ You move a blue square to Section 1, if you drop out it disappear. Everything working fine except when you drop a blue square in the droppable inside the grey part, it break another blue square. What I want is that : if dropped on the grey part, it comes back to it's original position I tried many things but I don't
If within iframe makes parent page jump to bottom
go here on an Iphone: https://jqueryui.com/slider/ jumps you to bottom of page. is there a solution? this has been out there for a while it seems. Thanks.
How to use datepicker locally
The only way I can get datepicker to work is if I have it defined like this; <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> I need to be able to reference it like this;<link href="resources/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"> <link href="resources/jquery-ui/jquery-ui.css"
Jquery-datatable script doesnt work after implemtation of Mapael Map
I’m trying to implement the following template for a world map : https://rawgit.com/neveldo/jQuery-Mapael/2.2.0/examples/basic/legend_plotted_cities_areas.html into a existing template with jquerry datatables. But I’ve only managed to load one of the two functions (map or table) on the same html page. How can I run both functions on the same html page? </div><!-- br-mainpanel --> <!-- ########## END: MAIN PANEL ########## --> <script src="../lib/jquery/jquery.js"></script> <script src="../lib/popper.js/popper.js"></script>
Icons missing/not loading in Shopify
Hi, I have a working jquery UI accordion on my shopify site, except the icons are not loading. The files appear red in my inspector. I don't know how to go about resolving this. Any help would be greatly appreciated! Here's my page: https://caveleather.com/products/two-stitch-black-horween
gsgird filtering
I am rather new to this grid so I am reaching out for some guidance. Is there a way to do a wildcard filter. Fiddle Project Use the "Item no", enter "5", it comes up with nothing, enter "51632" and you get a result.
Dialog close button
I have a border around my close(X) I tried this suggestion with the style with no luck. .ui-dialog-titlebar > .ui-button { border: none; }
jQuery UI Tabs to Accordion Conflict
Been writing about it here . I am using jQuery UI tabs for desktop and want it to convert to an Accordion display for tablets and mobile devices. The Easy responsive Tabs to Accordion script I am using is showing the first accordion opened and styling is OK, but the arrow down does not trigger the proper adding of active tab to the accordion in question so the display stays none instead of block and the content remains hidden. I was wondering if there is a way to unbind or stop uit-tabs from adding
DateTimePicker summer schedule
Hello, good afternoon, I have a problem with the DATETIMEPICKER component of jquerry, apparently it is a functioning component that I have not been able to debug. The problem is the following: I have the instantiated component with a date, (for example 12/04/2018 02:01 am), the component also has as the minimum date and time the same data that is, (12/04/2018 02:01 am) at the time of opening the component and selecting the same dates in automatic puts me 12/04/2018 03:01 am which is wrong since you
Close button shows two icons where one should be
I am working on a Oracle Apex model window. I notice that the normal close button has en extra icon next to it. So I changed the "ui-icon-closethick" to "ui-icon-alert". It seems its also selecting the next icon ( in this case: "ui-icon-info" ). Could someone explain how to solve this? Button text: <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="Close"> <span
Next Page