In my code below, I want to change the initial value with a slider. The slider works and everything, but it's not changing the values of the timeout, shown under the $('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({ line.
The value of slider in the line $('#ex1').on('slide', function(slider) is equal to the value of the input-form attribute data-slider-value which is 100.
Now, when I start to adjust the input slider, it will change the attribute from its initial value of 100 to whatever the user slides to.
But the problem is, the slider won't change the values inside the jquery code...
So to make it more clear:
In the JS code, the variable 'value' is declared, but not yet initialized to a value.
The variable 'value' is then assigned to 'slider.value'
And so the logical conclusion is that the 'timeout' variable should change dynamically, according to the values inputted by the slider.
<!-- Start slider -->
<p>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="1000" data-slider-step="1" data-slider-value="100"/>
</p>
<script type="text/javascript">
$(document).ready(
function(){
var value;
$('#ex1').slider();
$('#ex1').on('slide', function(slider)
{
value = slider.value;
});
$('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({
speed: 0,
timeout: value,
type: 'sequence',
containerheight: '480px'
});
});
</script>
It's normal, your animation is already made. Your have to remake your animation or better, change the option.
edit :
There is the idea (not sure if is the correct syntax) :
//make it
var usernameInnerFace = $('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({
speed: 0,
timeout: value,
type: 'sequence',
containerheight: '480px'
});
//change it
usernameInnerFace.options['timeout'] = new_value;
You cant because the innerfade function runs before the on('slide').
On sliding you should call a function that sets the innerfade like this.
$(document).ready(
function(){
$('#ex1').slider();
$('#ex1').on('slide', function(slider)
{
setFade(slider.value);
});
});
function setFade(value){
$('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({
speed: 0,
timeout: value,
type: 'sequence',
containerheight: '480px'
});
}
The slide function will get 2 args: event and ui. The value of the slider is in the ui object, so I would try this:
$('#ex1').on('slide', function(event, ui) {
value = ui.value;
});
as documented here:
http://api.jqueryui.com/slider/#event-slide
Related
I have this animated donut that changes value on li hover. However, currently it resets to 0 and then animates to the new value. Ideally it should animated from value to value.
Here's a JSFiddle: http://jsfiddle.net/jme11/xx2Ky/
My JS:
var dial = $('.dial');
dial.knob({
readOnly: true
});
$('.pets > li').on('mouseenter', function () {
var button = $(this);
var myVal = button.data('value');
button.css('backgroundColor', 'yellowgreen').siblings().css('backgroundColor', '#ccc');
dial.stop().animate({
value: myVal
}, {
duration: 200,
easing: 'swing',
step: function () {
dial.val(Math.ceil(this.value)).trigger('change');
},
complete: function () {
dial.val(myVal + '%');
}
});
});
I have located the problem; it's this:
dial.val(myVal + '%');
When you animate something with a val attribute, it automatically uses that val value as its starting point. However, your code is setting val to a string. jQuery then gets confused and defaults to 0 the next time you want to animate. If you change the line to
dial.val(myVal);
you'll see it works as desired—with the obvious drawback that you lose your percent sign. You can add it back with knob's format feature, seen here, but I can't get it to work in your jsFiddle.
I'm trying to modify a jQuery knob plugin to use as an animated chart.
This is what I have so far:
HTML:
<ul id="chart">
<li rel="100">Cats</li>
<input class="knob animated donut" value="0" rel="70" />
Javascript:
$('.knob').each(function () {
var $this = $(this);
var myVal = $this.attr("rel");
$(this).knob({
readOnly: true,
displayInput: false,
bgColor: "cccccc",
fgColor: "e60022"
});
$({
value: 0
}).animate({
value: myVal
}, {
duration: 1000,
easing: 'swing',
step: function () {
$this.val(Math.ceil(this.value)).trigger('change');
}
})
});
$('#chart > li').mouseover(function(){
$('#donut').text($(this).attr('rel'));
});
I'd like to be able to hover over the <li> element and use the rel value to apply it to the chart. I think I might need to include some JS to redraw the chart on hover though as well, but not sure how to do that either (I don't have much JS knowledge).
Any help is appreciated.
DEMO
You need to set the animate properties in the event handler. So, initialize your "knob" element as you did, then in the event handler retrieve the values and run the animation.
In the demo I used a data attribute (it just makes more sense to me), not the rel attribute, but the following should work with your markup:
var donut = $('.knob');
donut.knob({readOnly: true,
displayInput: false,
});
$('#chart > li').on('mouseenter', function(){
var myVal = $(this).attr('rel');
donut.stop().animate({value: myVal}, {
duration: 200,
easing: 'swing',
step: function () {
donut.val(Math.ceil(this.value)).trigger('change');
}
});
});
HTML: change the input to use the data attributes for color, as there is a bug in FF
<input class="knob" data-fgColor="#e60022" data-bgColor="#ccc" value="" />
I am trying to display the value of the slider inside the drag handle (slider). Any resouce provided is much appreciated. I am using jQuery 1.5.1
Thanks
Are you using jQuery UI Slider ?
If so, this is a solution :
$("#slider").slider({
change: function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
},
slide: function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
}
});
jsFiddle example here
Just wanted to add a little to the answer.
If you are setting an initial value, or you would like the text to appear on the handle before the slide method is called you will need to add the document ready bit at the bottom, but i have also condensed the code a little
// take value from event, ui.value
$("#slider1").slider({
slide: function (event, ui) {
$("#slider").find(".ui-slider-handle").text(ui.value);
}
});
// sets text initially to value of slider, even if a default value is set
$(document).ready(function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
});
Thx all, I have solution for jQuery ui slider with value on drag different handles.
Example for 2 handles:
$("#wt-altitude-range").slider({
range: true,
min: 0,
max: 3000,
values: [ 100, 2500 ],
slide: function(event, ui) {
$(ui.handle).text(ui.value);
}
});
Work for slide event.
ui.handle - current handle, ui.value - current value.
I'm trying to figure out from the jQuery example here whether it's possible to set the current value of the slider as text that appears on the slider knob.
So, as the user changes the slider, the new value would continually update as a number value displayed as text on the surface of the slider knob in real time.
$(document).ready(function() {
$("#slider").slider();
});
<div id="slider"></div>
Is there a way to do that?
#EvilMM's answer is almost right but s/he forgot the quotes and I've also experienced the slider value being -1 so I wrote in a fix for that.
<div id="slider"></div>
js:
$("#slider").slider({
max: 10,
slide: function (event, ui) {
m_val = ui.value;
if (m_val < 0) {
m_val = 0;
$(this).slider({ value: 0 });
}
$(this).find("a:first").text(m_val);
}
});
Lets say your slider is called "slider", just like in you example:
<div id="slider" class="slider"></div>
Then, inside this div, there is a generated link-tag (a) that represents the knob.
So you could try something like that:
$(document).ready(function() {
$("#slider").slider(
slide: function(event, ui){
$("#slider").find(a:first).text(ui.value);
}
);
});
This should write the current value on the knob while sliding.
What you now have to do, is to play around with the css to format the knob.
I hope this will help a little bit.
If you are using Jquery UI
$(function(){
var slider = $('#slider1').bxSlider({
onBeforeSlide: function(currentSlide, totalSlides){
alert(currentSlide);
}
});
Done!
I am using offset() with the jquery slider and I am so close to achieving my goal, but it is off slighty. I have it animating using animate to the top CSS coordinates but if you check out: http://www.ryancoughlin.com/demos/interactive-slider/index.html - you will see what it is doing. My goal is to have it fadeIn() and display the value to the right of the handle. i know I can offset the text from the handle using a simple margin:0 0 0 20px.
The part is aligning #current_value to the right of the handle. Thoughts?
var slide_int = null;
$(function(){
$("h4.code").click(function () {
$("div#info").toggle("slow");
});
$('#slider').slider({
animate: true,
step: 1,
min: 1,
orientation: 'vertical',
max: 10,
start: function(event, ui){
$('#current_value').empty();
slide_int = setInterval(update_slider, 10);
},
slide: function(event, ui){
setTimeout(update_slider, 10);
},
stop: function(event, ui){
clearInterval(slide_int);
slide_int = null;
}
});
});
function update_slider(){
var offset = $('.ui-slider-handle').offset();
var value = $('#slider').slider('option', 'value');
$('#current_value').text('Value is '+value).css({top:offset.top });
$('#current_value').fadeIn();
}
I know I could use margin to offset it to match, but is there a better way?
There are two problems. The first, like Prestaul said, the slider event fires at the "beginning" of the move, not the end, so the offset is wrong. You could fix this by setting a timeout:
$(function(){
slide: function(event, ui){
setTimeout(update_slider, 10);
},
...
});
function update_slider()
{
var offset = $('.ui-slider-handle').offset();
var value = $('#slider').slider('option', 'value');
$('#current_value').text('Value is '+value).animate({top:offset.top }, 1000 )
$('#current_value').fadeIn();
}
The second problem is that the move is instantaneous, while the animation is not, meaning that the label will lag behind the slider. The best I've come up with is this:
var slide_int = null;
$(function(){
...
start: function(event, ui){
$('#current_value').empty();
// update the slider every 10ms
slide_int = setInterval(update_slider, 10);
},
stop: function(event, ui){
// remove the interval
clearInterval(slide_int);
slide_int = null;
},
...
});
function update_slider()
{
var offset = $('.ui-slider-handle').offset();
var value = $('#slider').slider('option', 'value');
$('#current_value').text('Value is '+value).css({top:offset.top });
$('#current_value').fadeIn();
}
By using css instead of animate, you keep it always next to the slider, in exchange for smooth transitions. Hope this helps!
I had the same problem: the visible value in Jquery Ui slider lags behind from internal value. Fixed the problem by changing the slider event from "slide" to "change".
You just need to use a different event. "slide" fires before the handle is moved so your value is ending up at the previous handle position. Try the "change" event and see if that gets you there.