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.
}
});
Related
We have been looking for a while now but still haven't found the solution to this matter.
We are designing the site in wordpress
URL: http://jouwdesign.be/fontanella/site/lunchmenu/
The golden menu (.submenu) has a script linked to it wich should add the class 'test' when scrolling vertically past 100 pixels. For some reason it wouldn't even display a classchange when inspecting in chrome or any other browser. We already tried to disable all custom js and plugins but no luck so far.
Here is the jQuery:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() >= 100) {
$(".submenu").addClass("test");
}
});
});
Anyone who has experienced the same problem in wordpress or any other ways?
Thanks!
Found the solution. I had to remove 'height 100%' on my body tag in css
All works fine now!
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 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');
}
});
I guess I need help. I'm trying to work with jQuery and I don't know much, but I'm having this problem with the "color active" of the menu.
Here is an simplified version of my work: http://jsfiddle.net/paulakfleck/aZGKz/
Here is the whole work (complete): http://nartecrobotica.com.br/g4/
As you can see, when I click in the menu, the "active color" works, but when I scroll the page or open the page, do not.
I guess the big mistake is in this line:
if($(window).scrollTop() == $("#g-4")){...}
I put the #g-4 as an example, but isn't working too.
I try other answers at Stackoverflow, but I'm unable make that work.
Some light, please?
If you want your menu to change as you scroll, you could try this:
$('.grid').each(function () {
if ($(window).scrollTop() > $(this).position().top - ($(this).height() / 2)) {
$('.myList a').removeClass('active');
$('.myList a#menu' + $(this).attr('id').split('-')[1]).addClass('active');
}
});
Updated your jsfiddle here.
are u looking for this ..
If yes then i am using .offset().top to compare.
one problem that was $(window).scrollTop() gives the scrollbar postion in integer and your divs position is fixed hence you need to do a range check before you apply the class.
Check demo
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.