I am trying to do the next thing:
In other words: there is some div-s. I want to display always X div-s. the three upper divs will be colored in black and the last div will be colored in gray.
If I scrolled down, the upper 3 divs will be colored in black and the last one will be colored in gray. (If scrolling up, the same thing happens: 3 upper divs will be colored in black, the last one in gray).
I don't know why the scroll event is called more then 1 time after scrolled down or up pressed (one press). It's in loop mode.
(After I fix it, I will do the color issue)
this is my jsfiddle:
http://jsfiddle.net/alonshmiel/Ht6Ym/2966/
and this is for the scroll:
jQuery(function($) {
$('#divContent').scroll(function() {
var currentScrollTop = $(this).scrollTop();
if (currentScrollTop > divContentScrollTop) {
divContentScrollTop += (divHeight + 2);
$("#divContent").scrollTop(divContentScrollTop)
}
else {
divContentScrollTop -= (divHeight + 2);
$("#divContent").scrollTop(divContentScrollTop)
}
})
});
Any help appreciated.
It's because you are using javascript to scroll while you are in the scroll handler.
$("#divContent").scrollTop(divContentScrollTop)
That is causing the div to scroll, which then fires the scroll handler, which then scrolls the div again, resulting in an endless loop.
You could change your code to remove the scrolling like this.
jQuery(function($) {
$('#divContent').scroll(function() {
var currentScrollTop = $(this).scrollTop();
if (currentScrollTop > divContentScrollTop) {
divContentScrollTop += (divHeight + 2);
}
else {
divContentScrollTop -= (divHeight + 2);
}
})
});
Then keeping track of which div would be up top you can still do the coloring.
Related
I'm trying to get an overlay div's opacity to fade to black as you approach a targeted element in the middle of the page, and then fade back to transparent after that element exits the viewport.
(Broken) Example: https://jsfiddle.net/dtcgbxcn/3/
As you approach the 'blue' section, it should get darker. The page should be solid black before the blue section enters the viewport. Then, after the blue section exits the viewport, it begins to gradually fade out the opacity. By the time you reach the bottom of the page (or another targeted element), the overlay should be fully transparent again.
Note that, due to responsiveness, the height of any of these sections is indeterminate.
$(window).on('scroll', function() {
var st = $(this).scrollTop(),
offset = $('.blue').offset().top - $('.blue').height(),
opacity = st / offset;
_docHeight = $('.red').height() + $('.blue').height() + $('.yellow').height();
$('.overlay').height(_docHeight);
if (opacity > 2) {
opacity = 3 - opacity;
}
$('.overlay').css('opacity', opacity);
});
I have fiddled around with your example, Hopefully this is what you were looking for as far as functionality. It should be 100 opacity right before the blue appears, and 100% clear as the blue comes off the screen. I would prob warp this whole thing in a closure, and cache the selectors so you don't have to call $() every time, but other than that - this should work.
Your fiddle was a little different than your example above - but let me know if this is what you are looking for.
https://jsfiddle.net/gmydzzmf/1/
$(window).on('scroll', function() {
var st = $(this).scrollTop(),
win_height = $(window).height(),
offset = $('.two').offset().top - $('.two').height() - ( win_height / 2),
_docHeight = $('.one').height() + $('.two').height();
if (st<offset ){
// fading in
opacity = st/offset;
} else {
// fading out
opacity = ((_docHeight - st)/(win_height*2));
}
$('.overlay').height(_docHeight); //move this to resize event
$('.overlay').css('opacity', opacity);
});
I've got a series of rectangles drawn on a canvas and use a scroll event listener to move the boxes up and down.
I'm trying to add in some validation so that the boxes cannot be scrolled past a certain point.
Due to the acceleration, the scroll values don't always increment by 1, so when scrolling quickly, sometimes my validation kicks in too early.
Any ideas how to solve this?
So in my event listener I have:
lScroll += e.deltaY;
if (lScroll > 0) {
canScroll = false;
lScroll = 0;
} else {
canScroll = true;
}
https://jsfiddle.net/kr85k3us/3/
Please check if this is working for you: https://jsfiddle.net/kr85k3us/4/
I tested it and it should work, but perhaps you can move your mousewheel faster :)
if (!canScroll && lScroll == 0) {
var first = Object.keys(boxes)[0];
if (boxes[first]['y'] < 10) {
var delta = 10 - boxes[first]['y'];
Object.keys(boxes).forEach(function(k){ boxes[k]['y'] += delta; });
}
}
This is the piece of code I added. If you can't scroll and lScroll is 0, it means that we reached the top. Next, I check if the first box is where it should be. If not (i.e. boxes[first]['y'] < 10) then it adjusts all the boxes' y position.
Case:
I have a slider that scrolls through some images, while, when you scroll down, the menu and content moves over it. Once the menu gets to the top, it sticks to it, as it's changed to a fixed position.
Problem:
Once the menu snaps to place, it resets it's original position (a margin-top) from a generated ammount of pixels to the 0 value. This cases the page to jump that generated ammount of pixels down, which shouldn't happen. It shouldn't jump down at all, but I think it has to do with the ammount of pixels that is generated before it is set to 0, which cases on my screen a gap of 955 pixels. It jumps thus 955 pixels down after it applies the fixed state.
So my questio now is, how can i fix this. I tried applying instead of a margin a padding (no go, white screen), applying instead of a margin-top: 0px a top:0 so i dont have to use the margins, but also a no go.
Case link:
http://test.thewebfanatics.com/jellyweb/home
Code
$(window).scroll(function () {
if ($('.resolutionwrap').length == 1) {
var documentScrollTop = $(document).scrollTop() + 100;
var fixedToggle = $('#slides').height();
if (documentScrollTop > fixedToggle) {
$('#hoofdmenu').addClass('fixed');
$('#hoofdmenu').css("margin-top", "0px");
} else {
$('#hoofdmenu').removeClass('fixed');
$('#hoofdmenu').css("margin-top", $('#slides').height() - 100);
}
}
});
Hope someone can help me on this matter.
Okay, as I was posting the remark on the fiddle, I realized that if the content moved, I could also just simply return it to it's position by javascript by making a counter balanced value of it.
Shortly said: I countered the margin, by creating a different margin-top that balanced that scale. It's maybe not the most beautifull solution, but it did the trick.
$(window).scroll(function () {
if ($('.resolutionwrap').length == 1) {
var documentScrollTop = $(document).scrollTop() + 100;
var fixedToggle = $('#slides').height();
// console.log($('#slides').height());
// console.log($('.resolutionwrap').height());
if (documentScrollTop > fixedToggle) {
$('#hoofdmenu').addClass('fixed');
$('#hoofdmenu').css("margin-top", "0px");
$('.content').css("margin-top", $('#slides').height());
} else {
$('#hoofdmenu').removeClass('fixed');
$('#hoofdmenu').css("margin-top", $('#slides').height() - 100);
$('.content').css("margin-top", "0px");
}
}
})
This is a follow-up post to a previous question: jQuery - scroll down every x seconds, then scroll to the top
I have refined the scrip a little further, but am having a little trouble with the last step.
I have a div that automatically 50px at a time until it reaches the bottom, at which point it scrolls to the top and starts again. I have this working perfectly thanks to the above question and with a little add work.
I need to make all scrolling stop when the div is hovered. I have done part of this already (there is no incremental scrolling down on hover) but I cannot get the full picture. The div will still scroll to the top even when hovered.
Here is my jQuery and a fiddle to go along with it: http://jsfiddle.net/wR5FY/1/
var scrollingUp = 0;
var dontScroll = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0 && dontScroll == 0) {
$('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
}
$('#scroller').bind('scroll', function () {
if (dontScroll == 0) {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
scrollingUp = 1;
$('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() {
scrollingUp = 0;
});
}
}
});
$('#scroller').bind('mouseenter', function() {
dontScroll = 1;
});
$('#scroller').bind('mouseleave', function() {
dontScroll = 0;
});
In the fiddle, try hovering the scroller div when the yellow square is visible. You will see that it scrolls to the top.
A couple of notes:
You will notice I have used mouseenter and mouseleave rather than hover and mouseout. This was the best way I could find to ensure all child elements within the div didn't have an adverse affect.
A potential problem area is the fact that I have binded to the scroll event for my function that scrolls to the top. I think this might cause some additional problems when a user is manually scrolling through the items, with my jQuery trying to scroll against the user.
I did a little experimenting with killing setInterval, but I didn't find this to be very helpful as the function that triggers isn't the problem area.
My overall goal here is to lock down all automatic scrolling when a user is hovering or manually scrolling through the list. This is 90% there. If they happen to scroll to the bottom, NOTHING should happen until they move the mouse elsewhere - this is the problem.
Keep it easier ;)
The problem was that you first evaluate wheter dontScroll is zero, then start the timer.
When the timer has ended, it doesnt evaluate anymore, whether dontScroll STILL is zero.
Just pulled that into your scrollIt function:
var scrollingUp = 0;
var dontScroll = 0;
window.setInterval(scrollit, 2000);
function scrollit() {
if(dontScroll == 0){
if ($('#scroller').scrollTop() + $('#scroller').innerHeight() >= $('#scroller')[0].scrollHeight) {
scrollingUp = 1;
$('#scroller').animate({ scrollTop: 0 }, 1000, function() {
scrollingUp = 0;
});
} else if(scrollingUp == 0) {
$('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow');
}
}
}
$('#scroller').bind('mouseenter', function() {
dontScroll = 1;
});
$('#scroller').bind('mouseleave', function() {
dontScroll = 0;
});
I am trying to stop a floating (sliding) div when it reaches the bottom of a containing div but it isn't working. The variable bottom is the lowest point on the page of the containing div but for some reason doesn't act as it should. Anyone have a better method?
$(document).ready(function () {
var top = $('#buttonsDiv').offset().top - parseFloat($('#buttonsDiv').css('margin-top').replace(/auto/, 0));
var bottom = $('#mainBody').offset().top + $('#mainBody').height();
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
var z = y + $('#buttonsDiv').height();
// whether that's below the form
if (y >= top && z <= bottom) {
// if so, add the fixed class
$('#buttonsDiv').addClass('fixed');
} else {
// otherwise remove it
$('#buttonsDiv').removeClass('fixed');
}
});
});
Try the below conditions:
if (y >= top && z <= bottom) {
// if so, add the fixed class
$('#buttonsDiv').addClass('fixed');
} else if(z > bottom) {
// otherwise remove it
$('#buttonsDiv').removeClass('fixed').addClass('absolute');
} else {
// otherwise remove it
$('#buttonsDiv').removeClass('fixed');
}
Once you scroll past the container DIV (#mainBody), the floating DIV (#buttonsDiv) should be positioned 'absolute' to the bottom of the container DIV.
Simply defining a margin-bottom with floating div or padding-bottom with external div in this case should help. I have used a similar thing in the following website: www.emotionstorm.com to stop the shopping cart below the top banner.
Please let me know if you need help for a similar code.