Im trying to change slider max value on change event like this.
$("#slider-1").slider( "option", "max", $("#slider-0").val() );
In console i see that it changes, but it does not affect the sliders behavior like id hope it would. I have tried using the .slider("refresh") method but it does not help.
Is there any trick to update the slider so it uses the newly assigned max value?
Working example: http://jsfiddle.net/Gajotres/DTKDh/
$(document).on('pagebeforeshow', '#index', function(){
$("#slider-1").attr("max", 200).slider('refresh');
});
Related
This is my selection event handler in my code which I am for specific zoom timezones as you can see. What I am trying to achieve is to change the xAxis labels based on the zoom. Currently the following code does not work but I can not seem to find a solution to this problem online. Any thought?
Real question would be how can I alter highchart options through events. From the event parameter in the function I can access information but I can not change it.
I have two aproach, the first with changing inside event chart.redraw() will be called every time when chart is redrawn, for testing I added fired from a button.
redraw: function() {
let chart = this;
console.log(chart);
chart.xAxis[0].userMax = 8;
chart.xAxis[0].userMin = 2;
},
The next way is to update the axis object with a new set of userMax and userMin options.
chart.xAxis[0].update({
userMax: 8,
userMin: 2
}, true);
Live demo:
https://jsfiddle.net/BlackLabel/fcsd9hyo/
API References:
https://api.highcharts.com/highcharts/chart.events.redraw
https://api.highcharts.com/class-reference/Highcharts.Axis#update
I am using the jQueryUI resizable widget, and have a bunch of resizable boxes on a page. When the document loads, I initialize the widget, like so:
$('.ui-draggable').resizable({
minHeight: 10, // 10 is actually the default
minWidth: 10, // 10 is actually the default
resize: function() {
showProperties(this);
},
});
However, at some point I want only some of those elements to change resize options. What I'm trying to do is this:
if (type == 'sometype')
{
console.log($('#'+elementID).resizable('option', 'handles'));
$('#'+elementID).resizable('option', 'handles', 'e,w');
console.log($('#'+elementID).resizable('option', 'handles'));
}
This indeed outputs:
e,s,se
e,w
in the console, so the event is triggered and the selector is correct, but the code doesn't actually work: in fact, the handles remain the same, namely e, s, se.
Is this because I'm using a different selector from the original init? If so, how can I change the resize options only on a subset of originally-resizable elements? And if not, what could be the problem?
Handles are actually divs added to the element on which resizable is applied. It seems that changing the option doesn't refresh these handles. Maybe there's a way to apply the changes on specific subset and refresh, but I'm not sure how.
But one quick workaround would be to hide the handles you don't want instead of changing the handle option. You would have to set handle option to all the handles you'll need, and then hide those not wanted. Like this to remove se handle for example:
$('#'+elementID).find('.ui-resizable-se').hide();
I have a slider. When the user slides it, it adjusts the gamma of an image. Here is the code, very straightforward, works perfectly.
$('#gammaSlider').slider({
max: 125,
min: -125,
value: 0,
slide: function () {
//stuff to adjust gamma of image
},
change: function () {
//stuff to adjust gamma of image
}
});
However, when the user loads a different image, I want to programmatically set the slider to the value it should be at for the new image (a.k.a. allow flipping back and forth between multiple pages with separate gamma settings). To be clear, the newly loaded image's gamma is already at whatever value it was last set to. I am only seeking to adjust the UI to match the new image's value. For instance, if I increase page 2's gamma, then flip to page 1, I need to move the slider back to default from its increased position, and I need to do it without the code thinking I'm trying to decrease the gamma.
When I do this using the following, there's a problem:
$('#gammaSlider').slider('value', gamma);
The problem is that this is triggering the slide and change calls that I set up for the slider in the original declaration above, causing it to try to reload the image redundantly with new gamma values. Is there a way to change the slider programmatically WITHOUT triggering those calls?
You can use the fact that you can differentiate between a user change and a programmatic change via event.originalEvent. For example, you can have code that gets executed when the user makes a change, and different code that gets executed when you make a programmatic change like changing the value. Since changing the value will trigger the slider's change event, you can put your gamma change code within the block that only is triggered on a user's change, not a programmatic change:
change: function (event) {
if (event.originalEvent) {
//stuff to adjust gamma of image ONLY WHEN USER CHANGES THE SLIDER
console.log('user change');
}
}
You can see in this jsFiddle example that the slider's value is changed to 50, yet no log message is generated unless the user moves the slider. If you comment out the if condition you'll see the log message gets generated not only after the user changes the slider's value, but when you make a change to the value programmatically.
Maybe you can call the slider method passing a new configuration, which probably would be exactly the same object you are passing as parameter, but with the "value" field changed.
I have done a test in one of my old projects and it worked for me.
Is there a way to set by how much the slider moves when someone presses page up or page down? Currently, my slider moves by a value which is equivalent to one fifth of the slider range. I would like to set it to move by, say, 10 steps. Is there a way to do it?
You have to use the 'step' option for that:
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50
});
To solve the page up/ page down strange behavior, try this: http://jsfiddle.net/SPDBw/
From version 1.8. to 1.11., they've put the variable numPages inside the ui.slider container, and fixed it to 5.
Even if you override the keyCode handler to recognize the keys "PageUp" and 'PageDown" wouldn't fix the problem.
BUT, as a workaround, you can override this variable, contained in the prototype scope of the slider widget, at the beggining of your page load.
Pros: I don't need to worry about fetching the objects' max and min values
Cons: Solution is only a workaround, and solution can(and will) be broken in a future patch.
What I did was:
$(document).ready(function() {
$.ui.slider.prototype.numPages = 10;
});
Hope it works ;)
So what im trying to achieve is, applying any page transition when manually creating a page change.
so for example, say that on my webpage, i make it so that when the user swipes right, the website goes to a second page....like so
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage');
});
now i want to attach a page transition to this function. if it was on an actual link, then one would apply a data-transition but since this page change is being manually created, im wondering how to append a transition to it.
i tried for example
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage','flip');
});
etc but to no avail, Any ideas how i would put this into effect?
Thanks in advanced.
You've almost got it, you just need to declare the second paramater of the function (your options) within the {} parenthesis:
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage( "#secondPage", { transition: "flip"} );
});
Try replacing bind with on:
$('#firstPage').on("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage','flip');
});
I had the similar problem and this worked for me.