We Keep Coding

owl carousel circular progress bar with classyloader gives a getContext error

I'm trying to create a circular progress bar around dots in owl carousel and ClassyLoader (https://andy.su/classyloader/). All fine but I got stuck with this error Cannot read property 'getContext' of undefined.
HTML
<div class="header-slider">
<div class="header-slider-1">
some slider content
</div><!-- .header-slider-1 -->
<div class="header-slider-2">
some slider content
</div><!-- .header-slider-2 -->
</div><!-- .header-slider -->
<div class="owl-dots" id="owldots">
<div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
<div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
</div>
JS
<script type="text/javascript">
/* ------------------------- Owl settings -------------------------- */
jQuery(function($){
$(document).ready(function() {
var timeout = 5000;
var owl = $('.header-slider').owlCarousel({
items: 1,
dots: true,
nav: false,
loop:true,
autoplay: true,
autoplayTimeout: timeout,
dotsContainer: '#owldots',
onChanged: function () {
$(function() {
var loader = $('.header-slider .owl-dot.active .loader').ClassyLoader({
width: 60,
height: 60,
percentage: 100,
speed: 20,
animate: true,
showRemaining: false,
showText: false,
diameter: 20,
lineColor: 'rgba(245,206,12,1)',
lineWidth: 2
});
})
}
});
});
});
</script>
Any idea how can I get this working?

There are several problems with your code, but the most important is: ClassyLoader must be instancied on a canvas, from the page you linked:
Next, you create the canvas element on which you want to trigger the plugin.
Also as I stated in a comment, $(function() { ... }); is an alias to $(document).ready(function() { ... });. And because in your code $ is an alias to jQuery, it can be simplified. I personnally prefer document ready syntax, it's more evident what it does for future readers.
NOTE: you'll see in the corrected codepen that you will probably have additional trouble with the CSS for your slides (they are not showing, probably conflict with owl carousel styles). I arbitrarily chose to set the canvas to fixed because it has to be a separate element and this will make it show upon the slides, but that can be improved. Note also that you need to use owl version 2 because of your syntax (changed your pen settings) and I directly copied ClassyLoader code because it doesn't work from filebin.
corrected code:
HTML:
<canvas class="header-loader"></canvas>
<div class="header-slider">
<div class="header-slider-1">
<p>some slider content 1</p>
</div><!-- .header-slider-1 -->
<div class="header-slider-2">
<p>some slider content 2</p>
</div><!-- .header-slider-2 -->
</div><!-- .header-slider -->
<div class="owl-dots" id="owldots">
<div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
<div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
</div>
JS:
$(document).ready(function() { //you can also use "$(function() {" instead
var timeout = 5000;
var owl = $('.header-slider').owlCarousel({
items: 1,
dots: true,
nav: false,
loop:true,
autoplay: true,
autoplayTimeout: timeout,
dotsContainer: '#owldots',
onChanged: function () {
//don't use "$(function() {" here!
var loader = $('.header-loader').ClassyLoader({ //changed the class
width: 60,
height: 60,
percentage: 100,
speed: 20,
animate: true,
showRemaining: false,
showText: false,
diameter: 20,
lineColor: 'rgba(245,206,12,1)',
lineWidth: 2
});
}
});
});

Using slick.js in autoplay mode for a single slide

I want to use slick.js for a simple news ticker. So I have a box where text is coming from the right and automatically scrolls to the left in a loop. The problem is that slick.js refuses to move the text if there is just one slide. I want the slide to move from the right to the left and after passing the left edge it should start moving from the right again. Does anyone know how to achieve this? Here is a little fiddle showing my problem. It uses this javascript code:
$(function(){
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true
});
});

Looks like slick carousel isn't built to work with only one element. How about using jQuery to clone your slide once so the plugin works? See functional example below:
$(function() {
if ($('.slider div').length == 1) {
$('.slider div').clone().appendTo('.slider');
}
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true
});
});
img {
margin: 10px;
border: 1px solid black;
}
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<section class="slider">
<div>
<img src="http://placehold.it/350x150" />
</div>
</section>

Jon's answer is good, but it will give you two same slides which you can slide (change). If you wish to show single slide without cloning, you can use initialSlide setting.
$(function() {
var start = 0;
if ($('.slider div').length == 1) {
start = -1;
}
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true,
initialSlide: start
});
});

Multiple animations jQuery - adding padding and displaying another div

I guys,
So I have a sidebar that I want to slide in and out when a user clicks a button. When that sidebar slides out, I want the body of the page to add a padding so that the sidebar doesn't hide the page content. I have it working, it's just the animation is very jumpy. Any suggestions. Here is what I have.
var userQueueVis = false
$(document).on('click', '#user-queue-button', function() {
if (userQueueVis == false) {
$('.user-queue').show('slide', {direction: 'right'}, { duration: 200, queue: false });
$(".main").animate({ 'padding-right' : '200px' }, { duration: 200, queue: false });
$("#user-queue-button").addClass("active-button");
userQueueVis = true;
} else {
$('.user-queue').hide('slide', {direction: 'right'}, { duration: 200, queue: false });
$(".main").animate({ 'padding-right' : '0px' }, { duration: 200, queue: false });
$("#user-queue-button").removeClass("active-button");
userQueueVis = false;
}
});

My snippet is not complete according to your needs but it gives you hit points what to do next, it toggle (show and hide) the sidebar (background red) along with adding padding to the specified parent div (#main). Hope this help.
$(document).ready(function(){
$('button').click(function(){
$("#sidebar").toggle("slide",function(){
$("#main").toggleClass("padding_10px");
});
});
});
#main{border:1px solid blue;}
#sidebar{
height:100vh;
width:250px;
background-color:red;
}
.padding_10px{padding:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<button>Click me!</button>
<div id="sidebar">
</div>
</div>

Slick carousel right to left

I've setup slick carousel to continuously scroll, however I need to to scroll in the oposite direction. Adding the RTL option didn't seem to work.
Fiddle here (currently left to right)
http://jsfiddle.net/mth2ghod/
$(function(){
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 100,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true
});
});

Setup "slidesToScroll" property to a negative value (e.g slidesToScroll: -1,) is not a native solution. This produced images smooth flow problem.
The right way is to add an attribute dir="ltr" to the slider's container (HTML element) OR add rtl: false property to slider settings:
// add an attribute dir="ltr" to the slider's container
//$('.slider').attr('dir', 'ltr');
// OR add `rtl: false` property to slider settings
$('.slider').slick({
autoplay: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
infinite: true,
cssEase: 'linear',
rtl: false
});
Note: This will reverse text direction also which can be changed by the CSS direction: ltr;
JS Fiddle Example

Change the slidesToScroll to a -1 (it will change the slide direction)
$(function(){
$('.slider').slick({
speed: 10000,
autoplay: true,
autoplaySpeed: 100,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: -1,
variableWidth: true
});
});

in your rtl css add below without any edit on
[dir='rtl'] .slick-slide {
float: left; }

know this is old, but the slick docs says:
Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

Here is the example for vertical slider from top to bottom.
http://jsfiddle.net/mth2ghod/114/
$(function(){
$('.slider').slick({
speed: 5000,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: -1,
vertical: true
});
});

According to the Slick GitHub page the bug fix is the below CSS code:
[dir='rtl'] .slick-slide
{
float: left;
}
and
.slick-slider .slick-track, .slick-slider .slick-list {
direction: ltr;
}
https://github.com/kenwheeler/slick/issues/2968#issuecomment-1143535266

This works for me,
I add ( dir="rtl" ) to the slider container and then add ( rtl: true ) to the slick slider settings
$('.carousel-rtl').slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
arrow: true,
dots: true,
rtl: true,
});
<div class="wrapper">
<div class="slide-wrapper">
<h2>Slick with RTL<h2>
<div class="carousel-rtl" dir="rtl">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</div>
</div>
You can see the sample here
https://codepen.io/davecar21/pen/RwovWvB

Slick Carousel RTL and LTR
Example: English (LTR) and Arabic (RTL)
Slick Carousel for RTL:
$(".slider-nav").slick({
arrows: false,
fade: false,
slidesToShow: 1,
slidesToScroll: 1,
rtl: true
});
Slick Carousel for LTR:
$(".slider-nav").slick({
arrows: false,
fade: false,
slidesToShow: 1,
slidesToScroll: 1,
rtl: false //not mandetory in LTR
});

adding [dir="ltr"] to the slider container and also adding [rtl: false] to slick slider settings fixed the issue for me.
Example code:
this.$hero.slick({
accessibility: true,
arrows: false, // this theme has custom arrows
draggable: false,
dots:true,
fade: false,
rtl: false,
autoplay: this.$hero.data('autoplay'),
autoplaySpeed: this.$hero.data('speed')
}).slickAnimation();

Jquery slider to load images when ready with placeholder

OK so I have a Jquery plugin that works great and all except it puts all of the images on top of each other until the plugin has finished loading, and then they all go into place. Is there a way to have the first image be a placeholder for the size 843 w 345 h and have it load hidden until they are all ready so my page site doesn't expand down then back up when it has loaded. thanks!
$(window).load(function(){
$('#slide-me').carousel({
style: 'fade',
transitionSpeed: 'slow',
carouselSpeed: 3500,
arrows: true,
buttons: false,
buttonsTheme: 'lines',
stopOnHover: false,
carouselHeight: 'crop',
carouselWidth: 'crop'
});
});
html
<div id="slide-me">
<img src="/tour/images/bigslider1.jpg" />
<img src="/tour/images/bigslider2.jpg" />
<img src="/tour/images/bligslider3.jpg" />
<img src="/tour/images/bligslider4.jpg" />
<img src="/tour/images/bigslider5.jpg" />
</div>

Give it a try, worked for me:
$(function(){
setTimeout(function(){
$('#slide-me').carousel({
style: 'fade',
transitionSpeed: 'slow',
carouselSpeed: 3500,
arrows: true,
buttons: false,
buttonsTheme: 'lines',
stopOnHover: false,
carouselHeight: 'crop',
carouselWidth: 'crop'
});
},500);
});

I actually got the answer for this and wanted to share in case anyone wanted to see it.
In my css all that was needed to do was this
#slide-me img { display: none; }
#slide-me img:first-child { display: block; }
Which allowed the first image to be shown first and hide the rest while script loaded.