I am using setExtremes to zoom in on detail in a chart, as well as allowing the user to zoom 'x,y' by selecting in the chart. When the user zooms, they get a 'reset zoom' button, however when I call setExtremes, I don't.
Is there a way for me to force the 'reset zoom' button to appear programatically ?
UPDATE:
calling
if( !chart.resetZoomButton ) {
chart.showResetZoom();
}
inside the afterSetExtremes event handler makes the button appear, but clicking it doesn't do anything.
UPDATE:
Rather than calling setExtremes, I've changed to calling
chart.xaxis[0].zoom(minx, maxx);
chart.yaxis[0].zoom(miny, maxy);
chart.redraw();
This has the same affect as the user zoomin in by selecting on the chart.
Just had a look around the HighCharts source code, it looks like this may work out for you:
chart.showResetZoom();
Also, in order for the button to work correctly, you should use axis.zoom instead of setting the extremes:
axis.zoom(newMin,newMax);
Let me know if it works!
You can use showResetZoom, but you have to check if the reset button is already visible, otherwise it won't desapear.
if( !chart.resetZoomButton ) {
chart.showResetZoom();
}
This approach works well:
if (!$('.highcharts-button').length) {
chart.showResetZoom();
}
This is assuming that the only button that might show is the "Reset Zoom" button. If it is already there, don't show another.
If you don't do this check, a new button is added each time you call showResetZoom(). Clicking the visible (most recent) button resets the zoom and removes the button but the older buttons are still visible and do nothing.
If you are using setExtremes you can also set min and max to null to reset:
chart.xAxis[0].setExtremes(null, null)
Related
i found this example that allows to set double click zoom to true. I need to be able to zoom in a single click how can I do that in high charts.
DoubleClick zoom example here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/doubleclickzoomto/
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
Use mapZoom after click event. In click event you have access to values of clicked place on a map.
Note: You may need to create some if-else statement, to prevent clicks on legend, +/- buttons etc.
you can use zoomTo() , it'll zoom to a particular point wherever you have clicked
here is a fiddle
oneclickzoomTo()
I am trying to set up a JQuery Mobile 1.3 site that uses a panel and a slider.
Problem is, that using the slider triggers the panel, which opens on a "swiperight" event, as I am moving the slider to the right. The slider will be for pagination, the panel for a menu.
Code here:
http://jsfiddle.net/kMARn/1/
Move the slider to the right and the panel will open.
I have tried using the .not() selector for the panel to not react on the slider:
$(document).not("#slider").on("swiperight", function(event, ui) {
$("#myPanel").panel("open");
});
But it won't work, the panel opens when i move the slider to the right. Tried a bunch of variants too, but I'm lost...
Any ideas?
Thanks!
A bit late to the party, but you can disable swipe-to-close by setting the data-swipe-close attribute to "false" on the panel div.
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html
In my case I used this simple code, without data-swipe-close = "false" in panel.
Keeping panel close with swipe right, outside of the slider.
$('#panel').find('#slider')
.on('slidestop',function(e,ui) {
var value = e.target.value;
//...operations with slider value...
})
.parent().on('swiperight',function(e,ui) {
e.stopPropagation(); //block panel close
})
From the 1.3.0b1 Docs for Swipe:
"Triggers when a horizontal drag of 30px or more (and less than 75px
vertically) occurs within 1 second duration"
This applies to and can be configured for swiperight too. You can make the slider small in length and this would ensure that both the slider event stop and the swipe are not triggered at the same time, yet that may not be practical for all scenarios.
What might be better is to bind the swipe right to a DIV or section of the page. By this, I mean if you have a 75 px div box on the left hand side of the display, and when a swipe event occurred within that div, it could trigger the menu.
I feel the logic here might be better controlled by a button, much like used in the Facebook App to display there slide out menu. In the Dolphin browser on Android, this type of event also triggers a bookmark menu, so if a page has a swiperight event and trigger it, I sometimes get both the event and the bookmark menu from the App. Annoying!
I did fork your jsfiddle and will play with it more (http://jsfiddle.net/Twisty/Hg2pw/). FYI, they have JQM 1.3.0b1 in their available frameworks so you don't have to link it in your HTML. If I find some more info, I will comment here.
The following solution is more a workaround. It should be relatively reliable though.
$(document).ready( function () {
var menu_available = true;
$(document).on("swiperight", function(event, ui) {
if (menu_available) $("#myPanel").panel("open");
});
$("#slider").on("slidestop", function( event, ui ) {
menu_available = false;
window.setTimeout(function() {menu_available= true;},250);
});
});
The variable menu_available is false for a 250 milliseconds right after the slide stops. The window.setTimeout block will reset the variable so that the menu is available again.
This is a stupid workaround, but jQuerys function event.stopEventPropagation(), which IMHO would be the correct way to go, didn't work.
I'm using Mobiscroll 2.0.3. The datepicker view gives ok button on the left and cancel button on the right. Can I exchange the position, like the cancel button on the left and set button on the right? Because I have ok/cancel buttons placed in the opposite way to Moviscroll on the site. Users would get confused if the button positions are different at each.
You should be able to do that just using CSS and overriding the styles. I did it for the scroll-wheel view but the idea is the same (also note that that this was for mobiscroll 1.5.3 so the the markup and classes may have changed)
/* overide stlyes for mobi date/time picker */
.dwb-c
{
float:left;
margin-bottom:12px;
}
.dwb-s
{
float:right;
margin-bottom:12px;
}
I know it's late but if someone try to google it, just try this https://docs.mobiscroll.com/jquery/datetime#opt-buttons
You can set an array of buttons to display and you can use string names if you wanna show default buttons. So if you wanna change direction just set buttons like this:
buttons: ["cancel", "set"]
I've implemented drag and drop OK with jQueryUI draggable and droppable.
For the less savvy users, I'd like to also offer a visible "move" button. When they click this button, the element would be picked up, and when they click again on a drop target, it's dropped. So the same as drag and drop, but started with one click and dropped with another.
I know it would be possible to do this with separate code, but I'd rather not reinvent everything for a slight variation. Is there a way to get jQueryUI to do this?
The only thing I found is calling the trigger method of the draggable, but you have to pass a mousedown event...
Thanks
See my answer on this other question. If you change it so instead of
$("#headerDiv")
.mousedown(function(event) {
x = event.pageX;
y = event.pageY;
$(this).parent().addClass('movable');
})
.mouseup(function() {
$(this).parent().removeClass('movable');
});
bind to click and implement a toggling mechanism to decide if you are beginning the drag (mousedown equivalent) or ending the drag (mouseup equivalent) you should be most of the way there.
I would use .animate to animate the object to its target. I have done this before with a game. For example you could specify top and left coordinates for the element to move to onClick of the button.
how can I animate only a part of an element?
I show/hide a div using jquery-ui's show method but I'd like to start/end the animation from/to a given height of the element.
My dev website can be seen here (link removed). When clicking on the 'Contact' button the contact page shows up or hides if it's already open. Since I couldn't find how to starts my animation from a given height I added a fixed button when it's closed, but when the contact button of the contact page overlaps the fixed button when it's closing...
Any help welcome!
looking for something like this??
http://jsfiddle.net/rlemon/F6Efp/8/
You can also add any fade or whatever effects. This is using a single button to animate both open and close. You could also attach a attribute to the button tag to define it's current state.