Develop Reference

Fade In ajax results AFTER images are loaded

I found a few questions similar to mine, but nothing to do with a filter result so I have been struggling finding something that works for me. On a website page, I have image tiles that are filtered down when different links are clicked. My problem is that my fade in trigger is happening when the images are still loading and it looks horrible.
How can I trigger my fadeIn to go off only after all my images are fully loaded?
$(document).ready(function() {
$(document).on('click', '.js-filter-item > a', function(e){
e.preventDefault();
var category = $(this).data('category')
$.ajax({
url: wpAjax.ajaxUrl,
data: { action: 'filter', category: category },
type: 'post',
beforeSend: function() {
$("#projects-container").slideUp();
},
success: function(result) {
$("#projects-container").hide().html(result).fadeIn(1500);
$(".misha_loadmore").hide();
},
error: function(result) {
console.warn(result);
}
});
});
}

Thanks to #imvain2 for pointing me in the right direction. Here is what ended up working for me. I'm pretty sure it's just delaying the load time using setTimeout, it doesn't seem like the imagesLoaded function works very well for me, but it looks a lot smoother. Hope this helps anyone with my same issue.
success : function(data) {
$(data).hide().appendTo('#projects-container');
var imagesCount = $('.project-image').find('img').length;
var imagesLoaded = 0;
$('.project-image').find('img').load( function() {
++imagesLoaded;
if (imagesLoaded >= imagesCount) {
$('#projects-container').children().show();
}
});
var timeout = setTimeout(function() {
$('#projects-container').html(data).slideDown();
}, 1500);
},

scrollTop works only partially - it stops after 1-2 cm

For some reason .scrollTop works only partially. It starts scrolling and stops after 1-2 cm. It's a large page and container #topdiv is located at the top part of the page. All other functions - .prepend .hide .close works fine here. Console doesn't show any errors. I tried .scrollTo instead of .scrollTop - the same result.
jQuery(function ($) {
$(document).ready(function () {
$(document).on('submit', '#saverepost', function (e) {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "/script.php",
data: str,
beforeSend: function () {
$('#message').show();
$("#message").html('<img src="/loading.gif" />');
},
success: function (msg) {
$.lbox.close();
$("#message").hide();
$("#posts").prepend(msg);
$("#topdiv").scrollTop(0);
}
});
return false;
});
})
});

If you want to scroll the actual window you don't target a div
$("#topdiv").scrollTop(0);
If you want to scroll the entire page do this
$('html,body').scrollTop(0);

how to scroll to a specific div when a radio button is clicked/changed

I am trying to scroll the page to "#Table_Details" using the scroll plug in. But i can't seem to get it working.
When i click/change the radio(.ModemsSelect) button the page scrolls to the location of the radio button i just clicked instead of scrolling down the page where my table("#table_Details") is located. I am not sure if i am doing this right or what is going on.
$(".ModemsSelect,.ServicesSelect").change(function (e) {
var data = $("#" + this.value).serialize();
var request = $.ajax({
url: "classes/sCart.php?action=add",
type: "POST",
data: data,
dataType: "html",
radioButton: $(this).attr('class')
});
request.success(function (data) {
//$(".in_cart").html("");//clear last item selected
console.log("extra item added to cart");
refreshCart();
if (this.radioButton == "ModemsSelect") {
$.scrollTo($('#Table_Details'));
$("#icon_check_modem").html("");
$("#icon_check_modem").html("<img src=\"../img/check_icon.png\">");
$('.Modem_buttonNext').button("enable");
} else if (this.radioButton == "ServicesSelect") {
$("#icon_check_Installtype").html("");
$("#icon_check_Installtype").html("<img src=\"../img/check_icon.png\">");
$(".install_buttonNext").button("enable");
} else {
}
});
});
Any help is appreciated.
thank you.

working fiddle http://jsfiddle.net/ePstY/
You must replace this:
$.scrollTo($('#Table_Details'));
with this:
$('html, body').animate({scrollTop:$('#Table_Details').position().top}, 'slow');

Try doing it this
$('html, body').animate({
scrollTop: $("#Table_Details").offset().top
}, 2000);
Instead of this:
$.scrollTo($('#Table_Details'));
I got the code from this article: SMOOTHLY SCROLL TO AN ELEMENT WITHOUT A JQUERY PLUGIN
Here's a working fiddle

Scroll calls ajax at wrong time

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
}
});

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);