I'm trying to change one image at a time when I'm scrolling through the page.
This code actually changes all images classes when we get to that point of the scroll.
Is there any other way we can change images individually when scrolling?
Thank you.
jQuery(function($) {
var show = $(".show");
var hide = $(".hide");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if($(window).scrollTop() >= 500){
show.removeClass('show').addClass("hide");
hide.removeClass('hide').addClass("show");
} else {
show.removeClass("hide").addClass('show');
hide.removeClass('show').addClass("hide");
}
});
});
Since you're checking the scroll position of window and hiding/showing, this will hide/show all elements with the specified class name.
To achieve your purpose, add css position: relative to all images (if no position is specified already),
Then, iterate through each image as follows...
jQuery(function($) {
//var show = $(".show");
//var hide = $(".hide");
$(window).scroll(function() {
/*var scroll = $(window).scrollTop();
if($(window).scrollTop() >= 500){
show.removeClass('show').addClass("hide");
hide.removeClass('hide').addClass("show");
} else {
show.removeClass("hide").addClass('show');
hide.removeClass('show').addClass("hide");
}*/
var images = $('img');//or any other selector
$.each(images, function () {
if($(this).offset().top <= -500) {
$(this).hide();
}
else {
$(this).show();
}
});
});
});
I would like to show one div (.cu5-topbar) when another div (.cu5box-box) scrolls off screen. The problem is that the the .cu5-topbar div is showing up right as the .cu5box-box div is leaving the screen. That's also causing the .cu5-topbar to flashing for a few seconds while the two divs overlap each other. Here is my code so far:
var scroll_start = 0;
var startchange = jQuery('.cu5box-box');
var offset = startchange.offset();
if (startchange.length) {
jQuery(document).scroll(function () {
scroll_start = jQuery(this).scrollTop();
if (scroll_start > offset.top) {
jQuery('.cu5box-box').fadeOut(400);
jQuery('.cu5-topbar').fadeIn(400);
} else {
jQuery('.cu5box-box').fadeIn(400);
jQuery('.cu5-topbar').fadeOut(400);
}
});
}
https://jsfiddle.net/zgu70p4m/
I would like for the .cu5-topbar div to show up as soon the .cu5box-box div is completely off of the screen and I would like for the .cu5-topbar div to disappear as soon as the .cu5box-box div comes onto the screen.
Try the below, you had not included jQuery in your jsfiddle example.
You also needed to attach the scroll event to the window. Finally the offset needed the elements height added to the total to make sure you where getting the correct position of the end of the element.
var scroll_start = 0;
var startchange = jQuery('.cu5box-box');
var offset = startchange.offset();
if (startchange.length) {
$(window).scroll(function () {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top + startchange.height()) {
$('.cu5-topbar').fadeOut(400);
} else {
$('.cu5-topbar').fadeIn(400);
}
});
}
This seems like an easy fix, but can't seem to figure it out. I have a table that spawns a fixed header whenever you scroll on it. It's working well, however, an unconnected link near the top of this page, via jquery, scrolls the cursor to the bottom of the page til it hits an anchor. As a result, it quickly moves over the table, spawning the fixed menu, then after reaching the anchor, the fixed menu awkwardly sits there for a second or two, then disappears.
I'm trying to prevent that by disabling the function on click of the link. I've tried e.preventDefault (), but no joy. Here's the fiddle and code (so looking to prevent the fixed "Header / Description" row when you click the link).
Fiddle
// top edge of table
var element_menu_hdr = $(".row-1").offset().top;
var element_menu_end_check = $(".row-12").offset().top;
$(window).on("scroll", function fixmenu() {
var y_scroll_pos = window.pageYOffset;
var scroll_menu_hdr = element_menu_hdr;
var scroll_menu_end_check = element_menu_end_check;
if(y_scroll_pos >= scroll_menu_hdr) {
if($('.affix').length === 0){
$('.row-1.odd').wrap('<table class="tablemain affix view"></table>');
}
} else if (y_scroll_pos < scroll_menu_hdr) {
$('.tablemain.affix.view').contents().unwrap();
} else {
}
});
// bottom edge of table
var element_menu_end = $(".row-12").offset().top;
$(window).on("scroll", function fixmenubtm() {
var y_scroll_pos2 = window.pageYOffset;
var scroll_menu_end = element_menu_end;
if(y_scroll_pos2 > scroll_menu_end) {
$('.tablemain.affix.view tbody').contents().unwrap();
} else {
}
var myVar = y_scroll_pos2;
console.log(myVar, "y_scroll_pos2");
var myVar2 = element_menu_end;
console.log(myVar2, "element_menu_end");
});
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
i was working on a galery where when the user scrolls and reaches a thumb certain background action occurs.
Now did this coding and i am able to get the result but somehow i am confused as it only works one time and then when i again scroll to that position it does nothing.
I am using alert boxes to reach 5th and 7th thumb and it only shows message once.
I am using something like this
$(document).ready(function () {
// Thumb 1
var thumb4Target = $("#myImg1").offset().top;
var interval = setInterval(function () {
if ($(window).scrollTop() >= thumb4Target) {
alert('1nd Image Position Obtained');
clearInterval(interval);
}
}, 0);
//Thumb 2
var thumb4Target2 = $("#myImg2").offset().top;
var interval2 = setInterval(function () {
if ($(window).scrollTop() >= thumb4Target2) {
alert('2nd Image Position Obtained');
clearInterval(interval2);
}
}, 0);
});
check this Fiddle
LINK
Please tell me where i am doing wrong.Thanks.
Use scroll event instead of interval. LIVE DEMO 1 Or LIVE DEMO 2
$(window).scroll(function()
{
var thumb4Target = $("#myImg1").offset().top;
var thumb4Target2 = $("#myImg2").offset().top;
if ($(window).scrollTop() >= thumb4Target) {
alert('1nd Image Position Obtained');
}
if ($(window).scrollTop() >= thumb4Target2) {
alert('2nd Image Position Obtained');
}
});
I am trying to set up infinite-scroll on a site I am developing with Coldfusion, I am new to javascript and jquery so I am having some issues wrapping my head around all of this. Do I need to have pagination on my site in order to use the infinite-scroll plugin, or is there a way to do it with out it?
You do not need infinite scroll plug-in for this. To detect when scroll reaches end of page, with jQuery you can do
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
Demo on JsFiddle
I'm using Hussein's answer with AJAX requests. I modified the code to trigger at 300px instead of 10px, but it started causing my appends to multiply before the AJAX request was finished since the scroll call triggers much more frequently in a 300px range than a 10px range.
To fix this, I added a trigger that would be flipped on successful AJAX load. My code looks more like this:
var scrollLoad = true;
$(window).scroll(function () {
if (scrollLoad && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
scrollLoad = false;
//Add something at the end of the page
}
});
then in my AJAX response, I set scrollLoad to true.
I built on top of Hussein's little example here to make a jQuery widget. It supports localStorage to temporarily save appended results and it has pause functionality to stop the appending every so often, requiring a click to continue.
Give it a try:
http://www.hawkee.com/snippet/9445/
$(function(){
$(window).scroll(function(){
if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
alert('end of page');
}
});
});
Some one asked for explanation so here is the explanation
here $(document).height()-->is the height of the entire document.In most cases, this is equal to the element of the current document.
$(window).height()-->is the height of the window (browser) means height of whatever you are seeing on browser.
$(window).scrollTop()-->The Element.scrollTop property gets or sets the number of pixels that the content of an element is scrolled upward. An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content. When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0.
$(document).height()<=$(window).scrollTop()+$(window).height()+100
add $(window).scrollTop() with $(window).height() now check whether the result is equal to your documnet height or not. if it is equal means you reached at the end.we are adding 100 too because i want to check before the 100 pixels from the bottom of document(note <= in condition)
please correct me if i am wrong
I had same problem but didn't find suitable plugin for my need. so I wrote following code. this code appends template to element by getting data with ajax and pagination.
for detecting when user scrolls to bottom of div I used this condition:
var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();
if (dh - (wh + ws) < dh - (h + t)) {
//now you are at bottom of #infiniteContent element
}
$(document).ready(function(){
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: 1, _limit:3 }, function (jsonre) {
appendTemplate(jsonre,1);
});
});
function appendTemplate(jsonre, pageNumber){
//instead of this code you can use a templating plugin like "Mustache"
for(var i =0; i<jsonre.length; i++){
$("#infiniteContent").append("<div class='item'><h2>"+jsonre[i].name+"</h2><p>"+jsonre[i].body+"</p></div>");
}
if (jsonre.length) {
$("#infiniteContent").attr("data-page", parseInt(pageNumber)+1);
$(window).on("scroll", initScroll);
//scroll event will not trigger if window size is greater than or equal to document size
var dh = $(document).height() , wh = $(window).height();
if(wh>=dh){
initScroll();
}
}
else {
$("#infiniteContent").attr("data-page", "");
}
}
function initScroll() {
var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();
if (dh - (wh + ws) < dh - (h + t)) {
$(window).off('scroll');
var p = $("#infiniteContent").attr("data-page");
if (p) {
$.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: p, _limit:3 }, function (jsonre) {
appendTemplate(jsonre, p);
});
}
}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="infiniteContent"></div>
If you have a scrollable element, like a div with scroll overflow, but no scrollable document/page, you can take this way.
$(function () {
var s = $(".your-scrollable-element");
var list = $("#your-table-list");
/* On element scroll */
s.scroll(function () {
/* The scroll top plus element height equals to table height */
if ((s.scrollTop() + s.height()) == list.height()) {
/* you code */
}
});
});
I wrote this function using Hussein and Nick's ideas, but I wanted it to use promises for the callback. I also wanted the infinite scrolling area to be on a fixed div and not just the window if the div is sent into the options object. There is an example of that in my second link below. I suggest using a promise library like Q if you want to support older browsers. The cb method may or may not be a promise and it will work regardless.
It is used like so:
html
<div id="feed"></div>
js
var infScroll = infiniteScroll({
cb: function () {
return doSomethingPossiblyAnAJAXPromise();
}
});
If you want the feed to temporarily stop you can return false in the cb method. Useful if you have hit the end of the feed. It can be be started again by calling the infiniteScroll's returned object method 'setShouldLoad' and passing in true and example to go along with the above code.
infScroll.setShouldLoad(true);
The function for infinite scrolling is this
function infiniteScroll (options) {
// these options can be overwritten by the sent in options
var defaultOptions = {
binder: $(window), // parent scrollable element
loadSpot: 300, //
feedContainer: $("#feed"), // container
cb: function () { },
}
options = $.extend(defaultOptions, options);
options.shouldLoad = true;
var returnedOptions = {
setShouldLoad: function (bool) { options.shouldLoad = bool; if(bool) { scrollHandler(); } },
};
function scrollHandler () {
var scrollTop = options.binder.scrollTop();
var height = options.binder[0].innerHeight || options.binder.height();
if (options.shouldLoad && scrollTop >= (options.binder[0].scrollHeight || $(document).height()) - height - options.loadSpot) {
options.shouldLoad = false;
if(typeof options.cb === "function") {
new Promise(function (resolve) {resolve();}).then(function() { return options.cb(); }).then(function (isNotFinished) {
if(typeof isNotFinished === "boolean") {
options.shouldLoad = isNotFinished;
}
});
}
}
}
options.binder.scroll(scrollHandler);
scrollHandler();
return returnedOptions;
}
1 feed example with window as scroller
2 feed example with feed as scroller