We Keep Coding

Code that shows sticky button on scroll down & hide on scroll up

I want to repurpose this code from a video guide on website headers that hides when you scroll down and shows when you scroll up
<script>
"use strict";
OB_ready(OB_doWhenReady);
function OB_doWhenReady() {
// localize everything
var ooohBoi = window.ooohBoi || {};
// local scope variables
ooohBoi.prev_scroll_pos = window.scrollY || document.body.scrollTop;
ooohBoi.cur_scroll_pos;
ooohBoi.scroll_direction = 'init';
ooohBoi.prev_scroll_direction = 0;
ooohBoi.header = document.querySelector('#show-hide-header'); // header ID
ooohBoi.header_pos = {
top: ooohBoi.header.offsetTop,
left: ooohBoi.header.offsetLeft,
};
ooohBoi.header_height = OB_outerHeight(ooohBoi.header);
// show-hide header with ease/transition
ooohBoi.header.style.transition = 'all 0.3s ease';
// update header height on window resize
ooohBoi.updateHeaderHeight = function() {
ooohBoi.header_height = OB_outerHeight(ooohBoi.header);
}
// listen "scroll" event and decide what to do
ooohBoi.checkScroll = function() {
ooohBoi.cur_scroll_pos = window.scrollY || document.body.scrollTop;
if (ooohBoi.cur_scroll_pos > ooohBoi.prev_scroll_pos) ooohBoi.scroll_direction = 'down';
else if (ooohBoi.cur_scroll_pos < ooohBoi.prev_scroll_pos) ooohBoi.scroll_direction = 'up';
if (ooohBoi.scroll_direction !== ooohBoi.prev_scroll_direction) ooohBoi.toggleHeader(ooohBoi.scroll_direction, ooohBoi.cur_scroll_pos);
ooohBoi.prev_scroll_pos = ooohBoi.cur_scroll_pos;
}
// add or remove class based on the scrolling direction
ooohBoi.toggleHeader = function(scroll_direction, scroll_current) {
if (scroll_direction === 'down' && scroll_current > ooohBoi.header_height) {
OB_addClass(ooohBoi.header, 'im-hidden'); // for styling
ooohBoi.header.style.top = -1 * ooohBoi.header_height + "px";
ooohBoi.prev_scroll_direction = scroll_direction;
} else if (scroll_direction === 'up') {
OB_removeClass(ooohBoi.header, 'im-hidden');
ooohBoi.header.style.top = ooohBoi.header_pos.top + "px";
ooohBoi.prev_scroll_direction = scroll_direction;
}
}
// listen "scroll" and "resize" window events
window.addEventListener('scroll', ooohBoi.checkScroll);
window.addEventListener('resize', ooohBoi.updateHeaderHeight);
}
function OB_outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
}
function OB_addClass(el, className) {
if (el.classList) el.classList.add(className);
else {
var current = el.className,
found = false;
var all = current.split(' ');
for (var i = 0; i < all.length, !found; i++) found = all[i] === className;
if (!found) {
if (current === '') el.className = className;
else el.className += ' ' + className;
}
}
}
function OB_removeClass(el, className) {
if (el.classList) el.classList.remove(className);
else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
function OB_ready(fn) {
if (document.readyState != 'loading') fn();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', fn);
else {
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading') fn();
});
}
}
</script>
What I want to do is to repurpose this code for a sticky button at the bottom of screen (image)
How do I edit the code so that:
Instead of showing on scroll up and hiding on scroll down -> It shows on scroll down and hides on scroll up
Instead of sliding in and out from the top of the screen -> The button slides in and out from the bottom of the screen.
Thank you!

How to do vertical infinite repeating background for a JavaScript game?

I have been looking at the code of this Flappy Bird clone to figure out how to repeat a background image vertically but have had no luck so far.
http://www.codeproject.com/Articles/778727/Build-Flappy-Bird-with-jQuery-and-lines-of-Javascr
I've altered the code so far to be able to scroll down, but the repetition of the bg image stops after around 800pixels of moving down and for the hell of me I cant figure out why!
I have heard that this code is not the best code out there, so if someone has another way to do this I'm all ears.
This is the codepen to preview the nonworking background:
http://codepen.io/tangwei/pen/dpbQPZ
var bird = null, board = null;
var dimPipe = { width:40, height:420 }, cPos = { x: 80, y:100, h:40, w:50 };
var gravity = 0.5, iniSpeed = -7, curSpeed = 0;
var score = 0, noClr = 0, tmStep = 0, state = 0; // 0-not started,1-play,2-over;
(function($) {
$.cssNumber.rotate = true;
$.cssHooks.rotate = {
set : function(el, v) {
if (typeof v === 'string')
v = (v.indexOf("rad") != -1) ? parseInt(v) * 180 / Math.PI : parseInt(v);
v = (~~v);
if (v == ($.data(el, 'rotate') || 0)) return;
el.style["MozTransform"] = el.style["MozTransform"] = el.style["-webkit-transform"]
= el.style["transform"] = " rotate(" + (v % 360) + "deg)";
$.data(el, 'rotate', v);
},
get : function(el, computed) {
return $.data(el, 'rotate') || 0;
}
};
})(jQuery);
function gameOver() {
state = 2;
$(":animated").stop();
if (tmStep) tmStep = window.clearInterval(tmStep);
bird.animate({ top:board.height()-cPos.h, rotate:540}, 1000)
.animate({ top:board.height()-cPos.h}, 500, function() {
$('#score').text(' Score: ' + score);
start();
});
}
function Parallax(elm, tmo) {
elm.animate({top:-1000}, { // play around with this value to determine speed
duration:tmo*50, easing:'linear', //step : PrlxStep,
complete : function() { Parallax(elm, tmo); }
});
}
function BirdStep() {
curSpeed += gravity;
cPos.y = Math.max(cPos.y + curSpeed, 0);
var ang = curSpeed * 5, mh = board.height()-cPos.h, m = -12, lo = 0, actPipe = $('.obs');
bird.css({top: cPos.y, rotate:(ang < -20) ? -20 : (ang > 90) ? 90 : ang});
// if (cPos.y > mh)
// return gameOver();
// for (var i = actPipe.length-1; i >= 0; i--) {
// var s = actPipe[i].style, x = parseInt(s.left), y = parseInt(s.top);
// lo = Math.max(lo, x);
// if (x+dimPipe.width +m < cPos.x || x > cPos.x+cPos.w+m) continue;
// if (y+dimPipe.height+m < cPos.y || y > cPos.y+cPos.h+m) continue;
// return gameOver();
// }
// if (actPipe.length > 3 || lo > 300 || Math.random() >= 0.05 * (1+noClr))
// return;
// var og = cPos.h * 2;
// var oh = og + Math.floor(Math.random() * (mh-og+1));
// var obs = $("<img/><img/>").addClass('c obs').css({left:480, zIndex:3}).css(dimPipe).attr('src', 'vine.png')
// .appendTo(board).animate({left:-50}, Math.max(2000,3500-noClr*50), 'linear', function() {
// $('#score').text(' Score: ' + (score += 1 + Math.floor(++noClr/10)));
// this.remove();
// });
// obs[0].style.top = oh + 'px';
// obs[1].style.top = (oh - og - dimPipe.height) + "px";
}
function onTap() {
if (state > 1) return;
if (state == 0) {
state = 1;
$('#score').text(' Score: ' + (score = 0));
Parallax($('#bGrnd'), 40);
Parallax($('#fGrnd'), 80);
$('#instr').hide();
tmStep = window.setInterval(BirdStep, 30);
}
curSpeed = iniSpeed;
}
function start() {
state = noClr = score = 0; // not started
cPos = { x: 80, y:100, h:40, w:50 };
bird.css({left:cPos.x, top:cPos.y, width:cPos.w, height:cPos.h, rotate:0});
// $('.obs').remove();
$('#instr').show();
}
$(document).ready(function() {
bird = $('#bird');
var evt = (typeof(bird[0].ontouchend) == "function") ? "touchstart" : "mousedown";
board = $('#board').bind(evt, onTap);
start();
setInterval(function(){
var bGrnd = $("#bGrnd");
var curr_height = parseInt(bGrnd.css("height"));
curr_height += 1000;
bGrnd.css("height", curr_height);
},2000)
});

Leap Motion: How to make swipe only trigger function once per swipe?

I am building a leap motion controlled music player, the menu system is controlled with leap motion.
Tilt up and down scrolls through menu items, right swipe selects that item, left swipe goes back up a menu level.
The issue I am having is when you swipe right on 'artist list' menu, it then changes to 'songs' menu and because the leap motion swipe gesture works on frames it triggers my function multiple times so the first song is immediately selected.
Here is relevant code:
var updateSelection = function() {
if(Math.floor(x) == x && $.isNumeric(x)){
var listLength = $(menu + ' li').size();
if (x > listLength) x = listLength;
if (x < 1) x = 1;
$(menu + ' li').removeClass('active');
$(menu + ' #' + x + artist ).addClass('active');
scrollToIt = x + artist;
idTagX = x;
if (scrollDirection == "down") {
var topPos = document.getElementById(scrollToIt).offsetTop;
document.getElementById('cssmenu').scrollTop = topPos;
//document.getElementById(scrollToIt).scrollIntoView();
}
else if (scrollDirection == "up"){
var topPos = document.getElementById(scrollToIt).offsetTop;
document.getElementById('cssmenu').scrollTop = topPos;
//document.getElementById(scrollToIt).scrollIntoView(true);
}
}
}
if(frame.hands.length > 0)
{
var hand = frame.hands[0];
pitchRadians = hand.pitch();
if (pitchRadians > 0.45) {
newX = x - 0.1;
x = roundNumber(newX, 2);
scrollDirection = "up";
updateSelection();
}
else if (pitchRadians < -0.45){
newX = x + 0.1;
x = roundNumber(newX, 2);
scrollDirection = "down";
updateSelection();
}
else {
x = parseInt(x);
updateSelection();
}
}
//--------------------------------------------------Swipe Selection
if (frame.gestures.length > 0) {
for (var i = 0; i < frame.gestures.length; i++) {
var gesture = frame.gestures[i];
//---- Swipe ----
if (gesture.type == "swipe") {
var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
if(isHorizontal){
if(gesture.direction[0] > 0){
$(menu + ' #' + idTagX + artist).click();
console.log(artist);
} else {
console.log("Menu Left");
// $("#" + artist).hide();
//menu = ".artists"
}
} else {
// Vertical swipe
}
}
}
}
})
This might well be a simple fix, I have just been looking at this code too long to get my head round it.

I have written a solution to this, detailed below, answering so other users can see for future reference.
var prevSwipe = "";
var d = new Date();
var now = d.getTime();
var prevSwipeTime = now;
function rightSwipe () {
d = new Date();
if(prevSwipe == "right") {
if(prevSwipeTime + 1000 < d.getTime()) { //time elapsed, run code
$(menu + ' #' + idTagX + artist).click();
prevSwipe = "right";
prevSwipeTime = d.getTime();
console.log("prev == right");
} // otherwise do nothing
} else {
$(menu + ' #' + idTagX + artist).click();
prevSwipe = "right";
prevSwipeTime = d.getTime();
console.log(prevSwipeTime);
console.log("prev != right");
}
}
Hope this helps somebody!

Where to place Mouse Enter and Mouse Leave in Javascript

I have the following script and am trying to add mouse enter and leave events on a slideshow such that when the mouse is over the image it won't switch to the next one, and once removed it continues.
I can get the slide to stop when the mouse is over but once the mouse is out the slideshow won't proceed.
I am unsure if these 2 lines are in the right place:
---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
jQuery(function () {
jQuery('a').focus(function () {
this.blur();
});
SI.Files.stylizeAll();
slider.init();
});
---> var MOUSE_IN = false;
var slider = {
num: -1,
cur: 0,
cr: [],
al: null,
at: 10 * 1000, /* change 1000 to control speed*/
ar: true,
anim:'slide',
fade_speed:600,
init: function () {
if (!slider.data || !slider.data.length) return false;
var d = slider.data;
slider.num = d.length;
var pos = Math.floor(Math.random() * 1);
for (var i = 0; i < slider.num; i++) {
if(slider.anim == 'fade')
{
jQuery('#' + d[i].id).hide();
}
else{
jQuery('#' + d[i].id).css({
left: ((i - pos) * 1000)
});
}
jQuery('#slide-nav').append('<a id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
}
jQuery('img,div#slide-controls', jQuery('div#slide-holder')).fadeIn();
---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
slider.text(d[pos]);
slider.on(pos);
if(slider.anim == 'fade')
{
slider.cur = -1;
slider.slide(0);
}
else{
slider.cur = pos;
window.setTimeout('slider.auto();', slider.at);
}
},
auto: function () {
if (!slider.ar) return false;
if(MOUSE_IN) return false;
var next = slider.cur + 1;
if (next >= slider.num) next = 0;
slider.slide(next);
},
slide: function (pos) {
if (pos < 0 || pos >= slider.num || pos == slider.cur) return;
window.clearTimeout(slider.al);
slider.al = window.setTimeout('slider.auto();', slider.at);
var d = slider.data;
if(slider.anim == 'fade')
{
for (var i = 0; i < slider.num; i++) {
if(i == slider.cur || i == pos) continue;
jQuery('#' + d[i].id).hide();
}
if(slider.cur != -1){
jQuery('#' + d[slider.cur].id).stop(false,true);
jQuery('#' + d[slider.cur].id).fadeOut(slider.fade_speed);
jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}
else
{
jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}
}
else
{
for (var i = 0; i < slider.num; i++)
jQuery('#' + d[i].id).stop().animate({
left: ((i - pos) * 1000)
},
1000, 'swing');
}
slider.on(pos);
slider.text(d[pos]);
slider.cur = pos;
},
on: function (pos) {
jQuery('#slide-nav a').removeClass('on');
jQuery('#slide-nav a#slide-link-' + pos).addClass('on');
},
text: function (di) {
slider.cr['a'] = di.client;
slider.cr['b'] = di.desc;
slider.ticker('#slide-client span', di.client, 0, 'a');
slider.ticker('#slide-desc', di.desc, 0, 'b');
},
ticker: function (el, text, pos, unique) {
if (slider.cr[unique] != text) return false;
ctext = text.substring(0, pos) + (pos % 2 ? '-' : '_');
jQuery(el).html(ctext);
if (pos == text.length) jQuery(el).html(text);
else window.setTimeout('slider.ticker("' + el + '","' + text + '",' + (pos + 1) + ',"' + unique + '");', 30);
}
};
if (!window.SI) {
var SI = {};
};
SI.Files = {
htmlClass: 'SI-FILES-STYLIZED',
fileClass: 'file',
wrapClass: 'cabinet',
fini: false,
able: false,
init: function () {
this.fini = true;
var ie = 0
if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) {
return;
}
this.able = true;
var html = document.getElementsByTagName('html')[0];
html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
},
stylize: function (elem) {
if (!this.fini) {
this.init();
};
if (!this.able) {
return;
};
elem.parentNode.file = elem;
elem.parentNode.onmousemove = function (e) {
if (typeof e == 'undefined') e = window.event;
if (typeof e.pageY == 'undefined' && typeof e.clientX == 'number' && document.documentElement) {
e.pageX = e.clientX + document.documentElement.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
};
var ox = oy = 0;
var elem = this;
if (elem.offsetParent) {
ox = elem.offsetLeft;
oy = elem.offsetTop;
while (elem = elem.offsetParent) {
ox += elem.offsetLeft;
oy += elem.offsetTop;
};
};
var x = e.pageX - ox;
var y = e.pageY - oy;
var w = this.file.offsetWidth;
var h = this.file.offsetHeight;
this.file.style.top = y - (h / 2) + 'px';
this.file.style.left = x - (w - 30) + 'px';
};
},
stylizeById: function (id) {
this.stylize(document.getElementById(id));
},
stylizeAll: function () {
if (!this.fini) {
this.init();
};
if (!this.able) {
return;
};
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1) this.stylize(input);
};
}
};
(function (jQuery) {
jQuery.fn.pngFix = function (settings) {
settings = jQuery.extend({
blankgif: 'blank.gif'
},
settings);
var ie55 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 5.5') != -1);
var ie6 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 6.0') != -1);
if (jQuery.browser.msie && (ie55 || ie6)) {
jQuery(this).each(function () {
var bgIMG = jQuery(this).css('background-image');
if (bgIMG.indexOf(".png") != -1) {
var iebg = bgIMG.split('url("')[1].split('")')[0];
jQuery(this).css('background-image', 'none');
jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='" + settings.sizingMethod + "')";
}
});
}
return jQuery;
};
})(jQuery);
jQuery(function () {
if (jQuery.browser.msie && jQuery.browser.version < 7) {
}
});

The position of both lines is fine, they just add an event handler to the mouse in/out event. The problem you experience is actually in tha auto function, if you note, at the end of the init function you have:
window.setTimeout('slider.auto();', slider.at)
This line makes a call to the auto function after a slider.at time (which is 10 seconds in your example), the auto function checks if MOUSE_IN is set to true, if it's not, then calls the slide function, then in the slide function you have another call to the auto function:
slider.al = window.setTimeout('slider.auto();', slider.at);
But once you set the MOUSE_IN variable to true the auto function simply returns and it stop the execution of further slide functions, to solve this, you may want to either handle the MOUSE_IN logic in the slide function, or before returning false in the auto function, call with a time out the auto function again.

Thought this would work but it doesnt, the mouseleave eventdoesnt seem to fire.
jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
while(MOUSE_IN==true)
{
jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
}

Checking element visibility using elementFromPoint() method

I'm trying to check to make sure an item is visible before I start working on it using the following function
isVisible: function (node, doc, x, y) {
var el = doc.elementFromPoint(x, y);
if (node === el) return true;
else return false;
},
x and y are positions of the selected node and is calculated by
findPos: function (node) {
var pos = new Object();
pos.left = pos.top = 0;
if (node.offsetParent) {
do {
pos.left += node.offsetLeft;
pos.top += node.offsetTop;
} while (node = node.offsetParent);
}
return pos;
}
Everything works fine. However, when I scroll the page down, the isVisible function is no longer returning the right value. This is caused by the position having changed but the find position function not returning the right value.
Is there a method to get the position of an element like the reverse of elementFromPoint? Or does anyone have another method?

I just wrote an isVisible() method that uses the elementFromPoint() method and should work in IE9+ to detect if an element is visible.
var isVisible = function(elem) {
var w = window, d = document, height, rects, on_top;
if(!elem || (elem && elem.nodeType !== 1) || !elem.getClientRects || !d.elementFromPoint || !d.querySelector || !elem.contains) {
return false;
}
if (elem.offsetWidth === 0 || elem.offsetHeight === 0) {
return false;
}
height = w.innerHeight ? w.innerHeight: d.documentElement.clientHeight;
rects = elem.getClientRects();
on_top = function(r, elem) {
var x = (r.left + r.right)/2,
y = (r.top + r.bottom)/2,
elemFromPoint = d.elementFromPoint(x, y);
return (elemFromPoint === elem || elem.contains(elemFromPoint));
};
for (var i = 0, l = rects.length; i < l; i++) {
var r = rects[i],
in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);
if (in_viewport && on_top(r, elem)) {
return true;
}
}
return false;
};
You would call it like this: isVisible(document.getElementById('at-follow'));
Also, here is the gist of it.

I was able to fix this by adding window.scrollX and window.scrollY to the doc.elementFromPoint() input parameters x and y
isVisible: function (node, doc, x, y)
{
var el = doc.elementFromPoint(x-window.scrollX, y-window.scrollY);
if (node === el) return true;
else return false;
},
this seems to work fine

This library should be what you're looking for: https://github.com/cpatik/within-viewport/blob/master/withinViewport.js