Scroll calls ajax at wrong time - javascript

I am trying to use the following function to load an ajax call when the user scrolls to the bottom. However, for some reason the function only fires the ajax call when the user scrolls to down and then back to the top. Here is my code:
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php",
success: function(html)
{
if(html)
{
var el = jQuery(html);
jQuery(".content").append(el).masonry( 'appended', el, true );
$('div#loadmoreajaxloader').hide();
}else
{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});

Check it like this:
fetchContent = function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
console.log('At bottom!!');
// Remove the handler temporarily, so no more scroll events will fire.
$(window).off('scroll', fetchContent);
// Make the AJAX call.
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php",
success: function(html)
{
if(html)
{
var el = jQuery(html);
jQuery(".content").append(el).masonry( 'appended', el, true );
$('div#loadmoreajaxloader').hide();
}else
{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
// Re-attach the handler, so scroll events will fire again
$(window).on('scroll', fetchContent);
}
});
}
};
$(function() {
$(window).on('scroll', fetchContent);
});
EDIT:
I've done a JSBin which displays a div when user scrolls to the bottom. You can see it here: http://jsbin.com/axobow/2
I know that's not exactly what you need, but it should give you an idea. Iv'e also updated the code a little bit to go inline with what you should have as the final product.
Please check.

$(window).scroll(function()
{
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//do your stuff here
}
});

Related

Load data on scrolling right

I created a page in which to view data we scroll on right instead of down. Now I tired to load data while scrolling instead of loading the entire page at first. I can work around if it is down scroll. This is the code that I'm working on:
$(document).ready(function() {
var win = $(window);
win.scroll(function() {
if ($(document).height() - win.height() == win.scrollTop())
{
$('#loading').show();
$.ajax({
url: 'load.php',
dataType: 'html',
success: function(html) {
$('#data').append(html);
$('#loading').hide();
}
});
}
});
});
I referred and worked on this code from here. Now i need to load data when I'm scrolling right. I tried taking the difference in width but it is not working. Is there any other work around ?
may be something like this ?
$(document).ready(function() {
$('ul').scroll(function(event) {
if (this.scrollWidth - this.clientWidth - this.scrollLeft < 50) {
$(this).append('<li>data 1</li><li>data 2</li><li>data 3</li><li>data 4</li>')
}
});
});

Javascript don't work on ajax generated part

I have a little problem with ajax generated part - javascript don't work on this generated part.
There is ajax call:
<script>
$(window).on('scroll', function() {
$("#preloadmore").show();
if ($(window).height() + $(window).scrollTop() + 350 >= $(document).height()) {
//AJAX
var idlast = 256;
$.ajax({
url: "ajax/loadmore.php",
type: "POST",
data: {
id: idlast
},
success: function(result) {
if (result != "") {
$("#preloadmore").hide();
$("#loadmore").html(result);
} else
alert("Error 504");
}
});
}
});
</script>
In body I have part to display ajax result:
<div id="loadmore"></div>
When ajax input content in loadmore div, javascript don't work on this part.
There is jquery - don't work:
$('.rating').on('rating.change', function(event, value, caption) {
alert('Test');
});
Thanks
I don't quite grasp how .rating is related to the 2 code snippets before it. Anyways, I hope I got your problem right.
// I assume your .rating field is dynamically loaded inside #loadmore
$('#loadmore').on('change', '.rating', function(e){
alert('Test');
alert( $(this).val() );
});
// If your .rating field already exists, then try this
$('.rating').on('change', function(event) {
alert('Test');
alert( $(this).val() );
});
Reference: http://api.jquery.com/on/

scrolling position keeps going to top without me telling it to

I have a function that loads new items when I get close to the bottom of the page. It works great, the only issue is that when the new items load, then the scrolling position goes all the way back to the top, which is very messy and not what I want. Here is the function:
function loader(url) {
$.get(url, function(data) {
$newPosts = $(data).filter(function(){
return this.id === 'posts';
}).children();
$newPosts.hide();
$wall.masonry('destroy');
$('#posts').append($newPosts);
$newPosts.each(function(){
$(this).fadeIn('slow');
});
$wall.masonry({
itemSelector: '.entry, .entry_photo',
isAnimated : false
});
}).error(function(url) {
alert('error');
});
};
Jsfiddle
So as you can see, it jumps right back to the top and looks jagged. How can I prevent that? And why does it happen?
Seems to me that the call to destroy in masonry is the root of the issues here.
Use the appended method
$wall
.append( $newPosts )
.masonry( 'appended', $newPosts );
.masonry( 'layout' );
Replace your scroll function with this scripts and see.
DEMO http://jsfiddle.net/yeyene/ajjaz/7/
$(window).scroll(function(){
if ($('#posts').outerHeight() - $('body').scrollTop() - 420 <= 0) {
loader(site);
$('html, body').animate({ scrollTop: $(this).scrollTop() }, 'fast');
page += 1;
}
});

Div moves out of window when resized

Whenever i resize the browser, the div moves out of window. I use jquery scroll to plugin for navigating through divs. But when i resize the #home div it works fine, but when i resize other divs, it gets out of window.
Please help me out, here is the link to the website.
Here is the code i used,
$(document).ready(function()
{
$("#bg-home").backstretch("images/Bg-home3.jpg");
var images = ['1.jpg', '2.jpg','3.jpg'];
$("#container").backstretch('images/' + images[Math.floor(Math.random() * images.length)]);
$( "#draggable" ).draggable({
drag: function() {
$(".scrolldown span").css("color","lightgreen").html("Drop");
},
stop: function() {
$(".scrolldown span").css("color","white").html("Drag");
},axis: "x",containment:"#menu",scroll: false//,grid: [ 159,0 ]
});
$(".content,.content1").droppable({drop: function() {
var $url = $(this);
document.title = $url.attr('alt');
$('html, body').scrollTo($url.attr('id'),500,"easeInOutExpo");
//event.preventDefault();
}});
$("#welcome").effect("slide",3000);
$("#welcome").click(function()
{
$("#welcome").animate({left: "-1000px"},"easeInOutBounce");
$(".about_w").animate({left: "100px"},"easeInOutBounce");
$(".about_w").delay(4000).animate({left: "-800px"});
$("#welcome").delay(4500).animate({left: "100px"});
});
$('#menu a').bind('click',function(event){
var $url = $(this);
document.title = $url.attr('alt');
$('html, body').scrollTo($url.attr('href'),500,"easeInOutExpo");
event.preventDefault();
});
$("#about .text p").vertiscroll({ width:6, color:'#f07','cover': 200,'areacursor': 'pointer' });
$('.side_container').slimScroll({
height:"88%",
color: '#fff',
start: $('.side_container'),
alwaysVisible: false
});
$('#container_wrap_metro').slimScroll({
height:"400px",
color: '#fff',
railVisible: false,
alwaysVisible: false
});
$(".menu nav").click(function(){
$url = $(this);
$(".text p").load($url.attr('id'));
});
function loading_show()
{
$('#loading').html("<p style='color:white;'>Loading</p><br><img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide()
{
$('#loading').fadeOut();
}
//Status
function loadData(page)
{
loading_show();
$("#container_wrap_metro").html("");
$.ajax({
url: "load_data.php",
type: "post",
data: "page="+page,
success: function(data){
loading_hide();
$("#container_wrap_metro").html(data);
},
error:function(){
alert("failure");
$("#container_wrap_metro").html('Unable to process request!');
}
});
}
function loads(page)
{
$.ajax({
url: "load_10.php",
type: "post",
data: "page="+page,
success: function(data){
$(".side_container").html(data);
},
error:function(){
alert("failure");
$(".side_container").html('Unable to process request!');
}
});
}
loads(1);
//Search
$("#result").keyup(function(){
$(".side_container").html('<center><i>Fetching...</i></center>')
var q = $(this).val();
$.get("results.php?q="+q, function(data){
if(q){
$(".side_container").html(data);
}
else {
loads(1);
}
});
});
});
Try editing the following lines:
$("#welcome").animate({left: "-1000px"},"easeInOutBounce");
$(".about_w").animate({left: "100px"},"easeInOutBounce");
$(".about_w").delay(4000).animate({left: "-800px"});
$("#welcome").delay(4500).animate({left: "100px"});
And:
height:"400px",
The earlier response is right. When it comes to responsive web design, use em or % when setting the sizes. You can use 100% instead or 40 em. You can change the values until you get the desired output.
For this you need responsive designs and for that you need to give widths as in "%" everywhere But in your script you are using left:..px like that....Its creating the problem.So First thing better to give them responsively or second thing replace it with the responsive one..
Try this LINK

event.preventDefault not working. Ajax call causing this?

I'm trying to use scrolltop method and event.preventDefault is not working properly.
What I'm experiencing is that the page scrolls UP first then scrolls down.
It seems that The onclick causes the page to resubmit or something... (ajax post??)
I have following code
button (trigger)
<a id="nextset" class='nextbtn' >Next Step</a>
event
jQuery('#nextset').click(function (event) {
event.preventDefault();
movenext('set');
jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 2000);
});
functions
function getfav(obj) {
var myParams = "{ 'proattr':'" + obj + "'}";
jQuery.ajax({
type: "POST",
url: "project.aspx/getproject",
data: myParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () { jQuery('#wait').show(); },
complete: function () { jQuery('#wait').hide(); },
success: function (msg) {
GetProjectPic(msg.d, obj); //creates DOM and insert in div
Initbtns();// dynamic btns initialization
}
});
}
function movenext(obj) {
//other codes to hide/show DOM
getfav(nextobj);
}
If I add return faulse; in onclick event, the button doesn't work.
Any idea what's causing the scrolling to the top?
UPDATE:
It was caused by code block inside movenext function.
jQuery('[id^="favdiv"]').empty();
nothing to do with event.preventDefault.
The strange thing is that the screen scrolls much more than hidden div height ("favdiv") which causes up and down screen effect. I'm not sure how to prevent it...
UPDATE2
I searched jquery empty method and found this.
jquery "empty" changes the scrollbar
You can avoid the default behaviour by using the following snippet:
<a id="nextset" class="nextbtn" href="javascript:void(0);">Next Step</a>
Did you by any chance try putting "return false" at the end of your click event?
jQuery('#nextset').click(function (event) {
movenext('set');
jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 2000);
event.preventDefault();
return false;
});
I end up writing something like this. still it goes up a bit but at least page doesn't jump
jQuery('#favdiv' + obj).fadeOut('fast', function () {
jQuery('#favdiv' + obj).remove();
});
setTimeout(function () {
jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 1500);
}, 500);

Categories

Resources