We Keep Coding

Remove slick.js slide on mobile

I am trying to remove a slide in my slick carousel when it is on mobile/tablet.
Here is the basic version of the HTML that I have;
<div class="wrapper hero-slider" id="myCarousel">
<div class="hero__item hero__item-home hide-on-mobile">
<img src="image" alt="" class="hero__bottle hero__bottle-
showcase">
<img src="image"
alt="" class="hero__bottle hero__bottle-showcase">
<img src="image" alt="" class="hero__bottle hero__bottle-
showcase">
</div>
<div class="hero__item hero__item-home">
.....
</div>
<div class="hero__item hero__item-home">
.....
</div>
<div class="hero__item hero__item-home">
.....
</div>
</div>
I found this and am trying to get it working with my code, here is the script that I am using to hide the slide.
var breakpointMobile = 700,
isChanging = false,
isFiltered = false;
$('#breakpointMobile').text( breakpointMobile );
$('#myCarousel').on('init breakpoint', function(event, slick){ /** 2. and 5. **/
if ( ! isChanging ) { /** 4. **/
$('#breakpointValue').text( String(slick.activeBreakpoint) );
isChanging = true;
if ( slick.activeBreakpoint && slick.activeBreakpoint <= breakpointMobile) {
if ( ! isFiltered ) {
slick.slickFilter(':not(.hide-on-mobile)'); /** 3. **/
isFiltered = true;
}
} else {
if ( isFiltered ) {
slick.slickUnfilter();
isFiltered = false;
}
}
isChanging = false;
}
})
$(document).ready(function(){
$('.hero-slider').slick({
autoplay: false,
arrows: false,
responsive: [
{ breakpoint: 500 },
{ breakpoint: 700 },
{ breakpoint: 900 }
]
});
The code doesn't break anything it seems to just not work. I did realise that I had some class names wrong (might still have) which I thought was the problem but still no luck.
This is the answer that I was following;
How to remove slick slide on mobile?
The only thing that I can see differently is how slick is called;
$(document).ready(function(){
$('.hero-slider').slick({
});
I feel like this must be an issue but I don't see why it would be.
Any help would be great.
Thanks,
Zack

You'll first have to determine is a user is browsing the website on a mobile device. You can achieve this by using the Navigator header passed by the browser. You can do this by:
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
and then use if(isMobile.any()) to find out if the user is on mobile.
To make use of this with your slider, you can use:
$(document).ready(function(){
if(!isMobile.any()) {
$('.hero-slider').slick({ /* slider code here */ });
}
});

Materialize $('ul.tabs').tabs(); not working in vue js 1

When i use materialize tabs for my design in vue js 1. It's not working on the first time when i load the page. After reloading the page it's working perfectly. I've used the $('ul.tabs').tabs(); function in ready funtion. Below is the screen-shot of the page when it loads for the first time.
tabs not working in vue.js 1
`<ul class="tabs tabs-fixed-width white z-depth-2">
<li class="tab left-tab">View Testimonials</li>
<li class="tab right-tab"><a class="black-text bolder font-1-5x" href="#create_testimonial">Create Testimonial</a></li>
<li class="indicator brand-color"></li>
</ul>`
--- This is my html
`
import Sidebar from '../Sidepanel.vue';
Vue.directive('chosen', {
twoWay: true, // note the two-way binding
bind: function () {
$(this.el)
.chosen({
width: '100%'
})
.change(function (ev) {
var i, len, option, ref;
var values = [];
ref = this.el.selectedOptions;
for (i = 0, len = ref.length; i < len; i++) {
option = ref[i];
values.push(option.value)
}
this.set(values);
}.bind(this));
},
update: function (nv, ov) {
// note that we have to notify chosen about update
$(this.el).trigger("chosen:updated");
}
});
export default {
components: {
'header-component': Sidebar
},
data: function () {
return {
loader: '<div class="loading full-width full-height fixed top-off left-off row"><div class="progress cyan auto top-25x col s12 m3 float"><div class="indeterminate"></div></div><h5 class="black-text top-25x center-align relative black-text">Processing..</h5></div>',
response: {
edit : false,
_token: $('meta[name=csrf_token]').attr('content'),
passage_details:{
}
}
}
},
ready: function () {
let vm = this;
window.document.title = "Testimonials";
$('ul.tabs').tabs();
$(".chosen-select").chosen({width: '100%'});
},
computed:{
},
methods: {
}
}
`
---- This is my script

Using owl-filter.js to filter through owl carousel items

I am using this plugin to filter through items in my owl carousel
But it is not working, I have had various console errors, this is the current one:
"Uncaught ReferenceError: initOwlEvent is not defined"
I have added the jquery.owl-filter.js in the footer of my page, and below this called the plugin using this script tag:
<script>
$(function() {
/* animate filter */
var owlAnimateFilter = function(even) {
$(this)
.addClass('__loading')
.delay(70 * $(this).parent().index())
.queue(function() {
$(this).dequeue().removeClass('__loading')
})
}
$('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
var filter_data = $(this).data('filter');
/* return if current */
if($(this).hasClass('btn-active')) return;
/* active current */
$(this).addClass('btn-active').siblings().removeClass('btn-active');
/* Filter */
initOwlEvent.owlFilter(filter_data, function(_owl) {
$(_owl).find('.item').each(owlAnimateFilter);
});
})
})
</script>
This is how I initiate the owl carousel:
var OwlCarousel = function () {
return {
initOwlEvent: function () {
jQuery(document).ready(function() {
var owl = jQuery(".owl-events");
owl.owlCarousel({
lazyLoad: true,
items: 4,
itemsDesktop : [1000,2],
itemsDesktopSmall : [900,2],
itemsTablet: [600,1],
itemsMobile : [479,1],
slideSpeed: 1000,
autoPlay : 5000
});
});
}
}();
My HTML
<div class="row parallax-counter-v4 parallaxBg" id="row_events">
<div class="content container">
<h2 class="title-v2 title-center">Events</h2>
<div id="filter-container" class="btn-filter-wrap cbp-1-filters-text">
<div data-filter=".event-1" class="btn-filter cbp-filter-item">Main Events</div> |
<div data-filter=".event-2" class="btn-filter cbp-filter-item">The Venue</div> |
<div data-filter=".event-3" class="btn-filter cbp-filter-item">Woodys</div> |
<div data-filter=".event-4" class="btn-filter cbp-filter-item">Activities</div>
</div>
<div class="owl-carousel-v1 owl-work-v1 margin-bottom-50 mobile-margin-bottom-10">
<div class="owl-events">
{exp:su_event:homepage limit="8"} {events}
<div class="item news-v2 cbp-item event-{venue_id}">
<div class="news-v2-badge">
{if thumbnail_url == ""}
<a href="/events/id/{event_id}-{url_name}">
<img alt="" class="img-responsive lazyOwl" src="" />
</a>
{if:else}
<a href="/events/id/{event_id}-{url_name}">
<img alt="" class="img-responsive lazyOwl" src="{thumbnail_url}" />
</a>
{/if}
<p>
<span>{start_date format="%d"}</span>
<small>{start_date format="%M"}</small>
</p>
</div>
<h4>{title}</h4>
<p>{description}</p>
</div>
{/events} {/exp:su_event:homepage}
</div>
</div>
</div>
</div>

I had a similar issue while working with WordPress theme. Owl theme displayed the same error as you have mentioned. I have added jquery at the header and the issue got solved I am not sure whether this will work for you but you can give a try. Also, check if the owl script files are included after jquery.

for me, it's working...
$(function() {
$.fn.owlRemoveItem = function(num) {
var owl_data = $(this).data('owlCarousel');
owl_data._items = $.map(owl_data._items, function(data, index) {
if (index != num) return data;
})
$(this).find('.owl-item').eq(num).remove();
}
$.fn.owlFilter = function(data, callback) {
var owl = this,
owl_data = $(owl).data('owlCarousel'),
$elemCopy = $('<div>').css('display', 'none');
/* check attr owl-clone exist */
if (typeof($(owl).data('owl-clone')) == 'undefined') {
$(owl).find('.owl-item:not(.cloned)').clone().appendTo($elemCopy);
$(owl).data('owl-clone', $elemCopy);
} else {
$elemCopy = $(owl).data('owl-clone');
}
/* clear content */
owl.trigger('replace.owl.carousel', ['<div/>']);
switch (data) {
case '*':
$elemCopy.children().each(function() {
owl.trigger('add.owl.carousel', [$(this).clone()]);
})
break;
default:
$elemCopy.find(data).each(function() {
owl.trigger('add.owl.carousel', [$(this).parent().clone()]);
})
break;
}
/* remove item empty when clear */
owl.owlRemoveItem(0);
owl.trigger('refresh.owl.carousel').trigger('to.owl.carousel', [0]);
// callback
if (callback) callback.call(this, owl);
}
var owl = $('.owl-carousel').owlCarousel({
autoplay: false,
nav: true,
loop: false,
items: 3,
autoplayHoverPause: true,
lazyLoad: true,
margin: 10,
responsiveClass: true,
navText : ["",""],
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: true
},
1000: {
items: 3,
nav: true,
}
},
});
/* animate filter */
var owlAnimateFilter = function(even) {
$(this)
.addClass('__loading')
.delay(70 * $(this).parent().index())
.queue(function() {
$(this).dequeue().removeClass('__loading')
})
}
$('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
console.log('ddd');
var filter_data = $(this).data('filter');
/* return if current */
if ($(this).hasClass('btn-active')) return;
/* active current */
$(this).addClass('btn-active').siblings().removeClass('btn-active');
/* Filter */
owl.owlFilter(filter_data, function(_owl) {
$(_owl).find('.item').each(owlAnimateFilter);
});
})
})

Display selectmenu inside jQuery confirm

i have a jQUery-confirm and im trying to display some content which have a select and my select.selectMenu() doesn't seem to work because it's being displayed inside the jQUery-confirm. It's just showing the default select.I can easily call .selectMenu() on a select outside the scope and it will change from select to a selectmenu. Example:
HTML:
<div id="aDiv">
<select id="aSelect"> <option value="1"> 1 </option></select>
</div>
<button type="button" id="aButton">Click </button>
CSS:
#aDiv {
display: none;
}
JS:
$(document).ready(function() {
$('#aSelect').selectmenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});
How do i make jquery-confirm show jquery ui widgets like selectmenu?

try this, you need to add html markup inside jconfirm and initialize the selectMenu plugin, its better to write the markup inside content instead of defining it outside.
$(document).ready(function() {
// $('#aSelect').selectMenu();
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: function(){
return $('#aDiv').html(); // put in the #aSelect html,
},
onContentReady : function() {
this.$content.find('#aSelect').selectMenu(); // initialize the plugin when the model opens.
},
onClose : function() {
}
});
});
});

Please try the following:
You have missed the # for id
$(document).ready(function() {
$('#aSelect').selectMenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});

Working with Knockoutjs and jCarouselLite

sorry to be this forward, but I need to see a working example of Knockoutjs working with jCarouselLite (in jsFiddle please). I can't seem to make it work. Here is an earlier question for me regarding this:
Having trouble making Knockout and jCarouselLite to work
Now, what I did was try it out bare bones outside of my actual project. Here is the code I have:
the HTML:
<h2>Index</h2>
<div id="index-root">
<div class="house-row" data-bind="slide: true">
<div class=" house-row-nav"></div>
<div class="house-row-nav"></div>
<ul data-bind="foreach: images">
<li>
<div class="house-row-box nopadding-left nopadding-right">
<div class="image-wrapper">
<img data-bind="attr: { src: $data.image }" alt="image"><span data-bind="text: $data.image"></span>
</div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
And the KOjs:
$(document).ready(function () {
var model = new IndexViewModel();
model.init();
ko.applyBindings(model, document.getElementById("index-root"));
});
var IndexViewModel = function () {
var self = this;
self.images = ko.observableArray();
//
// Custom bindings
//
//ko.bindingHandlers.slide = {
// init: function (element) {
// },
// update: function (element, valueAccessor) {
// $(element).jCarouselLite({
// btnNext: ".next",
// btnPrev: ".prev",
// visible: 3,
// speed: 1450,
// mouseWheel: true
// });
// }
//};
//
// Methods
//
self.init = function () {
self.images.push({
image: "/Images/1.png"
});
self.images.push({
image: "/Images/2.png"
});
self.images.push({
image: "/Images/3.png"
});
self.images.push({
image: "/Images/4.png"
});
self.images.push({
image: "/Images/5.png"
});
//$(".house-row").jCarouselLite({
// btnNext: ".next",
// btnPrev: ".prev",
// visible: 3,
// speed: 1450,
// mouseWheel: true
//});
};
};
$(document).ready(function () {
$(".house-row").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 3,
speed: 1450,
mouseWheel: true
});
});
The commented $(".house-row").jCarouselLite... and ko.bindingHandlers.slide... are the locations I tried initializing jCarouselLite.
A sample in a jsfiddle would really help me clear this.

Here's a first stab at it. I had to put the initial call inside a timer because it was being called before the foreach binding had happened, so the carousel didn't have any contents. A more advanced design would probably incorporate the foreach binding as part of the slide.
The setup call is in the init section because it only happens once. I suggested the update section in your previous thread because I thought there would be a need to handle repeated actions on the carousel and bind its selection to an observable or something. We don't do that here.
ko.bindingHandlers.slide = {
init: function(element) {
setTimeout(function() {
$(element).jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 3,
speed: 1450,
mouseWheel: true
});
}, 0);
},
update: function(element, valueAccessor) {}
};
$(document).ready(function() {
var model = new IndexViewModel();
model.init();
ko.applyBindings(model, document.getElementById("index-root"));
});
var IndexViewModel = function() {
var self = this;
self.images = ko.observableArray();
//
// Methods
//
self.init = function() {
self.images.push({
image: "/Images/1.png"
});
self.images.push({
image: "/Images/2.png"
});
self.images.push({
image: "/Images/3.png"
});
self.images.push({
image: "/Images/4.png"
});
self.images.push({
image: "/Images/5.png"
});
};
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//rawgit.com/ganeshmax/jcarousellite/master/jquery.jcarousellite.min.js"></script>
<h2>Index</h2>
<div id="index-root">
<div class="house-row" data-bind="slide: true">
<button class="prev">«</button>
<button class="next">»</button>
<ul data-bind="foreach: images">
<li>
<div class="house-row-box nopadding-left nopadding-right">
<div class="image-wrapper">
<img data-bind="attr: { src: $data.image }" alt="image"><span data-bind="text: $data.image"></span>
</div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>