How to duplicate the list bar(instance) in tabs?
Hello members, I'm looking for a way to duplicate the list of tabs (only the visible part) and place it at the end of the tabs container. Basically, I will have two showed lists with same function, one above and one below the panel element). How can I do that? Thank you all in advance for your answers.
jQuery UI Tooltip - Not Working
I am trying to get the tooptip to work when I hover over a span tag, below is the code: <div class="rewards-points"> <div class="price-box"> <span class="price"> You will earn 50 points for purchasing this product!</span> </div> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.rewards-points .price').tooltip({content: 'The amount listed is the number of reward points you will earn by purchasing this product.&nbsp;
How to avoid execution of "accept" function on each droppable element?
Hi, here is example, where each ".plan" can be moved into each ".unit". http://jsfiddle.net/3jvuqdu1/6/ Please drag ".plan#6" (F) from parent .unit (6) to its sibling (5) and see console log. "accept" is executed on each ".unit" - not only on covered by draggable element. Is it a bug or should I find new idea to restrict the set of calls of this function? In real situation I have about 500 such constructed droppables with quite complex "accept" method. It significantly slows down dragging, especially
UI not working on IE 9 , 10 , 11
HI , Our UI is working fine for IE 8 but not on IE 9 , 10 , 11. Some buttons and links are not working. When we click on links or buttons nothing happens and i get error as Unable to get property 'match' of undefined or null reference. No such method 'url' for tabs widget instance. This is what we have query verions in IE 8 .. let me know what to use for IE 9 , 10 ,11 For less or equal to IE8, we are using: jquery-1.3.2.min.js jquery-ui-1.7.2.custom.min.js FOR greater that IE 8 we are using :
Keyboard input with jqueryui autocomplete remote multiple source clears previous entries
I posted this in StackOverflow , with no joy, so I'm asking here as well. I have a jqueryui autocomplete widget that allows multiple entries and pulls from a remote source, and it works perfectly, with one major issue. That issue is that if the user provides keyboard input (e.g., arrow keys or page up/page down keys) to select an item, ALL previous items entered are cleared from the autocomplete. It works fine if the user selects an item with the mouse. It also shows the value, not the label, as
Autocomplete with AJAX and JSON not working?
I'm trying to fill an jQuery Autocomplete with JSON data from inside an Ajax function. This is what my script looks like: <script> $(function() { $( "#autocomplete" ).autocomplete({ source: function(request, response) { $.ajax({ url: "<?php echo $this->webroot; ?>portfolios/ajax_clients_dropdown/"+request.term+".json", dataType: "jsonp", data: {q:request.term}, success: function(data) { response(data);
Mozilla Firefox Release 31.0 and how the jquery ui position method calculates the geometry of the bounding box
I was wondering how the jquery ui position method calculates the geometry of the bounding box for the following html5. def output_text_field(name,fields,size=50): print '<input type="text" name="%s" size="%d" value="%s">' % \ (name,size,fields.get(name,'')) I noticed some difference in the behavior of $('#_test_academic_advisor_name).position( off:'#_academic_advisor_name', my: 'left top', at:'right center') between Mozilla Firefox Version 31.0, which is the current release',
Is it possible that the jquery ui .css property only supports "inline" and "table-cell"?
In jquery-ui.js, I noticed the following code: ------------------------------------------------------------------------------------------------------------------------------- function isFloating(item) { return (/left|right/).test(item.css("float")) || (/inline|table-cell/).test(item.css("display")); } --------------------------------------------------------------------------------------------------------------------------------- Is it possible that the jquery ui .css property only supports
linking to correct section of help file loaded in jquery ui dialog
I have a html help file which I can load in a jquery ui dialog from an anchor tag in a backbone view. Not sure if there is a way to show only the details related to which anchor tag section was clicked. example: help file contains section User Creation User password change In the view if the user click on `User Creation` then i want to launch the jquery ui dialog and show only the `User Creation` details - the user can scroll to other sections if they want to.
jQuery autocomplete using a local json file?
I am trying to create a jQuery autocomplete widget that uses a local json file. The code for my index page is as follows:- <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo</title> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> </head> <body> <p> <label>Address:</label> <input type='text' name='ward' value='' class='auto'> </p> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Please let me know where we can find the position bug fix for Google Chrome.
Please let me know where we can find the position bug fix for Google Chrome. ----------------------------------------------------------------------------------------------------------------------------------------- Ticket #6044 (closed bug: duplicate) Opened 4 years ago Last modified 23 months ago position breaks in chrome Reported by: jogep Owned by: Priority: major Milestone: 1.9.0 Component: ui.position Version: 1.8.5 Keywords: position chrome Cc: Blocking: Blocked by: Description ¶ i try
Ammendment to the autocomplete Ui
I have a requirement for the autocomplete input field can this be done: Supposing i have locations like these: Adana Adana Havalimanı Adana İncirlik Adana Merkez Adana Adana, All Adıyaman Adıyaman Havalimanı Adıyaman Merkez Adıyaman Adıyaman , All Amasya Merkez Amasya Amasya, All Ankara Çankaya Ankara Yenimahalle Ankara Ankara So for the above , if i type in Adana it should bring in the four possibilities next to it and similar for others. Can this logic be
Test if tab is active
I am trying to test when a tab is active. I am not sure if you can do this or not, but I have tried to use .active() as it seemed like it was the only method that might do the trick. However, it does not appear to work the way I had envisioned: if ($('#tabs-4').active('option','active')) I thought this would evaluate to true, however instead it throws an error. Any insight would be appreciated.
Very new to this
Im designing a website though moonfruit and I would like to use the Accordian HTML as it would fit perfectly for what i am doing. The problem is, I cannot seem to change the font or the colour of the text and background, could anyone possibly help. Kind Regards Dave
Using Datepicker on a Turkish Website
HI, What do i need to change when using the DatePicker for a Turkish website? I need the date to be in format ... dd.mm.yyyy . And if the months can be spelled in Turkish as well its better. Does it offer any possibilities from the above? Thank you
autocomplete fill value instead of label on select.. why?
Hi, this is my code: <div class="ui-widget"> <input id="places_autocomplete" /> </div> $( "#places_autocomplete" ).autocomplete({ source: 'http://localhost/nightlife/events/events/get_all_places', select: function( event, ui ) { } }); Don't know why, ONLY when item is selected from returned json data, it fills me up with the item value. This does not happen until all labels are just proposed. Why?
JQUery - dynamic grid
Hi Team, I am unable to show the values into dynamic table. I am sending the JSON object to jsp and the grid duplicate colums. below is my sample code. var dump =""; var $tr = $('#'+tableName).find("tbody tr:last").clone(); $tr.find("input,select,textarea").attr("name", function() {
Draggable with Ckeditor
I have an issue with ui draggable and resiable while using ckeditor. Steps to reduce: 1. I have some images and text in my div and image have draggable and resizable attributes. 2. On this div, I have implemented ckeditor. I am able to edit my text and images, but, after editing, the images and resizable functionality not working. please gudide
How to add filter AND text to a hover event?
Hi, I'm making a sort of "splash page" for a website and need some help. I've created an event that blurs the image when the mouse hovers in and out. Now all I need is some code that will put the word "enter" over the blurred image simultaneously. I'm new to jQuery. I've tried many different things but can't get it to work. Any help would be really appreciated. Here is the markup and script as it currently stands and at the bottom is the image blurred and unblurred. HTML: <div class="enterPhoto">
Accordion Click Event
I have an accordion with a asp.net listview in the first header. I do not want to have the listview loaded when the page loads. I want to click the header and then run a function in my code behind that queries the database and binds the listview and then display the listview. I think the click event should be used or the changestart event. I just don't know how to achieve the result I want.
Accordion Active: false but changes to active: activeIndex when clicked
I am using an Accordion and would like for all sections to be collapsed when the page opens. I have code that will do just that. Inside the first section in an asp.listview with paging. I do not want the section to collapse and reopen when I am paging. This code works great for the page opening with all sections collapsed but collapses and reopens when paging: $(function () { $("#accordion").accordion({ collapsible: true, autoHeight: false, active: false, heightStyle: "content" }); });
Datepicker date object contains value one month less than selected
JS FIDDLE HERE: http://jsfiddle.net/vhabhsrosed/jawc1uuj/ I am using the datepicker and it displays the correct date in it's window but the date object has the same date but with a month prior to the date actually selected. I can't see what I am doing wrong in the code. I tried using the object.setDate "+1m" to correct but probably don't know how to do this. Can anyone see what is wrong with my code that results in this. if I dispaly 10/28/2014 in the datepicker window using: var PassDate
Centering Draggable Element in Dropable After Drop in jQuery UI
Can you please take a look at This Demo and let me know how to force draggable element to be centered inside the droppable after drop? $(function () { $('#draggable').draggable({}); $("#droppable").droppable({ drop: function (event, ui) { $(this) .find("p") .html("Dropped!"); $('#draggable').css("margin","2px"); } }); }); As you can see I already $('#draggable').css("margin","2px"); tried but this is not doing
Automatically unfolding jquery ui menu structure
We have an application that uses a jquery ui menu structure with a top menubar. We had hoped to establish clickable menu paths in our documentation that would allow our users to see the location of certain features. Something like Menu > SubMenu > SubSubMenu > Feature when clicked would unfold the menus to show where Feature is located. We have tried to achieve this by triggering mouseenter and click events on the menu items but nothing seems to work. As a simple example, the code below is designed
jquery ui dialog first time open - close events
Is it possible to add first time open event on dialog widget? Sometimes we need to do something only the first time dialog appears. I know we can do it easily via javascript using variables - data check e.t.c. but it would be nice and easier if it was a core feature. The same event for close would also be useful ( first time close event )
jQuery UI Resizable for 'splitter' UI?
I want to use the 'Resizable' interaction for controlling the widths of a group of cells; ie, if one cell is made smaller, the others gain size in relation to the overall width. I believe this is called a 'splitter' UI. I've seen plugins like this (Resizable table columns plugin) - but I don't want to base it on table elements and I would rather use jQUI. Is this possible or discussed before? Many thanks!!
[SORTABLE] make orderable groups
A sortable help, i have this : as you can see I have two different classes, "item_1" and "item_2," I wish the "item_2" are sortable among the "item_2" and "item_1" between "item_1".. without dividing into different wrapper !! all with this dom model ! THZ VERY.. <div class="cont"> <div class="item_1"> <div>ciao</div> <div class="cont"></div> </div> <div class="item_1"> <div>ciao 2</div> <div class="cont"></div> </div> <div class="item_2"> <div>o1</div> <div class="cont"></div> </div> <div class="item_2">
Modal dialog button does not work in IE10 if some control has focus outside of the screen
Some bug with button in IE10 (Last versions of JQ and JQUI) - if some control on the modal dialog has focus outside of the screen, button does not work - instead dialog scrolls to that control and removes the focus. After that the button works (Until you set the focus again). How to avoid this? <html> <link rel="stylesheet" href="Plugins/ui/jquery-ui.min.css"> <script src="Plugins/jquery-1.11.1.min.js"></script> <script src="Plugins/ui/jquery-ui.min.js"></script> <script type="text/javascript" language="javascript">
I am very new to web development share your ideas here . tell me How to validate each tab in jquery ui tabs
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Tabs - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <meta name="viewport" content="width=620,Initial-Scale=1.0"> <script
How is the ThemeRoller's reverse-background feature implemented?
On the ThemeRoller page, there is a "Reverse background color" checkbox, with the following HTML: <div id="demo-options"><input type="checkbox" name="reverse-background" id="reverse-background"> <label for="reverse-background">Reverse page background color</label></div> As you can see, there is no onclick attribute. I looked in the various .js files for that page, and did not see any code that would account for the onclick behavior. How is that implemented? Apologies if this is an idiot question.
Slider with no handles
Is it possible to have a slider with no handles? I know this sounds like a strange request, but I'm using the slider to allow the user to specify ranges. The number of ranges is specified outside of the slider. If they have 4 ranges, the slider would have 3 handles. The user can move the handles back and forth to adjust the ranges. The problem is when there is only one range. I still want the slider to be there, but just without any handles. Thanks in advance.
Help with automatically opening menus
The following code creates a menu and automatically expands the "1C" element to show the other items contained. How do you automatically roll out the menu to the third level, to show the "3A", "3B", and "3C" elements? I've searched elsewhere online and tried various jquery functions so far to no avail. Thank you for the help <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Menu functionality</title> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
Strange error in jquery for jqueryUI`
I have this strange error is the console. ALl the .toogle() effect don't work.I didn't try the other things of jquery UI Error: TypeError: n.easing[this.easing] is not a function jquery.min.js:4
Client side Validation Framework
Hi, Is there any Client side Validation Framework which will perform the Validation? If yes, then which is the best one
JQuery UI Multiselect Widget
Hi, I am using JQuery UI Multiselect Widget. I want to make the multiselect widget fixed, means instead of clicking and then opening the Multiselect widget, I want to keep it open by default, so that user does not have to open it by clicking onto it. I want to make it as if it is a list box with multiple checkbox to be selected by user. Any help is appreciated. Thank.
Jquery autocomplete is not working with colorbox
I am trying to use autocomplete in my search functionality but found out that it is not working as expected.Autocomplete is getting triggered only once. (per page load) I have done some debugging and analysis and found out that Jquery colorbox is somehow causing issue with autocomplete.Below is entry in my page header section <script type="text/javascript" src="${resourcePath}/js/jquery.autocomplete.js"></script> <script type="text/javascript" src="${resourcePath}/js/jquery.colorbox-min.js"></script>
Cant get tabs to recognize href in popup
Hello, I am using a jquery ui tabs in a window.open popup. But I cant get it to recognize the href in my ul/li/a. Thusly the tabs are not clickable. Does anyone see anything. Tabs layout <div id="tabs" style="display:none"> <ul> <li><a href="#tabs-1" class="program" id="ENOR06R">Nanda</a></li> <li><a href="#tabs-2" class="program" id="ENOR07R">Addt'l Details</a <li><a href="#tabs-3" class="program"
Cant get tabs to activate in popup
The tabs appear but do not fire. The html is the same as the non-popup. But in the popup it's just called through the window.open When I run the regular window it runs fine. Any thoughts? Thanx ...
dynamically remove tab
Hello, I dynamically added 2 tabs by calling the addTab function: $(function() { var tabTitle = $( "#tab_title" ); var tabContent = $( "#tab_content" ); var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>"; var tabCounter = 2; var tabs = $( "#tabs" ).tabs(); function addTab(tabTitle, tabContent) { var label = tabTitle || "Tab " + tabCounter; var id = "tabs-" + tabCounter; var
Accordion Display Question
Good Morning, Is there a way to take the panels of the accordion and display them side by side instead of the default of one on top of another? I tried styling them with display:inline but that did not work. Any insight would be much appreciated. Thanks, M.J.
Next Page