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.
Related
I am looking to make the jqueryUI spinner increment by a set of custom values on a list.
For example, 25, 50, 100, 250, 500, 1000
Is this possible?
The closest thing I can get it doing is stepping by a set amount.
Maybe it can be done by manually changing the value on the .spin call?
Any help on this would be great thanks
you can use this code,
var dlist = ['100','250','500', '1000']
$( ".spinner" ).spinner({
min: 0,
max: 3,
create: function(){
$(this).parent().append('<input class="spinner-text" value="'+dlist[$(this).val()]+'">');
},
stop: function(event,ui) {
$(this).siblings('.spinner-text').val(dlist[$(this).val()]);
}
});
Source
Note: if your array contains 4 values, set max as 3. because first value is already set by default.
see the DEMO
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/
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 have seen only a couple variants on this question asked a couple other places, notably here and here.
Basically, I have a checkers gameboard where each square on the board is a droppable and each gamepiece is a draggable. Each square can only have one piece on it at a time, and I am trying to toggle the enable/disable method depending on whether there's a piece on the square or not.
Here's a link to what I've got so far: http://jsbin.com/ayalaz, and below is the most pertinent code.
function handleDrop(e, ui) {
var tileNumber = $(this).data('tile');
// Make the gamepiece snap into the tile
ui.draggable
.data({ // WHAT IF PIECE IS SET BACK DOWN IN SAME TILE... CHECK FOR IT!
'preRow': ui.draggable.data('curRow'),
'preCol': ui.draggable.data('curCol'),
'curRow': $(this).data('row'),
'curCol': $(this).data('col')
});
$(this).append($(ui.draggable));
ui.draggable
.position({
of: $(this),
my: 'left top',
at: 'left top'
});
$(this).droppable('disable');
//console.log("Gamepiece set down at: (" + $(this).data('row') + "," + $(this).data('col')+ ")");
}
function handleOut(e, ui) {
// HOW TO TOGGLE DROPPABLE??
$(this).droppable('enable');
}
Any advice?
Thanks in advance!
Jeremy
It looks like you are successfully disabling droppable on a tile after the first drop event. Your problem is that you are not initially setting droppable to disabled on the initial set of occupied tiles.
After you've created your game board and pieces, this should accomplish that, assuming my CSS selector accurately reflects your structure:
$('div.gamePiece').parent().droppable("option", "disabled", true);
Note that this is different from the syntax to change droppability in the initial options. From the jQuery UI droppable documentation:
//initialize
$( ".selector" ).droppable({ disabled: true });
//setter
$( ".selector" ).droppable( "option", "disabled", true );
Edit
It appears I was wrong about $(this).droppable('disable'); and $(this).droppable('enable'); jquery-ui does have alias functions for enable and disable.
enable: function() {
return this._setOption( "disabled", false );
},
disable: function() {
return this._setOption( "disabled", true );
},
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
}
.