Color-blindness accomodating themes?
Does anyone know of a collection of color-blindness accommodating themes, or whether existing themes in the gallery address this effectively? I am a novice in terms of color-blindness knowledge, btw.
Dialog and Datepicker not working inside jquery tabs for Safari or Chrome
Hi There, I am fairly new to jquery and really enjoy the jquery ui. I'm developing an internal notification app and came across an issue. Maybe this is a quick fix, but I haven't been able to figure it out since it works in IE & FF. I have a few inputs in which I've binded the datepicker. I've also binded an anchor tag to a click function which opens a new dialog with content generated from a different page. The dialog and datepicker work perfectly fine while using IE and Firefox. However, the
multiple resizables acting strange
Hi there everyone, I'm trying to place multiple resizable and draggable div's on one page that move (vertically) inside their own parent div. you can take a look at http://bit.ly/bCutBE However, these div's act really strange when I want to resize them, especially from the north side, they kind of move out of the screen very fast, while they shouldn't be able to get outside the parent div. I only want the div to be able to move and resize vertically inside it's parent, the dragging-part works pretty
Accordion
Hello , I using accordion for my application and it looks like atleast one section in Accordion sections is always open, Please take a look at the example on the right side http://jqueryui.com/themeroller/ I was able to create a Accordion with all the section closed at first , but if i open one of the item, i wasn't able to figure out how to close the open item by clicking on it. http://jqueryui.com/themeroller , i see that the left side ( "Theme Roller" section ) has the functionality I'm looking
changing the starting point of the scale effect
I want the scale effect for dialog boxes to start at the bottom left and scale up to the center of the screen as opposed to it scaling at the center. Any ideas would be appreciated.
Draggable with overflow scroll bar.
Hi I have a draggable div that has content which overflows it. overflow is set to auto so I get scroll-bars. However the scroll bars do not function. If you try to scroll with the mouse it just drags the div around. Is there anyway to set the scroll bar so that dragging does not affect it? Thanks
Date Picker inside a Dialog
I know there are some outstanding issues with this combination but I don't think they pertain to this instance. I have a link on a page that opens a dialog. On the dialog there is a form and the first element is an input field with a datepicker. When the dialog opens the focus falls on the date picker and it automaticly expands. If I click away, it disappears and when I click back to the input field nothing happens. If I click on a date it disappears but does not populate the date in the input box.
Tab with aspx via ajax href attribute
Hi all, I am having a couple of problems related to playing aspx pages as the tab contents. Our scenario is to generate the tabs dynamically in response to an ajax request with the href attribute pointing to the same aspx just with different query string arguments to distinguish them. First problem is the "remove" functionality isn't working. We are trying various ways of hiding to get rid of a tab and its panel but that approach really seems kludgey. The second problem is when the page is destroyed,
Image gallery with selection
Hi, I'm looking for a jquery image gallery that besides the usual fancy features let the user select one or more images for doing some actions. Also would be great inline edition of information for individual images. Thanks!
Selectable
Hi, I'm playing around with the selectable feature. I grabbed most of this from an example. I want the background color of the selected element to change to red, but when I choose another element, the background color should return to original, and let the new selected element be red. How can I do this? $(function() { $("#selectable").selectable({ stop: function(){ var result = $("#select-result").empty(); $(".ui-selected", this).css("background","red"); $(".ui-selected", this).each(function(){ var
How to disable a button inside a buttonset?
$('#button-inside-buttonset').attr('disabled', 'disabled'); $('#the-buttonset').buttonset('refresh'); Isn't working. Any clues? -- Jonas
sortable position relative / absolute
hello Is there a solution for this problem: <div id="parent" style="position:relative;" class="widget"> <div id="child" style="position:absolute;"> </div> </div> When I make the widget class sortable only the parent div is dragged. The child div remains in place... Is there a solution?
Avoid drop-accept on invisible part of droppable
I just try the draggable/droppable plugins for the first time. And I am no javascript/html pro. So this might be a silly question. No problem to get drag/drop working. But I am looking for a way to avoid drop-acceptance on the invisible part of the droppable. The droppable is a large div inside a scrollable container. Unfortunately a drop is also accepted when I move the draggable helper below the container. Is there a way to avoid this? If so, how? Thanks in advance. --Heiko
Tabs: Fails with reload of page
Hi I'm trying to setup the tabs on http://www.naturli.dk/Default.aspx?ID=1009, and the the result in IE is none-reacting tabs, while FF reloads the page in some odd behaviour. What am I doing wrong? Cheers Bo Dudek Webdeveloper Denmark
using .animate() method with jquery dialog widgets
i want to use the animate method with my dialog widget. How can I do this. One idea is to make the dialog widget a div but i do not know how to do this. I have the code for the dialog box and the code for the animation using a div but i cannot put the two together. Any help would be appreciated.
Moving a Flash object with JQuery?
I know how to move a regular .jpg, png, etc. image using the jquery animate() function, but is there a way to move a flash object? I have an animated flash background object that I would like to move around using animate() but I'm not sure how. Here is what my code looks like thus far: <style> .block { position:absolute; background-image: url("images/bullet.gif"); left:-25px; width:90px; height:90px; margin:5px; } </style> <div id="block" class="block"></div> <a style="opacity: 0.4;" href="#section_web"
Disabled DatePicker
Is there a reason why DatePicker doesn't automatically disable itself when called on a disabled input control? It would seem logical. Is this an oversight, bug, or...? For example <input name="mydate" id="mydate" disabled="disabled" />and $('#mydate').datepicker(); should render disabled by default.
Documentation Fault: droppable activeClass
I'm not sure if I'm the only one, but this example: "$( ".selector" ).droppable( "option", "activeClass", '.ui-state-highlight' );" does not work for me if I create the class ".ui-state-highlight". Instead, it works if the command is like this "$( ".selector" ).droppable( "option", "activeClass", 'ui-state-highlight' );", without the "." in the class name declaration.
DatePicker doesn't work inside fixed div
I tried putting DatePicker inside of a fixed position div that is attached to the bottom of the viewport. When clicking on the input box that should open the calendar, I see in Firebug that the dimensions of the calendar box slide out, but the box doesn't appear where it should above the input. Is this expected? I'm assuming there is some conflict with it being inside a fixed div. And is there any known way to use DatePicker from within a fixed div?
Different dragging behaviour between draggable and sortable
With draggable my element gets a relative position when the user starts to drag it. It is positioned relative to where it started from (in the flow) as the user moves it around the page. With sortable - at least with the portlets demo on the UI web site - as I start to drag an element it gets an absolute position and the co-ordinates are absolute. The latter is much more convenient behaviour as it takes the being-dragged element out of the flow allowing elements below it to flow into place as you
Problem of CSS
Hi everybody, i am new using Jquery and Jquery UI, and i have got a small problem. On a same page, i do have an accordion, and a tabs. Problem is that both are sharing the same CSS as they do have some classes in common like : ui-state-default or others. My CSS for the accordion is fine, but for the tabs, that does not fit at all. I wanted to know if it was possible to define a prefix for the class. for example something like $('#tabs).tabs({ prefix: 'tabs_'; }); and that way, all classes added
DatePicker : on top in small screen
Hello, Since I work with the version 1.8 of JQuery UI, I've got some problems with the display of my datepicker. When the page is small, the picker is always on the top of the screen. By example, my page height is 320px and my input is 135px from top. So, my page is too small to show the datepicker under the input, but the bottom of the page is already empty ! It will be a problem to check all pages to check that the height of the "HTML tag" is enough to show the picker under the input. Is it possible
Missing icon in download
The file ui-anim_basic_16x16.gif is missing from the downloader which is used for the loading state in the .ui-autocomplete-loading class which is in the css. P.S. is this forums search broken? keep getting a 404.
Jquery UI 1.8 sortable serialize method return always the same order
Hello I have a problem with the serialize method of sortable. It always return the same order even if I moved some element... I may miss something. Here is the code : $(settings.columns).sortable({ items: $sortableItems, connectWith: $(settings.columns), handle: settings.handleSelector, placeholder: 'widget-placeholder', forcePlaceholderSize: true, revert: 300, delay: 100, opacity: 0.8, containment: settings.columnsContainer, start: function
Sortable Drag Drop Grid problem while sorting
Hi All I am fairly new to using JQuery, I have a simple 3x3 grid of draggable items these items are organised into a sortable list and floated left to give me my grid. the drag and drop and sorting is working fine. The problem I have is while JQuery is doing this some of my drag "elements" fly out of my container making everything look messy. I have included a simplification of my code below, I hope someone can help resolve this issue. Thanks in advance <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Dialogs and centering
In IE and Firefox, I'm running into issues when creating multiple dialog windows, sourced from a static div in the page source. When I define the position as "center" or ["center", "center"] and another modal is present, it will shoot up to the top of the page, cutting off the top half of the dialog. Does anyone know of a solution to this?
LIVE Button()
Hi, Situation: buttons initialized on $().ready, but when I add some html with .ajax function (.load is not good for me ... ), i need to re intitialize the buttons, because they are not formatted by jquery ui. Is there a good solution to help this, because my workaround is not a good one i think. My workqaround: put the button widget initializes in a function and call it when i put a button into the html. But this a waste: 1. I need to call the function when i manipulate HTML - I just want to think
need help with adding tabs programatically
Hi, I'm trying to replicate, using the JQuery UI, the design pattern where a list of objects are displayed in a left pane, and clicking an object causes a tab to be created in a right pane, showing content related to the object clicked. My problem is that I can't figure out how to associate a tab with the object clicked, so that if the object is clicked a second time, the tab is simply selected as opposed to being created twice. I can't use the tabTemplate option, since only href and label
datepicker - set minDate of second datepicker on selection changed on date picker 1
Hi, I have two date pickers, when the first date picker has its value changed, I want the minDate variable on the second date picker to be updated to be datepicker1 + 1 day. My code isn't working since I added the minDate line, can someone point out where I went wrong? $("#arrivaldate").datepicker({ showOn: 'button', buttonImage: 'images/calendar.gif', dateFormat: 'dd M yy', numberOfMonths: 3, minDate: 0, onSelect: function(dateStr) { var newDate = $(this).datepicker('getDate'); if (newDate)
Datepicker stops working
Hi. I am using a datepicker in an asp.net mvc app. When the view first loads, I can access the datepicker by clicking the textboxes associated with it. I am attaching an ajax call to the onSelect event, which causes the textboxes to not work with the datepicker anymore after the first ajax call. None respond to the click event. Also, for some reason it doesn't work in firefox. Here is the code I am using: <script type="text/javascript"> function loadDatePicker() { $(".datePicker").datepicker({
jqueryUI dialog bug fix
Hi jquery-ui dialog is showing very large titlebar as shown in image below. I need quick fix Can anyone post css which I must apply in order to remove this bug.
Jquery UI tabs - How to set active tab depending on date?
Hi, Is there any way to set the active tab automatically by date? Say, for example, if I had seven tabs for each day of the week, and today is tuesday, what i would want is for the active tab to be the second tab out of the seven. My client wants something similar to this except it would be weeks in a 2 month period (so 8 tabs for 8 weeks) as opposed to days in a week. Is that possible? Any help would be greatly appreciated!
Theming confusion
Hi After reading the docs about theming I am still a little confused. The basic point seems to be that look and feel classes are in theme.css which can be customised. And that any one widget gets its own css e.g. accordion.css. OK so far. But: i) The draggable widget does not appear to have a plugin specific CSS file based on my custom download. Is this correct? ii) What is core.css? It is imported by base.css and provides structural markup for helpers. It would be imported if I used all.css but
Vertical-align on accordion header
Mostly all my headers in my "accordion" have 2 lines. These one are correctly align with the arrow icon. Only, I've got one header which is displayed on only 1 line. This header is not aligned with the icon (it's too high). To resolve this problem I tried to put all my headers vertically-align in "middle". I've look around the web, searched different forums, looking for a solution : and I found one! .ui-accordion-header{display:table-cell; height:50px; vertical-align: middle;} This simple line
UI tabs for main navigation (ASP.NET)
Hi I'm trying to use the UI tabs to navigate between ASP.NET pages, via ajax. This is the code I have at the moment: <script type="text/javascript"> $(function() { $("#tabs").tabs(); }); </script> <div id="tabs"> <ul> <li><a href="page1.aspx">Page 1</a></li> <li><a href="page2.aspx">Page 2</a></li> <li><a href="page3.aspx">Page 3</a></li> <li><a href="page4.aspx">Page 4</a></li> </ul> </div>This will let me navigate from page to page, but the
how to send parametes to modal-message dialog box?
HI, I want to send some database values to the modal-message dialogue box from a php page. Please help me regarding this issue Regards, Abhimanu Handoo
Ui Tabs external url not ajax
Hello, I am Fernando from argentina. I want to know how to make a tabs send me an external url . I add the link to <a href=""> </a><ul> <a href=""> </a><li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="http://forum.jquery.com"><span>Three</span></a></li> </ul> <div id="fragment-1"> Lorem ipsum dolor sit amet, </div>
Tabs - Reloading tab content from link within tab
Hello! I'm a complete newb at jquery so my apologies is this has a very obvious solution... I am trying to use ui tabs with ajax to load content from php. I have the tabs working okay but I am trying to paginate the content using php and where I am falling over is reloading the tab content to show the next n items. My php generates html along the lines of: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <a href="processcontent.php?startitem=6">Show
visuals with button enable/disable
I just started using jquery ui button and am experimenting with .button('enable') and .button('disable'); and while it does in fact enable or disable the button, and style the button like the rest of the them, it provides no visual feedback that the button is disabled. Am I missing something? Dean
Two datepickers. Change second datepicker to the value of the next day value of first day picker
Hi, I have two date pickers. On arrival date, one departure date. When the value of the arrival date picker is changed, I want to change the departure date picker to be the arrival date value + 1 day. I can't figure it out. Here is my code. $("#arrivaldate").datepicker({ showOn: 'button', buttonImage: 'images/calendar.gif', dateFormat: 'dd M yy', numberOfMonths: 3, minDate: 0, onSelect: function(dateText, inst) { var newDate = dateText; $('#departuredate').datepicker('setDate', newDate);
Next Page