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");
}
Related
The open event of the jQuery UI tooltip fires not when the popup opens visibly but as soon as the mouse enters the element. It does not obey the show.delay property setting. This is documented behavior so I suppose it is not a bug.
So if I have tooltip on adjacent cells of a table, and the user drags the mouse across these cells, the actions in my open and close handlers are taken multiple times -- three, four, five times -- as many times as the number of cells the mouse entered.
What's a good way to exit the open event if the show.delay has not yet transpired?
EDIT: Not knowing how much time has elapsed on the delay.show, I've had to choose an arbitrary duration for the setTimeout, and track whether a class-switch is in progress using a flag:
<snip> ...
show: {
delay: 666
},
open: function (event, ui) {
if (me.changingClass) return;
me.changingClass = true;
$("td.baz").switchClass("foo", "bar");
},
close: function (event, ui, dupids) {
$("td.baz").switchClass("bar", "foo");
setTimeout(function () { me.changingClass = false; }, 200);
}
I think this may do the trick, if I understand what you're after:
Working Example
var timer;
$('td').tooltip({
show: {
delay: 2000 //number of milliseconds to wait
},
open: function (event, ui) {
var xthis = this;
timer = setTimeout(function () {
$(xthis).siblings().switchClass("bar", "foo");
}, 2000); // number of milliseconds to wait
},
close: function (event, ui, dupids) {
clearTimeout(timer);
$(this).siblings().switchClass("foo", "bar");
}
});
I am trying to make the page scroll when we drag element top or bottom of the screen. It working fine when container is inside the screen but unable to scroll when container is bigger than screen. To Solve this issue I have write this:
$('.dragable').draggable({
zIndex:100,
revert: "invalid",
helper: "clone",
scroll: true,
drag: function(e)
{
if(e.clientY <= distance)//top
{
isMoving = true;
clearInetervals();
intTopHandler= setInterval(function(){
$(document).scrollTop(e.clientY - step)
},timer);
}
if(e.clientY >= ($(window).height() - distance))//bottom
{
isMoving = true;
clearInetervals();
intBottomHandler= setInterval(function(){
$(document).scrollTop(e.clientY + step)
},timer);
}
}
});
After releasing the draggable element screen stays at same position unless we move the draggable again. I have tried scrollBy instead of scrollTop method but its not working on mobile devices. Please suggest any help. Thanks
Remove clearIntervals and use scrollTop without setInterval given below
$('.dragable').draggable({
zIndex:100,
revert: "invalid",
helper: "clone",
scroll: true,
drag: function(e)
{
if(e.clientY <= distance)//top
{
$(document).scrollTop(e.clientY - step)
}
if(e.clientY >= ($(window).height() - distance))//bottom
{
$(document).scrollTop(e.clientY + step)
}
}
});
it is working fine
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/
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 });