I tried to search it over SO and there are many question asked like this but non of them has the answer. I want to implement a Scrollable Div to load dynamic content without any plugin. I am implementing JQuery itself but do not want to add other plugin.
I know how to do this on whole document as most of the questions suggest
$(window).scroll(function()
{
if($(window).scrollTop() + $(window).height() > $(document).height() - 100)
{
}
});
but now how can I implement this on a single div? So, that when I scroll my div at bottom then it loads content with ajax?
Try this:
$('#yourdiv').bind('scroll', function(){
if ($(this).scrollTop() +$(this).innerHeight()>= $(this)[0].scrollHeight)
{
$('#result').append('Bottom of your div');
}
});
Related
I am trying to detect when the browser has scrolled all the way to the end of a div, to trigger an action when that occurs - add a class to the div divToCheckEndOf
I found a jQuery solution that checks for scrollTop and height of the window and document.
$(window).scroll(function () {
if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - divToCheckEndOf.innerHeight())) {
divToCheckEndOf.addClass('abs');
} else {
divToCheckEndOf.removeClass('abs');
}
});
This code works fine on large desktop resolutions, but it fails on laptop resolutions and mobile devices.
Any feedback appreciated.
Thanks!
Not sure what the issue was here, but I ended up using this good old jquery solution:
if ($(window).scrollTop() > section.height() {
//we are underneath the section
}
I created a website that loads data as you scroll down. Every time you hit the bottom of the page, it loads another 100 rows. I'm trying to replicate this in a div so that the header is always at the top no matter how far you scroll down.
I'm using JQuery and the scrollTop() function to do this.
Here is my code that works if it is not detecting the scroll bar in the div, but the whole window.
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
for(i; i < size+100; i++){
document.getElementById('myTable').innerHTML += IPAMArray[i];
}
size = i;
}
});
Now i change the div to this:
<div class = "tableDiv" id="myTableDiv" style="height:800px;width:1000px;border:1px solid #ccc; overflow: scroll;"><table id = "myTable"></table></div>
I dont know how to change this line from "document" and "window" to the correct div variables:
if ($(window).scrollTop() == $(document).height() - $(window).height()){
Here is where i'm currently at with that line:
if ($("div.tableDiv").scrollTop() == $(document).height() - $("div.tableDiv").height()){
I've tried quite a few variants, but i'm completely guessing the code so it could take forever. I would prefer to refer to this div by its ID rather than its class, but i just started using the class references because thats how most of the examples are online. I have tried $(document).getElementById('myTableDiv') in various ways as well but cant seem to find the solution.
if ($("#myTableDiv").scrollTop() == $("#myTable").outherHeight() - $("#myTableDiv").height()){
use ids to identify elements
the height of the inner element is what you need ($("#myTable").height())
jquery's height() function doesn't include borders margins and / or paddings as noted in the doc. Use outherHeight() instead.
OR
make your header position: fixed in css
I have more than 70 divs on my page.
I don't want to show all the divs at once until user scrolls page.
I am trying to hide overflown elements on my page, while user scrolls the page , hidden divs should be fading in again.
But i am not able to hide overflown elements and not finding any way to fadeIn overflown elements again if window is scrolled.
However i gave it a try-
$(function(){
$(window).css("overflow","hidden");
var lengthy= $('.content').length;
alert(lengthy);
var scrollbottom= $(window).scrollTop()+$(window).height();
$(window).scroll(function(){
$(document).css("overflow","hidden");
if($(window).height() >scrollbottom)
{
$(document).fadeIn();
}
});
});
Jsfiddle
How can this be done?
EDIT your Jquery to somthing like this
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
What this does is the scroll happens when it's reaches 10px before end of page and not necessary the very end of the page. It's not necessary to have it, but it gives greater control to define at what point page should scroll...
This Example will show you what i think you want
http://www.webresourcesdepot.com/dnspinger/
I'm building a HTML website where I would like to load an iframe if the user scrolled nearly to the bottom.
(The iframe contains a lot of JavaScript heavy follow me widgets that are slowing down the website if they would be loaded directly)
How can that be done?
Thanks. Uli
use .scroll()
Like so:
$(window).scroll(function() {
if(($(window).scrollTop() + $(window).height()) == $(document).height()) {
$('div').append('<iframe></iframe>');
}
});
Here's a fiddle with an example - http://jsfiddle.net/vRLsg/
You can calculate the position when you scroll
$('body').scroll(function(){
if ($('body').scrollTop() == $('body').height()){
loadIframe();
}
});
Have a look at this jsfiddle - I guess it does what you need.
I'm searching for jquery pluging where I can showing 3 table based record and on scrolling it should make ajax request for next 3-10 record. similar to lazyload but for content. any code snippet even help me.
Something like this?
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
// The scrollbar is at the bottom of the screen
// Do your ajax call here and populate a div.
}
});