We Keep Coding

Return on scroll firefox

I've created a sticky sidebar function which works perfectly in chrome and safari but not in Firefox. From what I can tell it's not returning properly when it should be.
Consider a snippet of the code in question:
if (scrolling_down && bottom_offset <= bottom_padding) {
$item.css({
position: 'absolute',
top: 'auto',
bottom: bottom_padding
});
console.log(1);
return false;
console.log(2);
}
console.log(3);
The console in Chrome logs 3 until it hits the bottom of the page then logs 1 for the rest of the scroll.
In Firefox however, the console logs 3 until it hits the bottom then alternates between 3 and 1.
I'm pretty sure it should be ignoring 3 (because of the return false) once it's hit the bottom, like Chrome.
Full Javascript:
// Sticky Sidebars
stickyAsides: function() {
var $item = $('.js-sticky'),
$parent = $item.parent(),
last_scroll = 0,
scrolling_down = false;
function setStyles() {
$item.css({
width: $item.outerWidth()
});
}
function stick() {
var parent_rect = $parent.get(0).getBoundingClientRect(),
parent_top = parent_rect.top,
parent_bottom = parent_rect.bottom,
item_rect = $item.get(0).getBoundingClientRect(),
item_top = item_rect.top,
item_bottom = item_rect.bottom,
bottom_offset = parent_bottom - item_bottom,
bottom_padding = parseInt($parent.css('padding-bottom'));
scrolling_down = (last_scroll < w.scroll) ? true : false;
setStyles();
if (scrolling_down && bottom_offset <= bottom_padding) {
$item.css({
position: 'absolute',
top: 'auto',
bottom: bottom_padding
});
console.log(1);
return false;
console.log(2);
}
console.log(3);
if (item_top <= -10 || parent_top <= 0) {
$item.css({
position: 'fixed',
top: '0',
bottom: 'auto'
});
}
if (!scrolling_down && parent_top > 0) {
$item.css({
position: 'relative',
top: '0',
bottom: 'auto'
});
}
last_scroll = w.scroll;
}
$(window).on('scroll', function(){
w.scroll = $doc.scrollTop();
if (Modernizr.mq('(min-width: 1024px)') && Modernizr.flexbox) {
stick();
}
});
}, // End stickyAsides()
EDIT: Codepen Example: http://codepen.io/jhealey5/pen/JGLjPN - However this seems to work okay, so there is something else interfering on the page. I don't expect anyone to solve it but there might be some advice. I'm unable to link to the live page at this time I'm afraid.

Seems Firefox wasn't doing calculations correctly. Adding +20px to the bottom padding calculation seems to fix it.

javascript function not working when a new if statement added

i have a function to stick the nav sidebar to the top after some scrolling.but when my screen minimizes the logo on the top shortens and the position of the nav changes.so i wrote another 'if' function inside the first one to solve the problem.now the position is correct but the nav side bar is fixing on the top while scrolling.can you please help me....the function is as below....
$(function() {
var stickyHeaderTop = $('#myScrollspy').offset().top;
var yy = document.getElementById("cor").clientHeight;
$(window).scroll(function() {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#myScrollspy').css({
position: 'fixed',
top: '8px',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
} else {
setInterval(function() {
if (yy < '490') {
var yu = '500' - yy;
$('#myScrollspy').css({
position: 'absolute',
top: ''
700 '-yy',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
}, 30);
}
});
});

You have some syntax issues, have mentioned them in the comments below.
if (yy < 490) { //syntax issue here
var yu = 500 - yy; //syntax issue here
$('#myScrollspy').css({
position: 'absolute',
top: (700 - yy)+'px', //syntax issue here
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
document.getElementById("cor").clientHeight will return an int(number).
Check element.clientHeight
Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

make animation with scrollTop

animate = animate;
desanimate = undo animate;
Friends, I created a function that does an element animate or 'desanimate' depending on where the scroll of the body or a div is, it's working ok, how it works?
<li data-animation-time="[100, 800]" data-animation-position="right" class="list-item one"></li>
the first value of the data-animation-time array is the initial value, ie the animator function should be called when the scrollTop pass that value, the second value is the end, the 'desanimate' function should be called when the scrollTop pass that value.
Everything working as you can see here -> Codepen: http://codepen.io/celicoo/pen/ogKGEP (you need scroll to see the animation happens).
Now I want to determine which way the animation to happen and which way it should end, for that I changed this attr:
data-animation-position="right-to-left" instead of just right or left, and i add some ifs statements to the animation and 'desanimation' function:
Animate:
var animate = function(target, position) {
target.css('display', 'inline-block');
if (position === 'right-to-right') {
target.animate({
opacity: 1,
right: '0px'
}, 500);
}
else if (position === 'right-to-left') {
target.animate({
opacity: 1,
right: '0px'
}, 500);
}
else if (position === 'left-to-left') {
target.animate({
opacity: 1,
left: '0px'
}, 500);
}
else if (position === 'left-to-right') {
target.animate({
opacity: 1,
left: '0px'
}, 500);
}
};
'Desanimate':
var desanimate = function(target, position) {
if (position === 'right-to-right') {
target.animate({
opacity: 0,
right: '245px'
}, 500);
}
else if (position === 'right-to-left') {
target.animate({
opacity: 0,
left: '245px'
}, 500);
}
else if (position === 'left-to-left') {
target.animate({
opacity: 0,
left: '245px'
}, 500);
}
else if (position === 'left-to-right') {
target.animate({
opacity: 0,
right: '245px'
}, 500);
}
};
And is not working in the 'desanimate' way, something is not working good, and i really cant see what it is.
Could someone give me a hand here? What could be doing 'desanimate' not work when I inverted step values?
Example:
left-to-right
right-to-left
Codepen with old code working just with one side (ex: left or right);
Code pen with new code not working 100% with multiple sides (ex: left to left, left to right, right to right or right to left);

Updated the codepen link . Just have a look and let me know whether it matches the requirement.
+ function($) {
var animate = function(target, position) {
target.css('display', 'inline-block');
if (position === 'right-to-left' || position === 'right-to-right' ) {
target.css('right', '500px');
target.css('left','' );
target.animate({
opacity: 1,
right: '0px'
}, 500);
}
else if (position === 'left-to-right' || position=="left-to-left") {
target.css('left', '500px');
target.css('right', '');
target.animate({
opacity: 1,
left: '0px'
}, 500);
}
};
var disanimate = function(target, position) {
if (position === 'right-to-left' || position ==="left-to-left") {
target.css('left','' );
target.animate({
opacity: 0,
right: '245px'
}, 500);
}
else if (position === 'left-to-right' || position === "right-to-right") {
target.css('left','' );
target.animate({
opacity: 0,
left: '245px'
}, 500);
}
};
$(window).on('load', function() {
var target = $('[data-animation-time]');
var animationInitial = target.data('animation-time')[0];
var animationFinal = target.data('animation-time')[1];
var position = target.data('animation-position');
var shown = false;
$('.container').scroll(function() {
var scroll = $(this).scrollTop();
if (!shown && (animationInitial < scroll && animationFinal > scroll)) {
console.log("animate")
animate(target, position);
shown = true;
}
else if (shown && (animationFinal < scroll || animationInitial > scroll)) {
console.log("disanimate")
disanimate(target, position);
shown = false;
if (position.split("-")[0] == position.split("-")[2])
position = anti(position);
}
});
});
}(jQuery);
var anti = function (position){
if (position == "left-to-left")
return "right-to-right"
else
return "left-to-left"
}
Css :- it was right 500px. so intital position of card is fixed. i changed it to dynamic based on input and whenever you are adding right(css) you have to make sure left(css) is null because if you give both right and left it will get confused during animation
left-to-right & right-to-left both have their initial and final position same.. so no need of extra fittings.. so it will work even if you come from down
left-to-left & right-to-right don't have have their initial and final position same .. so left-to-left will become right-to-right in reverse loop. i did that using anti function

Convert click code to hover code

How can I change the following menu code to open/close when the mouse hovers, instead of when it is clicked on?
var w = 0;
$('.slide').children().each(function () {
w += $(this).outerWidth();
});
$('.outer').width(w + 5);
$('.wrap').width(w);
$('.slide').css('left', w);
$('.open').toggle(function () {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}, function () {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
});
Please check this Demo
In Fiddle, you can see the animation works on click. I need to make it work on hover. Can you help with this ?

Use .hover() api
Try this
$('.open').hover(function () {
instead of
$('.open').toggle(function () {

Just
$('.open').toggle(function() {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}
in this part just replace toggle with hover

Try using $('.wrap').hover. If $('.open').hover, you will not able to click the nav items.
Also, you can create another wrapper to just wrap div.outer and a.open only
$('.wrap').hover(function() {
$('.slide').stop().animate({
left : 0
});
//this is the .wrap right now
$(this).find('a.open').html('close');
}, function() {
$('.slide').stop().animate({
left : w
});
//this is the .wrap right now
$(this).find('a.open').html('open');
});
http://jsfiddle.net/rooseve/42sWB/2/

$('.open').on('mouseenter mouseleave', function(e) {
if(e.type === 'mouseleave') {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
} else {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}
});

var w = 0;
var isVisible = false;
$('.slide').children().each(function() {
w += $(this).outerWidth();
});
$('.outer').width(w+5);
$('.wrap').width(w);
$('.slide').css('left', w);
$('.open').on("mouseover", function() {
if(isVisible == false) {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
isVisible = true;
}
else {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
isVisible = false;
}
});
Firstly, when you hover the element - the div will be visible, until you hover the element for the second time.
Demo: http://jsfiddle.net/42sWB/3/

Sliding Panels with JavaScript

This example I've found is exactly what I was looking for: http://jsfiddle.net/sg3s/RZpbK/
Thx to the author sg3s
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
right: -($target.width())
}).animate({
left: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: -$this.width()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
But I got a little problem with it. I would like the panels to "open" and "close" from the right. I'm not familiar with javascript and I'm not able to tweak it properly.
Can anyone help me with this ?

Like this?
http://jsfiddle.net/RZpbK/845/
All I did was modify the animIn to:
animIn = function () {
$target.addClass('active').show().css({
left: +($target.width())
}).animate({
left: 0
}, 500);
};

Just replace the left: -($target.width()) with left: $target.width() in both places

Based on your previous comment, this is more what you want?
http://jsfiddle.net/RZpbK/847/
Just changed it so animIn executed right away instead of as a callback after the fadeout was done.
$this.removeClass('active').animate({
left: -$this.width()
}, 500);
animIn();