I am trying to create an ajax request when the div is scrolled to the bottom, and have come up with this code. When i'm not subtracting 100 from the elem.outerHeight() inside the if statement it all works fine, but i want to load the extra images before it hits the end, so i am trying to subtract 100, so it will load 100 pixels before the bottom, but it just won't work. Here is the code with the subtraction:
$('#thubnails').scroll(chk_scroll);
function chk_scroll(e) {
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()-100) {
loadmoreimg();
console.log(elem.outerHeight());
}
}
Anyone have an answer?
It's hard to catch exactly 100 px from bottom, but you could use greater or equal:
if (elem[0].scrollHeight - elem.scrollTop() >= elem.outerHeight() - 100) {
// do stuff
}
Related
I have 2 static (html position: fixed;) images at the edges of the screen (right and left). When users scrolls more than 100 pixels from top, these edges retract 50 pixels.
I want to them to reappear (normal again, as they were at the beginning) when users scrolls back to top. I tried adding boolean value which is true when they retract and added it to condition when they need to reappear again. But it isn't working. Why?
userHasScrolled = false;
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100) {
$(".rightstatic").animate({marginRight:'-50px'}, 900);
$(".leftstatic").animate({marginLeft:'-50px'}, 900);
userHasScrolled = true;
}
});
});
if($(window).scrollTop() <= 0 && userHasScrolled) {
$(".rightstatic").animate({marginRight: '+50px'}, 400);
$(".leftstatic").animate({marginLeft:'+50px'}, 400);
userHasScrolled = false;
}
Edit:
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100) {
$(".rightstatic").animate({marginRight:'-20px'}, 900);
$(".leftstatic").animate({marginLeft:'-20px'}, 900);
} else if($(window).scrollTop() <= 0) {
$(".rightstatic").animate({marginRight: '+0px'}, 400);
$(".leftstatic").animate({marginLeft:'+0px'}, 400);
}
});
});
It kinda works, but has a HUGE delay. Like more than a minute after reaching top it retracts back.
Edit 2: After throttling it finally works. Thanks #TomaszBubała.
It isn't working because the bottom part of your code is called only once and userHasScrolled is false by that time. You need to combine both inside $(window).scroll(). I think you can get rid of userHasScrolled variable and second condition could be just else instead of else if.
var scrollTimeout;
var throttle = 250;
$(document).ready(function(){
$(window).scroll(function(){
if(scrollTimeout) return;
scrollTimeout = setTimeout(function() {
scrollTimeout = null;
const scrolled = $(this).scrollTop();
if (scrolled > 100) {
console.log("1");
$(".rightstatic").animate({marginRight:'-20px'}, 900);
$(".leftstatic").animate({marginLeft:'-20px'}, 900);
} else {
console.log("2");
$(".rightstatic").animate({marginRight: '+0px'}, 400);
$(".leftstatic").animate({marginLeft:'+0px'}, 400);
}
}, throttle);
});
});
Fiddle: https://jsfiddle.net/wctxbynt/41/
EDIT:
It wasn't working as intended since scroll event is fired multiple times (tens of times) with a single mousewheel interaction, causing jQuery animate to be called far too many times than it needs to be. A common way to fix this problem is to "throttle" a function not to be called unless a certain amount of time has passed. In edited code above we define timeout as 250ms, which means that our scroll handler code will get called up to 4 times a second - not more (a big difference as opposed to ex. 30 times in 100ms which is huge improvement in performance). Above is just an easy implementation of throttle function - read more about throttling here.
I want my navbar to be transparant on the top and bottom of my page but i want it to not be transparant in the middle. When i have my webpage on full screen this works:
$(window).on("scroll", function () {
if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
})
But when it gets resized this wont work anymore because the sizes change. Is there a way to do this with % instead of just normal numbers so it will be responsive?
It occur because you hardcoded your height values. Check the whole site height, divide it on three and incorporate this variables to your if statement. Every time you resize browser window it will recalculate your new position.
window.addEventListener('resize', function() {
//one third and two third of website
oneThird = window.scrollHeight / 3;
twoThird = onethird * 2;
if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
}
You can use Media Queries with JS too, so you can do certain things on your desired window size, this might help https://www.w3schools.com/howto/howto_js_media_queries.asp
I have this :
<div id="randomp" style="position:absolute;top:3px;left:3px;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
I want that the propierty "top" and "left" change every time you enter into the page. I mean that some times it appear on the right top corner, right bottom corner, left top corner and left bottom corner..
Here it is what i have tryied:
http://redzer.com.mx/tabla.html
I would probably start with the div styled as position:fixed and with display:none:
<div id="randomp" style="display:none;position:fixed;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
Then use jQuery to determine the position CSS to set and turn on visibility
$(document).ready(function() {
// get jQuery object for the div
var $randomp = $('#randomp');
// determine whether to show top or bottom, left or right
var top = Math.round(Math.random()); // generate 0 or 1 value
if (top === 1) {
$randomp.css('top', '3px');
} else {
$randomp.css('bottom', '3px');
}
var left = Math.round(Math.random());
if (left === 1) {
$randomp.css('left', '3px');
} else {
$randomp.css('right', '3px');
}
// show the div
$randomp.show();
});
Of course, you could also use server-side code to do this, but since you asked specifically about javascript/jquery in your tags, I suggested this solution.
I think i got exactly what you need.
EXAMPLE
With javascript i am generating random numbers for the top and left positioning of your image every time you visit the page.
Right now i set them up to get a random number between 0 and 100 but you can change that to whatever you want.
var random1 = Math.ceil(Math.random() * 100);
var random2 = Math.ceil(Math.random() * 100);
$(document).ready(function () {
$('#randomp').css('top', random1);
$('#randomp').css('left', random2);
});
I'm trying to put together a simple game in javascript, and I cant get the jumping to work:
function jump()
{
isJumping=true;
var jumpint= setInterval(function() {
ypos=ypos-5;
}, 10);
if(ypos==150)
{
isJumping == false;
clearInterval(jumpint);
jumpint = 0;
alert("it works");
return;
}
}
Whenever I call this function it provides the animation, and the character moves in the right direction, but it doesn't stop. Once the ypos would equal 150 it keeps moving and doesn't execute the if statement and I cant figure out why. Obviously, I'll some equation in there, but I want to get this jumping to execute right before I move on.
Put the if-statement inside the setInterval, otherwise it will only be executed once.
var jumpint = setInterval(function() {
ypos=ypos-5;
if(ypos==150)
{
isJumping == false;
clearInterval(jumpint);
alert("it works");
}
}, 10);
Also, you might want to change the condition to ypos <= 150. Say the ypos is 157. If you keep decreasing by 5, it will go 157 -> 152 -> 147 and jump right past the condition. To fix it, simply change the if-statement's condition to ypos <= 150.
I'm trying to implement the marquee tag in jQuery by animation a set of images using animate() function, making them move to the right or left direction.
But, I couldn't figure out when a single image goes to the end of the screen returns individually to the other side.
Because I heard that the window size is not constant for every browser, So is there anyway to implement that?
this is what I came up so far(it's simple and basic):
$(document).ready(function(){
moveThumbs(500);
function moveThumbs(speed){
$('.thumbnails').animate({
right:"+=150"
}, speed);
setTimeout(moveThumbs, speed);
}
});
note: I searched in SO for related questions, but had no luck to find exact information for my specific issue.
Here's a basic script that moves an image across the screen and then resumes on the other side and adapts to the window width.
You can see it working here: http://jsfiddle.net/jfriend00/rnWa2/
function startMoving(img) {
var img$ = $(img);
var imgWidth = img$.width();
var screenWidth = $(window).width();
var amount = screenWidth - (parseInt(img$.css("left"), 10) || 0);
// if already past right edge, reset to
// just left of left edge
if (amount <=0 ) {
img$.css("left", -imgWidth);
amount = screenWidth + imgWidth;
}
var moveRate = 300; // pixels per second to move
var time = amount * 1000 / moveRate;
img$.stop(true)
.animate({left: "+=" + amount}, time, "linear", function() {
// when animation finishes, start over
startMoving(this);
})
}
$(document).ready(function() {
// readjust if window changes size
$(window).resize(function() {
$(".mover").each(function() {
startMoving(this);
});
});
});