We Keep Coding

Delay initial running/starting of Swiper.js autoplay

I have a Swiper.js carousel that autoplays. I also fade in my page using DOMContentLoaded. This means that the first slide has changed or is in the middle of changing when the page comes into view. So it's in view a much shorter amount of time compared to the others.
Is it possible to delay the initial running of the autoplay carousel? I know you can add a delay to individual slides - but if I do that to counter it, it means 2nd time around the first slide lags/is in view longer than the rest.
JavaScript code:
window.addEventListener('DOMContentLoaded', function() {
document.body.className = 'visible';
});
var caption = document.querySelector('.swiper-caption span');
new Swiper('.swiper', {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: 'fade',
fadeEffect: {
crossFade: true
},
loop: true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
on: {
init: function() {
updateCaptionText(this);
},
activeIndexChange: function() {
updateCaptionText(this);
}
}
});
function updateCaptionText(slider) {
caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}
CSS code:
body.hidden {
opacity: 0;
}
body.visible {
opacity: 1;
transition: opacity .48s .24s ease-out;
}

Call swiper.autoplay.stop() just after setting it up, and call swiper.autoplay.start() inside DOMContentLoaded event handler. Like so:
const swiper = new Swiper(".swiper", {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: "fade",
fadeEffect: {
crossFade: true,
},
loop: true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
on: {
init: function () {
updateCaptionText(this);
},
activeIndexChange: function () {
updateCaptionText(this);
},
},
});
swiper.autoplay.stop();
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
swiper.autoplay.start();
});
If you wanna delay the inital start even further, to match it with your CSS animation duration, you can use a setTimout, like this:
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
setTimeout(() => swiper.autoplay.start(), 1000); // 1000 means 1s, it's in ms here.
});
Live example here at this CodePen I forked. References of used methods are here on Swiper.js's official doc.

Resize all the columns of multiple instances of ag-grid in a single page

i have a multiple instances of Ag-grid table in a single page, when i resize the browser window the columns are not automatically resizing to the width of table, we are using only one Ag-grid instance to show all the grids in a page but the grid resize(onGridReady event) is working, it working only for last loaded Ag-grid only , please help me in this, thanks
function loadaggrid(id,rowdata,columndata){
var gridOptions = {
defaultColDef:{
editable: false,
enableRowGroup:true,
enablePivot:true,
enableValue:true,
sortable: true,
resizable: true,
filter: true
},
autoGroupColumnDef: {
width: 180
},
animateRows: true,
debug: false,
suppressAggFuncInHeader: true,
sideBar: {
toolPanels: [{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
suppressPivots: true,
suppressPivotMode: true,
}
}],
},
rowSelection: 'single',
columnDefs: cols,
rowData: data,
floatingFilter:true,
paginationAutoPageSize:true,
pagination: true,
onGridReady: function (params) {
window.onresize = () => {
setTimeout(function(){
params.api.sizeColumnsToFit();
},500);
}
},
onFirstDataRendered(params) {
params.api.sizeColumnsToFit();
}
}
new agGrid.Grid(id, gridOptions);
}

you need to implement different onGridReady functions for each grid.
//firstGridOptions:
onGridReady: (event) => {
console.log('this is for first grid');
this.firstGridApi.sizeColumnsToFit();
},
//secondGridOptions:
onGridReady: (event) => {
console.log('this is for second grid');
this.secondGridApi.sizeColumnsToFit();
},

JavaScript not triggering events when dynamically loaded

I'm using the Swiper.js library and I have an issue getting the 'slideChange' event to trigger when dynamically loading elements through JavaScript.
Here is where my swipers both horizontal and vertical are initialised:
var swiper = {
initialize : function() {
swiperH = new Swiper('.swiper-container-h', {
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
})
.on('slideChange', function () {
console.log('Swiped Horizonally');
});
swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
effect: 'fade',
loop: true,
fadeEffect: {
crossFade: true
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
})
.on('slideChange', function () {
console.log('Swiped Vertically');
});
}
};
The reason why the horizontal's 'slideChange' triggers is because its already in the html file:
<!-- Swiper -->
<div class="dash-container">
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper" id="swipeData">
</div>
</div>
</div>
Now, the vertical slides are loading through JavaScript and that's where the vertical's 'slideChange' doesn't trigger.
function loadDresses(selectedDresses) {
return new Promise((resolve, reject) => {
$('#swipeData').html('');
for (var i = 0; i < selectedDresses.length; i++) {
var vScroll = '<div class="swiper-slide"><div class="swiper-container swiper-container-v"><div class="swiper-wrapper" style="height: 100%;">';
for (var j = 0; j < selectedDresses[i].images.length; j++) {
vScroll += '<div class="swiper-slide"><img src="' + selectedDresses[i].images[j] + '"/></div>';
}
vScroll += '<div class="swiper-slide" style="display:table;height:100%;width:100%;">';
vScroll += '</div></div></div><div class="swiper-pagination swiper-pagination-v">';
$('#swipeData').append(vScroll).trigger('create');
}
resolve(true);
});
}
The error occurs at this snippet:
.on('slideChange', function () {
console.log('Swiped Vertically');
});
Any ideas? Thanks!
Edit:
I have tried the following to stop it from initialising too early, but still no luck:
loadDresses(dresses).then(function(result) {
var t = setInterval(() => {
swiper.initialize();
clearInterval(t);
}, 5000);
});

And doesn't that help?
var swiper = {
initialize : function() {
swiperH = new Swiper('.swiper-container-h', {
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
})
.on('slideChange', function () {
console.log('Swiped Horizonally');
});
swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
effect: 'fade',
loop: true,
fadeEffect: {
crossFade: true
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
on: {
slideChange: function() {
console.log('Swiped Vertically');
}
}
});
}
};

You have some options here:
To keep the flow of your application, you can destroy the slider and reinitialize it.
swiperH.destroy()
then
loadDresses();
swiper.initialize();
OR
you can just mySwiper.update() every time you change your slide manually

The problem is that an element with class swiper-pagination-v is not found during initialization.
You can make condition for class swiper-pagination-v exists.
var swiper = {
initialize : function() {
swiperH = new Swiper('.swiper-container-h', {
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
})
.on('slideChange', function () {
console.log('Swiped Horizonally');
});
if ($('.swiper-container-v').length > 0) {
swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
effect: 'fade',
loop: true,
fadeEffect: {
crossFade: true
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
})
.on('slideChange', function () {
console.log('Swiped Vertically');
});
}
}
};

Fullpage JS, execute on different pages

I'm developing a project in AngularJS and I am using the Fullpage.js to scroll the page. So far so good, the problem is as follows:
As I have inside pages, must also use the scroll script these pages.
But even creating the function as Scope to work on all pages or creating it with different name and starting in each of the FullPage returns the following error:
FullPage: Fullpage.js can only be initialized once and you are doing it multiple times !
Does anyone know how can I do so that when I start the function of another page, I cancel the function of FullPage the previous page and start another function of the current controller again?
Follows function I'm using:
vm.rolagem_home = function(){
$timeout(function(){
$('#site').fullpage({
//Navigation
menu: '#menu',
lockAnchors: false,
//anchors:['firstPage', 'secondPage', 'trespage'],
navigation: false,
navigationPosition: 'right',
//navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
//normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
// sectionsColor : ['#ccc', '#fff'],
paddingTop: '0em',
paddingBottom: '0px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){
$(window).load(function() {
$('#loading').hide();
});
},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
console.log(slideIndex);
if(slideIndex > 0){
$('.fp-prev').show();
}else{
$('.fp-prev').hide();
}
if(slideIndex == 6){
$('.fp-next').hide();
}else{
$('.fp-next').show();
}
},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
}
});
}, 1000);
}

Yes, you should call the same DIV and destroy the FullPage, so you managed to call in another div again.
if($('#agencia').fullpage() != ''){
$('#agencia').fullpage.destroy('all');
}
Working - https://codepen.io/alvarotrigo/pen/bdxBzv

Making DataTables responsive

Environment: Ruby 2.0.0, Rails 4.0.3, Windows 8.1 Update, jquery-datatables-rails 2.2.1, jquery-ui-rails 5.0.0, jquery-rails 3.1.1
I have DataTables up and running, but I need to make my tables responsive. I'm confused by the instructions to do so. I have written some JavaScript but not Coffee. Either way, I'm not sure what to do.
The jquery-datatables-rails instructions say:
5 - Initialize your datatables using:
responsiveHelper = undefined
breakpointDefinition =
tablet: 1024
phone: 480
tableElement = $("#example")
tableElement.dataTable
autoWidth: false
preDrawCallback: ->
# Initialize the responsive datatables helper once.
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition) unless responsiveHelper
return
rowCallback: (nRow) ->
responsiveHelper.createExpandIcon nRow
return
drawCallback: (oSettings) ->
responsiveHelper.respond()
return
I currently initialize my tables doing this:
$(document).ready(function () {
// Enable any datatables
$('#datatable').dataTable({
"sPaginationType": "full_numbers",
bJQueryUI: true
});
$('#carstable').dataTable({
"sPaginationType": "full_numbers",
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
sAjaxSource: $('#carstable').data('source')
});
I used compileonline.com to generate the JavaScript:
(function() {
var breakpointDefinition, responsiveHelper, tableElement;
responsiveHelper = void 0;
breakpointDefinition = {
tablet: 1024,
phone: 480
};
tableElement = $("#example");
tableElement.dataTable({
autoWidth: false,
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});
}).call(this);
But I cannot see what I need to do to integrate that into my current JavaScript initializer.

Staring at the code long enough sometimes resolves the problem... I have it basically working, though I'll need to customize it. The replacement code is as follows:
$(document).ready(function() {
var breakpointDefinition, responsiveHelper, tableElement;
responsiveHelper = void 0;
breakpointDefinition = {
tablet: 1024,
phone: 480
};
tableElement = $("#datatable");
tableElement.dataTable({
autoWidth: false,
"sPaginationType": "full_numbers",
bJQueryUI: true,
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});
tableElement = $("#carstable");
tableElement.dataTable({
autoWidth: false,
"sPaginationType": "full_numbers",
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
sAjaxSource: $('#carstable').data('source'),
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});