I am using jquery slider as vertical orientation bt vertical slider handle not moving.Please help, i know i am missing something obvious.
--Demo here--
$( ".slider" ).slider({
animate: true,
orientation:"vertical",
range: "min",
value: 50,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$("#slider-result").html( ui.value );
}
});
DEMO
I've simply removed top: -3px;
from .ui-slider-handle
If you want to set the start position of a slider to the top, use value parameter in your slider function (value = 100).
Just Remove top:-3px; in .ui-slider-handle.
Related
I'd like to imitate what jquery mobile does here but without loading the library. Just using jquery and jquery-ui (I'd probably stop using jquery-ui if I knew how to create sliders without it).
I want to show the slider value (ui.value) inside the slider handle (ui.handle) and also in a div above the handle, like in the third example (Both options together):
var initialValue = 5;
$("#slider").slider({
min: 1,
max: 50,
value: initialValue,
start: function( event, ui ) {
$(ui.handle).find('.ui-slider-tooltip').show();
},
stop: function( event, ui ) {
$(ui.handle).find('.ui-slider-tooltip').hide();
},
slide: function( event, ui) {
$(ui.handle).find('.ui-slider-tooltip').text(ui.value);
$(ui.handle).text(ui.value);
},
create: function( event, ui ) {
var tooltip = $('<div class="ui-slider-tooltip" />').css({
position: 'absolute',
top: -25,
left: 0,
border: '1px grey'
});
$(event.target).find('.ui-slider-handle').append(tooltip);
$('.ui-slider-handle').text(initialValue);
}
});
But for some unknown reason, manipulating the slider handle is preventing to append anything to it or show/hide it.
I'm also having trouble to set the border of the tooltip, when inspecting the code it adds none automatically, and I don't know why... (jquery-ui ofc but why?)
I just want something like jquery mobile.
http://jsfiddle.net/udxgkbmv/1/
I was going to try to do it with a fancy text-shadow, but that wasn't going to work. I was able to add another inner DIV and appended it after the tooltip DIV. By default both the tooltip DIV and the inner DIV would have the initialValue in it. The slide event now updates both the inner and tooltip DIVs.
The issue with the border not showing up was just missing the border type (e.g., solid). I didn't add any styling to the tooltip or inner, and will leave that up to you.
$(document).ready(function () {
var initialValue = 5;
$("#slider").slider({
min: 1,
max: 50,
value: initialValue,
start: function( event, ui ) {
$(ui.handle).find('.ui-slider-tooltip').show();
},
stop: function( event, ui ) {
$(ui.handle).find('.ui-slider-tooltip').hide();
},
slide: function( event, ui) {
$(ui.handle).find('div').text(ui.value);
//$(ui.handle).text(ui.value);
},
create: function( event, ui ) {
var tooltip = $('<div class="ui-slider-tooltip" />').css({
position: 'absolute',
top: -25,
left: 0,
border: '1px solid gray',
display: 'none'
}).text(initialValue);
var inner = $('<div class="ui-slider-inner" />').css({
position: 'absolute',
top: 0,
left: 0,
display: 'block'
}).text(initialValue);
$(event.target).find('.ui-slider-handle').append(tooltip).append(inner);
//$('.ui-slider-handle').text(initialValue);
}
});
});
JSFiddle: http://jsfiddle.net/udxgkbmv/3/
I have one jquery ui spinner input where it shows values from 0% to 100% with increment of 10.
which is fine. I am trying to add some additional function.
Here is what I am wanting: In my spinner field my value can be anything from 0% to 100% and if
I start increasing or decreasing value it should display How much is remaining from the 100%.
Like if I make my value 40% in spinner than in the text beside the input field should display 60% remaining. Is this possible to make ? Thanks in advance and sorry for my bad English.
JS FIDDLE EXAMPLE
js
$("#spinner").spinner({
min: 0,
max: 100,
step: 10
});
HTML
<input id="spinner" value="0"/>
<p class="right totalResult">100% Remaining</p>
Sure, one easy way would be to wrap the 100 in a span and use this jQuery:
$("#spinner").spinner({
min: 0,
max: 100,
step: 10,
spin: function (e, ui) {
$('p.right.totalResult span').text(100-ui.value)
}
});
jsFiddle example
Try this code
$("#spinner").spinner({
min: 0,
max: 100,
step: 10,
spin: function( event, ui ) {
var remain = 100 - ui.value;
$(".totalResult").html(remain + "% Remaining");
}
});
DEMO
You need to add an event listener for the spin(when it goes up or down).
You can do it like below:
$("#spinner").spinner({
min: 0,
max: 100,
step: 10
}).on("spin",function(event, ui){
$(".right").text((100 - ui.value) + "% Remaining")
});
I hope this helps!
Is there a way to hook into the MooTools Slider class, so the starting position of the knob is at the bottom (step 0) of the bar and you drag the knob up to get to the top of the bar (step 100).
This is what I have so far:
var slider1 = new Slider('#bar', '#knob', {
offset: 6,
steps: 100,
mode: 'vertical'
});
And what I need:
slider1.startingPosition = 'bottom';
Or something to that affect.
Since steps is defined to 100, your max value is 100, which is what you want to set as initialStep (the slider starting point).
For your specific CSS I would remove (or add it womewhere else) the margin on the element of the slider, so it wont shift the slider.
This worked for me:
var slider = $('bar');
var slider1 = new Slider(slider, slider.getElement('.knob'), {
offset: 6,
steps: 100,
initialStep: 100,
mode: 'vertical',
onChange: function (step) {
console.log(step);
}
});
And changed also margin top here to 0px: margin: 0px 0 0 -7px;
Fiddle
I'm working on a jQuery slider for my website. And I only want people to scroll to a few specific values, (for example 1900, 1920, 1960, 1975, 1976).
I tried everything but nothing works!
I also want the values to work as links, like if people scroll to 1920 it will redirect them to another page.
Here's the code
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1900,
max: 2013,
value: 1900,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
And this is the html:
<label for="amount">Year:</label>
<input type="text" id="amount" style="border:0; color:#000; font-weight:bold; background:none;" /><br /><br />
<div id="slider-range-max"></div>
Thanks in advance!
Try this
$(function() {
var araObj = new Array( 1900, 1920, 1960, 1975, 1976 );
$(".slider").slider({
min: 0,
max: araObj.length,
value: 0,
create: function() {
$(this).children().addClass("ui-corner-all");
$(this).append($('<span></span>').css("left","0%").addClass("slider-digit").text(0));
for (i=0;i<=araObj.length;i++)
{
$(this).append($('<span></span>').css("left",((i+1)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
};
}
});
console.log(araObj);
});
DEMO
Please check this
jump scroll with redirect to another page of same blog on blogger
this is similar as you are looking for
Remember, think carefully about the type of slider you are using. A number of slider implementations simply do not work on mobile devices and tablets. As an example, the answer above does not work on an iPhone or iPad.
A solution that may be usable can be found here:
http://touchpunch.furf.com
There are a number of examples and demos - they seem to be touch friendly. I am not sure if they will incorporate new page / links by default.
I hope that helps.
Hey i want to use jquery UI to have a slider on my page that moves multiple divs different distances.
So basically you pull the slider and div1 moves 10px left and div2 moves 20px left.
I have taken a look at the jquery UI slider here http://jqueryui.com/demos/slider/#side-scroll but i cant figure out how to get that slider to move multiple divs.
Help would be greatly appreciates. I am pretty new to jquery but i am enjoying the learning experience =]
You can use the .slide() event, no?
http://jqueryui.com/demos/slider/#event-slide
That way you can adjust the divs like you want. I'll write a little example
Made a small example:
http://labs.joggink.be/slider-multiple-divs/
The slider resizes 3 divs like this (it's very basic and ugly written):
$("#slider").slider(
{
value:100,
min: 10,
max: 250,
step: 10,
slide: function(event, ui) {
$('#div-1').css({
width : ui.value + 'px',
height: ui.value + 'px'
});
$('#div-2').css({
width : ui.value + 10 + 'px',
height: ui.value + 10 + 'px'
});
$('#div-3').css({
width : ui.value + 20 + 'px',
height: ui.value + 20 + 'px'
});
}
});
});