Make tabs open and close independently.
Right now I have three tabs and one of them is always open. I would like for them to be able to all be closed to save space. Here is a link to the page I am asking about http://joannfitzpatrick.com/rlv/quickvalidate-premium-0720.html According to the documentation the page is using http://jqueryui.com/tabs/#collapsible . I see that there is a script that should be added: <script> $(function() { $( "#tabs" ).tabs({ collapsible: true }); }); </script> But I have tried adding
Improvisiong with what I have...button icons
I am not good with jQuery, so don't try and throw something foreign to me and change the entire code. I want to use the buttons with icons, but the catch is that I am trying to use them with an input tag instead of a button tag. here's what I have in my script tag: <script> $(function() { $( "button:first" ).button({ icons: { primary: "ui-icon-home" } }).next().button({ icons: { primary: "ui-icon-locked" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
is there a way that i could make the jQuery slider look similar to this?
Hello, I am trying to make the jQuery UI slider look similar to this. I can make the background the right colour however because the handle is an image i cant get it to look the same. I have tried removing the image making the slider 100% and the correct colour however this causes the entire handle to be displayed and not gradually come onto the screen. Much help would be appreciated and if it isn't possible then i will try another design.
Is there a way to wrap each label/checkbox pair?
I have a slew of label/checkbox pairs: I would like to make it more visually obvious which label goes with which checkbox. Is there a way to wrap the pairs with a border or something around them to accomplish this? I reckon I could do it by writing a lot more html, but I would prefer to just wrap them up "after the fact" with something like: $('checkbox label').wrap('border', 'green');
How to get 3rd level deep data into jqGrid
I am getting the following JSON response from a web site : http://pastebin.com/5cJt7VV8 (example with 10 results) I want to get these 10 results in a jqGrid, but only 4 columns -3 level deep- hotelId, name, address1, city. Is it possible? Thank you. PS: If it is possible, give an example, because I am new to jqGrid.
Limit Jquery-UI to certain elements of the page
Hello all, I've used jQuery for many situations, but never quite come on the situation I'm in right now. I'd like to use jQuery-UI functionality on a small portion of my page, but I need the rest of the page, in particularly the links and buttons, to remain untouched by jQuery-UI. In particular, I can't have the additional classes "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only " automatically added to every link on the whole page. I just want those limited to a certain DIV
Cursor on draggable
Hi, Just a draggable object, nothing special. var draggableOptionsSFL = { containment: "document", cursor: "pointer", helper: "original", revert: "invalid", start: function (event, ui) { }, drag: function (e, ui) { } } $(".myBlock").draggable(draggableOptionsSFL); But after I drag the element the whole body gets cursor=pointer. (<body style="cursor: pointer;">). I tried to play with containment: "document" - no result. Does anybody can help with this problem? Thanks a lot.
Is there a quick and/or easy way to update a custom jquery ui download?
The legacy project I'm working on references jquery and jqueryui in several places (js and css), and there is a "mish-mash" of different versions used. I would like to upgrade to the leading, if not the bleeding, edge here. However, in the case of a custom jqueryUI download, in order to upgrade I need to download anew and, to match the capabilities of the existing jQueryUI usage, I need to know what was originally selected (which options, widgets, etc.). Is there a way to quickly determine what I
JQuery UI Dialog Box: How can I make the buttons and fonts smaller?
I know it sounds like a lame question, but I am new to JQuery UI and an intermediate CSS person. How can I make the fonts and buttons in a JQuery UI dialog box smaller? Which file and CSS definition would I go to....or would I make my own CSS. I'm using the microsoft/redmond theme. Thanks much in advance for any tips Steve
Button value is null
Hi, I am using JQuery, Ajax and Struts for a web application. I am trying to submit when a button clicked. I have 4 tabs in one page. I placed 4 buttons on each tab and I want to submit the whole form when user clicked on a button through Ajax. When I submit form, I am getting values for all the form fields except button1 value as null in the form bean. Do I have any alternative to track what button clicked while submitting the whole form? Is there any way I can pass additional parameter along with
How to use dropdown /combobox list in jqtheme
Hello Anyone please guide me to integrate dropdown list in jqtheme, i cant find any default control is there
Autocomplete suggest size is larger in IE8 than in Firefox
Hello, I use jquery ui 1.8.2 for make an autocomplete in a modal dialog. In IE8 the width of the suggest window is 1380px and in Firefox it's 188px. I've made tests with safari, chrome and opera. Only in IE width is so large. How can I set the size of autocomplete suggest window ? this my code : $("#ville").autocomplete({ source: "http://myhost/magento/js/jquery/ui/php/ville.php", minLength: 1, }); Thanks a lot, James
Themeroller roll your own - modifying saved theme removes color tone
I created a theme back in Oct 2012 and have been adjusting colors occasionally. The last change was in April. Today I loaded the themeroller from the URL in the .css file and the colors have lost there tone values in the edit panel. The theme displays correctly, but any color I attempt to edit has the value of the tone square (inside the color wheel) set to a grey level - the selector is on the right edge of the square. I loaded the theme prior to the latest change (saved back in March) and it
INettuts - touch screen compatibility
Hello, i'm using iNettuts widgets for my internship and i have to make it compatible with touch screens. I know the existence of a hack 'touch punch' but it doesn't work with because inettuts works with a jquery-ui personalized library. How can i do so ? Thank you ! Link: Inettuts: http://james.padolsey.com/demo/tut-inettuts-with-cookies/ Touch punch: http://touchpunch.furf.com/
Jquery UI - Problemas/Problems
ESPAÑOL:Buenos días, tengo un problema con la interfaz de usuario jquery y es el siguiente: En mi localhost anda correctamente, sin embargo, cuando subo todo lo que hice a mi host en la net, se me rompe el jquery y mi pagina pierde toda su funcionalidad... No se la causa del problema... Pueden ayudarme? Muchas gracias y saludos! ENGLISH: Good morning, I have a problem with jQuery UI and is as follows: In my localhost works properly, however, when I upload everything I did to my host on the net, it
Combine TABS capabilities
Is it possible to combine the features of both the Sortable Tabs and Simple Manipulation? I also would like to use the final tabs in a forms layout so users can add more tabs and then reorganize them on screen. Furthermore, I want to add the ability to insert another set of Tabs or subtabs. Just need some guidance how to write the code. Thanks, Frank
Why does the Datepicker drop down disabled and freeze the page when I open a dialog?
I have a page which uses the jQueryUI datepickers (which have worked like a champ until now). I added a button ("Select Departments") which invokes a dialog. Now when I mash the button, the "Begin Date" datepicker widget drops down (??? - and disabled at that) -- and freezes the page colder than Fargo in February: The HTML and jQuery (and a smidgen of CSS) follow: HTML: <button id="btnSelDepts">select Depts</button> <div id="dialog" title="Select the Depts you want to include in the report" style="display:none;">
Show("blind") on table row
I applied a blind effect to show a hidden table row, but the slide effect isn't smooth. It immediately adds about 15px space, and then does the slide effect. You can check (and modify) my code here: http://jsfiddle.net/Pieeeeeee/yRpsU I made it go slow so you can see where it goes wrong. It is also hard to let the row/td's match the other rows while the effect is taking place. I solved that by giving the table and td a fixed size, but that's another problem.
List elements in autocomplete menu didn't highlighted by touch event on iPhone devices
Hi! I just updated to the ui version 1.10.3 and I found that, when I touch the autocomplete menu elements on iPhone, the elements didn't highligt as it happen with other links. This feature is worked before when I used the ui version 1.8.22. This is something bug, or just caused by a missing option? I didn't see anything in the API documentation about it.
autocomplete in ie not working
Below is my jquery autocomplete function , works fine in chrome but not in mozilla.pls help ---------------- <asp:TextBox ID="txtSearchBox" ClientIDMode="Static" AutoCompleteType="Search" runat="server"></asp:TextBox> ---------------------------- Jquery(function () { Jquery.widget("custom.catcomplete", Jquery.ui.autocomplete, { _renderMenu: function (ul, items) { var that = this, currentCategory = ""; Jquery.each(items,
need help for datepicker jquery
the red one is the datepicker jquery that i copy the source code and paste to my current website but the date not shown.... <html lang="en"> <head> <title>PROMED@CS13</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <link rel="stylesheet" type="text/css" href="css/default.css"/> <link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" /> <script type="text/javascript" src="chromejs/chrome.js"> </script> <script type="text/javascript"
Closing over
I have this code for an overlay box on a map , once its opened i cant close it without refreshing my browser i would like to have an x so i can close the overlay box here's the code for the box. many thanks events:{ mouseover: function(marker, event, context){ $(this).gmap3( { clear:"overlay" }, { overlay:{
UI Datepicker close on update an option
Hey, add a selectbox to buttonPanel. This selectbox calls a function "CheckRegionSelect" get's selectedIndex of selectbox and should update an own option in datepicker. After that i have to call datepicker("show"), to get the datepicker again displayed. All Changes are done but why does the datepicker closes after Changing an Option? Using Jquer v1.7.2 and UI 1.8.24. Update not possible atm. function CheckRegionSelect (selDatepicker) { state = parseInt($(selDatepicker).datepicker("widget").find('.RegionSelect').val());
All tabs contents show at first time
Hi, I'm totally new to jQuery. I'd like to have your opinion about my problem. I have a page using jQuery tabbed menu. When the page first loads the content of all the tabs flashes for a second or two and then the selected tab is displayed. After that the tabs work great with smooth transitions as expected. An external jQuery is used here and the code is: // submenu $(".tab_contents").hide(); //Hide all content $("tr.tmenu td:first").addClass("active").show(); //Activate first tab $(".tab_contents:first").show();
How may I choose one of the "selectable" elements by script ?
After I render a table or list with "selectable", I want to select one of the "selectable" rows by javascript. I haved tried to call 'click' method on the row element, but it takes no effect because click event is prevented by "selectable" control. If I can choose a row by something likes below, that will be very good. $("#myID").selectable("select", elem); But it seems that there is no 'select' method provided by "selectable" control. Totally, I expect a javascript method that can mimic the mouse
Substitution with draggabe object
Hi, I have to implement the substitution of objects and I have no much experience with jQuery. Please see the embedded image. At the bottom there is a bank of choices, inside the text there are placeholders for choices. It's easy just to drag an object from the bank to the placeholder. But it's required that all objects remains draggable. When a user drags an object onto a booked placeholder, its content should return to the bank. I didn't find a working example to make this task. Any help will be
Tab title come out as hyperlink
Hi I have a problem with my tabs, I implemented as the example on http://jqueryui.com/tabs/#default says, but on my web tabs are hyperlinks. I cant find what I miss .....please help me out to solve it. thank you
Jquery Dialog- Included JSP files loosing its .js file
HI, I am implementing jquery dialog into my application but the problem was when i am loosing the inluded .js file from the jsp which i am opening in the diialog box. "<script type="text/javascript" src="../ext3/<Some script>.js"></script>:" Can you please suggest why is that happening and what should be the possible solution for that?
JQuery Menu
I'm new to using JQuery so please forgive me if the answer is simple. I have created a menu. Currently the menu has one column horizontal and shows the entire block. How do I add columns to the menu and display only the first line for each column. Code <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"
Tab disabling on backward navigation.
Hi, I am using tab widget in my prototype application and I have a requirement that I hope not a unique one. I am looking for some suggestions or location where I can find demos. Here is the use case. 1. Page with 4 tabs and only first tab is active and all other tabs should be inactive. All tabs will have individual submit buttons to submit to server. 2. User must submit from tab1 to go to tab2. (After submitting to the Struts action, I can forward it to same page, but not able to
two different autocomplete on the same page
hi everyone i'm new in this. i wanted to use two autocomplete textbox on my page the first one firesup but the second one doesn't work! this is my code, what i'm doing wrong? <script> $(function() { var availableTags = [ <%=ac_data%>]; $( "#auditor" ).autocomplete({ source: availableTags }); }); </script> <script> $(function() { var availablePres = [ <%=ac_prestador%>]; $(
how can we create a component that review questions of exam?
Hey, plz guide me to create a component that review questions of exam with 3 types 1) Attempted 2) Skipped 3) Not attempted.
Dynamic containment of Resizable and Draggable
I am using the Resizable Widget to implement a resizable element which is contained by its parent. Now I want to have the parent be dynamic which means that its dimensions might change during the resizing process. The problem is that JQuery UI does not update the containment data before the end of the resizing process. Therefore I am wondering if it is possible to manipulate the containment data that the Resizable Widget is using during the resizing. This post originates from a stackoverflow question.
Multiple specific Divs by drag and drop
I immediately mention marries well not write well in English. Dear, I need to write a script similar to that located at this link: http://tiny.cc/eraa0w So I'm at the bottom of the loaded products you want to drag the individual are at the top of the screen. At the top, on demand as pictured on the size of the frame will be from 1 to 5 's and the background right frame. When you are finished adding products to your frame and you click on a key or mouse button to jump to the basket and completion
Non-tab items in tab bars?
I was looking at putting something other than a tab in a JQueryUI tab bar - a button or an icon control, for instance. If I add things after the <li> elements representing the tab, they follow immediately after the last tab, on the tab bar's background, on the same row. But if I put them within or before tabs, the tab bar starts a new row for the first tab <li> after the non-tab elements. For instance: <div id="tabs-div"> <ul> <button id="myButton1">Button 1</button> <img src="someimage.jpg> <li
Autocomplete selected item value need to pass to server
Hello, I am using autocomplete for searching by agent name. Everything working fine. What I am looking is, once user selects a name and finally submits the page; I need to send selected agent id to the server. Just like drop-down feature. Could someone send me a sample? response( $.map( data, function( item ) { return { label: item.fname + ", " + item.lname +" "+ item.middle, value: item.fname + ", " + item.lname +" "+ item.middle
Problem using multiple autocomplete combobox
Hi, I have a problem, I'm using three jquery autocomplete combobox and I need execute a function when the user select an ítem, this for each combobox, but I can't do it, all my combobox are filled from a database and according to this example http://jqueryui.com/autocomplete/#combobox I can't assign a function for each combobox because when I write the event in another script, for example in the head, not is executed any event, but if i write the change event inside the jqueryui's example, it
How can I get an Icon after resizable textarea in the same row?
I am trying to get on one line a label, a resizable textarea and an icon for looking up a value. Unfortunately the icon is displayed on the next line instead of on the same line. The code is as follows: <div class="row"> <label>Label text</label> <textarea class='resize">Textarea text....</textarea> <img class="iconname inline"> </div> $(.textarea).resizable({handles:"se"}); The problem is that the image is displayed under the textarea and not after on the same line. When I remove the "resizable"
DATEPICKER TEXT POSITION
Hey, i would like to position the date text i got when i select a date from the Jquery... can we do it in css?? if yes help pls :) How my text looks like at the moment :S http://www.hostingpics.net/viewer.php?id=658136Sanstitre.png thanks for the help!! :)
Not able to open the second tab on page reload
Hi, I have an apsx page with jquery tabs control (using ver 1.10.3), on the second tab I have 2 txt fields and a search button then a grid view table for the results. When search button clicked, page reload happens & tabs goes again to the 1st tab, i need to stay in the second tab or (last tab before page reload). I tried to use the following code but it doesn't work correctly: <script> $(function () { $("#tabs").tabs(); var active = $("#tabs").tabs("option", "active");
Next Page