Develop Reference

How to run inline script AFTER jquery confirmed as defined

I'm working under particular circumstances and I am trying to get a slick slider carousel to run.
I get an error that $ is not defined.
Unless I use
window.onload = function(e){
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
};
The problem is, this slider is the first thing on the page, so I can not wait until everything is loaded, as it takes way too long.
I cannot change the order of my script tag or make sure the jQuery link is properly placed in the head an so on.
I know that other sliders on the page work just fine, and I also know that this particular one works fine once the proper files are loaded
There must be a way to check if $ is defined, keep checking until it is, and then run the script once confirmed.

use a waiter:
setTimeout(function wait(){
if(!window.$) return setTimeout(wait, 100);
// do stuff needing $ here:
console.info("$=", $);
}, 100);

var timer = setInterval(checkjQuery, 5000);
function checkjQuery() {
if(window.jQuery) {
clearInterval(timer);
callSlick();
console.log('jQuery is loaded');
return;
} else {
console.log('waiting');
}
}
function callSlick() {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
};
Similar to DanDavis solution

IMO the answer from #dandavis solves the issue the simplest.
I'd like to offer a way to make a simple "wait-er" re-usable and show how to integrate this with the code you shared.
A re-usable wait-er:
function waitUntil(getResource, callback) {
// Copied from #dandavis' answer
setTimeout(function wait() {
const resource = getResource();
if(!resource) return setTimeout(wait, 100);
callback(resource);
}, 100);
}
window.onload = function(e) {
waitUntil(function () { return window.$; }, function () {
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
});
};
Or if you wanted to, you could make it promise-based:
function waitUntil(getResource) {
return new Promise((resolve, reject) => {
setTimeout(function wait() {
const resource = getResource();
if(!resource) return setTimeout(wait, 100);
resolve(resource);
}, 100);
});
}
window.onload = function(e) {
waitUntil(function () { return window.$; })
.then(function () {
$(document).ready(function () {
$('.js-slick').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
fade: true,
speed: 1000
});
});
});
};

Click event not firing correctly

I am attempting to fire a click event when the page loads but only once on each page load. What is happening is that in localhost it works fine, but when I upload to server it dosen't fire at all.
The idea was to set a counter to 0 when the page loads then inc the counter by 1 to disable further clicks. Obviously, there is an error somewhere but I cannot solve it.
I am using jqwidgets jqxgrid to display the data and getting the class as a variable. I am also using jquery 1.11.1
I would be grateful if someone could help me solve this as I seem to have tried many combinations, but ok on localhost but nothing on server. I am using php v5.3.13 wamp and 5.4 on server. Many thanks
var counter = 0;
window.onload = function() {
var calendaricons = document.getElementsByClassName('jqx-icon-calendar');
for (var i = 0; i < calendaricons.length; i++) {
calendaricons[i].addEventListener('click', function() {
if (counter === 0) {
notif({
type: "info",
msg: "Test Message",
width: 650,
height: 99,
multiline: true,
position: "center",
fade: true,
//timeout: 3000,
autohide: false,
clickable: true
});
counter++;
} else {
return false;
}
});
}
}

If you are using jQuery, which it seems the case, you can use the one function that allows your handler to be runt only once.
Here is your code with the use of the one function:
$(window).load(function() {
$('.jqx-icon-calendar').each(function(index, item) {
$(this).one("click", function() {
notif({
type: "info",
msg: "Test Message",
width: 650,
height: 99,
multiline: true,
position: "center",
fade: true,
//timeout: 3000,
autohide: false,
clickable: true
});
});
});
});

get event on scrollstart and scrollend - iscroll

I am using iScroll v5.1.1, and I want event when user started and ended scrolling activity on the page.
Here is my javascript,
myScroll = new IScroll('#scrollinginside', {
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: false,
checkDOMChanges: true,
onScrollStart: function () {
console.log('scrolling is started');
},
onScrollEnd: function () {
console.log('scrolling stopped');
}
});
But when I tried to scroll across the page no event is registred. Whats wrong with my javascript ? Am I missing something ?

Resolved this problem by using ,
myScroll = new IScroll('#scrollinginside', {
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: false,
checkDOMChanges: true
});
myScroll.on ('scrollStart', function () {
console.log('Started');
});
myScroll.on ('scrollEnd', function () {
console.log('Ended');
});

using same same selector for Query lightGallery + smoothdivscroll,

I would like to use smoothdivscroll (http://smoothdivscroll.com/index.html) for a scrolling block of images which users can open using the http://sachinchoolur.github.io/lightGallery/index.html lightbox. Unfortunately these scripts do not function when using the same selector.
<script type="text/javascript">
if (Modernizr.touch) {
$(".scroll-banner").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true,
manualContinuousScrolling: true,
mousewheelScrolling: false
});
} else {
$(".scroll-banner").smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
}
$(function() {
$(".scroll-banner").lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
</script>
How do I get two plugins to use the same selector?

is it possible to use it this way:
$(document).ready(function() {
var scrollbanner = $(".scroll-banner");
scrollbanner.smoothDivScroll({
mousewheelScrolling: "horizontal",
mousewheelScrollingStep: -1,
easingAfterMouseWheelScrollingFunction: "easeOutCirc",
manualContinuousScrolling: true,
autoScrollingMode: "onStart",
scrollingHotSpotLeftClass: "prev",
scrollingHotSpotLeftVisibleClass: "prevVisible",
scrollingHotSpotRightClass: "next",
scrollingHotSpotRightVisibleClass: "nextVisible",
});
scrollbanner.lightGallery({
loop:true,
auto:false,
pause:1000,
counter:true,
vimeoColor: "000000"
});
});
In your code one of the functions is called when DOM is ready and the other is not. Does the behaviour/error change when changing the order of execution for adding the functionality to the divs?

Push content javascript content

How can i push my content the same as another content? OK i know the question seems kind of vague but what I want to do is push my content like the way another script is pushing its content. What is doing when clicking the button it will push the content from the side causing the div to contract. I am not too far so maybe somebody can help. This is the script that works:
$(function(){
var $trigger = $(".icon-menu-2");
var $menu = $(".c_left");
$trigger.toggle(function show() {
$menu.animate({ width: 185, marginLeft: 0, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:185, display:'toggle'}, 'slow');
}, function hide() {
$menu.animate({ marginLeft: -185, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginLeft:0, display:'toggle'}, 'slow');
});
})
http://jsfiddle.net/Ndvbn/2/
Here is the script that needs just a small touch up so that it will push the content just like the script above does when clicking on test. Here is the script:
var timer;
$("#slideout").animate({right:'0px', queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: "slow"})
}, 500);
});
$("#clickme2").click(function () {
if ($("#slideout").css("right") == "-280px"){
$("#slideout").animate({right:'0px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});
} else {
$("#slideout").animate({right:'-280px'}, {queue: false, duration: 500}, function () {
clearTimeout(timer);
});}
});
http://jsfiddle.net/5UpHk/4/
Can anybody post the code so that my second script will push the content to the left?

This script below will push the content to the left. I made a couple of changes to the CSS as well. Check out the demo and code here: http://jsfiddle.net/BdKhW/1/
var timer;
$("#slideout").animate({width:'275px'}, {queue: false, duration: "slow"}, function () {
timer = setTimeout(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
}, 2000);
});
$(".c_left").animate({marginRight:'275px'}, {queue: false, duration: "slow"})
$("#clickme2").click(function () {
$("#slideout").animate({width:0}, {queue: false, duration: "slow"})
$(".c_left").animate({marginRight:0}, {queue: false, duration: "slow"})
});