Disable mouseover until animation complete - javascript

I use jquery caroufredsel to create a slider, and then attach mouseover event to the items so that when mouse over the item it will center the selected one. here is the script
$(document).ready(function(){
$('#carousel-popular').carouFredSel({
width: '100%',
items: 5,
scroll: 1,
auto: false,
prev: '#prev-popular',
next: '#next-popular',
pagination: '#pager'
});
$('#carousel-popular img').off('mouseover').on('mouseover', function(){
var self = this;
$(this).attr('data-url', '<?php echo site_url('video/video_display'); ?>/'+$(this).data('vid'));
$('#carousel-popular').trigger('slideTo', [$(this), -2]);
$('#home-sidebar').load('<?php echo site_url('home/get_imdb');?>/'+$(this).data('vid'), function(){
$('#carousel-popular img').removeClass('selected');
$(self).addClass('selected');
});
// $('.caroufredsel_wrapper').css({
// "background" : "url(<?php echo base_url(); ?>images/shadow.png) center 95% no-repeat"
// });
});
$('#carousel-popular img').on('click', function(){
if($(this).hasClass('selected')){
window.location = $(this).data('url');
}
})
var sbHeight = $('body').height() - $('#header').height();
$('#home-sidebar').css({
"height": sbHeight+'px'
});
setTimeout(function(){
$('#carousel-popular img').eq(0).trigger('mouseover');
}, 500);
});
The problem is when an item is sliding to center another images catch the mouseover because the mouse pointer is still on the track. How to disable this mouseover event untill the selected image is centered?
fiddle

I'm not entirely sure of the issue, but you could try this:
$('#carousel a').on('mouseenter', function(){
$('#carousel').trigger('slideTo', [$(this), -2]);
});
That triggers the animation when the mouse moves over the element

pretty unclear question to me, is this what you want: http://jsfiddle.net/8W25g/2/
$('#carousel').carouFredSel({
items: 4,
scroll: 1,
auto: false,
prev: '#prev-popular',
next: '#next-popular',
pagination: '#pager'
});
var mouseoverFunc=function(){
$('#carousel a').unbind('mouseover');
$('#carousel').trigger('slideTo', [$(this), -2]);
};
var mouseoutFunc=function(){
setTimeout(function(){
$('#carousel a').bind('mouseover',mouseoverFunc);
},400);
};
$('#carousel a').bind('mouseover', mouseoverFunc);
$('#carousel a').bind('mouseout', mouseoutFunc);

Related

How To Toggle Back To Original State

My Script Snippet:
$(document).on('click', function(e) {
if ($(e.target).closest('.input-actions.Actions').length) {
var CurrentWidth = $(e.target).width() + 'px',
OpenWidth = '308px';
if ($(e.target).is('.dropdown-toggle')) {
$(e.target).animate({
width:OpenWidth
}, {
direction: 'right',
duration: 500,
});
setTimeout(function() {
$(e.target).parent().find('.dropdown-menu').slideDown({
height: '249px',
}, {
duration: 500,
});
}, 800);
}
}
});
Script Explanation:
On click of the link, the button changes with to match the drop down via animate then with the delay the drop down slides down.
What I'd Like To Achieve:
I'd like to add, in the most simplistic way, a toggle feature so that upon clicking again the reverse occurs animating the $(e.target) back to CurrentWidth and $(e.target).parent().find('.dropdown-menu') to slide back up and hide.

OWL Carousel 2 adding class to item

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 to restart liquidslider on tab click?

I have a page with multiple sliders - each within its own tab. I'd like for the sliders to start over if a user leaves a tab and then returns.
Dev link: http://dev.triciafrancis.com/mbrstudios/case-studies/
Here is the code I'm using for liquidslider and tabs:
//Use liquid slider to setup slides within tabbed content
$('#tabs .tab .liquid-slider').liquidSlider({
preloader: true,
autoHeight: false,
dynamicTabs: true,
dynamicTabsHtml: true,
dynamicTabsAlign: 'center',
dynamicTabsPosition: 'bottom',
panelTitleSelector: '.slide-nav',
dynamicArrows: true,
dynamicArrowsGraphical: true,
hideSideArrows: true,
hoverArrows: false,
hoverArrowDuration: 250,
autoSlide: true,
continuous: true,
autoSlideInterval: 5000,
autoSlideDirection: 'right',
slideEaseFunction: 'easeOutCirc',
heightEaseFunction: 'easeOutCirc'
});
//Set transitions for tab changes and activate first tab
$('.sub-menu a:visible').on('click', function(e) {
e.preventDefault();
$('.sub-menu a.active').removeClass('active');
$('.tab:visible').hide();
window.scrollTo(0, 0);
$(this.hash).fadeIn('slow');
if($('.ls-nav:visible a').length < 2) {
$('.ls-wrapper:visible').addClass('single-slide');
};
$(this).addClass('active');
}).filter(':first').click();
}
I emailed the plugin author and got the following feedback:
I would use the API to control the sliders inside. There are a few
things you could do...
var api = $.data( $('#slider')[0], 'liquidSlider');
This will store the slider as an object and give you access to its
functions.
api.setNextPanel(1)
This will set the panel to the first one. So you would have to set up
an event that sets all the sliders to the first panel based on the
action you desire. I'm assuming you would want to use the
pretransition function in the parent slider.
Here is some more information:
https://kevinbatdorf.github.io/liquidslider/examples/page1.html#advanced-controls
I applied this method and initially could only get it to work on the slideshow within the first tab. So I had to restructure the selector for liquidslider and apply the the technique to each tab. There's probably a more efficient way, but this is what I got to work:
//Use liquid slider to setup slides within tabbed content
$('#tab1-images, #tab2-images, #tab3-images, #tab4-images').liquidSlider({
preloader: true,
autoHeight: false,
dynamicTabs: true,
dynamicTabsHtml: true,
dynamicTabsAlign: 'center',
dynamicTabsPosition: 'bottom',
panelTitleSelector: '.slide-nav',
dynamicArrows: true,
dynamicArrowsGraphical: true,
hideSideArrows: true,
hoverArrows: false,
hoverArrowDuration: 250,
autoSlide: true,
continuous: true,
autoSlideInterval: 5000,
autoSlideDirection: 'right',
slideEaseFunction: 'easeOutCirc',
heightEaseFunction: 'easeOutCirc'
});
//Reset slideshows to first image on tab click
$('.sub-menu li:nth-child(1n) a').on('click', function() {
var tabImages = '#tab1-images';
if($(tabImages).length) {
var api = $.data( $(tabImages)[0], 'liquidSlider');
api.setNextPanel(0);
}
})
$('.sub-menu li:nth-child(2n) a').on('click', function() {
var tabImages = '#tab2-images';
if($(tabImages).length) {
var api = $.data( $(tabImages)[0], 'liquidSlider');
api.setNextPanel(0);
}
})
$('.sub-menu li:nth-child(3n) a').on('click', function() {
var tabImages = '#tab3-images';
if($(tabImages).length) {
var api = $.data( $(tabImages)[0], 'liquidSlider');
api.setNextPanel(0);
}
})
$('.sub-menu li:nth-child(4n) a').on('click', function() {
var tabImages = '#tab4-images';
if($(tabImages).length) {
var api = $.data( $(tabImages)[0], 'liquidSlider');
api.setNextPanel(0);
}
})
//Set transitions for tab changes and activate first tab
$('.sub-menu a:visible').on('click', function(e) {
e.preventDefault();
$('.sub-menu a.active').removeClass('active');
$('.tab:visible').hide();
window.scrollTo(0, 0);
$(this.hash).fadeIn('slow');
//Add class to single-image slides, so navigation elements can be hidden with css
if($('.ls-nav:visible a').length < 2) {
$('.ls-wrapper:visible').addClass('single-slide');
};
$(this).addClass('active');
}).filter(':first').click();

Make jCarousel slider slide continously

I have a jCarousel, with autoscrolling, like: http://sorgalla.com/projects/jcarousel/examples/static_auto.html
Is it possible to make it slide continously, smoothly? instead of scrolling few items at a time?
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
carousel.buttonNext.bind('click', function() { carousel.startAuto(0); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); });
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({ auto: 1, wrap: 'circular', animation: 'fast', scroll: 1, initCallback: mycarousel_initCallback });
});
</script>
<ul id="mycarousel" class="jcarousel-skin-tango">
<!-- My slides here -->
</ul>
Also, can I do something to keep the autoscroll after I click on the navigation arrows, and the mouse is not hover the slider?
I haven't found nothing related in their documentation: http://sorgalla.com/projects/jcarousel/
Delete that line so your hover mouse will not stop animation:
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
and try delete this:
carousel.buttonNext.bind('click', function() { carousel.startAuto(0); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); });
it may help you to get not starting all the time from (0) element. but first please check it.
so as you see you can delete whole function callback.
I have found what I was looking for. So my code look like:
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
carousel.buttonNext.bind('click', function() { carousel.startAuto(); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(); });
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({ auto: .01, wrap: 'circular', animation: 2000, scroll: 1, easing: 'linear', initCallback: mycarousel_initCallback });
});
</script>
It looks like these two settings combined "animation: 2000, easing: 'linear'" , are doing what I needed.

JQuery Infinite Scroll Help - passing variables to second page

Problem: I have implemented an infinitescroll plugin in my rails app, along with JQuery Masonry. It works perfectly but I am facing one little problem: starting from the second page, the hover function does not get triggered. This problem is very similar to this post on Stackoverflow. I'm supposed to call my hover function again after the Masonry callback.
My original code:
<script>
$(function () {
var $container = $('#container_masonry');
$container.infinitescroll({
navSelector: '.pagination'
nextSelector: '.pagination a',
itemSelector: '.image_masonry'
loading: {
finishedMsg: 'Done loading'
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function(newElements) {
//hide new items while loading
var $newElems = $(newElements).css({ opacity: 0 });
//images must be loaded completely before adding to layout
$newElems.imagesLoaded(function(){
//they are loaded and ready to be showed
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.image_masonry',
columnWidth: 10,
isAnimated: true,
animationOptions: { duration: 400 },
isResizable: true,
isFitWidth: true
});
$('.image_masonry').hover(
function(){
$('.title',this).fadeIn();
$('.like_num',this).show();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
}, function(){
$('.title',this).fadeOut();
$('.like_num',this).hide();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
});
});
});
</script>
I should add the following,
$('.image_masonry').hover(
function(){
$('.title',this).fadeIn();
$('.like_num',this).show();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
}, function(){
$('.title',this).fadeOut();
$('.like_num',this).hide();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
});
to right after,
$newElems.imagesLoaded(function(){
//they are loaded and ready to be showed
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
//ADD HOVER FCN HERE
However, simply adding the whole hover function did not work. I'm new to jQuery so I'm not entirely sure, but I need to pass in the related variables along with the function for it to work (got this hint from the similar post. So I should add something like
$('.image_masonry').hover(
function(SOME-RELATED-VARIABLES){
$('.title',this).fadeIn();
$('.like_num',this).show();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
}, function(SOME-RELATED-VARIABLES){
$('.title',this).fadeOut();
$('.like_num',this).hide();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
});
But I need someone to teach me what I should put in there. I'm struggling because of my lack of familiarity with jQuery. I appreciate your help a lot!
You were missing some commas between rows 5-11. Also if you're loading external content at a later time, you need to delegate the hover event with on or delegate depending on your version. I added on below.
$(function () {
var $container = $('#container_masonry');
$container.infinitescroll({
navSelector: '.pagination',
nextSelector: '.pagination a',
itemSelector: '.image_masonry',
loading: {
finishedMsg: 'Done loading',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function (newElements) {
//hide new items while loading
var $newElems = $(newElements).css({
opacity: 0
});
//images must be loaded completely before adding to layout
$newElems.imagesLoaded(function () {
//they are loaded and ready to be showed
$newElems.animate({
opacity: 1
});
$container.masonry('appended', $newElems, true);
});
});
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.image_masonry',
columnWidth: 10,
isAnimated: true,
animationOptions: {
duration: 400
},
isResizable: true,
isFitWidth: true
});
$('body').on({
mouseenter: function () {
$('.title', this).fadeIn();
$('.like_num', this).show();
var buttonDiv = $(this).children('.button');
buttonDiv.toggle();
},
mouseleave: function () {
$('.title', this).fadeOut();
$('.like_num', this).hide();
var buttonDiv = $(this).children('.button');
buttonDiv.toggle();
}
}, '.image_masonry');
});
});

Categories

Resources