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');
});
Related
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
});
});
});
};
I use kendo ui popup editor in this way：
editable: {
mode: "popup",
window: {
actions: [],
title: false,
modal: false,
resizable: false,
animation: false,
clickOutside: true
}
I don`t know if i can make the popup window auto-close through the editable configuration.
I have tried to add autoHide:true, autoClose: true configurations, but it doesn`t work.
I know this is an old question but maybe someone can benefit from this:
$("#btnSave").kendoButton({
click: function (e) {
e.preventDefault();
var dialog = $("#dialog").data("kendoWindow");
dialog.center();
dialog.open();
}
});
$("#dialog").kendoWindow({
width: 225,
height: 70,
modal: true,
visible: false,
title: false,
actions: [],
open: function() {
setTimeout(function () {
$("#dialog").data("kendoWindow").close();
}, 2000);
},
animation: {
open: { effects: "fade:in"},
close: { effects: "fade:out"}
}
});
Just in case any one feel lazy, here is how popup edit window could be closed:
$(document).on('click', function (e) {
//kendo popup edit window selector
var windowCont = $('.k-popup-edit-form.k-window-content');
//if it was first click on kendo grid edit button exit function
//otherwise popup window will be closed immidiatelly
if ($('.k-grid-edit').is(e.target))
return;
//if click was outside popup window, trigger close button
if (!windowCont.is(e.target) && windowCont.has(e.target).length === 0)
windowCont.find('.k-grid-cancel').click();
})
I have a problem with afterAction functions on my owl carousel.
The problem is that afterAction:syncPosition doesn't work when the second after Action "function(current)" is in the code. If I delete it, syncPosition works.
Currently I can't make a fiddle but maybe some of you can see a misspelled or something below.
UPDATE// ENTIRE CODE
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
loop: false,
navigation: true,
pagination: true,
paginationSpeed: 1000,
singleItem: true,
transitionStyle: "mask",
autoHeight: true,
autoPlay: 10000, //Set AutoPlay to 3 seconds
navigationText : false,
afterAction: syncPosition,
afterAction: function(current) {
current.find('video').get(0).play();
}
});
function syncPosition(el) {
var current = this.currentItem;
// code for smooth transition
this.owl.owlItems.removeClass('turn-on');
var t = this;
$(this.owl.owlItems[this.owl.currentItem]).addClass('turn-on');
}
});
$(window).scroll(function() {
if ($(this).scrollTop() > 80) {
$('.owl-pagination').addClass('hidden');
} else {
$('.owl-pagination').removeClass('hidden');
}
});
I've changed
afterAction: function(current) {
current.find('video').get(0).play();
}
to
afterInit: function(){
$("#sequence-1").find('video').get(0).play();
and both syncPosition and .find('video').get(0).play();
are working.
Now I know what you guys were thinking when you read the title. Your probable thinking that im talking about jQuery UI draggable. But im actually talking about the plugin i'm making for the community. I am trying to create a target for my plugin. It works as you can see here:
http://jsfiddle.net/XvZLn/24/
As you can see it works fine.
First, let me explain whats suppose to happen. Well what I want, is if the element is dropped in the target...the targ.on() gets launched. This is the onTarget feature in my plugin. This and the offTarget(targ.off()) are not working in my plugin.
This is what I have in my plugin:
var targ = {
on: o.target.onTarget,
off: o.target.offTarget
};
Then my plugin setup code is:
$(document).ready(function() {
$('#drag').jDrag({
revert: false,
revertDuration: 500,
ghostDrop: false,
ghostRevert: false,
ghostOpacity: '0.50',
instantGhost: false,
activeClass: false,
handle: false,
grid: false,
cookies: false,
cookieExdate: 365,
radialDrag: false,
radius: 100,
circularOutline: false,
strictMovement: false,
distance: 0,
not: false,
containment: false,
target: {
init: '#container',
lock: false,
onTarget: function() {
$(this).hide();
},
offTarget: function() {}
},
onPickUp: function() {},
onDrop: function() {}
});
});
I don't see why it wont work.
This is my actually plugin if you want to take a look in it:
http://jsfiddle.net/ZDUZL/89/
Try:
onTarget: function() {
console.log(this);
$(this).hide();
},
You'll see that "this" isn't referring to the element, but rather the object that holds the function.
Pass the element as an argument:
if (locker === false) {
if (statement) {
targ.on(this);
lock = false;
} else {
targ.off();
lock = false;
}
}
http://jsfiddle.net/ZDUZL/91/
This is my document.ready code:
$(document).ready(function() {
$("#dialogbox").dialog({
open: function(event, ui) {$("a.ui-dialog-titlebar-close").remove();},
bgiframe: true,autoOpen: false,closeOnEscape: false,draggable: false,
show: "drop",hide: "drop",zIndex: 10000,modal: true,
buttons: {'Ok': function() {$(this).dialog("close");processEmp();}}
});
});
I have the following JavaScript code that takes one parameter:
function test(pEmp)
{
var a = pEmp.value);
$('#dialogbox').dialog('open');
}
My question is, based on the value that I pass into my test function, which in turn calls my jQuery UI dialog ('#dialogbox'), when the user presses the 'Ok' button in the dialog, I need to somehow (which is what I am not sure how to do), pass the the variable "a" which holds my pEmp.value, into my other function processEmp(a?), which I have attached to my 'Ok' button.
I basically need this value when the user acknowledges the dialog box.
You may pass custom option to dialog before opening it:
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp($(this).data("pEmpValue"));
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
$("#dialog").data("pEmpValue", pEmp.value).dialog("open");
}
Or even the simplest solution is to declare a variable in scope of the window:
var a = null;
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp(a);
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
a = pEmp.value;
$("#dialog").dialog("open");
}
You can achieve this by adding an event handler for 'close'. Something like this:
$("#dialogbox").bind("dialogclose", function(event, ui) { processEmp(a); });