Develop Reference

Add class to element if at top of page and user scrolls up

I'm trying to create a splash page similar to http://kinkinurbanthai.com/ but I need to re-activate the splash if the user is at the top of the page, and does an additional scroll up to 'request' or activate the splash again.
I have the code working up to the point of reactivating the splash element; but I can't get it to wait for the additional 'scroll up' request.
Here is the code so far that works, minus the locking b/c that isn't doing what I need it to atm. Code: http://jsfiddle.net/teejudp3/2/
// Does stuff on load and scrolls
//-------------------------------//
$(window).on("load scroll",function(e){
var $window = $(window);
if ( $window.scrollTop() <= 0 ) {
$('.splashwrapper').removeClass('remove');
}
// hide/show splash screen
//=========================//
// chrome/FF
$('.splashwrapper').bind('DOMMouseScroll', function(e){
// get scroll direction
var direction = (function () {
var delta = (e.type === 'DOMMouseScroll' ?
e.originalEvent.detail * -40 :
e.originalEvent.wheelDelta);
return delta > 0 ? 0 : 1;
}());
if( direction === 0 ) {
// scroll up
} else {
// scroll down
$('.splashwrapper').addClass('remove');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('.splashwrapper').bind('mousewheel', function(e){
// get scroll direction
var direction = (function () {
var delta = (e.type === 'DOMMouseScroll' ?
e.originalEvent.detail * -40 :
e.originalEvent.wheelDelta);
return delta > 0 ? 0 : 1;
}());
if( direction === 0 ) {
// scroll up
} else {
// scroll down
$('.splashwrapper').addClass('remove');
}
//prevent page fom scrolling
return false;
});
// touch device - uses touchSwipe.js
$(".splashwrapper").swipe({
swipeUp:function() {
$('.splashwrapper').addClass('remove');
}
});
});
I've tried to stop the users scroll if they go to <= 1 scroll top position but this doesn't seem to give the wanted affect.
// temporarily lock users scroll position
var $window = $(window), previousScrollTop = 1, scrollLock = false;
$window.scroll(function(event) {
if(scrollLock) {
$window.scrollTop(previousScrollTop);
}
previousScrollTop = $window.scrollTop();
});
// if at 1px from top, stop scroll from going up one time
if ( $window.scrollTop() <= 1 ) {
scrollLock = true;
$window.scrollTop( 1, 0);
setTimeout(function() {
scrollLock = false;
}, 1000);
}

Got this working by re-working the stop-point section - aka I was overthinking it.
Updated fiddle: http://jsfiddle.net/teejudp3/6/
var $window = $(window);
if ( $window.scrollTop() === 0 && $('.splashwrapper').hasClass('ready') ) {
$window.scrollTop(1);
$('.splashwrapper').removeClass('ready').removeClass('remove');
}
if ( $window.scrollTop() === 0 && !$('.splashwrapper').hasClass('ready') ) {
$window.scrollTop(1);
setTimeout(function() {
$('.splashwrapper').addClass('ready');
}, 500);
}

Rails: jQuery - page resets before event can complete

I have a webpage, and some jQuery that I wrote, and had working functionally until I brought it into my rails application. I'm not sure if this is some turbolink issue (like I've had before) or if its unrelated.
My jQuery script is for my custom dropdown menu, and while the clicking causes the dropdown to appear, the dropdown doesn't remain, and all the html is reset. I have a video: http://tinypic.com/r/35ml7jr/8 that shows what I am trying to explain.
jQuery
$(document).on("page:change", function() {
$(".navbar-link").on("click", function() {
var el = $(this);
var dd = el.siblings();
var loc = el.offset();
var left = loc.left;
var width = el.width();
var center = left + (0.5 * width);
var corrected_center = center - 5;
var isDown = dd.hasClass('down');
var numDown = $(document).find(".down").length;
var screenWidth = $( window ).width();
// check width to determine how to proceed
if ( screenWidth > 767 ) {
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.show();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
$(".rest").animate({"top": "105px"});
}
}
var isActive = el.hasClass('activate');
$(".navbar-link").removeClass('activate');
$(".arrow-up").css("left", corrected_center);
if (isActive) {
$('.arrow-up').hide(400);
} else {
$('.arrow-up').show();
el.addClass('activate');
}
// for small screens
} else {
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").slideUp();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
}
}
});
});

Instead of .on('click',function(){...})
Try using
.on('click',function(event){
event.preventDefault(); // This should prevent reloading
//YOUR CODE GOES HERE
return true; // It informs, that event has ended
})

Toggle mobile navigation depending on scroll direction

I have this navigation for mobile that i want to hide/show depending on which direction the viewport gets scrolled in. So if scrolling down i want it to hide, and scrolling up i want it to show.
My current code looks like this. It just toggles on scroll top. Anyone?
$(function() {
$(window).on("scroll touchmove", function () {
$('.mobile-nav').toggleClass('tiny', $(document).scrollTop() > 0);
});
});

Maybe something like this:
var menu_height = 80;
var menu_visible = true;
var old_scroll = $(window).scrollTop();
function checkMenu() {
new_scroll = $(window).scrollTop();
if (old_scroll < new_scroll && new_scroll > 0) {
// Scroll down
if (menu_visible == true) {
toggleMenu();
}
} else if (old_scroll > new_scroll) {
// Scroll up
if (menu_visible != true) {
toggleMenu();
}
}
old_scroll = new_scroll;
}
function toggleMenu() {
if (menu_visible == true) {
// Hide
$('#menu').animate({top: '-='+menu_height+'px'}, 200, function(){ $(this).css('display', 'none') });
menu_visible = false;
} else {
// Show
menu_visible = true;
$('#menu').css('display', 'block').animate({top: '+='+menu_height+'px'}, 200);
}
}
$(document).ready(function() {
// Show / hide menu on scroll
setInterval(checkMenu, 100);
});
Codepen: http://codepen.io/anon/pen/dPGggg

Paralax-style scrolling, user can scroll only one slide

I am using ScrollTo plugin to create a simple paralax-style page-changing. Here is what happens when you scroll
var location = window.location.hash;
if(location == '') { var location = '#home' } // Default location
slides = ['#home', '#about', '#characters']; // All the slides in an array
// Calculating previous and next slides
var currentEl = slides.indexOf(location);
var prevEl = currentEl - 1;
var nextEl = currentEl + 1;
if(delta > 0)
{
if(location != '#home')
{
gofor(slides[prevEl]); // Scrolling up
}
}
else
{
if(location != '#characters')
{
gofor(slides[nextEl]); // Scrolling down
}
}
});
And here is the gofor function itself.
function gofor(slide)
{
$(slide).clearQueue().ScrollTo({duration: 700}); // Scrolling to the given slide
$('.nav>a').removeClass('active'); // Removing all active classes
$(slide + '_nav').addClass('active'); // Updating the menu class with the _nav suffix id
window.location.hash = slide; // Updating the location.hash with the new position
}
This is working okay but when you scroll your wheel more than one step it goes more than one page forward. How can i stop the scrolling function for a certain amount of time (like 3 seconds) and then let the mouse regain its scrolling function again?
Thanks.

Drop down option not working in jQuery

I'm trying to build drop down options on mouse over and on click. The only problem I have with it, is when I put the mouse over an on child element, the menu gets hidden quickly.
jQuery code:
var navPos = $("#topNav").position().top; // ignore this line
// menu drop options
$('.repeat, .recitor, .volume, .bandwidthOption').bind('dropOption', function(e, force) {
var force = force || 'toggle';
if ($(this).hasClass('repeat'))
var optionName = 'repeat';
else if ($(this).hasClass('recitor'))
var optionName = 'recitor';
else if ($(this).hasClass('volume'))
var optionName = 'volume';
else if ($(this).hasClass('bandwidthOption'))
var optionName = 'bandwidthOption';
else
return;
var optionSubName = $(this).find('ul').attr('class');
var position = $(this).position();
position.top = navPos;
var isActive = $(this).hasClass('active');
if ((isActive && force != 'show') || (force && force == 'hide'))
{
$(this).removeClass('active');
$('.'+optionSubName).hide();
if (optionName == 'recitor') /* ie fix - z-index issue */
$('.logoBox').show();
}
else
{
$(this).addClass('active');
$('.'+optionSubName).show();
$('.'+optionSubName).css('left',position.left+'px');
if (optionName == 'recitor') /* ie fix - z-index issue */
$('.logoBox').hide();
}
});
$('.repeat, .recitor').click(function() {
$(this).trigger('dropOption');
return false;
});
$('.volume, .bandwidthOption').hover(function() {
$(this).trigger('dropOption', 'show');
},function() {
$(this).trigger('dropOption', 'hide');
});
Menu demo: http://jsbin.com/ozokir/2

The last bit is hiding the options:
$('.volume, .bandwidthOption').hover(function() {
$(this).trigger('dropOption', 'show');
},function() {
$(this).trigger('dropOption', 'hide');
});
Hover is only over the link option. To solve this you could use:
$('.volume, .bandwidthOption').mouseover(function() {
$(this).trigger('dropOption', 'show');
});
or click as you have in the previous line. Then you can hide with:
$('.dropOption').mouseout(function() {
$(this).trigger('dropOption', 'hide');
});