Accordion Control
Hi, I have implemented the Accordion control but when i switch between headings there is a delay between the first one closing and the other opening, so for a second they are both open at the same time. The smooth close also doesn't work, they close abruptly. The only thing i have changed is setting the .ui-accordion-content height to auto !important Is there another way to make the content skrink to fit what it contains, as some of the headings have many items and some only have two? Thanks
Best way to reuse autocomplete with the same target
Hello all, I am currently working on a project where I am using a few autocompletes with the same targets in multiple places. Instead of copying/pasting code I would, naturally, rather have the code in one place and call a function that turns the target textbox into an autocomplete. Here is an example of what I am doing, this gets populates an autocomplete with school names : //Turn the school text field into an autocomplete $("#school_text").autocomplete({ source:function(req,add){
jQuery UI Tooltip + JSON Data
Can anybody be so nice and tell me what I'm doing wrong? I'm trying to load JSON data with $.getJSON(). I'd like to read data only for current element ID (ex. read only tooltip content for id="name" field). And... it's not working :( $(".tool").tooltip({ content: function(response) { $.getJSON('/static/tooltipcontent.json', function(data) { response($.map(data, function(item) { return item.name; })) });
Placing dialog box next to mouse hover
Hi, I'm attempting to use a jquery UI dialogue as a tooltip, I have a table with items in cells that respond to hover and display a tooltip. The problem I have though is that when I hover, the box does not appear next to the cursor, ideally I should be just to the right of it. It seems to work fine when the whole table is on the page, but when it extends beyond that it starts placing the box in odd places. Here is a sample of my example code: <html> <head> <title>test1</title> <link
tabs and change URL
Good day, I have the problem. I'm using TABS. I have 4 bookmarks in the Tabs. And I need that If I clicked on the bookmarks then variable (val) in URL will be changed to value 0. I need exactly this: Every click on the bookmark change variable "www.sample.cz/index.php?val=0" in URL. Is it possible? Or the variable don't may be in the URL, but I need the variable to be available in the GET (global variable). Get a variable via GET. Understand me? If not, explain more. Thank you very much... something
tabs with ajax content which is again jquery
Dear Community, i just started with jquery and wonder about if i am using the jquery ui on its right way. i want to use the tabs which load .php pages which have again jquery inside. so i decided to make a general .js page where all jquery is listed: $(document).ready(function(){ // index.php $("#tb-index").tabs(); // v_angebot.php $("#d-v_angebot-nartikel").dialog({ title: 'Neuer Artikel', resizable: false, autoOpen: false, width: 800, height:
Issue with Javascript slider in Firefox.
Would anyone know why my javascript slider does not work in FireFox? Ironically it works well in Ie and Chrome. All I did was modify a JQuery slider to fit my needs and even before I Modified it, the slider still would not work in FireFox Page: http://www.flyteusa.com/flyteusa/index1.php <style> html { margin:0; } #wrapper { margin:0; padding:0; } #featured{ width:1000px; padding:0; position:relative; height:800px; background:#fff; border:2px solid #333; } #featured ul.ui-tabs-nav{
Datepicker won't display
I'm having problems getting the datepicker to display inside a display:none or a visibility:hidden div (After it's changed to be visible). I change these to be visible using asp.net in an update panel, however the datepicker won't work. If I leave it outside of the display:none then it works fine. Any ideas how to fix this?
ui.jquery resizable.bind not working?
Hi! I have tried to use the bind for resizable() ui but the web browser says size is null or not an object. This is my code: $("#templateArea1").resizable().bind("resize", {widthId: "#area1Width", heightId: "#area1Height"}, showHW); function showHW (event, ui) { $(event.data.widthId).val(ui.size.width); $(event.data.heightId).val(ui.size.height); } But when I use the code below, it is working: $("#templateArea1").resizable({resize : function
Make one image replace another.
On my page I have two images. They are the same image except that one is smaller than the other. I would like to make it so that when I click on the smaller image it enlarges to replace the smaller image. Could someone point me in the right direction for this? Thanks.
How to customize autocomplete and split the results in separate lists?
Hi, I'd like to customize this feature and split the results in several lists (like columns) for the original results like: Item 1 Item 7 Item 13 Item 2 Item 8 Item 14 Item 3 Item 9 Item 4 Item 10 Item 5 Item 11 Item 6 Item 12 Perhaps there's a way to divide the results in several UL elements in the renderitem method, I'm lost with what I want to achieve. Any guidance/suggestion is really appreciated. Thanks.
Is there any widget directory for JQuery UI widgets?
Hi, It seems that jquery UI supports a nice system to implement new widgets so my doubt is why there isn't a directory (similar to jquery plugins) to download new jquery ui widgets developed by third parties? For example, a quick search reveals that some people are already publishing their widgets: http://github.com/ehynds/jquery-ui-multiselect-widget Is there any directory site already out there?
Flow charting with Draggable
Hi fellow Jquery lovers,just bumped to a silly question and came to forums to get it answered . Here is a brief overview of what is going on, I have a page with 2 divs.Assume div1 as id="Toolbox". and div2 as id="Canvas". Now people will drag the images inside Toolbox (which is also wrapped by a Div that is Draggable) and drop it to the Canvas and again can drag the images and align them. Here is a excerpt of the code $('#toolbox div').draggable({helper:'clone'});Now i am able to drag the item to
jquery ui autocomplete feature
Anyone know if it's possible for the autocomplete component to only match from the beginning rather than anywhere? In other words, use startsWith(text) rather than contains(text)
jQuery UI Slide doesn't follow CSS while animating
I am trying to make a paragraph to slide but, it doesn't work the way I have designed it. It should slide from left to right and stop at it's position. Instead it slides in a lower position, then suddenly goes up. I have an example online. The slide animation is activated by the colored boxes on the top left corner. The example URL is: http://dev.lucianosantana.net/temp/imagem/img2.html It seems to ignore some CSS rules while it is doing the animation. I have tried doing it using jQuery.animation
add class to jquery ui div
how would we add a class to the jquery datepicker popup ie to differentiate between different instances? thanks.
DatePicker select week
how i select a week in jqueryui.datepiker ?! EXAMPLE: i have a input-text and a open a DatePicker and select (Today) 19-May and i want to mark monday to sunday in calendar.... its possible to do this !? or another sugestion for this implementation !? Thanks Igor
Using datepicker with dynamic form plugin
Hello, I would like to set up a page that uses the dynamic form plugin that will allow the user to "stack" date ranges. So the page would have a start and end date which would both use datepicker. Then there would be a plus symbol that would duplicate those fields for another start and end date. You could stack a bunch of these ranges together and ultimately these values would be stuck into a DB or something. Any suggestions on how to go about doing this? Thanks in advance!
Problem with accordion in tab
I have the following code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>LT </title> <link type="text/css" href="css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> <script type="text/javascript"> $(function(){ $('#tabs').tabs(); $('#tabs-SearchTab').tabs(); $('#accordion').accordion();
jQuery UI Tabs iframe
Hi, I am fairly new to jQuery UI and I have run into a problem. I have a tabs widget with 5 tabs. The first tab is a normal div and the others are iframes loaded in the tabs. The First 2 tabs are enabled on initialization and the rest are disabled. What I am trying to do is create a wizard when the user clicks on a button (also UI) in on of the iframe tabs then the next tab is selected and so forth. I have tried using $('#tabs').tabs('option', select, index) but nothing happens. Any help would be
Is there anyway to know if images are overlapping in a droppable area.
I am using the JQuery UI draggable and droppable plugins. I have a droppable area where I drag the draggable images. Is there anyway to detect if two of the droppable images overlap? If they do overlap is there anyway to reject the drag request? Thanks.
Slide/remove leaving behind ui effects wrapper with height
I'm trying to implement a slide-in, slide-out deal mimicking the style at foursquare, cycling through a set of elements, only showing X at a time. I have lifted their code pretty much directly for my first test: <script type='text/javascript'> //<![CDATA[ var delay = 5000; var count = 20; var showing = 10; var i = 0; function move(i) { return function() { $('#feed_item'+i).remove().css('display', 'none').prependTo('#feedContainer');
jquery UI tabs widget flickers hidden divs on load
I am using the latest code from jquery and jquery UI. I am using the tab widget to load tabs, however, when I first visit and the page loads I see all the DIVs and their content before they are hidden. Is this a browser issue? I see this in both Firefox and Chrome.
How can I disable event-based Accordion navigation, i.e. use activate method only?
I would like to setup my Accordion so that user clicks to the headers do no affect the active section. I would like to have it so that the activate method is the only way of changing the active section. I've implemented activate successfully, but I'm not clear on how to disable user events like click. I could try setting the "event" option to something that would never happen, like 'submit', but that seems improper. Thanks very much in advance to anyone who has any thoughts on this. I searched around
[Drop] Why i have 2 alert function in 1 drop ?
Hello First, my code: <script type="text/javascript"> $(function() { //Zone drag //$(".nomForm").draggable({ $("#toolbox li").draggable({ appendTo: "body", connectToSortable: '#buildForm', helper: 'clone', revert: 'invalid' }); //Zone drop $("#buildForm").droppable({ drop: function(event, ui) { $(this).find(".placeholder").remove(); alert('ok'); }
[Droppable] 2 alert for 1 drop ... Why?
Hello First, my code: <script type="text/javascript"> $(function() { //Zone drag //$(".nomForm").draggable({ $("#toolbox li").draggable({ appendTo: "body", connectToSortable: '#buildForm', helper: 'clone', revert: 'invalid' }); //Zone drop $("#buildForm").droppable({ drop: function(event, ui) { $(this).find(".placeholder").remove(); alert('ok'); }
How do I return 'No results'
This is my jQuery: $('#locality_input').autocomplete({ source: function(request, response) { $.ajax({ url: 'php/csvtoarray.php', dataType: 'json', data: { state: $('#state').val(), q: request.term }, success: function(data) { response($.map(data, function(item) { return { label: item.locality + ', ' + item.postcode + ', ' + item.state, value: item.label, postcode: item.postcode, locality: item.locality }
autocomplete ui datasource
I am trying to get an autocomplete text field using remote data retrieved by a php file. On the demo for the autocomplete ui the use the file search.php - I would like to see what search.php should look like to retrieve my data. I am currently pulling valid json data into a variable named $response, but I must have something out of place. If there anyone that can give me and example of what that file should look like. Thanks, Allen
UI Dialog moves when content is added to the page.
Ever since the dialog widget started using position: relative when positioning itself, it will jump downwards if you dynamically add content the the document. Proof of concept scenario: You've got a table of data. To add a new row, there's an +Add button that opens up a form in a dialog. Submission of the form is all handled via javascript to dynamically add the new row to the table... When this happens, the dialog will shift down exactly the height of the new row, due to the fact that the dialog
theme applied funky
I have an accordion widget and an autocomplete widget defined on my page. i've included the cupertino theme style sheet. The screenshot below is from Firefox 3.6.6. The theme demos seem to be applied more cleanly. can anyone explain why my autocomplete lists still display the disc list-style and stretch across the whole page width to the right of the actual autocomplete field? also notice that the icons on the accordion are displayed above the text. <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
Sortable Portlet Problem
I am having trouble with a layout using sortable portlets in a three-column layout. The columns are floated. The third, right-most column works perfectly. When portlets are are dragged into it the placeholder appears consistently. However, when portlets are dragged into the left two columns, the placeholder flickers and sometimes does not appear at all. The sorting only works intermittently. The performance is worst in the left-most column; it improves with distance from the left margin of the
draggable containment for showing part of an image
I'm trying to display part of a large image, and have it draggable to reveal the other parts (like Google Maps on a single image). I have a fixed size <div> wrapping the <img>. The <div> css has overflow:hidden, and I call .draggable() on the image. This basically works, except I want the dragging to stop when they reach the ends of the image. I'm trying the 'containment' option of draggable, but there's a few problems. 'contrainment':'parent' does not work (should it? maybe it should handle draggables
minDate and other defaults not taking effect
Hi, I have the following code which initialises datepicker and calculates days between dates. When I add defaults for minDate and the calendar, no matter where I add the code, nothing changes. Defaults $('#from').datepicker({numberOfMonths: 2, firstDay: 1, dateFormat: 'DD dd-mm-yy', minDate: '0', maxDate: '+2Y', onSelect: function(dateStr) { var min = $(this).datepicker('getDate'); // Get selected date $('#to').datepicker('option', 'minDate', min || '0'); }}); $('#to').datepicker({numberOfMonths:
Datepicker with days (or nights) between dates
Thanks to all who have helped me out with this, especially kbwood.au. I have posted the code here for anyone who may need a similar setup. I have only tested in IE7. Compiled in Webplus X2. The calculation works even with date format set at DD dd-mm-yy. The 'nights' text box is set to readonly. <title>jQuery UI Datepicker with days (or nights) between dates</title> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/black-tie/jquery-ui.css" media="screen" />
Autocomplete combobox, prev + next result set, how?
Hello, i have a autocomplete combobox and it works fine, i want to add a option that users instead of typing some part of a string to get the items they want, I want the users to have the opportunity to browse through the items with a next/prev. button. Is it possible if so how?
MVC - JqueryTab
Hi, I am using a JQuery tab control, i want to set the tabs on disabled or enabled from within my MVC controller, depending on some actions i do here. Does anybody know how to do this? Thanks nathalia.
button widget and custom background image
A custom background image is not left top on the button with firefox
I think it's a simple task, but...
Hi people! I'm a new apprentice in programing and have a lot of questions... but first is first. ;) Here's a piece of my code: $('#dialog1').dialog({ autoOpen: true, height: 280, width:600, modal: true, buttons: { 'Soy médico': function() { $(this).dialog('close'); return true;// Submit Rating }, 'No soy médico': function() { $(this).dialog('close'); } } });It's a simple modal dialog selector. The problem is that I don't know how to make a button close the modal and go to another html page. I hope
jQuiry UI draggable problem after ajax() function
Hi, I'm working on a scripy to display notes on a image. I add notes via ajax() function: The prepend note is not draggable (the previous notes are still draggable). Anybody an idea to solve? $('form#note').submit(function(){ var note = $('textarea#note_text').val(); $.ajax({ type: 'POST', url: 'ajax_addnote.php', data: 'note=' + note, success: function(data){ $('div#markers').prepend(data); } });
Content not loading in tab
Hi. I have a group of tabs and each one of them is loading content from other files. One is a simple php and the other two have other jquery components. One has a chart and the other has a table. If I only use the simple php, when I load the page, the content of the first tab is displayed without problem, but if I include the other two tabs, then the content is not loaded. I need the content of the first tab loaded each time. <div id="tabs"> <ul> <li><a href="simple.php" title="Inicio"><span>Main</span></a></li>
Next Page