How to run the iScroll plugin - javascript

I've decided to give the JavaScript library iScroll a try. I've run into some problems though. I just don't seem to get things to work as they are intended to. The basic setup is not written with jQuery in mind but this is how I believe it should be called.
$(document).ready(function () {
var myScroll = new IScroll('#wrapper', {
scrollX: true,
scrollY: false,
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true
});
myScroll();
});
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
The documentation tells me this is the way add options to the code but somehow I can't get the scroll bars to render at all. I would also like to add a fade-out of a div based on the momentarily position of the scroll, ie. not the position when the scroll stops. This is how the scrollEnd position is called, but how do I get the position on the fly, ie. How do I trigger the fade-out when scrolling passes left -10, regardless if the scroll has stopped or not?
myScroll.on('scrollEnd', function () {
if ( this.x < -10 ) {
$('#logo').stop(true,true).fadeOut('fast');
} else {
$('#logo').stop(true,true).fadeIn('fast');
}
});

Related

Trying to insert jquery-mousewheel pluginin in to jquery cycle2

I'm trying to integrate jquery-mousewheel plugin (https://github.com/jquery/jquery-mousewheel) with the plugin - jquery cycle2 plugin.
Everything was fine until I discovered that mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel.
On GitHub I found a plugin (https://github.com/amondit/jquery.scrollsteps.js) designed specifically for this plugin to handle with this problem.
I used the file jquery.scrollsteps-full-min.js.
That's how I call the plugin:
$(function() {
var $slider = $('.slider_overlay');
// slider initialize
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list',
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
// initialize scrollsteps plugin
$slider.scrollsteps({
up: $slider.cycle('prev'),
down: $slider.cycle('next')
});
});
And, when I start to scroll the page up and down, I get the following error message from firebug console:
"TypeError: i.down is not a function" or "TypeError: i.up is not a function"
Perhaps someone has any ideas or thoughts why this error may occur?
If I use a default mousewheel init (without scrollsteps plugin) - everything worked fine:
$slider.mousewheel(function(e) {
if (e.deltaY > 0) {
$slider.cycle('prev');
} else {
$slider.cycle('next');
}
});
but as I mentioned it triggers a lot of scrolling events.
Maybe I'm solve this problem incorrectly ? If somebody knows other solutions - will be very grateful for the help.
Аnswer )
$(function() {
var $slider = $('.slider_overlay');
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list'
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
function prev() {
$slider.cycle('prev')
}
function next() {
$slider.cycle('next')
}
$slider.scrollsteps({
up: prev,
down: next
});
});

Stop/reverse animation on mouse off (baraja jquery plugin)

I've implemented the baraja jquery plugin for a section on a 'web app' that I need to create.
Rather than the plugin spreading the cards on the click of a button, I've opted to alter the script and spread out the cards on hover. On the face of it this works but if you hover over the cards and back off quickly before the animation is finished the cards will stay open. And then when you hover over the 'deck' they close. I've created a codepen below to show this:
http://codepen.io/moy/pen/OPyGgw
I've tried using .stop(); but it doesn't seem to have an impact on the result. Can anyone help me with this?
Additionally I'd like the deck to be open on page load, then close after a second or 2. I tried this with $( document ).ready() including the baraja.fan call but that didn't trigger it - any ideas?
this one really tickled me ;) tried several things, but - as already told - the plugin doesn't expect to get the close animation call faster, then the opening animation will run.
so finally i build you the following.
- opening the fan, right at document ready
- created a timeout for the mouseleave, to wait for the opening animation duration, before closing it - you will have a 400ms delay when mouseleave the element, but it will close, even when you've been to fast...
$(document).ready(function () {
if ($("#baraja-el").length) {
var $el = $('#baraja-el');
baraja = $el.baraja();
}
//initial open
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
$('.baraja-container').addClass('open');
// navigation
$('#baraja-prev').on('click', function (event) {
baraja.previous();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1000") {
$(this).addClass('visited');
}
});
});
$('#baraja-next').on('click', function (event) {
baraja.next();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1010") {
$(this).addClass('visited');
}
});
});
$('.baraja-container').hover(function (event) {
if(!$(this).hasClass('open'))
{
$(this).addClass('open');
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
}
}, function (event) {
curBarCon = $(this);
setTimeout(function(){
curBarCon.removeClass('open');
baraja.close();
}, 400);
});
$('.baraja-container li').click(function () {
$(this).addClass('visited');
});
});
since i fiddled in your codepen, you should have the working version here: http://codepen.io/moy/pen/OPyGgw
but... it's really no perfect solution. i'd suggest to get another plugin or rework baraja to get callback functions, which would test if the animation is currently running and dequeue them if needed.
rgrds,
E

jQuery Waypoints not firing at correct location

I'm trying to set up three waypoints with offset positions, the first waypoint is working absolutely fine and firing in the correct offset position (75%), but the second and third waypoints, located just after a Flexslider Carousel are not firing at the correct offset position. Due to the Carousel changing the height dimension of the page the second and third waypoints are firing once scrolled a lot further down the page then required, hence increasing the actual offset location.
I have tried to call $.waypoints('refresh') but I am not having any lucky. My code is as follows.
// first-flexslider
$(window).load(function() {
$('#firstSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: true,
});
});
// second-flexslider
$(window).load(function() {
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
});
});
$('.prev, .next').on('click', function() {
var href = $(this).attr('href');
$('#secondSlider').flexslider(href)
return false;
})
$(document).ready(function(){
$.waypoints('refresh');
});
// waypoints
$(document).ready(function() {
$('.wp1').waypoint(function() {
$('.wp1').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp2').waypoint(function() {
$('.wp2').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp3').waypoint(function() {
$('.wp3').addClass('animated fadeInUpD');
}, {
offset: '75%'
});
});
I'm hoping to find out how to overcome this problem and have the 2nd and 3rd waypoints fire at the correct offset position (75%). Please let me know if you require any more information. Thanks.
Flexslider has a callback API where you can execute functions after various actions: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
I would check out the after callback and possibly the start callback and call refresh from there. For example:
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
after: function() {
$.waypoints('refresh');
}
});

How do I set different mmenu options by screen size?

I'm using mmenu (http://mmenu.frebsite.nl) to create my mobile menu. I implement my jQuery code like this :
$('.mobile-menu .menu-block-wrapper').attr('id', 'menu-left');
$('.mobile-menu .menu-block-wrapper').mmenu({
configuration: {
selectedClass: "active",
menuNodetype: "div",
},
dragOpen : {
open: false,
threshold : 100
}
});
$(".mobile-menu-trigger").trigger("open");
I'd like, when my browser window is less than, say, 720px, to set dragOpen to true, and when I switch back to a normal resolution, to set it back to false.
Any help is greatly appreciated.
Thanks
The plugin initializes the dragging when it is fired. So you can't update the option after the plugin has been fired.
I guess you could bind a function to the dragleft, dragright, dragup and dragdown events that measures the browser width and, if larger than 720px, prevents propagation. Something like this:
$("#page").on("dragleft dragright dragup dragdown", function( event ) {
if ( $(window).width() > 720 ) {
event.stopImmediatePropagation();
event.gesture.stopImmediatePropagation();
} else {
// the plugin will fire its events bound to dragleft/dragright/dragup/dragdown
}
});
$('.mobile-menu .menu-block-wrapper').mmenu({
drag: {
open: true,
treshold: 100
}
});
Not sure if this will work though, having seen this issue with hammer.js:
https://github.com/EightMedia/hammer.js/issues/333

jQuery Tools tabs auto rotate (done) and pause on hover (done) resume on mouseout NEED HELP!

I can get the tabs to auto rotate, and pause on hover, but can't seem to get them started again when you mouse out. Also, is "fadeInSpeed" done correctly? the Please take a look and see if you can help, it's much appreciated! Really glad to see jQueryTools doing well again!
$(function() {
var rotateDelay = 3500;
var rotateTabs=true;
var $tabItems = $('#flowtabs li a').hover(function(){
rotateTabs=false;
});
var tabs = $("ul#flowtabs").tabs('#flowpanes > div', {api:true, effect:'fade', fadeInSpeed: 100, rotate: true});
function doRotateTabs(){
if (rotateTabs) {
setTimeout(function(){
if (!rotateTabs) return;
if(tabs.getIndex() == $tabItems.length-1){
tabs.click(0);
}
else {
tabs.next();
}
doRotateTabs();
}, rotateDelay);
}
}
doRotateTabs();
});
Did you ever solve this problem
Why are you writing your own code to make it auto play I just passed the configuration for sideshow and it works. It seems to be pausing on mouse over and works like a charm.
My code is below
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({
autoplay: 'true'
});
});
I hope this helps Adity Bajaj

Categories

Resources