Develop Reference

jQuery + One Page Scroll plugin: check if element hasClass not working

I'm using this plugin with jQuery and I have a div for a background image/color that fills the viewport. I'd like to change the background when a given section is active (the plugin is already configured to change the currently visible section's class to "active").
Here's the js I'm working with, but it's not changing anything. Markup seems fine—but it's just defaulting to the 'else' condition. Could there be a conflict with the plugin?
$(document).ready(function () {
$(".main").onepage_scroll({
sectionContainer: "section",
loop: false
});
if ($('#test').hasClass('active')) {
$('#project-image').css("background", "red");
} else {
$('#project-image').css("background", "yellow");
}
});
Thanks in advance.

Try using afterMove event
$(".main").onepage_scroll({
sectionContainer: "section",
loop: false,
afterMove: function(index) {
$('#project-image').css("background", $('#test').hasClass('active') ? "red" : "yellow");
}
});

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 reinit a owl carousel 2.0?

I know in the first version of owl carousel we do it like this :
var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel');
owl.reinit({touchDrag: false, mouseDrag: false;});
Ok, but how we do it in the second version, i don't know how they renamed it.

For some reasons $('#your_carousel').trigger('destroy.owl.carousel') is not working correctly. it does not remove all classes which are needed to reinit the plugin again.
You'll need to remove them completely to destroy the "owl carousel 2". like described here in this issue on github: https://github.com/smashingboxes/OwlCarousel2/issues/460
To destroy the owl function use:
$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();
This worked perfect for me:
// find element
$owl = $('body').find('#your_carousel');
// set the owl-carousel otions
var carousel_Settings = {
touchDrag: false,
mouseDrag: false
};
function initialize(){
var containerWidth = $('body').find('.navbar').outerWidth();
if(containerWidth <= 767) {
// initialize owl-carousel if window screensize is less the 767px
$owl.owlCarousel( carousel_Settings );
} else {
// destroy owl-carousel and remove all depending classes if window screensize is bigger then 767px
$owl.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$owl.find('.owl-stage-outer').children().unwrap();
}
}
// initilize after window resize
var id;
$(window).resize( function() {
clearTimeout(id);
id = setTimeout(initialize, 500);
});
// initilize onload
initialize();

You can do that with destroy but you have to use latest develop branch:
$('#carousel').owlCarousel('destroy');
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});
Or with direct access to the plugin:
$('#carousel').data('owl.carousel').destroy();
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});

Now, you can destroy it like that:
var simple = $('#simple');
simple.owlCarousel(); // created
simple.owlCarousel('destroy'); // destroyed

This definitly works:
if (container.hasClass("owl-carousel")) {
container.owlCarousel({
touchDrag: false,
mouseDrag: false
});
container.data('owlCarousel').destroy();
container.removeClass('owl-carousel owl-loaded');
container.find('.owl-stage-outer').children().unwrap();
container.removeData();
}
And the plugin itself:
if (this.settings.responsive !== false) {
window.clearTimeout(this.resizeTimer);
$(window).off('resize.owl.carousel');
this.off(window, 'resize', this.e.onThrottledResize);
}
in Owl.prototype.destroy = function()

I am not sure, have you tried the replace?
As per the OwlCarousel documentation, listed here http://www.owlcarousel.owlgraphic.com/docs/api-events.html, the event to trigger is "replace.owl.carousel". You can implement it like this :
var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel');
owl.trigger('replace.owl.carousel', [{touchDrag: false, mouseDrag: false;}]);
Hope that helps!

If use v1.3 I make next
$('#OwlWrapper').owlCarousel({option...});
$('#OwlWrapper').append('<div><img class="img-fluid" src="demo_files/images/1200x800/5-min.jpg" alt=""></div>');
$('#OwlWrapper').data('owlCarousel').reinit();
It's work for me.

$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel
owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();
Just do this to destroy the owl carousel and then use the general init function to reinit.

For Owl Carousel v2.3.4 version,
// Slider element.
let sliderElement = $('#msg-slider');
// Destroy first.
sliderElement.trigger('destroy.owl.carousel');
// Then empty whole owl div.
sliderElement.empty();
// Re-init owl slider.
sliderElement
.owlCarousel({
loop:true,
margin:0,
nav:false,
dots:true,
responsive:{
0: {
items: 1
},
600: {
items:1
},
1000: {
items:1
}
}
});
Hopefully, this will help someone. Thanks.

Update DIV contents with current jQuery Cycle slide

I'm having difficulties updating the contents of a DIV with the current slide of my jQuery Cycle slideshow.
Here is the slider function, it currently will output the current slide as an alert (and works).
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
alert("Current slide " + opts.currSlide);
}
});
The DIV is as follows:
<div id="test">Hello</div>
And the code I'm trying to use (to replace the end of the code above):
$(function (curr, next, opts) {
var test = document.getElementById("test");
test.innerHTML = opts.currSlide;
});
Any thoughts on why the DIV does not update with the current slide #?
Unfortunately, nothing happens. I'm still learning my way around JS, so any pointers are much appreciated! Thank you for your time.

That variable in opts object (opts.currSlide) is not defined outside of the cycle function/plugin
so you would have to pass it to the function
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
getCurrSlide(opts.currSlide);
}
});
}):
function getCurrSlide(curr){
$("#test").html(curr);
}

OK. I have made a fiddle and there are a few thing to note. First your action added to the initial cycle will be removed when you hit your buttons. Here I have made the initial cycle do what you want and have added a button that you might use to get a 'snapshot' Note the selector to get only the currently visible image.
the meat:
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
$('#testNum').html("Current slide " + opts.currSlide);
var $img = $("#slideshow img:visible").clone();
$("#test").html('').append($img); }
});
// The button will work after you click fast,slow, or reverse.
// The reason for that is the .cycle function above replaces it
// as fast as you can see it.
$("#btnCopy").on("click",function(){
var $img = $("#slideshow img:visible").clone();
$("#test").html('').append($img);
});

How would I control a JCarousel inside another JCarousel?

Using JCarousel I currently have a carousel inside another carousel, which I can trigger to start playing slides by clicking on a play button that I created on the outside carousel. These are all loaded dynamically.
I'd like to have the inner carousel stop animating and go back to it's original loaded position when I click to change the slide of the outer carousel.
Here is what I have currently for manipulating JCarousel:
//outer carousel
$('#carousel').jcarousel({
auto: 0,
wrap: 'circular',
scroll: 1,
initCallback: carousel_initCallBack,
itemVisibleInCallback: {
onBeforeAnimation: gallerycarousel_itemfirst
}
// Info Box
$('.info').click(function() {
var itemid = $(this).attr('id').substring(5);
$.ajax({
url: 'php/get_case_studies.php?item=' + itemid,
dataType: 'json',
success: function(data) {
var infobox = $('#box_info' + data.data[0].id)
infobox.html('');
var content = '<div class="main_sec">'+data.data[0].main_desc+'</div><div class="sec_sec">'+data.data[0].sec_desc+'</div><div class="visit"><span class="box_num"><img src="img/visitor.png" alt="#" /> Visitors:</span>'+data.data[0].visitors+'</div><div class="avg"><span class="box_num"><img src="img/time.png" alt="#"/> Average time on site:</span>'+ data.data[0].avg_time +'</div>';
infobox.append(content);
$('.box_info').animate({left: '0px'}, 200);
}
});
});
function carousel_initCallBack(carousel) {
carousel.clip.hover(function() {
$('.gallery_control').stop().animate({"top": "454px"}, 200);
carousel.stopAuto();
}, function() {
$('.gallery_control').stop().animate({"top": "524px"}, 200);
$('.box_info').animate({left: '-302px'}, 200 );
carousel.startAuto();
});
$('#gallerycarousel_controls .btn_right').click(function() {
carousel.next();
return false;
});
$('#gallerycarousel_controls .btn_left').click(function() {
carousel.prev();
return false;
});
$('.grid').click(function() {
$('.gallery_control').animate({"top": "524px"}, 200);
$('#grid_view').fadeIn('slow');
carousel.stopAuto();
$('#grid_view').mouseleave(function() {
$(this).fadeOut('slow');
carousel.startAuto();
});
});
$('#carousel_slides .btn_item').click(function() {
carousel.scroll($.jcarousel.intval($(this).attr('id')));
$('#grid_view').fadeOut('slow');
$('.gallery_control').animate({"top": "454px"}, 200);
return false;
});
//this is the play button which generates and starts the inner carousel
$('.play').click(function() {
var itemid = $(this).attr('id').substring(5);
$('#int_carousel' + itemid).load('get_slideshow.php?slideshow&item=' + itemid, function() {
$('#int_carousel' + itemid).jcarousel({
auto: 3,
wrap: 'circular',
scroll: 1
});
});
});
}
I have tried adding a click function within the 'carousel_initCallBack' function to see if I can control the inner carousel like this:
$('#gallerycarousel_controls .btn_right').click(function() {
$('#int_carousel' + itemid).stopAuto();
});
The above doesn't work as I have tried and this would probably not bring the inner carousel back to the original position of the slide.
I have went on multiple different forums and have been searching everywhere I could on the internet and I am still not able to find any solid help or assistance. I am in dire need of assistance on this as I ran out of options. Please if someone can help me, I'd appreciate it so much. I am still new to web development and need guidance.