Menu Accordion - Expand panel of the link
Hi everyone ! I'm new on that forum and I hope you could help me ! I created a navigation menu for an e-commerce website. My accordion is working weel ! I would like that when we click on an item from the third section, for exemple, when my page reload to that link, the third section panel is "open". I can't do that with the active : 2, because it has to depend the url, is that clear ? Please see my html construction : <div id="accordion" style="background-color:#fff; padding:10px 0;"> <h3 class="menuitem">Animaux
Autocomplete Use
Wondering if Autocomplete-Custom can somehow be used more than once on a single web page without retrieving pre-populated var projects from each other. Reason: I am looking to use Autocomplete as a text replacement in different paragraphs in web pages. I am finding the last instant of Autocomplete is populating the first. If multi-use is possible, how wold one "open and close" the each instance of Autocomplete?.
jquery Datepicker is not giving desired format for date
Hello, <script> $(document).ready(function() { $(document).on('click', '#enddatepicker', function () { $('#enddatepicker').datepicker({ dateFormat: 'yy-mm-dd' }); $(this).datepicker().datepicker( "show" ); }); }); </script> <input type="text" id="enddatepicker"/> It is giving me date in mm/dd/yy format but my desired format is yy-mm-dd. Regards Deepak Bhatua
Autocomplete with live links
Hi all, new here and new to JQuery, JS... What brought me here is Autocomplete jquery ui post/thread... The html at that link is below. What I was looking for is a similar search tool which allows me to pull working/live Ads-Text-links from some sort of file(s), of which house each affiliate programs ads, Instead of the pre-populated information. My knowledge here is light but I understand html for the most part. I can only assume those Ad-text-links would be within a CSS/text file that I can upload
.controlgroup() doesn't apply correctly
I have a w2ui layout -> jquery-ui accordion in left panel -> generated form with inputs/radios in the content section. When I do .controlgroup() on a jquery div, it doesn't apply correctly. But this happens only If there are several collapsible panels (with content->form->radios) in jquery accorion. If there is only one content panel in accordion, .controlgroup() applies correctly. The in-correctness is in visual appearance of radios. I really don't have much time to dig into source of a problem
datepicker prev and next button icons don't show up
The buttons work and the tooltip shows but the little icons don't show up. I created a stand-alone page with nothing on it other than a datepicker and the icons show up there, so something else on the real page must be messing it up but what?
How to Reset form
In my form I have several jqueryui selectmenus and autocomplete and a date picker. How could I reset them all together? I'm not able to figure that out. Could someone please assist? Thank you. $(document).ready(function() { $('#reset').click(function() { }); });
Dealing with spaces in selectmenu options
I'm using a selectmenu to let people pick an item from a long list of options whose values can include spaces. They should be able to start typing a value and have the selectmenu automatically highlight the first matching option. So far so good - that is the standard behaviour. But when typing the name of an option with a space, the space is interpreted as a keyboard interaction to select the currently highlighted option. Consider the standard examples here: https://jqueryui.com/selectmenu/#default
Date picker pagecode ISO-8859-1
Hello, I'm using Portuguese pagecode: <?php header("Content-Type: text/html;charset=ISO-8859-1"); ?> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> The calendar apears like this example. How can I put this correctly? regards Jorge Barosa
Setting inner div to width more than 100%
I have a jQuery UI modal Dialog with the opening <div> being as follows: <div id="ticket_dialog" data-tooltip="Ticket Details" title="Ticket Detail"> The dialog init is as follows: $("#ticket_dialog").dialog({ autoOpen: false, modal: true, position: { my: "center", at: "top", collision: "none" }, collision: "none", height: 700, width: 600, minWidth: 600, resizable: true, alsoResize: '#ticket_paths' }); It decorates to this: <div id="ticket_dialog" data-tooltip="Ticket Details" class="ui-dialog-content
jQuery UI Sortable disables scroll on Android
I use jQuery UI Sortable at my web. The problem is that the region of a sortable element lose touch responsiveness on Android devices, so the page becomes unscrollable. It occurs even if the Sortable function is not active. I looked into jQuery UI source code and found _refreshItems function is triggering this problem, but cannot figure out how to fix this. This problem is reproducible on Android devices and Chrome's Developer Tools with the mobile emulation enabled. It is not reproducible on iPhone.
VB HiddenField loses value after setting value in Javascript [jQuery dialog]
I am currently struggling with the implementation of the jQuery Dialog in an Visual Basic Web Application. In the following code there is a Button, that forces a jQuery dialog to open. I just want to access the result of the dialog (Yes/No) in the Visual Basic Code. This is my VB-Code: <input id="hfSandbox" type="hidden" runat="server" /> <asp:Button runat="server" ID="btnSandbox" OnClick="btnSandbox_Click" Text="Button" /> <div id="dialog" >Everything OK?</div> With following Javascipt code i want
How to increase the number of tabs?
Could someone please have a look at the code below I have edited from JQuery to make a glossary of terms and tell me why the definitions for the terms after the first 9 do not show when I click on the tabs? Many thanks for any help. I also notice that the text sometimes spills over the boundary of the box which looks messy. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Tabs - Vertical Tabs
Sortable with dynamic containment doesn't reset
In the following jsFiddle, I have a sortable table with some items that must remain in the table and others that can be dragged out (to a connected table - in the real application - omitted here for simplicity). The helper option is set to a function that examines the row as the drag begins and sets the containment option appropriately. For the most part, this works. https://jsfiddle.net/cekyfhvj/1/ Following the instructions above the table, you will see that the "uncontained" rows can initially
Copy & Drop instead of Drag & Drop
I refer to http://jsfiddle.net/DKBU9/14/ I want to drag and drop an element from one table to the other but leave a duplication of the original in its place. At the end there should be two similar elements. Is it possible and how? Thx I. Lesher
Autocomplete with categories, allow multiple values, split by ','
I'm interrested in merging both "multiple" and categories example from the documentation but the approach of handling data in both example is different and i'm strugling a lot for days now trying different possibilities. First my data is fetch from Postgres DB and stored into the variable data with: var data = <?php echo json_encode($liste_terri); ?>; The data is formatted with: while($row = pg_fetch_array($result_t)) { $liste_terri[] = array( 'value' => $row['nom_territoire'],
How to allow user characters in a datepicker input
Is it possible to have a datepicker and allow users to add characters o the input?
UI Dialog resize Bug!!!
1. visit http://jqueryui.com/themeroller/ 2. Mouse click "Open Dialog" Button. 3. Resize the dialog (just change a little size) several times, you will find that the dialog content area becomes smaller, and the scroll bar appears.
How to open multiple modals in the same window
Hello, I'm working on an MVC application with jQuery and Bootstrap plug-in's. I'm stuck with a scenario where I need to show multiple views inside same page(side by side). I was thinking of a modal but I'm not sure how to load two popup windows/modal side by side. Below is the link to HTML (which in practice is loaded pro-grammatically using jQuery) where I need to select checkbox's and when "Submit" is clicked, respective links (google/bing) should open inside same window as pop-up (side by side).
Jquery ui Autocomplete how to add pagging on scroll and loading icon on untill result from api done.
I am new to jquery.I have implemented jqueryui autocomplete in my page set ui for item on renderitem method. I am loading data using ajax and that returns me 1 items at a time. parameter using to get data from api is pageIndex and search. now My question is on first call I am able to get first 15 items but now I need when I scroll down and reach to last item in autocompelete mean 15 item next call gone to api and this time pageindex should be 2 and so on each scrolling with infinite scrolling and
jQueryUI draggable - text leaves “trail” when dragged in Safari
Im using the draggable function in a script where the users can move divs that contains characters. Pretty simple really, and it works in all browsers - except Safari on Mac. In this browser the text leaves a "trail" when dragged, just like this: Even more confusing is that the "trail" only is left when you drag the text to the left (not up, right or down). And it does not leave this trail if I drag a div with an image inside. Last info: after about 10 seconds of not moving the divs anymore the
jQuery UI Menubar and anchors with a target attribute
I did a search for "menubar target" and nothing came up. Is anybody else having problems with using the jQuery UI Menubar with anchors that have a target attribute? This is what I basically have for the HTML: <ul id="menubar"> <li>Stuff <ul> <li><a href="http://www.google.com" target="_blank">Google</a></li> </ul> </li> </ul> And for the JS: $("#menubar").menubar(); The expected behavior is for the anchor to open the google.com page only in a new tab, and to leave the current tab
Label button with its keyboard shortcut
I know buttons could be labeled only by plaint text, but I want to label them with the letter that is their keyboard shortcut underlined. For example: Export. I have done this for radio buttons passing for example <u>L</u>ist to have List. Besides the ugly workaround to label buttons like this: (E)xport, is there any suggestion how to obtain the underlined letter? If not, where should I enter a feature request? I'm running latest jQuery UI version on Windows under Chrome. Thanks for your help! mario
JQuery UI datepicker doesn't show prev and next arrows.
Hi, My jQuery UI datepicker doesn't show previous and next button on the calendar. I am using this configuration: <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <link href="https://www.vid-sandbox.com/Styles/dist/themes/default/style.min.css" rel="stylesheet" type="text/css" />
How to resize one border of a DIV?
Hi, Is it possible to resize only one border? Say I have a div, I would like to resize its right border only. Can I do this with .resizable()? If not, what's the best way to achieve this? Thanks,
How to disable "today" in jquery ui datepicker
Hello, I have installed jquery ui datepicker and I am having a problem, I need to always disable today's day because it is about a manufacturing website which cannot deliver on the same day. My current at the moment disables tuesdays and sundays, any idea how to disable always the current day. //Checkout DatePicker function checkoutdisableddays(date) { var day = date.getDay(); return [(day != 0 && day != 2)]; } $('#datepicker').datepicker({beforeShowDay: checkoutdisableddays,dateFormat:
this.menu.element = null
Hi, I am new to using jQueryUI and I have come across an issue in a previously created code. I am using jqueryUI 1.8.20 to populate an autocomplete box. When the code hits the line this.menu.element I get an undefined value. The code worked fine up until a few days ago and I can't decipher what I have done to cause the issue, any help would be greatly appreciated. The snippet of code that is throwing the error is: _suggest: function( items ) { var ul = $this.menu.element .empty() .zIndex( this.element.zIndex()
Dynamically Change Cursor Background Color
Currently I can change my cursor when I hover over certain DIVs by using the code snippet below. $('#myDiv').css( 'cursor', 'url(myCursorImage.png), auto'); But suppose I have an image of an arrow with a clear background that I want to use for my cursor image. Is it possible to dynamically change the background of this image using css?
input text lose value when window.location.href is called
Hi, I have an input text and button search, when a user type a text a script redirect the page with the text as parameter, but after the redirect (in the same page) the input text lose the value, I tried to reload value from paramters with no luck Help please ? this is my code : <script type="text/javascript"> function RedirectUrlSearch() { var tb = document.getElementById("tbSearch").value; if((tb != null)) { window.location.href="?FilterName=SalesforceCaseNumber&FilterMultiValue=*"+tb+"*"; if
Sliding a Range Slider with a Fixed Range
I have a requirement for a range slider (a slider with two handles), such that: i) the left and right handles can be position independently to specify a range ii) a handle (e.g. in the middle) can be grasped such that when it is moved both handles (and the range they specify) slide together either to the left or the right. This seems to me to be pretty basic functionality, but I have not been able to find any jquery sliders that provide it. Am I missing anything?
Opening A Dialog Near Mouse Cursor
I am trying to open a dialog near the mouse cursor when I click any where in a div with the ID of clickzone. The problem is the dialog opens at the bottom of the div and not near to where I clicked. Please see my script and markup. When the page opens, please click any where in the gray area to test my script.
Fill parent div on drag 'n drop
Hi, i am having a problem with making a div(.drag) take up all the space when dragged and dropped onto another div(#block) http://codepen.io/benasl/pen/qaJBPd?editors=0110 . And when moved out of that #block i need the .drag div to be the size it was before. EDIT////////////// I found this simple example of drag and drop http://jsfiddle.net/wj4ak/5/ however still do not know how to make a div fill the parent div when dropped.
Need help with jquery UI Draggable/Droppable
Hi, I'm having trouble with some drag and drop fundamentals. I want to have 2 tables, the first has source cells, the second table has target cells. I can drag a div from table 1 to 2 and I've got that working. However, once the div is in the 'target' table, If I go to drag it to a different cell in the target table, I don't see anything move under the cursor. Yet when I release the cursor, the item does in fact move. I've got a codepen illustrating this behavior at http://codepen.io/basementjack/pen/EgZWqQ (I'm
jquery ui: checkboxradio CheckBox
Hi. I am using several jquery ui widgets successfully, however I am having trouble getting the Checkbox feature of the checkboxradio widget to work. I can get the Radio button feature to work fine by specifying $("input[type='radio']").checkboxradio();. The docs show using just this statement without the [type='radio']. Do I need to specify a different type instead of radio? (I tried checkbox and that didn't work) The examples also show an additional CSS file called /resources/demos/style.css
How To used double effects In JQuery?
Hello everybody. Can anybody tell me how to use double effects on a dialog show? The first effect I would like to use is scale and the second effect is that it comes from a corner of the page, where the button is located that launches the modal dialog. The same for the hide function. I would like to hide it with scale, which is pretty nice effect, but while scaling it should move out of the page or towards the button. I appreciate the really easy dialog effect definition, but I would like to get
Information about Slide() with sliding effect
Hello all member. 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
jqueryUI example fails on Edge browser
I have implemented the jqueryui tab feature on a key page of my web site and it has worked in the past when I developed the page. I needed to make a minor revision and see now in my testing that it fails with the Edge browser. I went back and copied the sample code to see if there was something in my implementation that was causing it to fail, but the sample also fails now. I am testing on Apache 24, Windows 10 (Anniversary update + more updates) which has Microsoft Edge 38.14393.0.0 & Microsoft
Understanding jQuery Ui Clones
I am a little confused, I thought that once the clone's ID is changed to something different, it is no longer the same as the original. To my surprise the clone id is the same as the original draggable object's id although the clone's id had been changed. Please look at my code below. var uiNewId = "test1"; $("#obj1").draggable({ helper:'clone' }); $("#dropzone").droppable({ drop: function(event,ui){ ui.helper.attr('id', uiNewId); alert((ui.draggable[0]).id); }
popup-alert-window does not pop up
I want that after the button click a alert window pops up. But when i click on the button nothing happens. My Code: <link type="text/css" rel="stylesheet" href="tinymce/js/jquery-ui.css"/> <script type="text/javascript" src="tinymce/js/jquery-1.8.2.js"> </script> <script type="text/javascript" src="tinymce/js/jquery-ui.js"> </script> <script type="text/javascript"> $(function () { $("#btnSave").click(function () { $("#divpopup").dialog({ title: "abc", width: 430, height: 200, modal: true, buttons:
Version conflicts
i an very new to all things HTML and I have been struggling for a few days to get a from to datepicker working. Finally succeeded and then decided I should upgrade to the latest version of jquery as I had started with some sample code that use 1.8. I was able to upgrade to 2.24 but moving to 3.0 or newer created a problem in the test I was creating. I have tried adding the migrate plugin and the problem persists. The offending code is: from = $(this).datepicker(); and I later use the from variable
Next Page