I want to run an alert if the viewport is wider than 1250px and if the user is near the bottom of the page.
I currently have the two snippets of code which work individually...
function checkSize(){
if ($(window).width() > 1250) {
alert('hello');
}
}
checkSize();
$(window).resize(function() {
checkSize();
});
and the other snippet which detects how far the user has scrolled down...
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 700) {
alert('hello');
}
});
How can I combine the two in one if statement? I have tried this but it does not seem to work..
function checkSize(){
if ($(window).width() > 1250 && $(window).scrollTop() + $(window).height() > $(document).height() - 700) {
alert('hello');
}
}
checkSize();
$(window).resize(function() {
checkSize();
});
Following discussion in comments. This seems to be working:
function checkSize(){
if($(window).width() > 1250 && $(window).scrollTop() + $(window).height() > $(document).height() - 700) {
console.log('hello');
}
}
checkSize();
$(window).scroll(checkSize);
$(window).resize(checkSize);
Demo
(($(window).width() > 1250) && ($(window).scrollTop() + $(window).height()) > $(document).height() - 700)
You need to place () to show what you what to calculate!
Related
Currently I detect when I am at the bottom of the page.
I have a input hidden on the html, and when you scroll to the bottom, the input gets +1, but, when you get to the bottom, it adds alot of numbers.
How I add only +1 and it doesn't get alot of +1?
function finalPage() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() -500) {
loadMore();
}
});
}
var num = $("#page").val();
num++;
$("#page").val(num);
Try this:
function finalPage() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() -500) {
loadMore();
$("#page").val($("#page").val()+1);
}
});
}
function firstAnimation() {
$('.etc(1)').fadeIn();
}
function secondAnimation() {
$('.etc(1)').fadeOut();
$('.etc(2)').fadeIn();
}
function thirdAnimation() {
$('.etc(2)').fadeOut();
$('.etc(3)').fadeIn();
}
function fourthAnimation() {
$('.etc(3)').fadeOut();
$('.etc(4)').fadeIn();
}
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
firstAnimation();
}
if ($(this).scrollTop() > 300) {
secondAnimation();
}
if ($(this).scrollTop() > 450) {
thirdAnimation();
}
if ($(this).scrollTop() > 600) {
fourthAnimation();
}
});
Guys, i'm using scrollTop() to animate a piece of my site, and i was wondering if i can reverse the animation if o scroll to the bottom, and not to the top.
I was searching but there isn't a scrollBottom in jquery.
First, set an additional requirement for each if statement to condition each event to a scroll range to prevent multiple events from being triggered. Second, add a .fadeOut() function to the next elements so that the effect is reversed when the user scrolls the opposite direction.
The code should look like:
function firstAnimation() {
$('.etc1').fadeIn();
$('.etc2').fadeOut();
}
function secondAnimation() {
$('.etc1').fadeOut();
$('.etc2').fadeIn();
$('.etc3').fadeOut();
}
function thirdAnimation() {
$('.etc2').fadeOut();
$('.etc3').fadeIn();
$('.etc4').fadeOut();
}
function fourthAnimation() {
$('.etc3').fadeOut();
$('.etc4').fadeIn();
}
$(window).scroll(function() {
if ($(this).scrollTop() > 1500 && $(this).scrollTop() < 3000) {
firstAnimation();
}
if ($(this).scrollTop() > 3000 && $(this).scrollTop() < 4500) {
secondAnimation();
}
if ($(this).scrollTop() > 4500 && $(this).scrollTop() < 6000) {
thirdAnimation();
}
if ($(this).scrollTop() > 6000) {
fourthAnimation();
}
});
Demo on JSFiddle
To scroll to the bottom of the document, try:
$(window).scrollTop($(body).height());
$(window).load(function() {
$("html, body").animate({ scrollTop: $(document).height() });
});
$(function() {
$(document).scroll(function() {
var windowscroll = $(this).scrollTop();
if($(window).scrollTop() >= 900)
{
$("#scrollhome").css("opacity",(1-($(window).scrollTop()-900)/75))
}
else
$("#scrollhome").css("opacity",1)
if(windowscroll > 900 && windowscroll < 1300)
{
$("#scrollabout").css("opacity",($(window).scrollTop()-900)/75)
}
else
$("#scrollabout").css("opacity",0)
if(windowscroll > 1200 && windowscroll < 1500)
{
$("#scrollabout").css("opacity", (-1($(window).scrollTop()-1200)/75))
$("#scrolldesign").css("opacity",($(window).scrollTop()-1200)/75)
}
else
$("#scrolldesign").css("opacity",0)
});
});
the first overlap between scrollhome and scrollabout works nice but when it comes to the second overlap between scrollabout and scroll design i don't know how to hide the scrollabout funktion in a smooth way again, i need help! how can i make the scrollabout hidden again using scrolltop?
you misstyped it as -1($(window)...... it should also be 1-($(window)
I have the following code which gets the amount the user has scrolled from the top and the bottom and then using these values it should hide or show the shadows.
$(document).ready(function() {
if ( $(window).scrollTop() + $(window).height() >= $(window).height() ) {
$('div.shadow-bottom').show();
}
$(window).scroll(function () {
if ( $(window).scrollTop() >= 15 ) {
$('div.shadow-top').show();
} else {
$('div.shadow-top').hide();
}
if ( $(window).scrollTop() + $(window).height() >= $(window).height() - 15 ) {
$('div.shadow-bottom').show();
} else {
$('div.shadow-bottom').hide();
}
});
});
The top works fine, but the bottom one should be hiding when you get to the bottom of the page BUT then show again if you are 15 pixels from the bottom.
Example: http://dev.driz.co.uk/shadow/
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
Change your code to:
$(document).ready(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
$('div.shadow-bottom').show();
}
$(window).scroll(function() {
if ($(window).scrollTop() >= 15) {
$('div.shadow-top').show();
} else {
$('div.shadow-top').hide();
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
$('div.shadow-bottom').show();
} else {
$('div.shadow-bottom').hide();
}
});
});
The correct working example is:
$(document).ready(function() {
if ($(window).height() < $(document).height()) {
$('div.shadow-bottom').show();
}
$(window).scroll(function() {
if ($(window).scrollTop() >= 15) {
$('div.shadow-top').show();
} else {
$('div.shadow-top').hide();
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 15) {
$('div.shadow-bottom').hide();
} else {
$('div.shadow-bottom').show();
}
});
});
Which is based on bhb's answer above.
So I've got an div that slides down when you scroll near the bottom of the page. In that div, I have an "X" anchor that slides it up again (this is in jQuery). But if I scroll, the div slides down again (naturally). So I want the X to first of all, make "#topDiv" slide up, and then ignore the function that makes it slideDown.
Full code:
$("#topDiv").hide();
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
$("#topDiv").slideDown();
}
if ($(window).scrollTop() + $(window).height() < $(document).height() - 800) {
$("#topDiv").slideUp();
}
$("#closeTop").click(function () {
$("#topDiv").slideUp();
return false;
});
});
Demo Page ( http://tutorials.underbakke.net/js/function/ )
You could use the on/off methods to unbind the slidedown after the "X" is clicked
$("#topDiv").hide();
$(window).on('scroll', showTopDiv);
function showTopDiv() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
$("#topDiv").slideDown();
}
}
$(window).on('scroll', function() {
if ($(window).scrollTop() + $(window).height() < $(document).height() - 800) {
$("#topDiv").slideUp();
}
});
$("#closeTop").click(function () {
$("#topDiv").slideUp();
$(window).off('scroll', showTopDiv);
return false;
});
Also, in your slideup function, adding $("#topDiv").is(':visible') to the if statement will make sure it is'nt executed uneccessary.
And is there really a need to bind the click function on every scroll?
Try this:
$("#topDiv").hide();
$(window).addEventListener('scroll', function(event) {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
$("#topDiv").slideDown();
}
if ($(window).scrollTop() + $(window).height() < $(document).height() - 800) {
$("#topDiv").slideUp();
}
$("#closeTop").click(function () {
$("#topDiv").slideUp();
$(window).removeEventListener('scroll',arguments.callee,false);
});
}