We Keep Coding

Tabs with multiple slideshow does not load sliders sometimes

I have created tabs. There are 3 tab items and tabs content is sliders.When i use these slideshows without tabs it works fine. But when used tabs, the slider of tab2 or tab3 sometimes does not load. It only occurs sometimes. What I have learnt that it loads perfectly on page load when using no tabs, But with tabs I have to hide the other 2 tabs on page load. So when click on these tabs, the slideshow does not appear /load sometimes.It also works fine sometimes. Tabs working fine the text content also.
I have been working on shopify, so using slideshow of theme.
Here is the code for html code for tabs:
<ul class="tabs">
<li>
<a data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">Tab 2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">Tab 3</a>
</li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image1.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image2.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image3.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu2">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image21.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image22.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image23.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu3">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image31.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image32.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image33.jpg"/>
</div>
</div>
</section>
</div>
Javascript for tabs
<script type="text/javascript">
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
I am working in shopify and the using the slider of theme, here is the code for slideshow from theme.
var slideshow = {
init: function(){
$('.js-homepage-slideshow').each(function (index, value){
var $homepageSlider = $(this);
var settings = {
slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
adaptiveHeight: $homepageSlider.data('adaptive-height')
}
//initiate the slideshow
if (!$homepageSlider.hasClass('flickity-enabled')){
var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
$homepageSlider.flickity({
adaptiveHeight: settings.adaptiveHeight,
wrapAround: true,
cellAlign: 'left',
imagesLoaded: true,
prevNextButtons: arrowShow,
draggable: arrowShow,
pageDots: usePageDots,
autoPlay: settings.slideshowSpeed,
arrowShape: arrowSize
});
if (settings.slideshowTextAnimation != ''){
var flkty = $homepageSlider.data('flickity');
setTimeout(function() {
$homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
$homepageSlider.on( 'select.flickity', function() {
if($homepageSlider.is(':visible')) {
var currentSlide = flkty.selectedIndex + 1;
setTimeout(function() {
$homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
$homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
}
});
}
}
if ($homepageSlider.find('.gallery-cell').length > 1) {
$homepageSlider.addClass('multi-image');
} else {
$homepageSlider.addClass('single-image');
}
$homepageSlider.find('.gallery-cell').each(function(){
var buttonWidth = 0;
$(this).find('.action_button').each(function(){
$button = $(this);
if($(this).width() > buttonWidth){
buttonWidth = $(this).width();
}
});
$(this).find('.action_button').width(buttonWidth);
});
});
},
unload: function($target){
var $slider = $target.find('.js-homepage-slideshow');
$slider.flickity('destroy');
}
}

Animate Counter on Scroll Past Part of Div?

I have created a counter section on my site which animates on page load, however I am trying to trigger the animation when the user gets to that section.
Currently I have this, however the animation only triggers when the div is beyond the nav, ie: the top of the screen including the nav. How would I change this so that the animation triggers as the div becomes visible?
I'm also having an issue that it shows to start as the full number without the commas, and then goes to 0 and animates, how can I make it show a 0 to begin with?
I'm pretty new to JS so would appreciate any explanation into this.
Heres what I have:
const convert = str => {
// Find the number
let regx = /(\d{1,3})(\d{3}(?:,|$))/;
// Set a variable
let currStr;
// Start loop
do {
// Replace current string, split it
currStr = (currStr || str.split(`.`)[0])
.replace(regx, `$1,$2`)
} while (currStr.match(regx)); // Loop
// Return our result from function
return (str.split(`.`)[1]) ?
currStr.concat(`.`, str.split(`.`)[1]) :
currStr;
};
$(window).scroll(startCounter);
function startCounter() {
if ($(window).scrollTop() > $('#counter').offset().top) {
$(window).off("scroll", startCounter);
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
$(this).text(convert($(this).text()))
}
});
});
}
}
.section-counter {
margin-top: 150vh;
margin-bottom: 150vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section-counter" id="counter">
<div class="row">
<h2>Headline Data Figures</h2>
</div>
<div class="row">
<div class="col span-1-of-2">
<div class="row">
<div id="shiva"><span class="count">1688019</span>
<h3>Contributions</h3>
</div>
</div>
<div id="shiva"><span class="count">82150</span>
<h3>Items of Business</h3>
</div>
</div>
<div class="col span-1-of-2">
<div class="row">
<div id="shiva"><span class="count">10505</span>
<h3>Meetings</h3>
</div>
</div>
<div id="shiva"><span class="count">168260</span>
<h3>Written/Oral Questions</h3>
</div>
</div>
</div>
<div class="row arrow-dark arrow__7 animated pulse infinite">
<i class="ion-md-arrow-dropdown"></i>
</div>
</section>

If I understand correctly, the problem is that you're comparing the offset of the div to the top of the screen, when actually you'd want to find out where the bottom of the screen is, and compare that to the position of the div.
Regarding starting from 0, you can have the elements use a data attribute to determine the max instead of the text, that way you can have the elements read 0 until they start counting:
const convert = str => {
// Find the number
let regx = /(\d{1,3})(\d{3}(?:,|$))/;
// Set a variable
let currStr;
// Start loop
do {
// Replace current string, split it
currStr = (currStr || str.split(`.`)[0])
.replace(regx, `$1,$2`)
} while (currStr.match(regx)); // Loop
// Return our result from function
return (str.split(`.`)[1]) ?
currStr.concat(`.`, str.split(`.`)[1]) :
currStr;
};
$(window).scroll(startCounter);
function startCounter() {
var bottomOfScreen = $(window).scrollTop() + $(window).innerHeight();
if (bottomOfScreen > $('#counter').offset().top) {
$(window).off("scroll", startCounter);
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).attr('data-max')
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
$(this).text(convert($(this).text()))
}
});
});
}
}
.section-counter {
margin-top: 150vh;
margin-bottom: 150vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section-counter" id="counter">
<div class="row">
<h2>Headline Data Figures</h2>
</div>
<div class="row">
<div class="col span-1-of-2">
<div class="row">
<div id="shiva"><span class="count" data-max="1688019">0</span>
<h3>Contributions</h3>
</div>
</div>
<div id="shiva"><span class="count" data-max="812150">0</span>
<h3>Items of Business</h3>
</div>
</div>
<div class="col span-1-of-2">
<div class="row">
<div id="shiva"><span class="count" data-max="10505">0</span>
<h3>Meetings</h3>
</div>
</div>
<div id="shiva"><span class="count" data-max="168260">0</span>
<h3>Written/Oral Questions</h3>
</div>
</div>
</div>
<div class="row arrow-dark arrow__7 animated pulse infinite">
<i class="ion-md-arrow-dropdown"></i>
</div>
</section>

I will give you the logic to kickstart an animation once the user gets to an element.
The relevant event trigger is the ONMOUSEOVER, so to incorporate it...
<div id="abc" onmouseover="AnimateIt();"></div>
Needless to mention that our element must have its animation PAUSED in its styling to begin with, like this...
animation-play-state:paused;
So the JavaScript logic to animate...
function AnimateIt(){ abc.style.animationPlayState='running'; }
That's it.

Show contents of javascript arrays in buttons

I have the following code. How do I make the contents of the array appear on the button? The arrays have a content of 0,1,2,3,4,5. I want the the buttons which are aligned vertically to be as follows:
0
1
2
3
4
5
var family = [0, 1, 2, 3, 4, 5];
console.log(family);
for (var prop in family) {
document.getElementById('aaron-family').innerHTML += '<div class=col> <button type="button" class="list-group-item"' + prop + '</button></div>';
console.log(prop);
}
button {
width: 200px;
height: 200px;
}
<div class="container">
<div class="row">
<ul id="aaron-family">
<div class="list-group"></div>
</ul>
<div class="col">
1 of 3
</div>
<div class="col">
j 1 of 3
</div>
</div>
</div>

This is working fine now.
your code was working fine, you just forget to close the <button> tag on appending the HTML.
var family = [0, 1, 2, 3, 4, 5];
for (var prop in family) {
document.getElementById('aaron-family').innerHTML += '<div class=col> <button type="button" class="list-group-item">' + prop + '</button></div>';
}
button {
width: 200px;
height: 200px;
}
<html>
<body>
<div class="container">
<div class="row">
<ul id="aaron-family">
<div class="list-group">
</div>
</ul>
<div class="col">
1 of 3
</div>
<div class="col">j 1 of 3
</div>
</div>
</div>
</body>
</html>
I hope this was helpful to you. If there is anything else please feel free to ask.

Your loop is incorrect as well as the string html you are trying to append, you can change it to (I used string templates for better readability) :
family.forEach((value) => {
document.getElementById('aaron-family').innerHTML += `
<div class="col">
<button type="button" class="list-group-item">${value}</button>
</div>
`;
});

Dragula - Drag elements from one container to different elements

My question is related to dragula https://github.com/bevacqua/dragula
I am trying to drag elements from one container and drop them (copy not move) into different containers. So, in this way I have one container which contains elements to drag and I want to drop them into different containers but its not working properly and sometimes its not working at all. Please guide me what is wrong with my code.
HTML
/*container which contains elements to drag */
<div class="row">
<div class="col-md-12">
<div class="activityIcons" style="text-align:center;">
<ul class="media-list media-list-container" id="media-list-target-left">
<li class="media" style="display:inline-block;" id="phone">
<div class="media-left media-middle dots" ><i class="icon-phone2 text-indigo-800 dragula-handle" style="font-size:22px;" data-popup="tooltip" title="Phone Call" data-container="body" data-trigger="hover" data-placement="bottom"></i></div>
</li>
<li class="media" style="display:inline-block;" id="history">
<div class="media-left media-middle dots"><i class="icon-history text-orange-600 dragula-handle" style="font-size:22px;" data-popup="tooltip" title="Review Order History" data-container="body" data-trigger="hover" data-placement="bottom"></i></div>
</li>
<li class="media" style="display:inline-block;" id="order">
<div class="media-left media-middle dots"><i class="text-blue-600 icon-cart-add2 dragula-handle" style="font-size:22px;" data-popup="tooltip" title="Place Product Order" data-container="body" data-trigger="hover" data-placement="bottom"></i></div>
</li>
</ul>
</div>
</div>
</div>
/* containers where elements will be dropped */
<div class="activity" id="1" style="margin-top: 5px; padding:5px; border: 1px solid #ccc;">
<div class="row activityDetail" id="1" style="padding:5px; margin:15px;">
<div class="col-md-12" style="border-bottom:1px solid #ddd;">
<span class="text-bold text-black actTime" style="cursor:pointer; margin-right:5px;">Time</span>
<span class="text-bold text-black regionCust" style="cursor:pointer; margin-right:5px;">Region & Customer</span>
<span class="media-list-container" id="activitiesBar1"><span class="dropMsg1">Drop Here</span></span>
<span class="pull-right stats">
<ul></ul>
</span>
</div>
</div>
<div class="row activityDetailTwo" id="2" style="padding:5px; margin:15px;">
<div class="col-md-12" style="border-bottom:1px solid #ddd;">
<span class="text-bold text-black actTimeTwo" id="2" style="cursor:pointer; margin-right:5px;">Time</span>
<span class="text-bold text-black regionCustTwo" id="2" style="cursor:pointer; margin-right:5px;">Region & Customer</span>
<span class="media-list-container" id="bar2"><span class="dropMsg2">Drop Here</span></span>
<span class="pull-right stats">
<ul></ul>
</span>
</div>
</div>
JQuery
dragula([document.getElementById('media-list-target-left'), document.getElementById('activitiesBar1')], {
copy: true,
revertOnSpill: true,
mirrorContainer: document.querySelector('.media-list-container'),
move: function (el, container, handle) {
return handle.classList.contains('dragula-handle');
}
}).on('drop', function(el) {
var actionId = $(el).attr('id');
if($('#activitiesBar1').children('.dropMsg1').length > 0){ $('.dropMsg1').remove(); }
if(actionId == "phone"){ $('.callDuration').modal(); }
if(actionId == "history"){ $('.orderHistoryModal').modal(); }
if(actionId == "order"){ $('.catalog').modal(); }
if(actionId == "chat"){ $('.conversation').modal(); }
if(actionId == "reschedule"){ $('.schedule').modal(); }
if(actionId == "training"){ $('.training').modal(); }
if(actionId == "visit"){ $('.carExpenses').modal(); }
});
dragula([document.getElementById('media-list-target-left'), document.getElementById('bar2')], {
copy: true,
revertOnSpill: true,
mirrorContainer: document.querySelector('#bar2'),
move: function (el, container, handle) {
return handle.classList.contains('dragula-handle');
}
}).on('drop', function(el) {
var actionId = $(el).attr('id');
if($('#bar2').children('.dropMsg2').length > 0){ $('.dropMsg2').remove(); }
if(actionId == "phone"){ $('.callDuration').modal(); }
if(actionId == "history"){ $('.orderHistoryModal').modal(); }
if(actionId == "order"){ $('.catalog').modal(); }
if(actionId == "chat"){ $('.conversation').modal(); }
if(actionId == "reschedule"){ $('.schedule').modal(); }
if(actionId == "training"){ $('.training').modal(); }
if(actionId == "visit"){ $('.carExpenses').modal(); }
});
Your suggestions will be highly appreciated.
Thank you.

Had the same basic requirement (one "source container" to copy from).
I think you are supposed to handle it all within one drake object that has all the containers and handles the behaviour with its options.
The key to have one "source container" to copy from is to have a simple method as copy option:
dragula([document.getElementById('media-list-target-left'), document.getElementById('activitiesBar1'),
document.getElementById('bar2')], {
copy: function (el, source) {
return source.id === 'media-list-target-left';
},
accepts: function (el, target) {
return target.id !== 'media-list-target-left';
}
}
);
So in this case you can copy from media-list-target-left to other containers but not drop elements into this container.

Sly Scroller Jquery

i would like to use following plugin http://darsa.in/sly/ but i cant get it to work, here are some details to my code.
i have following HTML:
<div class="scroller">
<div class="scrollbar">
<div class="handle" style="-webkit-transform: translateZ(0px) translateX(0px);"></div>
</div>
<div class="sly" style="overflow: hidden;">
<ul class="slidee" style="-webkit-transform: translateZ(0);">
<li><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></li>
<li><div style="width:50px;height:50px;overflow:hidden"><img src="/images/users/7.jpg"></div></li></ul>
</div>
</div>
and following JS:
$(document).find(".scroller").each(function (i, element) {
var $cont = $(element),
$frame = $cont.find(".sly"),
$scrollbar = $cont.find(".scrollbar");
$frame.sly({
// Sly type
horizontal: 1, // Change to horizontal direction.
itemNav: null, // Item navigation type. Can be: basic, smart, centered, forceCentered.
// Scrollbar
scrollBar: $scrollbar, // Selector or DOM element for scrollbar container.
dragHandle: 0, // Whether the scrollbar handle should be dragable.
dynamicHandle: 0, // Scrollbar handle represents the relation between hidden and visible content.
minHandleSize: 50, // Minimal height or width (depends on sly direction) of a handle in pixels.
clickBar: 0, // Enable navigation by clicking on scrollbar.
syncFactor: 0.50, // Handle => SLIDEE sync factor. 0-1 floating point, where 1 = immediate, 0 = infinity.
});
$frame.sly('reload');
});
But somehow Sly-Scroller doesn't work? Thanks for help!

First of all Load all the Scripts for SLY in the end of your body :
<script src="js/jquery.easing.js"></script>
<script src="sly/horizontal.js"></script>
<script src="http://darsa.in/sly/js/vendor/modernizr.js"></script>
<script src="http://darsa.in/sly/js/sly.min.js" ></script>
Then Call the HTML like this :
<div id="navigation">
<div class="wrap">
<h2>Video Playlist</h2>
<div class="scrollbar" style = "width:100%">
<div class="handle">
<div class="mousearea"></div>
</div>
</div>
<div class="frame " id="basic">
<ul class="clearfix">
<li> </li>
</ul>
</div>
<ul class="pages"></ul>
</div>
</div>

here you go! Credit goes to this blog writer...
don't forget to click on "download", see more details there!
http://www.okilla.com/614/plugin-sly-scrolling-with-item-based-navigation-support/

try this, its work for me
$(document).find('.row').each(function () {
var $slider = $(this).find('#contentSlider');
var $wrap = $slider.parent();
$slider.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 1,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1
});
});