I try to show a loading effect (chart.showLoading()) when my zoom is finished.
I used the events : "afterSetExtremes", "setExtremes", "redraw", but they don't work.
Example :
{
events : {
redraw : function(){
chart.showLoading('Loading...');
}
}
}
And I don't know where I put my chart.hideLoading() function.
I want the same effect : lazy-loading but without async request.
Am I forced to use an async request ?
In setExtremes use chart.showLoading('Loading...'); and in afterSetExtremes use chart.hideLoading();
Related
In high chart there is an event for clicking on the bar. But bar is small in height it is impossible to click on it. Hence I want the event in high chart for further processing.
E.g. I want the event for month name in following example.
Thanks In advance.
If you don't want to use JQuery you can use it as follows
chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
label.style.cursor = "pointer";
label.onclick = function(){
alert('You clicked on '+this.textContent);
}
});
complete code at http://jsfiddle.net/t07ok5v3/5/
Alternate solution, maintained since Highcharts v3 is to use Custom Events plugin. Plugin adds a lot of new event, natively not supported by Highcharts.
Demo: https://jsfiddle.net/BlackLabel/Utx8g/963/
Events are added the same way as official events in Highcharts, and we don't need to re-inspect every release the DOM:
xAxis: {
labels: {
events: {
click: function () { ... }
}
}
}
I get Error: Object doesn't support property or method 'forEach' when running the solution from Malay Sarkar in Internet Explorer. Here's a workaround I used which works in both Chrome and IE.
for (let i = 0; chart.xAxis[0].labelGroup.element.childNodes.length; i++)
{
chart.xAxis[0].labelGroup.element.childNodes[i].onclick = function(){
alert('You clicked on '+this.textContent);
}
});
I'm trying to get the click and mouseOver handlers to work with Highmaps. I've checked the docs and tried to follow their examples. I inserted the event handler configs just about everywhere where I think it makes sense.
The wanted result is that the click and mouseOver handlers get called when hovering and clicking on the labels (pin icons) in the map.
Fiddle with my non-working code:
http://jsfiddle.net/fyp86hct/1/
One of the Highmaps examples shows that you should be able to do this:
point:
{
events:
{
click: function ()
{
alert("this doesn't work"); // <-- non working event handler
},
mouseOver: function()
{
alert("this doesn't work"); // <-- non working event handler
}
}
}
Unfortunately it is not supported, but you can add shape by renderer and then attach click event.
How can I make tooltip do not be closed if input has focus? It works when it gets focus with tab, but if I use mouse to focus on input, tooltip will be closed on mouseout even if input has focus.
I can do
$('input').tooltip().off("mouseover mouseout");
But this will dissable tooltip on hover and I just need to dissable mouseout when input has focus.
http://jsfiddle.net/3dX6d/2/
http://jsfiddle.net/3dX6d/3/
Try this:
Working Example
$("input").tooltip({
close: function (event, ui) { //when the tooltip is supposed to close
if ($('input').is(':focus')) { // check to see if input is focused
$('input').tooltip('open'); // if so stay open
}
}
});
New and Improved Method:
Better Working Example
$("input").tooltip({
hide: {
effect: 'explode'// added for visibility
}
}).mouseleave(function () { // on mouse leave
if ($('input').is(':focus')) { // if input is focused
ui.tooltip.preventDefault(); //prevent the tooltip's default behavior
$('input').tooltip('open'); // leave the tooltip open
}
}).focusout(function () { // on focus out
$('input').tooltip('close'); // close the tooltip
});
API documentation:
:focus
event.preventDefault()
.focusout()
open method
close event
Instead of adding all these other listeners, I looked into the actual and decided the most effective way is to just inherit the widget and add an extra flag
http://code.jquery.com/ui/1.10.3/jquery-ui.js
Here's a demo
http://jsfiddle.net/3dX6d/7/
(function ($) {
$.widget("custom.tooltipX", $.ui.tooltip, {
options: {
focusPreventClose: false
},
close: function (event, target, content) {
if (this.options.focusPreventClose && $(this.element).is(":focus")) {
// Don't call the parent's close() call but therefore have to add event on focus out
this._on({ focusout:this.close });
} else {
this._superApply(arguments);
}
}
});
}(jQuery));
$('input').tooltipX({
focusPreventClose: true
});
Compared to the other solution, this doesn't require us to do more work with the extra open calls (which actually does several other calls within it). We simply prevent the tooltip to close when we have the focus on the element, as requested by original post.
The only thing you need to do to fix the ui error is just pass it in as a parameter per documentation.
http://api.jqueryui.com/tooltip/#event-close
$(document).tooltip({ selector: "[title]" }).mouseleave(function(event, ui) {
if ($('input').is(':focus')) {
ui.tooltip.preventDefault();
$('input').tooltip('open');
}
});
Here's what I want to do:
load basket using Ajax
show "wait" message
once loaded, refresh basket.
When I try to use pageinit function:
$(document).bind('pageinit', function(evt) {
console.log(evt);
}
Console log show it's called 29 times!
Everything is on one HTML page, and I'm using $.mobile.changePage() to change pages. So I tried this hack:
$(document).bind('pagebeforeshow', function(evt, pg) {
if (pg.prevPage.length==0) {
/* first page = code executed once */
var pg = $('#page-basket'),
footer = pg.children( ":jqmData(role=footer)" );
footer.hide().trigger('updatelayout');
AjaxGetBasket( function(data) { console.log('ajax basket ok'); });
}
});
But the layout is never updated.
How shall I do to modify page but only once at the beginning?
Try delegating the pageinit event handler so it only runs when #page-basket is initialized:
$(document).on("pageinit", "#page-basket", function() {
$(this).children(":jqmData(role=footer)").hide().trigger("updatelayout");
AjaxGetBasket(function(data) {
console.log("ajax basket ok");
});
});
I do not understand if your problem is solved, but i am in the same situation explained in the question and i have solved the problem binding a function to pagecreate event:
$(document).bind("pagecreate", function(e){
// call ajax and update the DOM of first 'page'
});
and that's all.
How do I get the jQuery-UI sortable feature working on iPad and other touch devices?
http://jqueryui.com/demos/sortable/
I tried to using event.preventDefault();, event.cancelBubble=true;, and event.stopPropagation(); with the touchmove and the scroll events, but the result was that the page does not scroll any longer.
Any ideas?
Found a solution (only tested with iPad until now!)!
https://github.com/furf/jquery-ui-touch-punch
To make sortable work on mobile.
Im using touch-punch like this:
$("#target").sortable({
// option: 'value1',
// otherOption: 'value2',
});
$("#target").disableSelection();
Take note of adding disableSelection(); after creating the sortable instance.
The solution provided by #eventhorizon works 100%.
However, when you enable it on phones, you will get problems in scrolling in most cases, and in my case, my accordion stopped working since it went non-clickable. A workaround to solve it is to make the dragging initializable by an icon, for example, then make sortable use it to initialize the dragging like this:
$("#sortableDivId").sortable({
handle: ".ui-icon"
});
where you pass the class name of what you'd like as an initializer.
Tom,
I have added following code to mouseProto._touchStart event:
var time1Sec;
var ifProceed = false, timerStart = false;
mouseProto._touchStart = function (event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
return;
}
if (!timerStart) {
time1Sec = setTimeout(function () {
ifProceed = true;
}, 1000);
timerStart=true;
}
if (ifProceed) {
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouseover event
simulateMouseEvent(event, 'mouseover');
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
ifProceed = false;
timerStart=false;
clearTimeout(time1Sec);
}
};
The link for the top-voted Answer is now broken.
To get jQuery UI Sortable working on mobile:
Add this JavaScript file to your project.
Reference that JS file on your page.
For more information, check out this link.