using range slider to select a subset of time
we have an interesting problem we're using a range slider to show an available range of time, and allow a user to select a subset of this time range so the user could use the example below to select any range of time that starts on or after 6:15 and ends before or on 12:32 6:15----------------------------12:32 we also have times that span across a day - so the slider may look like this 19:12-------------------------4:36 can anyone think of a clever way to accomplish this - it's got me stumped
$(window).load inside dialog
Hi guys, this is probably a stupid question, but let's see. I have a modal dialog in which I load a php page: $('#dialog').load('page.php', function() { show dialog }); now, on that php page I need to do some actions (actually, load the jCrop api, which it seems can be only loaded at $(window).load time, so that all elements are fully loaded before my actions). It doesn't seem to work, also if I try with: $(window).load(function() { alert("lol"); }) nothing happens, thus th question is: is there
text in progress bar
Hello :) Love the jquery ui. i wondered if its possible, to write a text within a progress bar. maybe a percentage. would save place. maybe someone tried it already. Regards Simon
Restrict Dragging with Sortable Portlets
Using the example of the Sortable Portlets: http://jqueryui.com/demos/sortable/#portlets Is there a way to modify it so that the portals are only dragged when you click on the "portlet-header" divs, rather than the containing "portlet" div Basically, I want the Portlet to move if you click on the header bar, but not if you click on the content. Thanks, Andy
Dragging Sortable Portlets
Using the example of the Sortable Portlets: http://jqueryui.com/demos/sortable/#portlets Is there a way to modify it so that the portals are only dragged when you click on the "portlet-header" divs, rather than the containing "portlet" div Basically, I want the Portlet to move if you click on the header bar, but not if you click on the content. Thanks, Andy
absolute and root-relative image urls in slider handle not working in IE6
When I use a root-relative or absolute url for the background image of a slider handle I get very strange behavior in IE6. example: .ui-slider-handle{ background:url("http://www.foo.com/scrollbar/handle.gif"); } The background will disappear on rollover momentarily, and disappears throughout dragging. Often it will not reappear upon release. In the status bar I can see the page trying to download this image repeatedly.
jquery integration problem with Google Maps app
Hi, I have a Google Maps app that runs fine. Am new to JQuery - just downloaded and tried to use an accordion widget, but getting error (Object doesn't support this property or method) in the debugger. Am able to create this widget standalone in a plain HTML file - trouble starts when I integrate with GMap and its libraries. Have tested/ruled out the basic problems I could think of - any pointers? THanks, Rob
Help with dialog buttons
My apologies if this is a stupid question...I recently inherited a jQuery dialog component and am trying to ramp up. Here is the problem: We have 2 buttons on the dialog box -- but we need for one of them to have a different class applied. It is automatically styling the buttons the same...How do you apply a unique class to a button? Here is the function I'm using to call the dialog box: function seDispConfirm() { $(function() { $("#dialog").dialog({ bgiframe: true, resizable:
How long for messages to post
Hello, I posted a question to the jQuery UI groups this afternoon, my first one, and don't yet see it posted. Does it usually take hours - days for messages to post? Thanks! Neil Cannon
How do i put two accordions on one page?
Hi, How can I have two accordions on the same page? I have tried the using two different classes but that doesn't work. $(function() { $("#accordion").accordion(); $("#accordion1").accordion(); }); Using the same class for both accordions causes only the first accordion to be rendered but not the last one in the page. Any help is greatly appreciated. Thanks, Peter.
Draggables and absolute positioning
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii"> <meta name=Generator content="Microsoft Word 12 (filtered medium)"> <style> <!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face
Datepicker month drop down
Hello All, I am running into an issue where the month drop down will only display from January up to the current month, as the date range is limited to the current date and 10 year in the past. It makes sense that the month drop down would not let me select November of 2009 as that is in the future, but since the month is listed before the year, users are attempting to set the month first, then the year. I would like to have the datepicker display any month but only allow the date that is selected
Questions about drag and drop
I have drag and drop mostly working fine, but there are still a few minor issues that I'm trying to work through. I'm wondering if the following is possible: * Get the elements surrounding the area where a drag item was dropped. Say I have the something that looks like this (dumbed down): <div> <div>First Div</div> <div>Second Div</div> <div>Third Div</div> </div> If I drop the drag item between any 2 of the contained divs above, is there a way for me to get a handle on either one? Here is code that
IE bug when displaying JQuery Slider
IE seems to have an issue with the slider control when it is put in a Div with an overflow set to scrolling. When you scroll the div content the slider remains static and all other content scrolls by underneath it. I t looks as though IE is not handling the style "position:relative" on the slider properly. It looks like while it computes the proper X/ Y coord, positioning the slider based on it's parents dimensions it does not re-evaluate it once that parent starts to move as if the actual positioning
Datepicker integration to exclude days
Hallo all. I need to configure the datepicker to disable days from a date array in a dynamic way. I have a javascript Array that contains dates that I want to enable in a yyyymmgg pattern as shown in this code http://pastie.org/565043 I need to integrate these information to create a datepicker with only that days enable. Is there a simple way to achieve this goal? Or some suggestions? Kind regards Massimo
Drag and drop a simple demo
I hosted a very basic and simple demo for Drag and Drop, just for fun at: http://tinyurl.com/m76g5l
modal window + ajax
Hi, I'm using a dialog to generate a modal window, how can I reuse my current modal window to display a different page? I'll display a series of next and back pages. Thanks
Using datepicker functions to expand functionality
I'm trying to use the jquery ui datepicker as an event calendar, which requires some differences from what is currently available. I have it almost completed but I'm running into one dead end. The way I am modding the widget is to allow it to generate itself as normal, and then going over the html with my own code and changing or adding things to how I need them to be. The issue is that the html is regenerated every time the user clicks to advance or go back a month, so I need to run my code again
Tabs, Display: none, SEO and Accessibility
I'm implementing jQueryUI's Tabs on a site where we want to ensure that we meet strong SEO and Accessibility requirements. I just noticed that it's using 'Display: None' to toggle the visibility of each tab's contents. I was under the impression that that is bad form in terms of both accessibility (screen readers will miss it) and SEO (google doesn't like hidden text) and that the preferred method was to use absolute positioning off-screen instead (typically using a large negative offset). My questions:
Issue with date picker
Here is my code $(function() { $('#dob').datepicker({ changeMonth: true, changeYear: true, yearRange: '-65:-18' }); }); Now, when I go to select a year from the drop down, say 1971, the year changes to 1906 which is 65 years past like my first part of my date range. Why is it doing this? Derek
UI 1.7.2 + tabs + delete button
Hi guys, I am working with version 1.7.2 Is there a nice sample to add a delete button on tabs? Thanks
Jquery Revert
I have two divs, I am able to drag and drop into this divs. But i want each div to contain only one draggable item. If one more item is dragged into it, then tht should revert back.
Joomla + jQuery
Hello everybody. Sorry about my English ... I wonder if anyone here has used the jQuery UI together to joomla, and I know how to do it ... Thank you! Marcus Sá http://www.vinilabs.com/blog/wordpress/
Datepicker corrupt
I downloaded a jquery UI download that had the UI core and the datepicker was corrupt. I could get the development bundle to work, but the minified file didn't not work correctly. I downloaded a new version with a few effects and it now works fine.
Datepicker onChangeMonthYear
Hi there! $('#calendar').datepicker({ changeMonth: false , changeYear: false , onChangeMonthYear: function(year, month, inst) { $.getJSON("json.js", function(json){ ... }); } }); I would like to if onChangeMonthYear firing after the new month has been loaded. I tried to following lines I read another post but wont worked: $.datepicker.oldAdjustDate = jQuery.datepicker._adjustDate; $.datepicker._adjustDate = function(id, offset, period) { //overriding a datepicker core function this.oldAdjustDate(id,
How to insert form from a XML-file
I have a generated XML-file: http://www.decebal.nl/cgi-bin/contact2.cgi?command=getForm&form=contact In my HTML-page (http://www.decebal.nl/newsite/contact2.shtml) I have: $(document).ready(function(){ $.post("/cgi-bin/contact2.cgi", {command: "getForm", form: "contact"}, function(xml){ var form = $("value", xml).text(); $("div#contact_form").replaceWith(form); } ); }); and: <div id = "contact_form"> </div> But instead of getting the wanted form I get only the following text: Organisatie Soort organisatie
Elements are still droppable while they're in the hidden part of a scrollable container
As an example is better than any long text, here's my problem : http://pastie.org/571208 As you would see, droppable element is still dropable event if it's covered by another div. I tried to fix it with the accept, but it's not the proper way because sometime the droppable div could be half visible, and because the ':visible' return true while the element is not really hidden (display:none) I've looked through documentation about droppable and draggable, but I didn't found any option that could
Droppable box is still droppable even if it's covered by another one
As an example is better than any long text, here's my problem : http://pastie.org/571208 It's also visible at http://lickmychip.com/ As you would see, droppable element is still dropable event if it's covered by another div. I tried to fix it with the accept, but it's not the proper way because sometime the droppable div could be half visible, and because the ':visible' return true while the element is not really hidden (display:none) I've looked through documentation about droppable and draggable,
dialog and draggable element inside
Hello All I have following issue. I have jquery ui dialog. inside it there is list of items. Each item shoud be draggable outsite dialog. This dialog show possible list of items that could be inserted to some other element outsite dialog. When dragging item and leaving bounds of dialog it disappears visually. Drop event works but visually it is not available. As I understand this is because of the dialog container. How could I fix this issue? May be some options. Code is simple as possible: $("#dialog").dialog();
jquery UI dialog and dragable element inside it.
Hello All I have following issue. I have jquery ui dialog. inside it there is list of items. Each item shoud be draggable outsite dialog. This dialog show possible list of items that could be inserted to some other element outsite dialog. When dragging item and leaving bounds of dialog it disappears visually. Drop event works but visually it is not available. As I understand this is because of the dialog container. How could I fix this issue? May be some options. Code is simple as possible: $("#dialog").dialog();
Multiple dynamic sliders
Hi folks, I'm generating jQuery UI slider elements in a Rails helper: def add_link(form_builder, method) link_to_function 'Add' do |page| page << "$(\"div#range\"+new_id+\"\").slider({ range: true, min: 1, max: 7, values: [parseInt($(\"#lecture_events_attributes_\"+new_id+ \"_from_block\").val()), parseInt($(\"#lecture_events_attributes_ \"+new_id+\"_to_block\").val())], slide: function(event, ui) { $(\"#lecture_events_attributes_\"+new_id+\"_from_block\").val (ui.values[0]); $(\"#lecture_events_attributes_\"+new_id+\"_to_block\").val
Slider's Step in 1.2.6/ UI 1.6?
Hi, Can anyone in the knowloedge confirm that sliders can snap to step values in 1.2.6/UI 1.6? I couldn't get that feature to work, I paster the source from jqueryui.com and gave it a test in both environments: 1.2.6/UI 1.6 vs 1.3.2/UI 1.7.2 The markups look different. I'm wondering whether the snap option can somehow be tweaked to work in the legacy environment which I'm forced to use. Anyone succeeded? Best, M.
Dialog button bar
Hi, how can I place the button bar at the bottom of dialog? On the page http://docs.jquery.com/UI/Dialog#theming states clearly but I can't find any example. It says: "A bottom button bar and semi-transparent modal overlay layer are common options that can be added. " How? thanks
before/after prepend / append - opening and closing tags only
Hi, I'm wondering if there's a way to prepend an opening tag <li> only and append a closing tag </li> only. I have this structure: <div class="row-1 row-odd"> blah blah </div> <div class="row-2 row-even"> blah blah </div> and I need this <li> <div class="row-1 row-odd"> blah blah </div> <div class="row-2 row-even"> blah blah </div> </li> Thanks very much for any suggestions!
Datepicker
I'm trying to figure out how to either write this code or find some good product out there already that does what I need. I want clients to be able to look at a calendar that shows 3 months side by side. The purpose is for them to click on a date that they'd like to schedule an appointment. So, if there are appointment times available on July 31, 2009, I want them to be able to click on the date and then see available times during that day. If there are not available times during that day, I don't
jQuery UI Dialog
I found a very easy way to submit dialog on enter in your UI DIalog, hope someone will use it :) function: function form_click_enter(form) { var dialog = $(form).parent("div").siblings("div.ui-dialog- buttonpane"); $("button:first",dialog).click(); // right one } and typical html you need to put in your dialog: <form id="add_place_form" onsubmit="javascript:form_click_enter (this);" action="javascript:;"> here inputs etc... </form> It works really fine for me.
Selectable Enhancements
I'm trying to add a few things to my selectable and was wondering if someone could point in the right direction. Firstly i'm trying to be able to be able to hold shift and select different items and have it select the range between them. Secondly i've got two lists and would like to be able to drag and selection across both of them. There was one way i got this to work which was put the two lists inside a div and then give that an id which i loaded when initialising the selectable. This however broke
remove the $ from the string.
i m setting the price of the products as $('#total-price').text() . it shows like this $800. now i want to remove the $ from $800 and want to use just 800 in my code . how i can remove this $ from string $800 ?
Droppable box is still droppable even if it's covered by another one
As an example is better than any long text, here's my problem : http://pastie.org/571208 You also can see it here in action : http://lickmychip.com/ As you would see, droppable element is still dropable event if it's covered by another div. I tried to fix it with the accept, but it's not the proper way because sometime the droppable div could be half visible, and because the ':visible' return true while the element is not really hidden (display:none) I've looked through documentation about droppable
Using spans with ui-icon seems to set the spans to block-level elements
I want to use the plusthick and minusthick icons as labels, but when I add them to my page, they draw on the next line down, rather than next to the objects that I put them near by. Any ideas?
Next Page