Develop Reference

Owl Carousel width issue on devices

I have an issue with an Owl Carousel (v2.3.4) that I can't see how to fix. On devices it seems to randomly resize the carousel and the images disappear. Sometimes I can see the Carousel has loaded correctly but then suddenly changes, it also seems to change when I interact with another Owl Carousel I have loaded. I have tried adding a separate wrapper to control the width, using one / two calls to load the two Carousels, delaying initialization etc..
It is the second Owl Carousel in the Green block that has the above issues. You can see the development page here: http://37.128.128.31/~thecropbrighton/
As I only want this slider to be on devices I am currently using the below Javascript:
$(function() {
if ($(window).width() < 768) {
startCarousel();
} else {
$('.mob-carousel').addClass('off');
}
$(window).on('resize', function() {
if ($(window).width() < 768) {
startCarousel();
} else {
stopCarousel();
}
});
function startCarousel() {
$('.mob-carousel').owlCarousel({
loop: true,
margin: 0,
nav: false,
dots: false,
items: 1,
mouseDrag: true,
touchDrag: true,
navText: ["<img src='" + get_template_directory_uri + "/assets/images/right.svg'>", "<img src='" + get_template_directory_uri + "/assets/images/swipe-left.svg'>"],
});
}
function stopCarousel() {
var owl = $('.mob-carousel');
owl.trigger('destroy.owl.carousel');
owl.addClass('off');
}

on owl-carousel write "autoWidth: true", it will set auto width.

How to prevent owlcarousel from destroying custom dots?

I am making a simple carousel using OwlCarousel 2.2.1 and I have run into a problem with custom dots. I have my custom list of categories which I wanted to behave like dots in carousel.
<ul class="category-list">
<li class="category-list__item active" data="1">
<span class="icon icon--red category-list__bg-icon"><svg>svg stuff here</svg></span>
<span class="icon icon--white category-list__main-icon"><svg>svg stuff here</svg></span>
<span class="category-list__title">Category 1</span>
</li>
...
<li class="category-list__item active" data="5">
<span class="icon icon--red category-list__bg-icon"><svg>svg stuff here</svg></span>
<span class="icon icon--white category-list__main-icon"><svg>svg stuff here</svg></span>
<span class="category-list__title">Category 5</span>
</li>
</ul>
My html:
<div class="vote-project__holder js-carousel-vote" data-owl-min-width="960">
<div class="row vote-project__duel">Content of slide 1</div>
...
<div class="row vote-project__duel">Content of slide 5</div>
</div>
In my carousel options I have binded them as dots using dotsContainer. This is my require.js part handling the carousel:
define(["jquery", "owlCarousel"], function($, owlCarousel) {
var OwlCarouselVote = {
init: function() {
var _this = this,
mainCarousel = $('.js-carousel-vote'),
minWidth = mainCarousel.data('owl-min-width') ? mainCarousel.data('owl-min-width') : 0;
if (window.matchMedia('(min-width: '+minWidth+ 'px)').matches) {
_this.initCarousel();
}
$(window).on('resize', function() {
if (mainCarousel.data("owlCarousel") !== "undefined") {
if (window.matchMedia('(min-width: '+minWidth+ 'px)').matches) {
_this.initCarousel();
} else {
_this.destroyCarousel();
}
}
});
},
destroyCarousel : function() {
jQuery('.js-carousel-vote').trigger('destroy.owl.carousel').removeClass("owl-carousel owl-loaded");
},
initCarousel: function () {
$('.js-carousel-vote').each(function() {
var $elm = $(this);
options = {
items: 1,
loop: false,
callbacks: true,
URLhashListener: true,
autoplay: false,
responsive: true,
margin: 50,
nav: true,
navSpeed: 500,
dots: true,
dotsContainer: '.category-list',
};
$elm.addClass("owl-carousel");
jQuery('.owl-carousel').owlCarousel(options);
});
//upon clicking on a category the carousel slides to corresponding slide
$('.category-list').on('click', 'li', function(e) {
jQuery('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 250]);
});
},
updateOnDomScan: function() {
this.init();
},
initOnDomScan: function() {
this.init();
}
};
return OwlCarouselVote;
});
The first part just decides wheter I am on mobile or desktop and then inits or destroys the carousel accordingly.
It works like a charm here, but on mobile, when I destroy the carousel like this jQuery('.js-carousel-vote').trigger('destroy.owl.carousel').removeClass("owl-carousel owl-loaded");, it destroys the whole .category-list list which I obviously need intact.
The reinitialization works fine because it leaves the inside of the carousel intact, but dots are missing because for some reason, the owlcarousel destroys them. I have no idea why it destroys HTML which does not belong to the carousel itself. I imagined when I binded the dots to my custom list that there is simply a reference to it and upon destroying the carousel, it would destroy just the reference.

To anyone interested, I haven't found a way to preserve native dots when destroyed. However I used a workaround so I created my own custom dots and used those.
I set dots: false in the carousel options and then binded my own list of dots to the carousel events like this
// This method listens to sliding and afterwards sets corresponding category to active
jQuery('.owl-carousel').on('translated.owl.carousel', function(event) {
$('.category-list li.active').removeClass('active');
//You have to set your li data attribute to the position it has in carousel
$('.category-list li[data-slide="'+ event.item.index +'"]').addClass("active");
});
//This method moves to corresponding slide upon clicking a category
$('.category-list').on('click', 'li', function(e) {
jQuery('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 250]);
});

bxSlider within colio

first post so hopefully i've followed protocol.
I'm using bxslider with colio on my site - specifically trying to add the bxSlider gallery within the hidden colio content. I saw on previous questions people having an issue initiating the gallery due to it being within a hidden div here
I did a test with a toggled hidden div which worked fine
But can't get it to work with colio: my_colio_test
Any ideas?
So Javascript for my_colio_test:
<script type="text/javascript">
$(document).ready(function(){
var mySlider;
mySlider = $('.bxslider').bxSlider({
auto: true,
video: true,
useCSS: false
});
// "scrollTop" plugin
$.scrollUp();
// "colio" plugin
$('.portfolio .list').colio({
id: 'my_portfolio',
theme: 'black',
placement: 'inside',
hiddenItems: '.isotope-hidden',
onContent: function(content){
$(".holder").show();
mySlider.reloadSlider();
}
});
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
var list = $('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f});
window.setTimeout(function(){
list.trigger('colio','excludeHidden');
}, 25);
};
$('.portfolio .filters a').click(function(){
$(this).addClass('filter-active').siblings().removeClass('filter-active');
var href = $(this).attr('href').substr(1);
filter = href ? '.' + href : '*';
isotope_run(filter);
return false;
});
isotope_run(filter);
});
</script>
In the toggle test i did an initial function defining the slider so it initated:
<script type="text/javascript">
$(document).ready(function(){
var mySlider;
mySlider = $('.bxslider').bxSlider({
auto: true,
video: true,
useCSS: false
});
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$content.slideToggle();
$(".holder").show(); // DIV that contain SLIDER
mySlider.reloadSlider();
});
});
</script>
Steven wanderski - bxSlider developer about having to initialise hidden slider:
Since the slider cannot calculate the height and width's of hidden
elements, you need to either call .bxSlider after the elements have
been set to display:block, or move them off screen, set them to
display: block, initialize the slider, then hide them.
SO I've sort of got it to work - yay.
In the CSS the colio-content is set to display:none - so i removed it and put it in the javascript function instead.
Only issue i have now is that i get replicated/duplicated sliders as i don't know how to target.
Where i'm at now: my_colio_test_2

How do I create a self-closing link inside a tipsy tooltip without reloading the page?

I'm using Tipsy to display some content; inside this content I have a link (a big X) that is intended to close the tooltip. However, when clicked, it simply jumps to the top of the page and fails to close the tooltip, even though I have it set to return false. My code looks like this:
$(".favs").tipsy({
fade: true,
gravity: 'n',
trigger: "manual",
html: true,
offset: 5,
opacity: '0.9',
delayIn: 0,
delayOut: 0,
title:
function() {
return $("#favs_1").html();
}
});
$(".favs").click(function(){
$(this).tipsy("show");
return false;
});
$(".closetip").click(function(){
$(".tipsy").remove();
return false;
});
Applied to this HTML:
<div style="height: 1800px;">
<br /><br /><br /><br />
Favorite Movies
</div>
<div id="favs_1" style="display: none;">
X
Tooltip content
</div>
Relevant fiddle: http://jsfiddle.net/gZkJJ/
I solved half the problem by having any click result in a tooltip closure. I tried to exempt clicks in certain divs from this with event.stopPropagation(); -- that led to the tooltip being closed, but a) the divs in question were not exempt and b) the X still jumped to the top of the page. Same HTML as above, but with this slightly different JavaScript:
$(".favs").tipsy({
fade: true,
gravity: 'n',
trigger: "manual",
html: true,
offset: 5,
opacity: '0.9',
delayIn: 0,
delayOut: 0,
title:
function() {
return $("#favs_1").html();
}
});
$(".favs").click(function(){
$(this).tipsy("show");
return false;
});
$("html, .closetip").click(function() {
$(".tipsy").remove();
});
$(".tipsy, .tipsy-n, .tipsy-inner, .favs").click(function(event){
event.stopPropagation();
});
Relevant fiddle for this variation: http://jsfiddle.net/u62eH/
I included the excessive height and spacing so that you can verify the link is either reloading the frame or forcing a scroll to the top, which you can do by scrolling down slightly before hitting the X.
Any help would be much appreciated. I feel like I'm missing something obvious.

In the event handler for clicking on either the html element or the .closetip element, call e.preventDefault() if it was the anchor:
$("html, .closetip").click(function(e) {
if(e.target.nodeName === 'A')
e.preventDefault();
$(".tipsy").remove();
});

jQuery - How do I change view based on mouseOver?

I made the home page of my site so that when you mouse over the different service offerings that the related image would also display. However when Malsup's hosting of Cycle came off github the function was lost.
Here is the code I am using that worked before but no longer works correctly. The slideshow still cycles through, but the mouseover function does not work correctly.
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
pager : '#slideshow-nav',
pagerEvent: 'mouseover',
pauseOnPagerHover: true,
speed: 1000,
delay: 3000,
timeout: 9000,
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '.features ul li:eq(' + (idx) + ') a';
},
allowPagerClickBubble: true
});
});
</script>
What changes do I need to make to get it working again?
Thanks.

Try this 'command' of the plugin libary, it will do the trick.
<script type="text/javascript">
$(document).ready(function(){
$("#skills li").click(function(){
id = $(this).attr('id');
imgIndexToJump = id.substr(1); //extracting number as index from id
imgIndexToJump = parseInt(imgIndexToJump, 10);
$('.slideshow').cycle('goto', imgIndexToJump);
});
});
</script>
assign ids to ur list in skills like this and it will work.
<ul id="skills">
<li id="a0">
a1-data
</li>
<li id="a2">
a1-data
</li>
</ul>