I want to create a button with a event which occurs when a user clicked on it.
If someone has clicked this button a slider shows up.
I want a function if no one release this slider div the div toggles after 5 seconds, but if someone releases the slider nothing must happen!
I have created a fiddle in hope someone can fix this?
http://jsfiddle.net/84nVQ/50/
function handler1() {
clearTimeout(time);
$('#volumeChange').attr("class", "selected");
$('#volume-slider').slider({
orientation: 'horizontal',
value: 100,
max: 1,
step: 0.01,
animate: true,
slide: function(e, ui) {
alert(ui.value);
}
}).show();
}
function handler2() {
time = setTimeout(function() {
$('#volumeChange').attr("class", "");
$('#volume-slider').toggle();
$('#volume-slider').clearTimeout(time);
}, 5000);
}
function handler3() {
clearTimeout(time);
}
$("#volumeChange").on({
click: function(e) {
handler1();
$('#volume-slider').mouseleave(handler2).mouseenter(handler3);
}
});
There were two errors: undefined time variable and clearTimeout. This code should work
var time = null;
function handler1() {
clearTimeout(time);
$('#volumeChange').attr("class", "selected");
$('#volume-slider').slider({
orientation: 'horizontal',
value: 100,
max: 1,
step: 0.01,
animate: true,
slide: function(e, ui) {
movie.volume = ui.value;
}
}).show();
}
function handler2() {
time = setTimeout(function() {
$('#volumeChange').attr("class", "");
$('#volume-slider').toggle();
clearTimeout(time);
}, 5000);
}
function handler3() {
clearTimeout(time);
}
$("#volumeChange").on({
click: function(e) {
handler1();
$('#volume-slider').mouseleave(handler2).mouseenter(handler3);
}
});
Related
I have the following code in javascript to move my slides:
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 300,
slideWidth: 100%
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
},
moveSlidePosition: function(event) {
// Magic Numbers =(
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},
handleNavClick: function(event, el) {
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el) {
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();
I get no error in the console regarding this but the slides should move after every 3 seconds automatically, they are not doing it now. Does anyone know whats the problem here. Any suggestion would be highly appreciated.
You have a syntax issue with a percent it must be a string and have the comma following to not break your object.
Should this line slideWidth: 100% be slideWidth: "100%" ,
Im working on a slider that contains two synced owl-sliders.
sync1 is main slider and sync2 is thumbnails slider. When I click on one of elements of second slider sync1 goes to proper slide.
Now goes my issue:
When user clicks on any of thumbnail a green border should appear on clicked elemment and should stay there until another element is clicked.
I've tried to use jquery .addClass and .css but nothing happens.
I think that I should add div with "position: absolute" that holds up to clicked element, but I don't know how to do it. Please help! :)
Here is my js
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var index2=0;
var flag=true;
var slides = sync1.owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout:5000,
autoplayHoverPause:true,
nav: false,
mousedrag: false,
touchdrag: false,
pulldrag: false
});
$(document).on('click', '.prevbutton, .nextbutton',function() {
sync1.trigger('stop.owl.autoplay');
});
sync1.on('changed.owl.carousel', function(event) {
var index1=event.item.index;
var index11 = index1-2;
//console.log("index1", index1)
//console.log("index11", index11);
sync2.trigger("to.owl.carousel", [index11, 100, true]);
});
$('.nextbutton').click(function() {
//console.log(sync1);
sync1.trigger('next.owl.carousel');
});
$('.prevbutton').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
//console.log(sync1);
sync1.trigger('prev.owl.carousel', [500]);
});
/* thumbnails*/
var thumbnails= sync2.owlCarousel({
items: 6,
loop: true,
autoplay: false,
mousedrag: false,
touchdrag: false,
pulldrag: false,
addClassActive: true
});
/*buttons*/
$('.nextbutton2').click(function() {
sync2.trigger('next.owl.carousel');
});
$('.prevbutton2').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
sync2.trigger('prev.owl.carousel', [500]);
});
sync2.trigger("to.owl.carousel", [index2, 100, true]);
sync2.on('changed.owl.carousel', function(event) {
index2=event.item.index;
//console.log("index2", index2);
index22=index2-1;
// sync1.trigger("to.owl.carousel", [index22, 100, true]);
});
// console.log("index2", index2);
sync2.on('click', '.item', function(e) {
e.preventDefault();
sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index()-6, 300, true]);
// console.log("clicked index", $(e.target).parents('.owl-item').index())
});
$('#stopcontainer').on('mouseover', function(){
if ($('#stopcontainer:hover').length != 0) {
flag=true;
console.log("flaga", flag);
}
if (flag==true) {
sync1.trigger('stop.owl.autoplay');
console.log("mousein");
}
}).on('mouseleave', function() {
setTimeout(
function()
{
if ($('#stopcontainer:hover').length == 0) {
flag=false;
console.log("flaga", flag);
}
if(flag==false){
console.log('mouse leave');
sync1.trigger('play.owl.autoplay');
}
}, 5000)}
);
});
Here is the solution:
sync2.on('click', '.owl-item', function(e) {
e.preventDefault();
$('.some-class').removeClass('active');
$(this).find('.some-class:first').addClass('active');
});
There is empty div with "some-class" inside carousel item, and when you click on this element class "active" is added
How could get the value of a spinner when the value is changing with the button up and down?
<input type="text" id="spinner1" value="1" onchange="selFirt()" readonly>
<script>
$("#spinner1").spinner({min: 1, max: 5});
function selFirt(){
$('#spinner1').spinner().change(function(){
alert($(this).spinner('value'));
});
}
</script>
$('input[name*="name"]').spinner({
min: 0,
max: 100,
spin: function(event, ui) {
$(this).change();
}
});
SEE HERE
try the following :
$(function () {
var spinner = $("#spinner").spinner({
step: 2 ,
spin: function( event, ui ){
handleSpinnerValue(ui.value);
}
});
});
function handleSpinnerValue(txtValue)
{
//do here whatever you want with the value;
alert(txtValue);
}
Is there a way to interrupt the fadeTo animation on mouseover? For example: In the below code when someone hovers OFF "slider$controls" they fade to .1 opacity at 1750ms, but when you hover ON them they fade to 1 opacity at 500ms. If someone were to hover OFF of them and before the 1750ms was up they hovered back on them, slider$controls would not fade back to 1 opacity until the 1750ms was up which makes it appear unresponsive.
$(function () {
var fadeDelay = 4000,
// hide after 3 second delay
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.hover(function () {
$(this).fadeTo(500, 1.0);
}, function () {
$(this).fadeTo(1750, 0.1);
});
}, fadeDelay);
};
});
You need to use jQuery's .stop function:
$(function () {
var fadeDelay = 4000,
// hide after 3 second delay
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.hover(function () {
$(this).stop(1,1).fadeTo(500, 1.0);
}, function () {
$(this).stop(1,1).fadeTo(1750, 0.1);
});
}, fadeDelay);
};
});
What this does is stops the current animations, and jumps to the final result before starting the next animation.
You can use .stop() to clear animations from the queue/stop the current animation.
Best use it like this:
$(function () {
var fadeDelay = 4000,
// hide after 3 second delay
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.hover(function () {
$(this).stop(true,false).fadeTo(500, 1.0);
}, function () {
$(this).stop(true,false).fadeTo(1750, 0.1);
});
}, fadeDelay);
};
});
This will clear the queue, so all animations are stopped and then start the animation from where the element has been stopped.
If you call the stop method on the element it will stop all animations.
.hover( function() {
$( this ).stop().fadeTo( 500, 1.0 );
}, function() {
$( this ).stop().fadeTo( 1750, 0.1 );
});
This is in reference to the question previously asked
The problem here is, each slider controls the other. It results in feedback.
How do I possibly stop it?
$(function() {
$("#slider").slider({ slide: moveSlider2 });
$("#slider1").slider({ slide: moveSlider1 });
function moveSlider2( e, ui )
{
$('#slider1').slider( 'moveTo', Math.round(ui.value) );
}
function moveSlider1( e, ui )
{
$('#slider').slider( 'moveTo', Math.round(ui.value) );
}
});
This is sort of a hack, but works:
$(function () {
var slider = $("#slider");
var slider1 = $("#slider1");
var sliderHandle = $("#slider").find('.ui-slider-handle');
var slider1Handle = $("#slider1").find('.ui-slider-handle');
slider.slider({ slide: moveSlider1 });
slider1.slider({ slide: moveSlider });
function moveSlider( e, ui ) {
sliderHandle.css('left', slider1Handle.css('left'));
}
function moveSlider1( e, ui ) {
slider1Handle.css('left', sliderHandle.css('left'));
}
});
Basically, you avoid the feedback by manipulating the css directly, not firing the slide event.
You could store a var CurrentSlider = 'slider';
on mousedown on either of the sliders, you set the CurrentSlider value to that slider,
and in your moveSlider(...) method you check whether this is the CurrentSlider, if not, you don't propagate the sliding (avoiding the feedback)
You could just give an optional parameter to your moveSlider1 and moveSlider2 functions that, when set to a true value, suppresses the recursion.
A simpler approach which is kind of a hybrid of the above answers:
var s1 = true;
var s2 = true;
$('#slider').slider({
handle: '.slider_handle',
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s1)
{
s2 = false;
$('#slider1').slider("moveTo", ui.value);
s2 = true;
}
}
});
$("#slider1").slider({
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s2)
{
s1 = false;
$('#slider').slider("moveTo", ui.value);
s1 = true;
}
}
});
});
Tried this now and all answers do not work possibly due to changes to jquery ui.
The solution of Badri works if you replace
$('#slider').slider("moveTo", ui.value);
with
$('#slider').slider("option", "value", ui.value);