http://coolcarousels.frebsite.nl/c/50/
The carousel is a click/swipe drag slideshow and it uses the caroufresel.js. I have multiple instances of this carousel, but when I click and drag one of the carousel, ALL the carousels move. I believe its in the JavaScript, but I'm fairly new to this and I cant seem to figure this one out.
So what I want to do is separate each carousel to move individually.
<article class="wrapper">
<div class="caroufredsel">
<ul class="carousel">
<!--CONTENT-->
</ul>
</div>
</article>
This is basic structure and is used multiple times for multiple carousels. Each one is differentiated by itself, but I'm having trouble with implementing the carousel for each one to respond individually.
The initial link at the top shows the original mark up and js.
Appreciate the responses.
Here's the javascript:
// the carousel
var $carousel = null;
// the draggable wrapper
var $wrapper = null;
// the width of one item
var itemWidth = 1280;
// the duration of the scrolling
var scrollDuration = 300;
// dragging-engine
var startDragPosition = false;
function startDrag( event ) {
event.preventDefault();
if ( $carousel.triggerHandler( 'isScrolling' ) ) {
startDragPosition = false;
return;
}
startDragPosition = event.pageX;
$wrapper.bind(
'mousemove',
function( e ) {
$wrapper.css({
'marginLeft': -(itemWidth + startDragPosition - e.pageX)
});
}
);
}
function stopDrag( event ) {
event.preventDefault();
$wrapper.unbind('mousemove');
if ( startDragPosition ) {
var currentDragPosition = event.pageX;
var direction = false;
if ( startDragPosition < currentDragPosition ) {
direction = 'prev';
} else if ( startDragPosition > currentDragPosition ) {
direction = 'next';
}
if ( direction ) {
$carousel.trigger( direction );
$wrapper.animate({
'marginLeft': -itemWidth
}, scrollDuration);
}
}
startDragPosition = false;
}
$(function() {
// the carousel
$carousel = $('.carousel');
$carousel.caroufredsel({
width: 1280 * 5,
height: 638,
align: false,
items: {
visible: 3,
start: -1
},
scroll: {
items: 1,
duration: scrollDuration
},
auto: false
});
// make the wrapper draggable
$wrapper = $carousel.parent();
$wrapper.css({
'cursor': 'move',
'marginLeft': -itemWidth
});
$wrapper.bind('mousedown', startDrag)
$wrapper.bind('mouseup', stopDrag)
$wrapper.bind('mouseleave', stopDrag);
});
It's hard to tell exactly what's going wrong as you haven't supplied the HTML for the carousels. But from what I can tell, you're defining the var carousel as anything having the class 'carousel'. Perhaps you need to give each carousel a unique ID and then initialise them separately?
Related
I made a bar chart only with CSS and a animation from low to up that works well, however I want to run only when trigged by scroll.
Somehow the animation after trigged by the scroll does not stop, it keeps running.
look in the inspect element the latest bar.
jquery
// Bar Chart Animation
function barChart(){
$("#demographicsBars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000, function() {
$('.viewerDemographics #demographicsBars li .bar').css('overflow','inherit');
});
});
};
// Scroll Call Animation
$(window).scroll(function () {
$('.viewerDemographics').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
barChart();
} else {
}
});
});
jsfiddle
It's because you're asking it to.
http://jsfiddle.net/g6r1vngh/1/
Tell JS it hasn't been drawn
// Bar Chart Animation
var barChartDrawn = false;
Set it to true when it runs
function barChart(){
barChartDrawn = true;
Don't do any of those calculations, or run the function, if it's true
$(window).scroll(function () {
if (barChartDrawn) return;
My close button function (via below main plugin file) refreshes to the top of page; I need to maintain position in long vertical scroll page, when clicking close button to exit popup.
HTML for button:
X
Main popify plugin JS:
// JavaScript Document
/** A modal pop-up.
Basic usage.
--------------------------------------------------------------------
HTML elemets that the plugin will create on document ready.
<!--
An overlay that will act as a background for the pop-ups.
Only one will be added to the DOM.
-->
<div id="flyPopifyOverlay" class="flyPopifyHide"><!-- Empty. --></div>
<!--
A wrapper element for each pop-up's content.
-->
<div class="flyPopifyOverlayContent" class="flyPopifyHide">
</div>
--------------------------------------------------------------------
The following options can be pased to the plugin:
Option name: default value
opacity: 1
The popup's background opacity.
minY: 0
The highest the pop-up can follow the scroll vertically
relative to the document.
maxY: $(document).height() - popup.height()
The lowest the pop-up can follow the scroll vertically
relative to the document.
--------------------------------------------------------------------
The pop-up's wrapper element ('.flyPopifyOverlayContent') will respond
to the following events:
fly-popify-show:
Displays the pop-up.
fly-popify-hide:
Hides the pop-up.
There are 2 (two) helper plugin functions: popifyOpen and popifyClose.
They, respectivley open and close the pop-ups they're invoked on.
Note that these helper functions can be called on the .flyPopifyOverlayContent
elements themselves or any descendant elements.
<code>
// Popify some content.
$('#content').popify();
// Will open the pop-up in which the a elements reside.
$('#content .comeClass a').popifyOpen();
// Same as the above.
$('#content').popifyClose();
// Will open all pop-ups.
$('.flyPopifyOverlayContent').popifyOpen();
// No effect.
$('body').popifyOpen();
</code>
*/
var jqPopify = false;
if ('undefined' != typeof jqFly) {
jqPopify = jqFly;
} else if ('undefined' != typeof jQuery) {
jqPopify = jQuery;
}
(function($){
// Default options.
var defaultSettings = {
// The popup's background opacity.
opacity: 0,
// The highest the pop-up can follow the scroll vertically.
minY: 0,
// The lowest the pop-up can follow the scroll vertically.
maxY: null // Note that this is just a temp. Will get calculcated for each individual pop-up.
};
var inlineStyles = {
overlay: {
display: 'none',
position: 'absolute',
top: '0',
left: '0',
opacity: '0.50',
background: '#000',
zIndex: '-100'
},
overlayContent: {
display: 'block',
opacity:0,
position: 'absolute',
top: '0',
left: '0',
zIndex: '-100'
}
};
function showLightbox(e) {
if (!$('#flyPopifyOverlay').hasClass('flyPopifyHide')) {
return;
}
$('#flyPopifyOverlay')
.removeClass('flyPopifyHide')
.stop(true)
.clearQueue()
.show()
//.animate({ opacity: 0.53 });
$(this)
.removeClass('flyPopifyHide')
.stop(true)
.clearQueue()
.show();
$(window).scroll();
onWindowResize();
};
function hideLightbox(e) {
var overlayContent = $(this);
$(this)
.addClass('flyPopifyHide')
.stop(true)
.clearQueue()
.animate({ /*opacity: 0 */}, function() {
$(overlayContent).hide();
});
$('#flyPopifyOverlay')
.addClass('flyPopifyHide')
.stop(true)
.clearQueue()
.animate({ /*opacity: 0*/ }, function() {
$('#flyPopifyOverlay').hide();
});
};
function onWindowResize(e) {
$('#flyPopifyOverlay')
// Pretty simple. What happens when overlay needs to be offseted?
// Let's say it starts from 100th pixel to allow for navigation menu
// interaction?
.width($(document).width())
.height($(document).height());
};
/**
* onWindowScrollResize()
*
* Called when the viewport changes, for both positon (relative to [0,0])
* and dimensions (width and height).
*/
function onWindowScrollResize(e) {
// There shouldn't be more then 1 (one) pop-up opened at a time in general,
// so don't take into account the posibility of more the 1 opened.
popup = $('.flyPopifyOverlayContent').not('.flyPopifyHide').first();
if (!popup.size()) {
return;
}
var toX = 0;
var toY = 0;
// Make sure the object is copied, otherwise we're modifing
// the element's settings variable.
var settings = popup.data('settings');//$.extend({}, popup.data('settings'));
// Make sure used settings are correct.
if (!settings.maxY) {
settings.maxY = $(document).height() - $(popup).height();
}
if (!settings.maxX) {
settings.maxX = $(document).width() - $(popup).width();
}
// Code repeats. It's simply lines.
// TODO: Come up with a generic center(k1, k2, v1, v2, maxK1, maxK2).
// k1 represents the line's left most point and k2 right most point.
// v1 and v2 are the viewport's points (which is a line as well).
// maxK1 and maxK2 are the bounds.
// Vertical and horizontal alignemnt of the pop up is identical
// due to both axis being the same - can be represented as
// lines on a flat plane.
// ************ Process horizontal. ************
// Get the center X relative to the window's width.
if (popup.width() < $(document).width()) {
var x = parseInt($(window).width()/2);
x -= parseInt(popup.width()/2);
toX = $(window).scrollLeft() + x;
if (popup.width() > $(window).width()) {
var vpLeftX = $(window).scrollLeft();
var vpRightX = vpLeftX + $(window).width();
var pLeftX = parseInt(popup.css('left'));
var pRightX = pLeftX + popup.width();
if (vpLeftX < pLeftX) {
toX = $(window).scrollLeft();
} else if (vpRightX > pRightX) {
toX = vpRightX - popup.width();
} else {
toX = pLeftX;
}
}
// Upper bound.
if (settings.minX > toX) {
toX = settings.minX;
}
// Lower bound.
if (settings.maxX <= toX) {
//toX = $(document).height() - popup.height() - 1;
toX = settings.maxX - 1;
}
}
// ************ END process horizontal. ************
// ************ Process vertical. ************
// If the height of the popup is less then the document,
// only then it will be centered.
if (popup.height() < $(document).height()) {
// Get the center Y relative to the viewport's height.
var y = parseInt($(window).height()/2);
y -= parseInt(popup.height()/2);
toY = $(window).scrollTop() + y;
if (popup.height() > $(window).height()) {
var vpTopY = $(window).scrollTop();
var vpBottomY = vpTopY + $(window).height();
var pTopY = parseInt(popup.css('top'));
var pBottomY = pTopY + popup.height();
if (vpTopY < pTopY) {
toY = $(window).scrollTop();
} else if (vpBottomY > pBottomY) {
toY = vpBottomY - popup.height();
} else {
toY = pTopY;
}
}
// Upper bound.
if (settings.minY > toY) {
toY = settings.minY;
}
// Lower bound.
if (settings.maxY <= toY) {
//toY = $(document).height() - popup.height() - 1;
toY = settings.maxY - 1;
}
}
// ************ END process vertical. ************
popup
.stop(true)
.clearQueue()
.animate({ top: toY, left: toX, opacity: 1 }, 500);
};
$.fn.popifyOpen = function(options) {
var settings = $.extend(true,
// No settings for popifyOpen.
{},
// User supplied.
options
);
$(this).trigger('fly-popify-show');
$('#flyPopifyOverlay , .flyPopifyOverlayContent').css({'z-index':9998,opacity:1});
$('#flyPopifyOverlay ').css({opacity: 0.5});
return this;
};
$.fn.popifyClose = function(options) {
var settings = $.extend(true,
// No settings for popifyClse.
{},
// User supplied.
options
);
$(this).trigger('fly-popify-hide');
$('#flyPopifyOverlay , .flyPopifyOverlayContent, .closePopup').css({'z-index':-100,display:'none', opacity:0});
window.location.reload();
return this;
};
$.fn.popifyRefresh = function() {
onWindowScrollResize();
return this;
};
$.fn.popifyIsOpen = function() {
if (1 == $(this).parents('.flyPopifyOverlayContent:first').size()) {
return !$(this).parents('.flyPopifyOverlayContent:first').hasClass('flyPopifyHide');
};
return false;
}
;
$.fn.popify = function(options) {
// Merge (deep) user settings to defaults and produce
// the global settings for this invokation.
var settings = $.extend(true,
defaultSettings,
// User supplied.
options
);
this.each(function(i, content) {
var overlayContent = null;
// Copy global settings.
var tempSettings = $.extend({}, settings);
// Determine maximum Y.
if (tempSettings.maxY) {
tempSettings.maxY = tempSettings.maxY - $(content).height();
if (0 >= tempSettings.maxY ) {
tempSettings.maxY = 1;
}
}
// Wrap in jQuery object.
content = $(content);
// Save the settings.
content
.detach();
$('<div class="flyPopifyOverlayContent flyPopifyHide"></div>')
.appendTo('body')
.append(content);
// Figure out the parent overlay element, since it has not id just use parent().
overlayContent = $(content.parent());
// Set initial opacity to 0.
overlayContent
.data('settings', tempSettings)
.css(inlineStyles.overlayContent)
// Setup default hide/show events.
.bind('fly-popify-show', showLightbox)
.bind('fly-popify-hide', hideLightbox);
});
$(window).trigger('resize');
return this;
};
// These are the global actions and event handlers that have
// to be carried out / defined before the plugin is invoked.
$(document).ready(function(e){
// If not already added, add the global overlay element.
$('body').append('<div id="flyPopifyOverlay" class="flyPopifyHide"><!-- Empty. --></div>');
$('#flyPopifyOverlay')
.css(inlineStyles.overlay);
$('#flyPopifyOverlay').bind('click', function(e) {
$('.flyPopifyOverlayContent').not('.flyPopifyHide')
.trigger('fly-popify-hide');
window.location.reload(true);
});
$(window)
.bind('resize', onWindowResize)
.bind('resize scroll', onWindowScrollResize);
});
})(jqPopify);
Remove the window.location.reload line here:
$.fn.popifyClose = function(options) {
var settings = $.extend(true,
// No settings for popifyClse.
{},
// User supplied.
options
);
$(this).trigger('fly-popify-hide');
$('#flyPopifyOverlay , .flyPopifyOverlayContent, .closePopup').css({'z-index':-100,display:'none', opacity:0});
// REMOVE THIS LINE
// window.location.reload();
return this;
};
If you HAVE to reload the page when closing the popup, here are a couple subjects related to keeping the scroll position on reload:
Refresh Page and Keep Scroll Position
keep scroll position after location.reload()
My question is if anybody knows what to change in the following js file to always show submenu on the vertical menu , meaning to show the submenu on page load and stay shown whether i hover on it or not, in clear make it part of the vertical menu and not an hidden sub menu that you have to hover on the parent category to access.
What do i need to change in the following code to acomplish that, :
Thanks in advance guys !
* DC Vertical Mega Menu - jQuery vertical mega menu
* Copyright (c) 2011 Design Chemical
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($){
//define the new for the plugin ans how to call it
$.fn.dcVerticalMegaMenu = function(options){
//set default options
var defaults = {
classParent: 'dc-mega',
arrow: true,
classArrow: 'dc-mega-icon',
classContainer: 'sub-container',
classSubMenu: 'sub',
classMega: 'mega',
classSubParent: 'mega-hdr',
classSubLink: 'mega-hdr',
classRow: 'row',
rowItems: 3,
speed: 'fast',
effect: 'show',
direction: 'right',
menubg: '0',
menufixwidth: '0',
menufixheight: '0'
};
//call in the default otions
var options = $.extend(defaults, options);
var $dcVerticalMegaMenuObj = this;
//act upon the element that is passed into the design
return $dcVerticalMegaMenuObj.each(function(options){
$mega = $(this);
if(defaults.direction == 'left'){
$mega.addClass('left');
} else {
$mega.addClass('right');
}
// Get Menu Width
var megaWidth = $mega.width();
// Set up menu
$('> li',$mega).each(function(){
var $parent = $(this);
var $megaSub = $('> ul',$parent);
if($megaSub.length > 0){
$('> a',$parent).addClass(defaults.classParent).append('<span class="'+defaults.classArrow+'"></span>');
$megaSub.addClass(defaults.classSubMenu).wrap('<div class="'+defaults.classContainer+'" />');
var $container = $('.'+defaults.classContainer,$parent);
if($('ul',$megaSub).length > 0){
$parent.addClass(defaults.classParent+'-li');
$container.addClass(defaults.classMega);
// Set sub headers
$('> li',$megaSub).each(function(){
$(this).addClass('mega-unit');
if($('> ul',this).length){
$(this).addClass(defaults.classSubParent);
$('> a',this).addClass(defaults.classSubParent+'-a');
} else {
$(this).addClass(defaults.classSubLink);
$('> a',this).addClass(defaults.classSubLink+'-a');
}
});
$('> li li',$megaSub).each(function(){
if($('> ul',this).length){
$(this).addClass('mega-sub3'); //rajib
$('.mega-sub3 ul').addClass("show3div");
}
});
} else {
$container.addClass('non-'+defaults.classMega);
if(defaults.menubg==1){
var catimages =$('.non-'+defaults.classMega).closest("li").attr('id');
catimages = catimages.replace(/\s+/g, '-').toLowerCase();
$('.non-'+defaults.classMega).css('background','#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom');
}
}
}
var $container = $('.'+defaults.classContainer,$parent);
var subWidth = $megaSub.outerWidth(true);
var subHeight = $container.height();
if(defaults.menufixwidth>0){
var subWidth = defaults.menufixwidth;
}
if(defaults.menufixheight>0){
var subHeight = defaults.menufixheight;
}
var itemHeight = $parent.outerHeight(true);
// Set position to top of parent
$container.css({
height: subHeight+'px',
width: subWidth+'px',
zIndex: '1000'
}).hide();
});
// HoverIntent Configuration
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 10, // number = milliseconds for onMouseOver polling interval
over: megaOver, // function = onMouseOver callback (REQUIRED)
timeout: 0, // number = milliseconds delay before onMouseOut
out: megaOut // function = onMouseOut callback (REQUIRED)
};
$('li',$dcVerticalMegaMenuObj).hoverIntent(config);
function megaOver(){
$(this).addClass('mega-hover');
var $link = $('> a',this);
var $subNav = $('.sub',this);
var $container = $('.sub-container',this);
var width = defaults.menufixwidth;
var outerHeight = $container.outerHeight();
var height = defaults.menufixheight;
var itemHeight = $(this).outerHeight(true);
var offset = $link.offset();
var scrollTop = $(window).scrollTop();
var offset = offset.top - scrollTop
var bodyHeight = $(window).height();
var maxHeight = bodyHeight - offset;
var xsHeight = maxHeight - outerHeight;
if(defaults.menubg==1){
var catimages =$(this).closest("li").attr('id');
catimages = catimages.replace(/\s+/g, '-').toLowerCase();
$container.css({
background: '#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom'
});
}
if(xsHeight < 0){
var containerMargin = xsHeight - itemHeight;
$container.css({marginTop: containerMargin+'px'});
}
var containerPosition = {right: megaWidth};
if(defaults.direction == 'right'){
containerPosition = {left: megaWidth};
}
if(defaults.effect == 'fade'){
$container.css(containerPosition).fadeIn(defaults.speed);
}
if(defaults.effect == 'show'){
$container.css(containerPosition).show();
}
if(defaults.effect == 'slide'){
$container.css({
width: 0,
height: 0,
opacity: 0});
if(defaults.direction == 'right'){
$container.show().css({
left: megaWidth
});
} else {
$container.show().css({
right: megaWidth
});
}
$container.animate({
width: width,
height: height,
opacity: 1
}, defaults.speed);
}
}
function megaOut(){
$(this).removeClass('mega-hover');
var $container = $('.sub-container',this);
$container.hide();
}
});
};
})(jQuery);
$(document).ready(function($){
// menu slide hoverIntend
$('#rajbrowsecat').hoverIntent({
over: startHover,
out: endHover,
timeout: 1000
});
function startHover(e){
$('#rajdropdownmenu').slideDown(200)
}
function endHover(){
$('#rajdropdownmenu').slideUp(600)
}
// menu slide hoverIntend
$('#rajmegamenu').dcVerticalMegaMenu({
rowItems: '5',
speed: 'fast',
effect: 'slide',
direction: 'right',
menubg: '1',
menufixwidth: '236',
menufixheight: '155'
});
});
UPDATE:
So i managed to do it by diabling all the code (with /*) related to hover effect from the line "// HoverIntent Configuration" to "// menu slide hoverIntend" and by twicking the css a bit for presentation , seemed to do the trick to always showing submenus but for those who are interested i also found a way by adding to the css the line "height:auto", that also seemed to work fairly nicely.
Anyway thanks guys for yor answers anyway , it's always nice to to know that we have a place you can turn to when we are stuck !
I have an issue which is related to greensock animation but also may be a more general js issue in that I need to transfer a mousedown event to a second draggable instance after killing the first draggable instance.
the codepen hopefully will illustrate what i am trying to do.. code is underneath.
Codepen URL: http://codepen.io/anon/pen/ypdGn
var detachdraggable;
var rotatedraggable;
function makeRotateDraggable() {
// create rotate draggable for the cards..
rotatedraggable = Draggable.create(".dragclone", {
type:"rotation",
throwProps:true,
dragResistance : 0,
edgeResistance : 1,
bounds:{minRotation:-60, maxRotation:60},
onDragStart : function() {
var $el = $(this.target);
var cardStartAngle = $el.data('startangle');
},
onDrag: function() {
currentCardAngle = this.rotation;
var $el = $(this.target);
var cardStartAngle = $el.data('startangle');
cardDirection = ( currentCardAngle > cardStartAngle ) ? "up":"down";
cardTravelDegrees = Math.abs(currentCardAngle - cardStartAngle);
this.vars.type = "x";
},
onDragEnd: function() {
},
onClick: function() {
return false;
}
});
$('.dragclone').mousedown(function() {
$('.dragclone').css('z-index','10');
rotatedraggable[0].enable();
});
$('.dragclone').mouseout(function() {
detachdraggable[0].disable();
$('.dragclone').trigger('mousedown');
});
$('.dragclone').trigger('mouseout');
}
// first setup the x,y draggable..
detachdraggable = Draggable.create('.dragclone', {
type: "x,y",
edgeResistance:1,
throwProps:true,
onPress:function() {
startX = this.x;
startY = this.y;
},
onDrag:function() {
var xChange = this.x - startX,
yChange = this.y - startY,
ratio = Math.abs(xChange / yChange),
direction = [];
// NB:: you can adjust these ratio thresholds to make things
// more or less sensitive to diagonal movement.
if (ratio > 0.25) {
direction.push((xChange < 0) ? "left" : "right");
}
if (ratio < 4) {
direction.push((yChange < 0) ? "up" : "down");
}
if(direction[0] == "left") {
// TweenMax.to( $('.cloned'), .0001, {right:-xChange + 135});
}
// moving up so lets switch cards !!
if(direction[0] == "up") {
if(Math.abs(yChange) > 20) {
makeRotateDraggable();
}
}
},
onDragEnd:function() {
// driftDragCardBack();
// if(!cardPopping) { driftClonedCardBack(); }
},
onThrowComplete: function() {
}
});
I am battling to switch between 2 draggables setup on same element, am wondering if this is possible at all. basically the codepen has an example of what I want to do, but it isnt seamless. draggable is setup for element of type x,y, what i want to do is when the drag direction is up kill the type x,y draggable and switch to a type: rotation draggable so that the card moves around on an axis. you can see mine does that, but only if you release and then click again - is there any way to make this seamless, so it just switches mid-drag ?
thanks,
Justin
See http://codepen.io/anon/pen/klanu
I've never used greensock but just had a look at their document:
https://greensock.com/docs/#/HTML5/Drag/Draggable/startDrag/
First of all you had a couple of issues within your code. You don't need to create rotatedraggable inside a function, just create it, it's not enabled anyways. I also moved
$('.dragclone').mousedown(function() {
$('.dragclone').css('z-index','10');
detachdraggable[0].enable();
});
outside the function.
In your 2nd draggable, you were calling createRotation to create the rotation but like I said you can create it at the start. When the div is moved to the top, I just disabled the current drag and enabled the 1st one and called dragStart on it. e is what's passed to drag of the 2nd.
if(Math.abs(yChange) > 20) {
detachdraggable[0].disable();
rotatedraggable[0].enable();
rotatedraggable[0].startDrag(e);
}
All the documentation talks about when the waypoint reaches the top of the viewport, but I would like the trigger to happen when any part of the waypoint is in the center of the viewport.
This code works fairly well if I'm scrolling down, but when I scroll up it doesn't work, obvoiusly.
$('.section').waypoint(function(direction) {
highlight('#' + this.id);
}, {
context: '#scroll',
offset: function (direction) {
return $(this).height();
}
});
I tried the code below and a couple variants and it never even hits either of the return statements.
$('.section').waypoint(function(direction) {
highlight('#' + this.id);
}, {
context: '#scroll',
offset: function (direction) {
if (direction == 'down') {
return -$(this).height();
} else {
return 0;
}
}
});
So now I'm trying this, based on waypoint examples, but $active.id doesn't work like this.id so my function "highlight" fails.
$('.section').waypoint(function (direction) {
var $active = $(this);
if (direction == 'down') {
$active = $active.prev();
}
if (!$active.length) {
$active = $(this);
}
highlight($active.id);
}, {
context: '#scroll',
offset: function (direction) {
return $(this).height();
}
});
The offset option does not take a direction parameter. I'd love to know if you got that from somewhere in the documentation because if there's a section using direction in an offset function, it's a mistake.
You can tell a waypoint to trigger when the top of the element hits the middle of the viewport by using a % offset:
offset: '50%'
If you need to have a different offset when scrolling up versus scrolling down, this is best accomplished by creating two different waypoints:
var $things = $('.thing');
$things.waypoint(function(direction) {
if (direction === 'down') {
// do stuff
}
}, { offset: '50%' });
$things.waypoint(function(direction) {
if (direction === 'up') {
// do stuff
}
}, {
offset: function() {
// This is the calculation that would give you
// "bottom of element hits middle of window"
return $.waypoints('viewportHeight') / 2 - $(this).outerHeight();
}
});