Is it possible to fire an alert after a user scrolls 100 pixels.
Here's what I have so far but I know I'm missing something;
$(window).scroll(function() {
if (document.documentElement.clientHeight +
$(document).scrollTop() == "100px")
{
alert("You've scrolled 100 pixels.");
}
});
Look at the window .scrollTop (returns an integer):
$(window).scroll(function() {
if ($(this).scrollTop() === 100) { // this refers to window
alert("You've scrolled 100 pixels.");
}
});
but if you have scrolled 102px it wont trigger the alert box.
if you just want to trigger the alert once have a global variable that sets to true if it has been trigged:
$(function(){
var hasBeenTrigged = false;
$(window).scroll(function() {
if ($(this).scrollTop() >= 100 && !hasBeenTrigged) { // if scroll is greater/equal then 100 and hasBeenTrigged is set to false.
alert("You've scrolled 100 pixels.");
hasBeenTrigged = true;
}
});
});
or just unbind the scroll event once the alert box has been trigged:
$(function(){
$(window).bind("scroll.alert", function() {
var $this = $(this);
if ($this.scrollTop() >= 100) {
alert("You've scrolled 100 pixels.");
$this.unbind("scroll.alert");
}
});
});
Try this:
$(document).scrollTop() >= 100) {
// ...
}
scrollTop() returns an integer. This version will evaluate to true once you have scrolled past 100px, which might be more appropriate.
try
document.documentElement.clientHeight + $(document).scrollTop() == 100
Related
I'm currently making an overlay that covers a sticky top bar when the user has scrolled beyond a certain point (down) and disappears when scrolling back up. However, I'd like to be able to scroll for at least 50px before the code is executed (something like a gap before the overlay is triggered).
$(function() {
var prevScroll = $(document).scrollTop(); //initial position
$(window).scroll(function() {
var newScroll = $(document).scrollTop(); //position from top after scrolling
if(newScroll > prevScroll) { // checks if the user has scrolled up or down
var fromNew = $(document).scrollTop(); // holds value to compare with the position + gap amount
if (fromNew > newScroll + 50) { //checks to see if scrolled for 50px
$("#stick-start").fadeIn("fast");
prevScroll = newScroll + 50; //initial position + scrolled amount
};
} else {
var fromNew = $(document).scrollTop();
if (fromNew > newScroll - 50) {
if ($("#stick-start").hasClass("is-stuck")) {
$("#stick-start").fadeOut("fast");
prevScroll = newScroll - 50;
};
};
};
});
});
The condition that checks whether you're scrolling up or down works. But as it is now, the overlay just keeps fading in and out repeatedly. How do I make it so that you have to scroll at least 50px before anything happens ?
I think this should get you where you're going.
var $document = $(document);
$(window).scroll(function() {
if ($document.scrollTop() >= 50) {
$("#stick-start").fadeIn("fast");
} else {
$("#stick-start").fadeOut("fast");
}
});
EDIT: had an error, should be good now.
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$("#stick-start").fadeIn();
} else {
$("#stick-start").fadeOut();
}
});
I need to be able to disable / re-enable Javascript on window resize?
Currently when the window is resized on the desktop, the nav bar sticks and is the only thing visible instead of the content.
<script>
if ( $(window).width() <= 1200 ) {
}else{
$('nav').addClass('original').clone().insertAfter('nav').addClass('cloned').css('position','fixed').css('top','0').css('margin- top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
th',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
You can bind an event handler to the "resize" JavaScript event:
$(window).resize(function() {
if($(window).width() <= 1200) {
//You code here
}else {
//You code here
}
});
Your code will be executed whenever the browser window's size is changed.
$(window).resize(function() {
if($(window).width() <= 1200) {
//small screen code
}else {
//large screen code }
});
//trigger window resize event on load
$(window).trigger('resize');
you can do it by checking the window width
var winWidth = $(window).width(); // you can get the window width from this
//Then check with the condtion(compare with your need ex :)
if(winWidth <= 600)
{
//your work here
alert("window resize less than or equal to 600");
}
else
{
//your work here
alert("window resize greater than to 600");
}
This is what I use to make 2 divs "unwrap" while scrolling:
CSS
.entry {
height: 40px;
}
.entry.expanded {
height:600px;
}
JavaScript
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var x = $(window).scrollTop();
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
});
It works perfectly fine on my 1920x1080p screen but it doesn't on a friend's 1920x1200px because there aren't 820px to scroll..
How can I solve this to work with every resolution? I tried with this, but unfortunately nothing happens:
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var availableScroll = $(document).height() - $window.height();
var x = $(window).scrollTop();
if (x > 820 || x == availableScroll) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525 || x == availableScroll) {
$($('.entry').get(2)).addClass('expanded');
}
});
Is there a fancy method, that maybe calculates the pixels from the bottom or some method relative to the vertical res?
Here's the webpage with the code live (you can see the 2 divs unwrapping when scrolling).
In general, avoid the == for scrolling because if the scroll is off by even .0001 it will resolve as false. Also replace $window with $(window).
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var availableScroll = $(document).height() - $(window).height();
var x = $(window).scrollTop();
if (x > 820 || Math.abs(x - availableScroll) < 10) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525 || Math.abs(x - availableScroll) < 10) {
$($('.entry').get(2)).addClass('expanded');
}
});
Also, if you want to execute code when the page first loads, use the $(document).ready(handler) pattern.
Your former functions seems to working fine. I am testing it as MacBook Pro. However, at sometime it seems it is not fired at JQuery. What you can do is you can wait for few milliseconds to check if the scroll is finished. If scroll is finished then you can simply check the value of scroll.
Option 1:
jQuery debounce is a nice one for problems like this. jsFidlle
So your modified code will be (you need to use debounce)
$(window).scroll($.debounce( 250, true, function(){
console.log("Still scrolling");
}));
$(window).scroll($.debounce( 250, function(){
var x = $(window).scrollTop();
console.log("Scrolling finished");
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
}));
Option 2:
There may be a chance you don't like use JQuery Debounce then you can native approach with timer function. See the code below and you can adjust the timer duration as per your needs.
It is simply waiting for scroll event to be finished and wait for certain milliseconds before it scroll event recalled. If scroll refires then it simply clear the timer and start waiting again. If timer is finished then it executes the method you have stated.
$(window).scroll(function() {
var timerDuration = 250; // In milliseconds
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
// do something
var x = $(window).scrollTop();
console.log("Scrolling finished");
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
}, timerDuration));
});
i want to load few data asap browser scrollbar travelling to 50 %
for what using jquery i wrote following funcation :
$(window).on('scroll', function () {
alert("scrolling");
if ($(window).scrollTop() + $(window).innerHeight() >= $(window)[0].scrollHeight * 0.5) {
if (counter < modules.length) {
LoadData(modules[counter]);
}
counter += 1;
}
})
but it is not working, how can i fixed that?
anthor try i made it is :
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("you are at bottom");
}
});
but i dont want alert fired at bottom, just at 50%
To detect that scrolling has reached 50% of your page use:
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.5){
For the rest we should know what's inside LoadData(modules[counter]);
http://jsfiddle.net/carlodurso/a5wmLzfm/
I found this, but this does it 100px before the bottom of the page. I need it 100px from the top of the page. I know how to implement it, I've done other jquery animations, just not what needs to be in this one.
$(window).scroll(function(){
if($(window).scrollTop() + 100 > $(document).height() - $(window).height() ){
alert("at bottom");
}
});
And also, I need to know how to reverse this so the div disappears when the user scroll back up before the 100px.
This will be used for a navigation bar.
Edit2> This worked also:
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$("#div").fadeIn("slow");
}
});
$(window).scroll(function(){
if($(window).scrollTop() < 100){
$("#div").fadeOut("fast");
}
});
Try this:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
// > 100px from top - show div
}
else {
// <= 100px from top - hide div
}
});
Try this:
var menu = $("nav");
$(window).scroll(function(){
//more then or equals to
if($(window).scrollTop() >= 100 ){
menu.show();
//less then 100px from top
} else {
menu.hide();
}
});
I would recommend to do this:
$("#divname").hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$("#divname").fadeIn("slow");
}
else {
$("#divname").fadeOut("fast");
}
});
Now the div is already hidden when you visit your page.
Without this:
$("#divname").hide()
It would show and then perform a FadeOut. And that is not what you want.