Sorry for the simple question.
I'm using a jQuery DatePicker. I want the little calendar icon to appear next to the text input area. I'm using the Smoothness jQuery UI theme.
Does jQuery UI include the calendar.gif icon (not the datepicker itself, but just the little icon)? If not, can you suggest where I can get a free small calendar.gif?
As I understand it, I add the calendar as follows:
buttonImage: 'images/calendar.gif'
Thank you.
You could use the built in icons from jQuery UI; there is a calendar icon. The code is something like:
$("#datepicker").datepicker({
showOn: 'button'
}).next('button').text('').button({
icons: {
primary: 'ui-icon-calendar'
},
text: false
});
See it in action: http://jsfiddle.net/william/rrcmq/.
It is inspired by this article: http://www.somethinghitme.com/2010/10/06/use-built-in-jquery-ui-icon-with-datepicker/.
I far as I know it does not. I provided my own when I used the datepicker with one but I already had an icon.
You can google it but there are some free icons here: http://findicons.com/search/calendar
Just go to JQueryUI site then click Demo and choose Dateicker and select icon trigger example. You will on this page(datepicker icon-trigger example), and the page will look like below picture.
Now you right click on the calendar icon marked by yellow and download it by choose "Save Image As..." and include it in your project than buttonImage: 'images/calendar.gif' will work fine.
Related
Strangely, I can't find any examples of the themes for the JQuery UI. UI Lightness, UI Darkness, Smoothness, Start, Redmond, Sunny, Overcast, Le Frog, etc. are options displayed in the dropdown menu on http://jqueryui.com/download/. I'd like to know if there's a place on the web that defines what these themes are. It would help me choose the most suitable theme for my website.
you can use the theme roller http://jqueryui.com/themeroller/ and select "Gallery", then click any theme you are interested to see how it look.
When I use this setting I have one in a form in a dialog, and one in a form that is in a popup. The dropdowns look different.
When data-native-menu="false" the dropdown in the dialog appears in another dialog, which actually looks quite nice. I assume this will allow a more consistent look and feel accross devices.
However when I use this setting data-native-menu="false" on a Select in a popup it does not show the standard select, not the dialog.
Thanks
There's a good reason for this.
As you can see there are 2 kinds of select widget. First one uses native looking select box (one showed with data-native-menu="true"). Other one still uses native select box but it hides it and shows custom jQuery Mobile select box widget (one showed with data-native-menu="false"). This jQuery Mobile widget is shown as popup. This is important point.
Second, mentioned problem is unsolvable, at least from the point of current jQuery Mobile framework, and here's why. In few words, when working with jQuery Mobile popups, one popup can't open another popup. Two popups can exist in the same time. Thou you can always close one popup before opening another one, but this is not usable in your case. Because jQuery Mobile select widget is popup it can't be used inside classic popup widget.
If you don' believe me you can find it in official documentation here, just search for text: "Chaining of popups not allowed". And you will see this text:
The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.
On the other hand, dialog is a variation of a classic jQuery Mobile page, just with large margin and semi transparent overlay. It can be used to show popup, just like normal jQUery Mobile page.
Is there a setting for highcharts tooltips where you can set it to display on click versus hover?
I have seen a lot of people discussing the tooltip staying on click but then there is still the hover present. Is there a way to disable the hover and use only click?
There is not a setting for that in Highcharts currently.
There is a feature request for this functionality here: http://highcharts.uservoice.com/forums/55896-general/suggestions/2607304-allow-the-tooltip-to-appear-when-a-point-is-clicke
Feel free to add your votes and comments.
UPDATE:
I have started using the jquery UI dialog for this purpose.
I disable the tooltip in Highcharts, and add a click event to the point in the plotOptions.
In that click function I call an external function, sending it the point object, and build my tooltip within the dialog.
http://jqueryui.com/dialog/
http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
You could also use Highslide for this purpose, and keep it all in the family.
http://highslide.com/
Working example:
http://jsfiddle.net/jlbriggs/LHZ3E/embedded/result/
Adding for those who has problems like me with useHTML: true and wants to display tooltip only on click and not on hover and wants to have only one tooltip on screen.
Here is a fiddle.
I'm using the jQuery UI datepicker and the tooltip function from the same collection. Both work perfectly for my application. Except where they both try to work. When I hover on the icons for previous or next months, I get a tooltip popping up that says "Prev" or "Next". When I click on the previous-month icon the tooltip stays visible, completely covering the month and year headline. (On the next-month icon it stays visible but it doesn't interfere. Much.)
The function of these icons is absolutely clear without the tooltip, and badly broken with it, but I can't figure out a way to disable the title="Prev" and title="Next" code.
I actually don't need tooltips anywhere in the datepicker because I'm using it strictly to set a date rather than display events in the calendar.
The solution is to be more specific in the "tooltip" selector.
I changed from:
$(document).tooltip();
to:
$("span.ui-icon").tooltip();
And it work for me now.
After initializing my datepickers I use:
$('.ui-datepicker-trigger').prop('title','');
You can add option for datepicker():
$(".datepicker").datepicker({
hideIfNoPrevNext: true,
minDate: "-2Y"
});
I need modal dialog box in which I can open forms and other html pages. It should have on/off and min/max button. Could anybody suggest me any link for the same. I am not getting this type of widget anywhere.
The JQuery plugin SimpleModal is pretty effective. I have used it before and am quite sure it should provide the functionality you require.