We Keep Coding

Trying to initialize FullPage.JS after scrolling through hero

Trying to initiate FullPage.JS after scrolling through hero. Right now if you scroll past the hero - FullPage gets initialized and continues to scroll through the slides with the momentum of the initial scroll. I have this function inplace for my init.
function initFullPage(){
$(".view-case-study").addClass("projects-load");
$(".pagination").addClass("visible");
$(".logo-menu svg").toggleClass("hovered");
$('#fullpage').fullpage({
lazyLoading:false,
navigation: true,
navigationPosition: 'right',
css3:true,
normalScrollElementTouchThreshold: 5,
touchSensitivity: 10,
anchors: a_anchors,
menu: '#myMenu',
normalScrollElements: '.nav, .open-nav, .project-inner, .work-mode, .menu-shelf, .tab, .view-case-study, #hero, .hero-center-container',
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
projectUrl = loadedSection.data('url');
project_title = loadedSection.data('title');
loadedSection.addClass('projects-load');
loadedSection.find(".full-line").animate({'width':'100%'},500);
loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000);
$('#hero').animate({'opacity':'0'},1000);
$('#hero').addClass('destroy');
$('.ui-info').animate({'opacity':'1'},350);
},
onLeave: function(index, nextIndex, direction){
var leavingSection = $(this);
leavingSection.removeClass('projects-load');
leavingSection.find(".full-line").animate({'width':'0%'},250);
leavingSection.animate({'background-position-y':'0px','background-size':'110%'},100);
$('#project-inner-container').animate({scrollTop:0},0);
$('.ui-info').animate({'opacity':'0'},0);
}
});
fullPageInit = true;
}
Below is my Hero scroll script. I've tried to initialize the script and silentmove to the first section but it doesn't want to listen.
var winHeight = $(window).height();
$(window).scroll(function () {
var scrTop = $(document).scrollTop() / winHeight,
scrTopFixed = scrTop.toFixed(2),
scrTransform = scrTopFixed * 80,
bgPos = scrTransform / 10 + 95,
heroOpacity = 1 - scrTransform / 100;
if ((scrTransform >= 80) && (fullPageInit == false)) {
initFullPage();
$.fn.fullpage.silentMoveTo('#sidepocket');
}
$('svg.scroll-end').css({
'clip': "rect(0px," + scrTransform + "px,200px,0px)",
});
}); // Close

// Scroll SVG Hero
$('#scroll-control').on('scroll',function(e){
var totalScroll = $('#scroll-control').scrollTop();
var slowScroll = totalScroll * .2;
console.log(slowScroll);
$('svg.scroll-end').css({
'clip': "rect(0px," + slowScroll + "px,200px,0px)",
});
if(totalScroll > 400){
if((fullPageInit == false) && (workPage == false)){
fullPageInit = true;
$('#hero').animate({'opacity':'0'},300,function(){
// remove scroll listener
$('#scroll-control').off();
// set first project DOM
var wh = window.innerHeight ? window.innerHeight:$(window).height();
$('#fullpage section').height(wh);
var loadedSection = $('#fullpage section:first-child');
projectUrl = loadedSection.data('url');
project_title = loadedSection.data('title');
loadedSection.addClass('projects-load');
loadedSection.find(".full-line").animate({'width':'100%'},500);
history.pushState(null, null, '#'+projectUrl);
loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000,function(){
initFullPage();
$('#scroll-control').hide();
});
$('.ui-info').animate({'opacity':'1'},350);
});
$('#hero').addClass('destroy');
}
}
});
var winHeight = $(window).height();
$(window).scroll(function (e) {
console.log(e);
var scrTop = $(document).scrollTop() / winHeight,
scrTopFixed = scrTop.toFixed(2),
scrTransform = scrTopFixed * 80,
bgPos = scrTransform / 10 + 95,
heroOpacity = 1 - scrTransform / 100;
if ((scrTransform >= 80) && (fullPageInit === false)) {
}
}); // Close
The issue was fixed by setting a time out so that FullPage doesn't initialize until the scrolling of the mouse ends, therefore you do not overscroll or have any momentum that forces the user to the next section.
Hope this helps others trying to build custom scripts into FullPage.JS
https://www.alexcoven.com

close popify modal and maintain scroll position in page

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()

jQuery animate() doesn't correctly animate height the second time

I have built a toggle that will slide down a div to reveal content. I am not using the normal toggle() function of jQuery because I wanted to show the top 300px of content and then slide to reveal the rest.
Anyways, I have a script setup that animates the height of the container div, which reveals the content inside.
function slideCut() {
var revertHeight = 300;
var finalHeight = 0;
var s = 1000;
$('.cutBottom a').click(function() {
event.stopPropagation();
var p = $(this).parent().parent();
var h = p.css('height', 'auto').height();
var cut = $(this).parent().find('.cutRepeat');
// Fix height
if (finalHeight == 0) {
p.css('height', 'auto');
finalHeight = p.height();
p.height(revertHeight);
}
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
p.animate({height:revertHeight}, {
duration: s
});
cut.fadeIn('fast');
} else {
$(this).addClass('toggled');
p.animate({height:finalHeight}, {
duration: s,
complete: function() {
cut.fadeOut('fast');
}
});
}
return false;
});
}//end
The problem is, the second time it animates the height to the full size (sliding the div to reveal content) it does not animate, it just jumps to the full height. Why is this happening?
Working example: http://jsfiddle.net/6xp2Y/3/

After all that hard work and fiddle being broken, all we had to do was remove one line from your code:
function slideCut() {
var revertHeight = 300;
var finalHeight = 0;
var s = 1000;
$('.cutBottom a').click(function() {
event.stopPropagation();
var p = $(this).parent().parent();
//var h = p.css('height', 'auto').height(); //REMOVE THIS LINE
var cut = $(this).parent().find('.cutRepeat');
// Fix height
if (finalHeight == 0) {
p.css('height', 'auto');
finalHeight = p.height();
p.height(revertHeight);
}
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
p.animate({height:revertHeight}, {
duration: s
});
cut.fadeIn('fast');
} else {
$(this).addClass('toggled');
p.animate({height:finalHeight}, {
duration: s,
complete: function() {
cut.fadeOut('fast');
}
});
}
return false;
});
}//end
slideCut();
Updated your fiddle: http://jsfiddle.net/brandonscript/6xp2Y/5/

Updated answer!
The proplem lies here
if (finalHeight == 0) {
parent.css('height', 'auto');
finalHeight = parent.height();
parent.height(revertHeight);
console.log('finalHeight:'+finalHeight);
}
This is only running at the beginning, because finalHeight is not 0 anymore after first run.
You can fix this by setting finalHeight back to 0 after closing it again, like so
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
parent.animate({height:revertHeight}, {
duration: speed
});
cut.fadeIn('fast');
finalHeight = 0;
} else { [...]

Horizontal jquery scroller using position:absolute; with constant scroll

I've managed to get this far and it works great for solid width divs but can't work out how to manipulate it to work when the width of the div changes.
Question: How do I make this function take into account the different div widths after each 'round'?
var horizontalScroller = function($elem) {
var left = parseInt($elem.css("left"));
var temp = -1 * $('#horizontalScroller li').width();
if(left < temp) {
left = $('#horizontalScroller').width();
$elem.css("left", left);
}
$elem.animate({ left: (left-60) }, 2000, 'linear', function () {
horizontalScroller($(this));
});
}
$(document).ready(function() {
var i = 0;
$("#horizontalScroller li").each(function () {
$(this).css("left", i);
i += $(this).width();
horizontalScroller($(this));
});
});
Working example (with fixed width): http://jsfiddle.net/GL5V3/
Working example (with different widths): http://jsfiddle.net/wm9gt/

Well this was mildly fun, understood how your code works, but before I did that...
I rewritten it to this: (working fiddle)
function horizontalScroller(ulSelector) {
var horizontalSpan=0;
var collection=[];
function animate(index) {
var cur=collection[index];
var left=parseInt(cur.elem.css('left'));
if(left < cur.reboundPos) {
left+=horizontalSpan;
console.log(left);
cur.elem.css('left',left);
}
cur.elem.animate(
{ left: (left-60) },
2000,
'linear',
function () {animate(index)}
);
}
$(ulSelector).find('li').each(function() {
var $this=$(this);
var width=$this.width();
$this.css('left',horizontalSpan);
collection.push({reboundPos: -1 * width, elem: $this});
horizontalSpan+=width;
animate(collection.length-1);
});
console.log(collection);
console.log(horizontalSpan);
}
$(document).ready(function() {
horizontalScroller('#horizontalScroller');
});
Then I went back to your code and did this:
var horizontalSpan = 0;// swapped i for a "global" variable
var horizontalScroller = function($elem) {
var left = parseInt($elem.css("left"));
var temp = -1 * $elem.width();// updated to the correct width
if(left < temp) {// now out of bounds is properly calculated
left += horizontalSpan;// proper "wrapping" with just one addition
$elem.css("left", left);
}
$elem.animate({ left: (left-60) }, 2000, 'linear', function () {
horizontalScroller($(this));
});
}
$(document).ready(function() {
$("#horizontalScroller li").each(function () {
$(this).css("left", horizontalSpan);// horizontalSpan!!!
horizontalSpan += $(this).width();// horizontalSpan!!!
horizontalScroller($(this));
});
});
If you've got questions or want to tweak it a bit. I'd be happy you to help you along. But my hopes are that you will manage on your own.
P.S. My initial comment was rude, you're horizontal scrolling is ok thumbs up (but you were hoping the values for some of those .width() calls to be way different)

Tooltip on the postion where i hover

i have used this tooltip in my project its working great but the problem is that i need the tooltip appear where ever i hover and not fixed location.currently its appearing in fixed location.i need to appear the tooltip where i hover.
how can i retouch this code to do so
/* Position the tooltip relative to the class
associated with the tooltip */
setTip = function(top, left){
var topOffset = tip.height();
var xTip = (left-30)+"px";
var yTip = (top-topOffset-60)+"px";
tip.css({'top' : yTip, 'left' : xTip});
}
the full code is here
$.fn.betterTooltip = function(options){
/* Setup the options for the tooltip that can be
accessed from outside the plugin */
var defaults = {
speed: 200,
delay: 300
};
var options = $.extend(defaults, options);
/* Create a function that builds the tooltip
markup. Then, prepend the tooltip to the body */
getTip = function() {
var tTip =
"<div class='tip'>" +
"<div class='tipMid'>" +
"</div>" +
"<div class='tipBtm'></div>" +
"</div>";
return tTip;
}
$("body").prepend(getTip());
/* Give each item with the class associated with
the plugin the ability to call the tooltip */
$(this).each(function(){
var $this = $(this);
var tip = $('.tip');
var tipInner = $('.tip .tipMid');
var tTitle = (this.title);
this.title = "";
var offset = $(this).offset();
var tLeft = offset.left;
var tTop = offset.top;
var tWidth = $this.width();
var tHeight = $this.height();
/* Mouse over and out functions*/
$this.hover(
function() {
tipInner.html(tTitle);
setTip(tTop, tLeft);
setTimer();
},
function() {
stopTimer();
tip.hide();
}
);
/* Delay the fade-in animation of the tooltip */
setTimer = function() {
$this.showTipTimer = setInterval("showTip()", defaults.delay);
}
stopTimer = function() {
clearInterval($this.showTipTimer);
}
/* Position the tooltip relative to the class
associated with the tooltip */
setTip = function(top, left){
var topOffset = tip.height();
var xTip = (left-30)+"px";
var yTip = (top-topOffset-60)+"px";
tip.css({'top' : yTip, 'left' : xTip});
}
/* This function stops the timer and creates the
fade-in animation */
showTip = function(){
stopTimer();
tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
}
});
};

.hover(handlerIn, handlerOut) is short for .mouseenter(handlerIn).mouseleave(handlerOut). That means you have access to the mouse coords of the mousenter().
Change your .hover binding to use mouse coordinates of hover entry point:
/* Mouse over and out functions*/
$this.hover(
function(e) {
tipInner.html(tTitle);
setTip(e.clientY, e.clientX); //<--- using mouseenter coords here
setTimer();
},
function() {
stopTimer();
tip.hide();
}
).mousemove (function(e) {
setTip(e.pageY, e.pageX);
});

Give it mouse coordinates instead of static div coordinates:
$(document).mousemove (function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
jQuery docs: http://docs.jquery.com/Tutorials:Mouse_Position