Iam using the waypoints plugin, but am open for others.
so far i have managed to get the div to fadeIn when iam scrolling down and its rached 30%:
element.waypoint(function(){
$(this).animate({ opacity: 1 }, 500);
},{
offset: '30%'
});
But iam not able to make it fadeout again, when its getting out of view again.
Thanks for the help.
is this a too hard question for mighty stackoverflow? ...
You can do different things depending on the direction you are scrolling when you cross that waypoint trigger spot using the direction parameter that is passed to the function:
element.waypont(function(direction) {
if (direction === 'down') { ... }
else { ... }
}, { offset: '30%' });
You can also create multiple waypoints with different offsets, so you can react to the element hitting different parts of the page:
element
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '10%' })
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '90%' });
Related
I have a slick-carousel that a have some accordion tabs inside.
I need to be able to react to the bootstrap accordion collapse/expansion and adjust the height of the carousel.
It adjusts with the adaptive height correctly but only once done a full rotation.
How would I go about this.
so have established this so far. I are actually using velocityjs for the accordion.
if ($(this).hasClass('active')) {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', false).velocity('slideUp', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', false).removeClass('active');
} else {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', true).velocity('slideDown', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', true).addClass('active');
}
function resize_slider() {
var sliderAdaptiveHeight = function () {
var heights = [];
let items = $('.slick-active')
items.each(function () {
heights.push($(this).height());
});
$('.slick-list').height(Math.max.apply(null, heights));
}
sliderAdaptiveHeight();
$('.slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
sliderAdaptiveHeight();
});
}
the resize_slider function is being triggered however the height adjustments are back to front.
ie when expanding the slick slider height retracts and when collapsing the slick slider expands.
any thoughts
I seem to be encountering issues when attempting to scroll between a regular scrollify panel and interstitialSection. I need to add the elements within the interstitialSection to the standardScrollElements as they need to be scrollable.
When you scroll quickly on a desktop there is flickering and when using a mobile it exhibits other issues like not enabling scrollify on scrolling. When you clear the 'StandardScrollElements' it stops the flickering but doesn't allow scrolling of the content on the slide mainly on mobile.
$.scrollify({
section: ".slide",
scrollbars: true,
easing: "easeOutExpo",
scrollSpeed: 800,
updateHash: false,
standardScrollElements: ".footer-content,.news",
interstitialSection: ".slide-content,.clients,footer",
before: function () {
},
after: function (i) {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
},
afterRender: function () {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
}
});
I am using Highmaps and I limit the zoom range by setting the minRange property in the xAxis property.
This limits the zoom in factor as expected, but when zooming in too much, it does not let you zoom out again until you drag the map. To be more precise, it lets you zoom out until the x-axis is completely visible, but if your viewport is too wide to display the whole y-range of the map at this particular zoom step, you only get a horizontal stripe.
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
xAxis: {
minRange: 5000 // <- prevent zooming in too much
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});
});
You can see a working demo here: http://jsfiddle.net/b9d0ry3t/
This is a standard Highmaps demo, where I simply added the minRange on the xAxis, nothing else.
This and many other problems have been fixed with the most recent Highmaps update (Feb. 2015).
Was wondering if you guys can point me in the right direction, my brain's a bit fried at the moment from pulling an all-nighter.
I'm trying to achieve what should be a relatively easy task using the Waypoints plugin that adds a class to a div when in view that switches it to full opacity. When the user continues to scroll down (or up), that class is faded out by removing the class which is then applied to the next div in view.
I found a site that achieves the desired effect I'm looking for here:
http://www.araujoestate.com/pages/the-land.html
I believe the answer lies in the "Above" and "Below" callbacks?
Thanks for any input on this one.
UPDATED
I developed the following JSFiddle:
http://jsfiddle.net/nbgdzspy/2/
I'm producing the desired effect I was looking for, but was wondering if there's a more cleaner way to approach the code... Seems rather clunky.
$('#test1').waypoint(function(direction) {
if (direction === 'down') {
$(this).addClass("waypoint-here");
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
$(this).addClass("waypoint-here");
$("#test2").removeClass("waypoint-here");
}
}, {
offset: '25%'
});
$('#test2').waypoint(function(direction) {
if (direction === 'down') {
$("#test1").removeClass("waypoint-here");
$(this).addClass("waypoint-here");
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
$(this).addClass("waypoint-here");
$("#test3").removeClass("waypoint-here");
}
}, {
offset: '25%'
});
I think I found a rather simple solution to my problem above... Amazing what some fresh air can do.
Here's the code I plan on implementing:
$(function() {
$('.waypoint').waypoint(function(direction) {
if (direction === 'down') {
$(this).addClass("waypoint-here");
$(this).prev().removeClass("waypoint-here");
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
$(this).addClass("waypoint-here");
$(this).next().removeClass("waypoint-here");
}
}, {
offset: '0'
});
});
You can see it in action here:
http://jsfiddle.net/nbgdzspy/6/
I have a very simple Crafty.js script working in Chrome.
in my component file I have this component:
Crafty.c('PlayerCharacter', {
init: function() {
var playerRef = this;
playerRef.bind("KeyDown", function(e)
{
if (playerRef.isDown('LEFT_ARROW')) {
playerRef.x=playerRef.x-16;
myPlayer.sendMessage("LEFT");
} else if (playerRef.isDown('RIGHT_ARROW')) {
playerRef.x=playerRef.x+16;
myPlayer.sendMessage("RIGHT");
} else if (playerRef.isDown('UP_ARROW')) {
playerRef.y=playerRef.y-16;
myPlayer.sendMessage("UP");
} else if (playerRef.isDown('DOWN_ARROW')) {
playerRef.y=playerRef.y+16;
myPlayer.sendMessage("DOWN");
}
});
},
});
And then in my start function of the game, I have :
Crafty.e("2D, DOM, Color, Keyboard, Mouse, PlayerCharacter")
.attr({x: 20*16, y: 20*16, w: 16, h: 16})
.color('rgb(255,0,0)');
As mentioned the Player Character displays and moves as expected in Chrome, however in Firefox it simply displays initially and does not move. There are no errors generated.
If anyone has any ideas or ideas on how to debug this (currently using Firebug, with limited success).
BTW: the following alternate code also works in Chrome and not in Firefox
Crafty.c('Actor', {
init: function() {
this.requires('2D, Canvas, Grid');
},
});
Crafty.c('PlayerCharacter', {
init: function() {
this.requires('Actor, Fourway, Color')
.fourway(4)
.color('rgb(20, 75, 40)');
}
});