Can I set the date on a JQuery UI Calendar which is not bound to a textbox or a label but to a from codebehind?
<script>
$("#COICalendar").datepicker();
</script>
<div id="COICalendar" class="ui-datepicker-calendar"></div>
Related
i'm applying jquery sortable on list of divs below is my code
<div class="area_options">
<div class="area_top"><p>At the bar</p></div>
<div class="area_list"><p>Appetizers</p></div>
<div class="area_list"><p>Beverages</p></div>
<div class="area_list"><p>Cocktail</p></div>
</div>
I want to make area_top div fixed which is heading of container.And apply sortable on the base of are_list div only.
Now sortable working fine and are apply also on area_top div.
How i can make area_top div fixed?
Thanks
You need to set the option items of the sortable() to .area_list
The documentation of the property here says:
Specifies which items inside the element should be sortable.
EDIT: With your current html, the javascript would be like this :
$(".area_options").sortable({ items: ".area_list" });
I thought the basic syntax for a slider was:
<div id="slider"></div>
$("#slider").slider()
But that doesn't make a visible slider. Inspecting the div element, I see that some stylings were applied, but the slider isn't visible.
Here's a fiddle: http://jsfiddle.net/yqNcn/
You have not included the CSS for jQuery UI so classes are applied but styles are not (there are actually none to apply). Here's an edited fiddle that includes the styles (look at the Resources panel); the slider is visible as it should be.
First Import your javascript Files* jquery.s and import Jquery UI widget Jquery-ui.js
Then
Put Your Css Div Tag with id <div id="slider"></div> this Example
<div id="slider"></div>
then Call Jquery slider function....
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
I have some divs on my page that are made both resizable and draggable using jQuery UI. When I call html() on those divs, I get not only the content of the div, but also some extra content inserted by jQuery UI when I made them resizable:
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>
text() works for retrieving the current text, but when I try to set the content using $("selector").text("new text"), it replaces the jQuery UI code, making the div not resizable anymore.
How can I just get/set the text, not the jQuery UI resizable code?
You could try to make another div within that div which holds the content and has 100% width and height, then make the parent div resizable.
I have a page with several sections of significantly varying length within a jQuery UI Accordion. If I open a new section (which collapses one of the longer sections above), I'm left at the bottom of the page. Because the sections are of significantly different heights, I can't use the autoheight feature without it looking very strange. Is there any way to use something like scrollto to automatically go to the top of the section I've just expanded?
You can bind a function to the accordionchange event and use jQuery scrollTop():
JavaScript
$(function () {
$("#accordion").accordion({
autoHeight: false,
header: "h3"
});
$('#accordion').bind('accordionchange', function (event, ui) {
$(window).scrollTop(ui.newHeader.offset().top);
});
});
HTML
<div id="accordion">
<div id="accordion-one">
<h3>First</h3>
<div>Some lengthy text</div>
</div>
<div id="accordion-two">
<h3>Second</h3>
<div>Less lengthy text</div>
</div>
<div id="accordion-three">
<h3>Third</h3>
<div>Other text</div>
</div>
</div>
I tested this in FF8.
Links
Accordion change event
jQuery scrollTop()
I'm trying to put a JqueryUI Datepicker on an AJAX appearing form.
The traditional $(".datepicker").datepicker(datepickerParams); does not work since the ".datepicker" element is not present on DOM ready.
I've tried the live() method but there is no load event on <input>.
Then, I do the following :
$("#datepicker_button").live('click', function() {
$('.multiFieldsDatepicker').datepicker(liveMultiFieldsDatepickerParams).focus();
});
It works when I focus on the input field but I can't put the calendar icon to show the calendar.
Is it possible to catch an event when the form appears and set the datepicker with $(".datepicker").datepicker(datepickerParams); ?