jqueryui demos broken in IE
I'm sure this is a known issue, but not able to find anything in the forum discussed about this. Can someone pls let me know if this is really an issue or is it just me?
unexpected tabbing behaviour in modal dialog
I reviewed the forum and saw some discussions regarding this issue of maintaining the focus within a modal dialog, but I'm not sure if there was any conclusion. looking at the modal dialog example: http://jqueryui.com/demos/dialog/#modal-form I get the following behaviour: in Chrome: tabbing leave the dialog and doesn't return focus in Safari: tabbing leave the dialog and doesn't return focus in FireFox: works any help would be greatly appreciated! thanks, Harrison
Dialog button bar positioning
How do I position the button bar for the modal dialog at the top? I am using a dialog box with a form nested inside it. The user can add new rows to the table in the form using a button. As the user adds more rows, the buttons shift down to accommodate the new row. I'd like to have the buttons at the top so they don't shift down with each new row. I'm thinking I need to rework the CSS styling for ui-button-pane but I'm not sure how to proceed. Any recommendations would be extremely helpful.
UI-Tabs:: Load DIV via AJAX in inactive tabs
Hello there, I am running into a couple of problems using tabbing. 1. I have a div element in an inactive tab and I need to find out its width. Since it is hidden by property "display:none" I get width as 0. I tried the method mentioned in tabs API page. .ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; } Since I am loading the UI css from the googleapis server directly, I pasted this piece of CSS in my file but it didn't help. 2. Using AJAX I need to load the div element of inactive
How Can I Get A Draggable Div To Change the Width of Other Divs?
I'm having a problem using a DIV that's draggable control the width of another DIV. I have five DIVS next to each other horizontally like this: http://i.imgur.com/ZcE1d.gif (sorry for the link but when I try to embed the image the forum marks it as spam) DIV A and DIV B are draggable and I want DIVs 1, 2, and 3 to resize based on the movement of DIVs A and B. DIVs should only move horizontally. For example, if I drag DIV A to the right, DIV 1 should get wider while DIV 2 gets more narrow. DIV 3 would
Selectable with ctrl always on
Hello, I am designing an interface which allows selecting multiple items. The default selectable meets my requirement if I press ctrl while selecting. To make it easier, I want an interface acts as if ctrl is always on. Can anyone tell me how to do it? Thanks a lot! http://jqueryui.com/demos/selectable/ regards
jQuery Dialog Modal
Hello, I am using a slightly modified version of the jQuery Dialog Modal demo to populate asmselect. I am having 2 problems. The page already has a form with a validation in it <form onsubmit=""> the validation verifies that a title is put and that the text is a certain length. I placed the modal form outside of the form but the Create Contact button is in the form, right below the asmselect input. (I am using the modal to populate the asmselect). It works fine, except that when I click on the button,
Set default date to a past date
Hey guys, I just discovered jquery ui and it seems pretty awesome. I implemented a date picker, but I can't seem to set it's default date to a date in the past. Essentially I'd like to use it as an age checker to insure the person is over 21 (the site has alcohol references) so I want the default date to be set 21 years from the current date. The pasted code below limits the pull down year menu to dates of 1900 to 1989 (2010 - 21), but when the date picker appears, the date is set to 1900 not
How Can I Get A Draggable Div To Change the Width of Other Divs?
I'm having a problem using a DIV that's draggable control the width of another DIV. I have five DIVS next to each other horizontally like this: DIV A and DIV B are draggable and I want DIVs 1, 2, and 3 to resize based on the movement of DIVs A and B. DIVs should only move horizontally. For example, if I drag DIV A to the right, DIV 1 should get wider while DIV 2 gets more narrow. DIV 3 would be unaffected. When I tried to use the change in DIV A to alter the width of DIV 1, it caused DIV A to change
Getting item source input field in Autocomplete
I'm using jQuery UI autocomplete in a similar way as described here: http://jqueryui.com/demos/autocomplete/#custom-data The focus: sets the values of many fields. My problem is that I have an array of input fields, all with autcomplete. How do I detect the current input field being filled in, so I could find it's previous and next sibling? For example: focus: $(this).prev('.custom_field').val('Hello!');
[Datepicker] beforeShowDay with many function
Hi all. First, sorry for my english, i'm french. I'm new with jquery and I use datepicker to show a calendar. I use this code (below) to diable some day. but there is 2 kind of day (reserved an blocked) so i'have got 2 array with the date et 2 function to display this day with a different css class. var closedDays = []; closedDays[0] = "2010-8-4"; closedDays[1] = "2010-8-5"; closedDays[2] = "2010-8-6"; var bookedDays = []; bookedDays[0] = "2010-8-16"; bookedDays[1] = "2010-8-17"; bookedDays[2]
truncated date issue for date picker
Hi, I am using Jquery.datepick.js for date field. Display format for the date is truncated date(dd/mm/yy i.e 03/12/85) when user selects the date 1920 (it automatically get converted to 2020) date after1930 are working properly issues is only with the year before 1930. Please guide me on this behav........... Ramesh
Advanced cusomization of date picker dialog
I have two date pickers on my page: - A regular one - A "hacked" one that can only pick years/months. For the hacked one, I used some custom CSS ( from here ) to hide the calendar. .ui-datepicker-calendar { display : none ; } However, since there is only one dialog instance on the page, the calendar is hidden for both pickers. Is there a way to only apply this style to one of the instances? I've checked the docs to see if I could add a custom class to the dialog, but I couldn't find it. Kind
custome themeroller ui-icons not in download
Hi - After building and downloading a custom theme it was immediately apparent that no custom icons were in the package. In some cases I got a png file with this text on it: "BGColor parameter for "new" is not valid" instead of the file "ui-icons_222_256-240.png". I went into the jquery.ui.theme.css file and changed all the statements requiring an icon sprite so that a png I did receive was referenced but that did not help. I still get funky little "patches" (a tiny version of that BGColor note)
Dialog div's being appended when page is refreshed?
Hi, I have a jquery ui tab that gets loaded via ajax and remote page: <div id="tabs" style="width:1200px" class="ui-tabs"> <ul> <li><a href="/bugs/loadTab1">View</a></li> <li><a href="#tabs-2">Add Bug/Request</a></li> </ul>... <script type="text/javascript"> jQuery(function($) { $('#tabs').tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab.");
Themeroller Icons in IE8
Has only once noticed the jUI icons look thicker in IE8, making some of them unrecognizable? I suspect IE8 is rendering them twice in the same location. I also just had a weird problem where putting a span with ui icon classes inside an a tag rendered the icon 3 times. Losing the span and moving the classes to the a tag fixed it.
Is it possible to destroy “sortable” when “sortstart” starts?
Hi, examples speak louder than words :) check -> http://jsfiddle.net/FrbW8/10/ kind regards Jan
UI Dialog closes as soon as opened in all browser other than IE
Hi, I've been implementing the JQuery UI Dialog plugin into my system and now have a modal form that works perfectly in IE. However, in all other browsers (FireFox, Opera, Chrome, Safari) ir closes again, almost as soon as it has been opened. Can anybody please shed any light on why this might be happening? My code follows: <script type="text/javascript"> $(function() { // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! $("#NegotiatorDialog").dialog("destroy");
Element from dialog cannot pass via a form
Dear all, First, allow me to explain what i intend to do: I have a form. The forms allow user to enter their name, gender, age, and a dialog box to choose their hobbies (autoOpen=false) User clicks 'Choose your hobby' button in order to open the dialog box and tick the hobbies. After ticked, user close the dialog box, and press the submit button in the form. However, I found that the hobby list element does not pass together when i submit the form. Is all dialog behalf like this? Or I've missed something
It this tab layout possible with jQueryUi?
Hi! Is it possible to create a tab view with jQuery with this simple layout? Nothing more around it. I cannot get rid of the upper box that boxes the tab themselfs. I'm looking for the black dashed line, and to get rid of the crossed over lines... BR, Andreas
JQuery UI - Tabs and Ajax
Hi Guys, I have tabbed JSP app that need to load pages via ajax. User selects year and moth from drop down HTML menu and presses Go and then it should load data. The Data is loaded by ajax but I cannot get it show on a tab. below is the code. Thanks for help HTML file <html> <head> <title> <? echo $head['title']; ?></title> <link rel="stylesheet" href="<?=base_url()?>css/juitabs.css" type="text/css" media="screen, projection" /> <script type="text/javascript"
About callback URL-s
Hi, I am trying to use autocomplete. The problem I have is that the URL that the callback function calls is like : $.ajax({ url: "http://lovalhost/searchJSON", dataType: "jsonp", data: { name_startsWith: request.term }, And calls like : http://localhost/searchJSON?name_startsWith=Pa Well , I use cakphp and I would like to call more an URL like : http://localhost/searchJSON/ajax_countries/name_startsWith:PA or even : http://localhost/searchJSON/ajax_countries/PA So it can integrate easier in the framework.
Problem with JQuery date picker Linked to drop-down
<html> <style type="text/css">@import "jquery.datepick.css";</style> <link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" /> <script type="text/javascript" src="jquery.datepick.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
Date format in jQuery UI Datepicker 1.8.1
I'm using datepicker in jQuery UI Datepicker 1.8.1 version. I need to change date format of return date from datepicker . where can i change it? i need 01-jan-2010 format.
Multilevel accordion
Does anyone know if it's possoble to have a multilevel accordion menu? can I use the existing jquery ui accordion menu and turn it into a multilevel accordion. Any links to plugins or solutions to what I'm trying to accomplish is appreciated. Thank You
Problems with UI dialogs if the page gets dynamically loaded more than once
Hello all, The project I am working on dynamically loads some of it's content via AJAX into a "cont" div. The function to do this is something like this : $('#listnav a').each(function(i, el) { $(el) .click(function(ev) { ev.preventDefault(); var href = $(this).attr('href'); $('#cont').fadeOut(400, function() { $.ajax({ url:href, success:function(html) { $('#cont').html(html);
Error with jquery datepicker inside modal
I have a modal dialog being opened when a user clicks a button: $('#schedule-show').click(function(event) { $.modal($('#scheduleConferenceDialog'), { overlayCss: { 'background-color': '#CCCCCC', 'opacity': .5 } }); }); Inside this modal is a form and one form element is a text input that gets updated by a jquery datepicker object: $("#scheduleConferenceDate").datepicker({ showOn: 'button', buttonImage: 'resources/app/images/new/button_findme_40x23.png',
refreshPositions and hidden elements
All, I responded to an existing post and didn't get a response, so I am creating a new post to see if anyone has ideas. I read the post by douglas and I am seeing similar issues: http://forum.jquery.com/topic/droppable-element-visibility#14737000001138928 I am doing something very similar to what Douglas is doing, however, I have noticed a undesirable behavior that I am hoping someone can shed some light on. I have several nested unordered lists that can be expanded and collapsed where we allow
Updatepanel
I have a asp.net page with two jquery button. All is in an updatepanel. When I click on Jquery button all work but after all stops to work. Icons on button disappear and not responding to click event. This is code of one button: $(document).ready(function () { $("#btCerca").button({ icons: { primary: 'ui-icon-search' } }).click(function () { document.getElementById("<%= btnRicerca.ClientID%>").click(); return false;
Error when using Datepicker
I'm creating a web application that uses datepicker in a module (colorbox widget for jquery). When I load the content it loads in an iframe within the module. When I clicked on the field, it brings up the datepicker with no problem (The date that is set as the value of the input field is selected). When I try to go forward a month or back a month, I get an error Error: inst is null Source File: js/jquery.ui.datepicker.js Line: 1227 Here is the line of HTML <div id="date"><span class="label">Date:</span><span
Panel collapsed option not accessible
I have been working on a project where I have many panels open in one div. I want to be able to have panel control on the group such as collapse all, expand all. I thought this would be easy by creating an array of all the panels and then doing this: for (var i = 0;i<panels.length;i++) { var panel = panels[i]; if (panel.panel('option','collapsed')) { panel.panel('toggle'); } } however, this did not work. The odd part was that when I used Developer Tools (chrome) to
mimic flash based UI using only jQuery
Hi everyone, I was wondering whether it's possible to develop exactly the same UI using only jQuery. What plugins would you recommend? Here is the link - http://www.a-b-g.spb.ru/
how to override all the styles of jquery-ui
I need to override all the jquery-ui styles for some content to be displayed.The content is generated dynamically by some other script and i dont want to use frames to do that. Whats the best way to do that?, is there any function with which i can do that?
Replace Druggable and Droppable item on event
hi all, I have a problem with IE8 browser only. My script is follow: I have 2 areas: area 1 contains 2 droppable items (div) area 2 contains 2 draggable items (div) I have a button that change droppable e draggable items... When I start page, it runs, but when I click on button, draggable items generate javascript error. Example: <div id="droppableContainer" style="width:300px; height:300px; border-style:solid; background-color:#066; margin:10px"> <div class="droppable" id="droppable1">Droppable
Position plugin: result is off-centered in webkit (after zooming-in or out)
The position plugin can yield wacky results in webkit, if zoom-in or zoom-out is used. To reproduce, go to the Position demo page http://jqueryui.com/demos/position/ with a recent version of Google Chrome or Safari. Zoom-in a couple of times with View > Zoom-in, start moving around the parent element to see the positioned elements, it will be pretty obvious that they are off centered Has anyone encountered this?...been banging my head on this one...needless to to say workaround suggestions are appreciated!
jQuery UI tabs controlled by a list problem.
I am using jQuery 1.4.2 and jQueryUI 1.8.2. A standard 2 column layout is set up (nav and content). I have a left hand navigation of possible items to open in tabs. The right column is tabs. <ol id="menu"> <li value="8"><a href="#">Item 1</a></li> <li value="15"><a href="#">Item 2</a></li> </ol> I have those popping the tab content by: $('#menu').children().click(function(){ $(this).toggleClass("selected").siblings().removeClass("selected"); if($(this).hasClass("selected")){ load_project($(this).attr('value'),
change the css of selected and -non selected tabs on click
have created the tab user control and loading it into webpart i tried to download jquery from the standard site for jquery but i dont want to change CSS given by designer so i have applied Class="Active" and display="block" in javascript function as foolows but this is not good approach if(id=="hrefid1")// { document.getElementById(id).setAttribute("class", "active"); document.getElementById("dvDtl1").style.display="block"; //tabs document.getElementById("href2").removeAttribute("class");
jQuery static tabs via Ajax
I am adding tabs on the fly via ajax. However, I do not want the tabs to reload each time the user reselects a tab that is open. The following is the code I use to add tabs: function load_project(val, pname){ projects = $tabs.children('ul').text(); if(escape(projects).match(escape(pname))){ //if already loaded, repop/refocus the tab instead of a new tab. index = find_tab(val); $tabs.tabs('select', index); }else{ //ajax get info and add tab.
Passing parameters into hover function
I am using jQuery UI hover function, the following code snippet is working but not quite what I want: $('#mainMenu img').hover(mouseIn, mouseOut); function mouseIn() { //..... } function mouseOut() { //..... } what I want is to pass 'mainMenu' as a parameter into mouseIn and mouseOut functions, so the functions should look like: function mouseIn(menuName) { //..... } function mouseOut(menuName) { //..... } but the following is not working: $('#mainMenu img').hover(mouseIn('mainMenu'),
AutoComplete XML Response
Hi I'm a newbie and trying to get the autocomplete functionality working for a basic textbox on a html page. There is a third party service providing the XML response to an XML Post request. I designed a static request string in XML and fired it at the service and capture the response in an alert message. I am trying now to make the connection with the autocomplete box and can't fathom how to do it after hours of tearing my hair out. The idea would be that as the user types the results(continual
Next Page