We Keep Coding

bootstrap + mixitup filter on load issue

We are trying to show our portfolio in bootstrap via MixItUp v3.1.11 filtering and are trying to load a certain category (not all the projects) when the page is loaded.
Patrick Kunka has provided an example how it could be done here.
Same problem was asked here
Our issue is that the reccomended soultion is not working. My guess is that it is related to the change of selector due to bootstrap + mixitup issues:
control: '[data-mixitup-control]'
Here is the piece of code that is at the end of the page:
var containerEl = document.querySelector('#selector');
var mixer = mixitup(containerEl, {
selectors: {
target: '.mix',
control: '[data-mixitup-control]'
},
animation: {
effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
},
load: {
filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
}
});
// Add a class to the container to remove 'visibility: hidden;' from targets. This
// prevents any flickr of content before the page's JavaScript has loaded.
containerEl.classList.add('mixitup-ready');
// Show all targets in the container
mixer.show()
.then(function() {
// Remove the stagger effect for any subsequent operations
mixer.configure({
animation: {
effects: 'fade scale'
},
load: {
filter: '.residential' // Ensure all targets start from hidden (i.e. display: none;)
}
});
});
When I change the filter to desired .residential it does not work.
I also tried to add this:
$(function(){
$('#selector').mixItUp({
load: {
filter: '.residential'
}
});
});
No luck. Any idea anyone where could the problem be?

In combination with MixItUp v3.1.9 and Bootstrap 4 try this example.
Add data-mixitup-control to avoid conflicts with other data-attributes:
<button type="button" class="control" data-mixitup-control data-`enter code here`filter=".product">PRODUCTS</button>
Initialize MixItUp:
var container = document.querySelector('.portfolio');
var mixer = mixitup(container, {
selectors: {
control: '[data-mixitup-control]'
}
});

I've tried the example, and it works with version 2.1.6.
Here is my example code:
$(function(){
$('#selector').mixItUp({
selectors: {
target: '.item'
},
layout: {
display: 'inline-block'
},
load: {
filter: '.residential'
}
});
});
This will load the DOM only with items related to .residential visible.
Hope this helps.

In combination with MixItUp Version 3.1.11 and Bootstrap 3 try this example.
Add data-mixitup-control to avoid conflicts with other data-attributes:
<button type="button" class="control" data-mixitup-control data-filter=".residential">Residential</button>
Initialize MixItUp:
var containerEl = document.querySelector('.container');
var mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
},
load: {
filter: '.residential'
}
});
You don't need to set the 'fade scale' animation effect separately - it's the default setting. https://www.kunkalabs.com/mixitup/docs/configuration-object/

How to show Total number of pages in YUI Paginator?

I am using YUI Paginator API for pagination and I need to show Total number of pages on screen. I saw that there is a function getTotalPages() in API but I am unsure about how to use it, there isn't enough documentation. Also after looking at some other documentation I tried using {totalPages} but didn't work.
Can somebody help me out in this issue? Thanks in advance!!
Below is the code snippet I am using. Please refer to template object from config:
config = {
rowsPerPage: 100,
template :
'<p class="klass">' +
'<label>Total pages: {totalPages}</label>'+
'<label>Page size: {RowsPerPageDropdown}</label>'+
'</p>',
rowsPerPageDropdownClass : "yui-pg-rpp-options",
rowsPerPageOptions : [
{ value : 100 , text : "100" },
{ value : 250 , text : "250" },
{ value : 500 , text : "500" },
{ value : 1000 , text : "1000" },
{ value : tstMap[tabName].length , text : "All" }
],
};
var myPaginator = new YAHOO.widget.Paginator(config);

The Paginator utility allows you to display an item or a group of items depending on the number of items you wish to display at one time.
Paginator's primary functionality is contained in paginator-core and is mixed into paginator to allow paginator to have extra functionality added to it while leaving the core functionality untouched. This allows paginator-core to remain available for use later on or used in isolation if it is the only piece you need.
Due to the vast number of interfaces a paginator could possibly consist of, Paginator does not contain any ready to use UIs. However, Paginator is ready to be used in any Based-based, module such as a Widget, by extending your desired class and mixing in Paginator. This is displayed in the following example:
YUI().use('paginator-url', 'widget', function (Y){
var MyPaginator = Y.Base.create('my-paginator', Y.Widget, [Y.Paginator], {
renderUI: function () {
var numbers = '',
i, numberOfPages = this.get('totalPages');
for (i = 1; i <= numberOfPages; i++) {
// use paginator-url's formatUrl method
numbers += '' + i + '';
}
this.get('boundingBox').append(numbers);
},
bindUI: function () {
this.get('boundingBox').delegate('click', function (e) {
// let's not go to the page, just update internally
e.preventDefault();
this.set('page', parseInt(e.currentTarget.getContent(), 10));
}, 'a', this);
this.after('pageChange', function (e) {
// mark the link selected when it's the page being displayed
var bb = this.get('boundingBox'),
activeClass = 'selected';
bb.all('a').removeClass(activeClass).item(e.newVal).addClass(activeClass);
});
}
});
var myPg = new MyPaginator({
totalItems: 100,
pageUrl: '?pg={page}'
});
myPg.render();
});

Slickgrid inside jquery accordion columns not displaying properly

I am using slickgrid inside a jquery accordion and whenever the page refreshes and the accordion is expanded the columns inside the grid are all out of order and destroyed. I tried using
grid.resizeCanvas();
inside my accordion to no avail.
Here is my code.
var grid = (grid1, grid2, grid3);
$('#accordion').accordion({
collapsible: true,
beforeActivate: function (event, ui) {
grid.resizeCanvas();
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active', !isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancels the default action
}
});
Update
I have tried using
var grid = [grid1, grid2, grid3];
$("#accordion").accordion({
afterActivate: function (event, ui) {
grid[0].resizeCanvas();
}
});
this has also not worked unfortunately.

It looks like the "resizeCanvas()" method is not affecting the columns.
I hate to do this but try to loop through the columns again and resize them and let me know if that works for you:
Example
var grid = [grid1, grid2, grid3];
$("#accordion").accordion({
afterActivate: function (event, ui) {
var cols = grid[0].getColumns();
cols[0].width = 120;
grid[0].setColumns(cols);`
}
});
You don't have to loop through the columns like I did. You know the columns name and sizes so you can do this
cols["Policy Type"].width = 120;
and so forth.. Let me know if that helped

I use window.location.reload() and when the page is reloaded the grid columns are aligned as expected. I have tried doing this inside a recursive method call instead of reloading the page and experienced the issue you describe.
If you can refresh the page instead of doing a recursive call then that would solve the problem.

iDangero.us Swiper slide count when loop is true

I'm using iDangero.us Swiper js for a webpage, and initialization code is as following:
var mySwiper = new Swiper( '.swiper-container', {
direction: 'horizontal',
loop: true,
speed: 600,
nextButton: '.slider-control-next',
prevButton: '.slider-control-prev',
} );
And I need to get current slider index and total count of sliders. Swiper API provides mySwiper.activeIndex property and mySwiper.slides but the problem is that when loop is true they don't give correct index and count.
Is there any way to get these numbers correctly when loop is true?

As of May 2016 they have added the realIndex property!
Things to be aware of: 1.) the realIndex property is returned as a string instead of an integer (just in case you need to do math with it) 2.) the realIndex property starts with 0(as it should), unlike activeIndex in loop mode which in my case started with 1
https://github.com/nolimits4web/Swiper/pull/1697

The number of slides, and thus sometimes the activeIndex, is "wrong" by design when loops are involved: https://github.com/nolimits4web/Swiper/issues/1205
Best way I could find to get the total number of slides is:
mySwiper.slides.length - 2
You could use that to get the current index (this one is zero-based):
(mySwiper.activeIndex - 1) % (mySwiper.slides.length - 2)
This is not ideal, of course. You could open a GitHub issue and propose adding more convenient ways of accessing these values.

Just adding yet another answer, since Swiper hasn't included the realIndex property yet. Here is a nice little way of getting the real index when looping, without subtracting a hard coded number (which might easily change).
var realIndex = e.slides.eq(e.activeIndex).attr('data-swiper-slide-index');
Used like this:
var slider = new Swiper('.swiper-container');
slider.on('slideChangeEnd', function(e) {
var realIndex = e.slides.eq(e.activeIndex).attr('data-swiper-slide-index');
// do whatever
});

Although this question has been answered already, I thought I'd add my working code based off the accepted answer.
Main issue I had with a looping gallery, is if you go back from the first slide, the current slide reads as 0. Possibly because it's a clone?
Anyway, here's a stripped-back (slightly untested) working solution:
(function($) {
'use strict';
var gallery;
gallery = $('#gallery').swiper({
parallax: false,
initialSlide: 0,
direction: 'horizontal',
loop: true,
autoplay: 5000,
autoplayDisableOnInteraction: false,
speed: 700,
preventClicks: true,
grabCursor: true,
});
var totalSlides = gallery.slides.length - 2;
$('#total').html(totalSlides);
gallery.on('slideChangeEnd', function(instance) {
var currentCount = (instance.activeIndex - 1) % (totalSlides) + 1;
if(currentCount === 0) {
$('#current').html(totalSlides);
} else {
$('#current').html(currentCount);
}
});
})(jQuery);
Use the above to display current and total slides on your page. Obviously adjust the ID's in your HTML accordingly.

I would think this value of the actual index value should be available in the Swiper API, although it's nowhere to be found, so for now you'll have to roll your own function to get that value.
This function (tested and works) was provided to me in this thread on the Swiper GitHub Issues page: Need a way to get the accurate activeIndex in loop mode
In loop mode active index value will be always shifted on a number of looped/duplicated slides. you can get attribute 'data-swiper-slide-index' with a function like:
function getSlideDataIndex(swipe){
var activeIndex = swipe.activeIndex;
var slidesLen = swipe.slides.length;
if(swipe.params.loop){
switch(swipe.activeIndex){
case 0:
activeIndex = slidesLen-3;
break;
case slidesLen-1:
activeIndex = 0;
break;
default:
--activeIndex;
}
}
return activeIndex;
}
Usage:
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
loop:true,
onSlideChangeEnd:function(swipe){
console.log(getSlideDataIndex(swipe))
}
});

this work in both modes, loop or not
var $slideActive = $('.swiper-slide-active');
var realIndex = $slideActive.data('swiper-slide-index');
if(typeof realIndex === 'undefined') {
realIndex = $slideActive.index();
}
also, the number of total slides in both modes:
var totalSlides = $('.swiper-slide:not(.swiper-slide-duplicate)').length;

update in 2020:
Say you are using ionic angular:
<ion-slides #slider [options]="slideOps" (ionSlideDidChange)="changeSlide($event)">
Then in your typescript:
#ViewChild('slider', {static: true}) slider: IonSlides;
changeBoss(e){
let realIndex=e.target.swiper.realIndex;
console.log(realIndex);
}
This will give you the real index

The simplest way I found is to simply count the number of .swiper-slide before Swiper initialize code runs (and duplicates the slides).
var numOfSlides = document.querySelectorAll(".swiper-slide").length;
<!-- swiper 6 CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<h4>slider 1</h4>
<!-- Swiper -->
<section class="swiper-container" data-swiper="projects">
<div class="swiper-wrapper">
<!-- slide -->
<a href="#" class="swiper-slide">
<h3>
Slide 1
</h3>
</a>
<!-- slide -->
<a href="#" class="swiper-slide">
<h3>
Slide 2
</h3>
</a>
<!-- slide -->
<a href="#" class="swiper-slide">
<h3>
Slide 3
</h3>
</a>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</section>
<!-- swiper 6 JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- swiper JS Initialize -->
<script>
var numOfSlides = document.querySelectorAll(".swiper-slide").length;
console.log("numOfSlides: " + numOfSlides);/* 3 */
var my_swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 12,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
});
</script>

Issue using Buttons instead of default navigation with Glide.js

I am working with the glide.js library to make an image slider on my website. I would like to have three pre made buttons to act as the slider buttons instead of the default navigation. The default nav seems to be using <a> tags.
Looking through the js file It seems the default navigation is created here:
Glide.prototype.navigation = function() {
this.navigation.items = {};
//CLASS
// Navigation wrapper
this.navigation.wrapper = $('<div />', {
'class': this.options.navigationClass
}).appendTo(
/**
* Setting append target
* If option is true set default target, that is slider wrapper
* Else get target set in options
* #type {Bool or String}
*/
(this.options.navigation === true) ? this.parent : this.options.navigation
);
//Navigation controls
for (var i = 0; i < this.slides.length; i++) {
this.navigation.items[i] = $('<li />', {
'href': '#',
'class': this.options.navigationItemClass,
// Direction and distance -> Item index forward
'data-distance': i
}).appendTo(this.navigation.wrapper);
}
// Add navCurrentItemClass to the first navigation item
this.navigation.items[0].addClass(this.options.navigationCurrentItemClass);
// If centered option is true
if (this.options.navigationCenter) {
// Center bullet navigation
this.navigation.wrapper.css({
'left': '50%',
'width': this.navigation.wrapper.children().outerWidth(true) * this.navigation.wrapper.children().length,
'margin-left': -(this.navigation.wrapper.outerWidth(true)/2)
});
}
};
I adjusted the code, I replaced the loop with the code below to use 3 buttons I placed on my html page but it has no effect. I'm just wondering if I am doing something wrong, or if it is even possible? This is the changes I made to the code:
this.navigation.items[0] = $('.b1', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 0
}).appendTo(this.navigation.wrapper);
this.navigation.items[1] = $('.b2', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 1
}).appendTo(this.navigation.wrapper);
this.navigation.items[2] = $('.b3', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 2
}).appendTo(this.navigation.wrapper);
Does anyone have any idea how I might implement this?

I just solved the issue. Might be helpful to anyone trying to do the same thing. It was very easy, I don't know how I didn't figure it out initially.
Basically initialize the slider as follows:
$('.slider').glide({
autoplay: 5000,
arrows: 'none',
navigation: 'none'
});
Get an instance of the API:
var glide = $('.slider').glide().data('api_glide');
Then get references to each button and code the required action you want to execute when the button is clicked:
$('.b1').click(function(){
console.log("Button 1 Clicked");
glide.jump(1, console.log('1'));
});
$('.b2').click(function(){
console.log("Button 2 Clicked");
glide.jump(2, console.log('2'));
});
$('.b3').click(function(){
console.log("Button 3 Clicked");
glide.jump(3, console.log('3'));
});
All of this assumes you've got three buttons on your page like so:
<button class="b1" id="b1" name="b1" >Button 1</button>
<button class="b2" id="b2" name="b2">Button 2</button>
<button class="b3" id="b3" name="b3">Button 3</button>