I'm fairly javascript and jquery. I'm trying to add a slider to my webpage. It's a basic slider where anyone can select a value between 0-100. I'm not sure how to mark SOME intervals in the middle.
This is the code i have so far
<script>
$(function() {
var temp = 0;
$( "#slider" ).slider({
animate: true,
value:temp,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value );
},
stop: function(event, ui) {
temp = ui.value;
//Do something
}
});
$( "#amount" ).val($( "#slider" ).slider( "value" ) );
});
</script>
It is functioning properly. What i wanna try to do is add interval markers at 0.25,50,75 and 100.
I have gone through a few questions on SO but not sure how to proceed with the implementation. Would appreciate the help.
I tried this implementation: http://jsbin.com/iwime but this is not what i am trying to do as i just want the ticks to appear at those regular intervals but users shold stll be able to select other values.
Thanks
Cheers
I am guessing you want something like this: http://jsbin.com/iwime/116
So, instead of using the number of ticks in the max option of slider, you use whatever max units you want to provide, e.g. 100. Then in refershTicks(), update the algorithm to toggle the class.
Slider settings:
var slider = $("#slider").slider({
...
max: 100, // the only change
...
});
And the refreshTicks() method:
function refreshTicks() {
var s = slider
, lo = s.slider("values", 0), hi = s.slider("values", 1);
var max = s.slider('option', 'max');
s.find(".tick").each(function(i) {
var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2; // the updated algorithm
var inRange = (i >= lo && i < hi);
$(this)
[(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
[(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
});
}
Similar to this SO Question : The answer from Bijan might help.
The implementation of jQuery UI slider he suggest may help you to find a solution:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
Related
I am trying to create a jquery handle that when you slide it it moves another div inside a container. Following is my js
function handleSliderChange(e, ui)
{
console.log('1');
var maxScroll = $(".content-item").width()*$(".content-item").length - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) },1000);
}
function handleSliderSlide(e, ui)
{
console.log('2');
var maxScroll = $(".content-item").width()*$(".content-item").length - $("#content-scroll").width();
$("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 10);
}
$("#content-slider").slider({
animate: true,
slide: handleSliderSlide,
change: handleSliderChange
});
So when I click on the bar both handleSliderChange and handleSliderSlide are called, but when i drag the slider it works fine any solution ? I don't mind cancelling the click function from the slider i only need the drag anyways
I found the solution to that, the trick is to check prior to running the methods for what type of event is triggered. This is how i did it
sliderBar.slider({
start: checkType,
animate: options.animateSpeed,
slide: handleSliderSlide,
step: options.step,
change: handleSliderChange,
});
function checkType(e){
_isSlide = $(e.originalEvent.target).hasClass("ui-slider-handle");
}
I am a little bit stuck:
I would like to change the "max" option of a JQueryUI slider while I am inside an event (e.g. change:).
How do I call the "max" option when I am inside an event?
EDIT: My code looks as follows:
$('#slider0').slider({
value: 100,
min: 0,
max: 500,
range: "min",
step: 50,
stop: function( event, ui ) {
var amt_val = (THIS IS THE CURRENT VALUE OF THE SLIDER)
if(amt_val === 400) {
$('#slider0').slider("option", "max", 10);
}
}
});
However, whenever I set the slider equal to 400, the handle and value go to 0, and the handle freezes.
You can change the option like
$( ".selector" ).slider( "option", "max", 7 );
Check the option tab of doc page for jQuery UI Slider
Demo: http://jsfiddle.net/joycse06/WKyYv/
I would expect the following code to start my slider at '30' in it's range of 0-250, but yet it is not.
$(function() {
$( "#slider" ).slider({
value: 30,
min: 0,
max: 250,
step: 1,
slide: function(event, ui){
$("#edit-varprice").val(ui.value + ".00");
}
});
});
Image : http://gallery.twardnw.com/var/albums/Misc/Screen%20shot%202012-04-03%20at%203.06.59%20PM.png?m=1333490924
Its working fine for me. See jsFiddle Demo.
Perhaps you are missing something else or doing something in other parts of your code, can you post full code?
try removing the value from the options u chose, and adding it later using:
$( "#slider" ).slider( "option", "value", 40 );
Could you lower your max to 50 and see if the slider handle is offset, if so then its working just fine. In the image it looks like its slightly offset. 30/250 is only 12% and may be deceiving.
I asked my question on gis.stackexchange.com because of its geo nature, but I figured I would have a larger response here. https://gis.stackexchange.com/q/18327/3773
I have been trying to utilize the jQuery UI Slider to control layer opacity in OpenLayers but I have an issue when trying to set the "value" option to anything other than the "max" value.
What I would like to see is the setOpacity method change my layer's opacity to 20% onload. However, the slider is shown in the correct position but the layer displays the "max" value of opacity (100%/opaque).
I need to force the webpage to setOpacity onload, but I am not familiar on how to do this.
Removed the any unnecessary code. Your help is much appreciated!
<script type="text/javascript">
var options = {maxExtent: new OpenLayers.Bounds(-10592586.767623,5113378.756775,-8275939.536344,7731361.313701)};
function init(){
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
map = new OpenLayers.Map("map",{
maxExtent: new OpenLayers.Bounds(-10592586.767623,5113378.756775,-8275939.536344,7731361.313701),
maxResolution:"auto",
units:'m',
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation({dragPanOptions: {enableKinetic: true}})
]
});
hii_1 = new OpenLayers.Layer.MapServer("HII","http://127.0.0.1/cgi-bin/mapserv.exe",{
map:'C:/ms4w/Apache/htdocs/hii/hii_landcover.map'},{
isBaseLayer:false,
transparent:true,
format:"image/png",
alpha:true
});
osm_mapnik = new OpenLayers.Layer.OSM("OpenStreetMap: Mapnik");
gmap = new OpenLayers.Layer.Google("Google Maps: Streets");
map.addLayers([hii_1,osm_mapnik,gmap]);
map.zoomToMaxExtent();
map.setCenter(new OpenLayers.LonLat(-9434263,6422370),5);
</script>
<script>
$(function() {
$( "#slider1" ).slider({
range: "min",
min: 0,
value: 20,
slide: function(e, ui) {
hii_1.setOpacity(ui.value / 100);
$( "#amount1" ).val( ui.value );
}
});
$("#amount1" ).val($( "#slider1" ).slider( "value" ) );
</script>
The callback of the slider is not called onLoad. To trigger the event manually, see Trigger a jQuery UI slider event for an example.
Though, it would be better to your layer with an opacity of 0.20. You can achieve that by adding the property opacity to your layers options.
{
isBaseLayer:false,
transparent:true,
format:"image/png",
alpha:true,
opacity:0.20
}
.
From the JQuery reference # http://api.jquery.com/animate/ :
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle' }, 5000, function() {
// Animation complete.
});
It seems we can only modify real CSS properties, however I wish I could animate JQuery object properties as well. As example I would like to animate the 'value' property of a progressbar:
http://jqueryui.com/demos/progressbar/#option-value
//setter
$('.selector').progressbar('option', 'value', 37);
I couldn't find a way to animate this 'value' property of the progressbar, is there any way to do so?
Thanks for help..
If it's to animate the value couldn't you use javascript setInterval() and clearInterval() method?
You could do something like:
var progressBar = $('#progress');
var index=0;
var maxCount=100;
var theInterval = setInterval (function(){
progressBar.progressbar({value:index});
if (index == maxCount) {
clearInterval(theInterval);
}
index++;
}, 100 );
In the above example the setInterval function fires every 100 milliseconds and just increases the value by 1 each time, when it hits 100 the clearInterval function stops it animating.
You might find this link useful: http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon.
Not exactely what you wanted but you could get around and implement your own step function to update the progress bar.
var step_def = $.fx.step._default;
$.fx.step._default = function (fx) {
if ( fx.prop != 'progress' ) return step_def(fx);
fx.elem[fx.prop] = fx.now;
$(fx.elem).progressbar('option', 'value', fx.now);
};
// Now call animate
$('.selector').progressbar('option', 'value', 0)[0].progress = 0;
$('.selector').animate({ progress: 100 }, { duration: 1000 });