We Keep Coding

Preloader That Actually Responds To Loaded Content

I'm trying to build a preloader that actually represents a "percentage" of loaded content. Not necessarily by a number, but using an animated box (scaling from left to right of window). Currently, I'm using this code to determine how many images are on the page, and build a grid when all the images are loaded.
$(document).ready(function() {
num_images = $("img").length;
img_counter = 0;
$("img").css("display", "none");
$(".grid-item").each(function() {
$(window).load(function() {
img_counter++;
if (img_counter == num_images) {
console.log(num_images);
$("img").css("display", "block");
$('.grid').masonry({
itemSelector: '.grid-item',
isAnimated: true
});
}
});
});
});
Then, on window.load I have a preloader that adds a class of "loaded".
$('.preloader').addClass('loaded');
setTimeout(function() {
$('.content').css('opacity', 1);
$('.preloader').css({'transform': 'translateY(-50px)'});
}, 500);
This all gives the illusion that there is a loading feature, but it's not actually showing the "loading" process. How can I determine how much of the content is loaded and display that with the width of the preloader?
Here's a basic test page I'm working with. Thanks a ton in advance! I don't necessarily need answers, but guidance or direction.
http://andyrichardson.design/masonry/

Add an onload function for the images and increase the counter when the pnload function trggers (which mean that the image is loaded)
$(document).ready(function() {
num_images = $("img").length;
img_counter = 0;
$('img').load(function(){
img_counter++;
// do your other stuff here
});
}

How can i Increase/Decrease FancyBox2 popup size after popup display and appending data which is return by an AJAX call

I have an application in which i am displaying a fancybox. After display fancybox i am making an ajax call and that call return some data. when i append that data into fancybox i am getting scrollbars. I want to resize fancybox whenever any data added/removed in fancybox dynamically. Please friends help me on this problem.

Thanks You All, finally i have found the solution, just add these replace this line in your fancybox origHeight = body.outerHeight(true); with origHeight = body.height()+10; and add this line too origWidth = body.width()+10;.
after that just set your height of fancybox to auto and call window.parent.jQuery.fancybox.update() after any append/ remove of your data. Like
$("a.fancy-view").click(function(){
var viewID = $(this).attr("id");
$("#"+viewID).fancybox({
type: 'iframe',
'autoSize': false,
'autoDimensions' : false,
href: $("#"+viewID).attr('href'),
width:600,
height:'auto',
'beforeLoad': function(){
$.fancybox.showLoading();
}
});
});
$(document).ready(function(){
$("#append").click(function(){
$("#mydiv").html(anyhtmldata);
window.parent.jQuery.fancybox.update();
});
});
after done i have found that for what i am looking i got it.

How to initialize Bootstrap script plugins on callback (Infinite Scroll)

I'm working on a website and everything is going great: the elements are rendering and responding to clicks and hovers as I'd like them to, courtesy of Bootplus [a derivative of Bootstrap], the elements are all being put into place correctly, courtesy of Isotope, and elements are even being put into place correctly by Isotope after pagination using Infinite Scroll, courtesy of a callback in the Infinite Scroll function.
However nothing after the first page responds entirely correctly to being clicked in the way that the first page's worth does. (They actually do open as they should (Collapse plugin), but currently as soon as the collapsible comment toggle is selected the website scrolls down so that the toggle button clicked is barely in sight at the top.)
So how do I use a callback function [or something] so that elements loaded by Infinite Scroll behave the same as the original page's elements??????
Current Script:
$(function(){
var $container = $('#ISCONTAINER');
$container.isotope({
itemSelector : '.shifty-item'
});
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)',
bufferPx:900,
itemSelector : '.shifty-item', // selector for all items you'll retrieve
loading: {msgText:"Patience is a virtue.",
finishedMsg: 'Out of new things to show you today.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}//SOMEWHERE HERE IS WHERE I NEED TO ADD IN WHATEVER FUNCTION ISN'T FIRING YET TO MAKE BEHAVIOR AWESOME
);
});

jquery infinite scroll plugin - loading and memory issues

I am using infinate scroll plugin (by Paul Irish). I want to use custom functions when the next page is loading and when the maxPage is reached.
I have tried the below based on the documentation, however this starts the loading function but doesn't ever call the finished function. Its not calling the next page either when I look in the console. What am I missing?
// Infinite Ajax Scroll configuration
$container.infinitescroll({
navSelector: "div.paginate",
nextSelector: "div.paginate a",
itemSelector: "div.element",
maxPage: 5,
loading: {
start: function(){
alert('started');
},
finished: function(){
alert('finsihed loading');
}
}
},
function(newElements) {
var $newElements = $(newElements).css({opacity: 0});
//remove the first item
$newElements.splice(0, 1);
$container.isotope('appended', $newElements);
}
});
});
The scrolling could go on for pages and pages until the browser crashes due to memory issues, I therefore need to stop infinite scrolling when the current page gets to maxPage and allow the user to select a "Load More" button. Hopefully solving memory issues.
This is discussed in the link below but I cannot find any further documentation on how to do this exactly and cann't even get the above sample to work.
https://github.com/paulirish/infinite-scroll/issues/300

First, ensure it works will the minimum options (plus console debug messages):
$container.infinitescroll({
navSelector: "div.paginate",
nextSelector: "div.paginate a",
itemSelector: "div.element",
debug: true
});
If it does, add in options until it breaks.
I recommend debugging the start/finished functions in the console, like this:
loading: {
start: function(){
console.log('started');
},
finished: function(){
console.log('finsihed loading');
}
}
Consider adding the errorCallback option to debug ajax issues.

Control the Duration Of The Fade Function In MooTools 1.2

I'm using a very simple fade function with MooTools 1.2 (I 'have' to use MooTools 1.2 due to a complication over another function being called on the same page). I'm basically fading a title in on my page. Everything works great but I can't seem to find documentation on how to control the duration simply. Everything I find seems to refer to other functions and I'd like to keep this as simple as possible. Here's the javascript I've got:
window.addEvents({
load: function(){
var singleImage = $('myimage2');
singleImage.set('styles', {
'opacity': 0,
'visibility': 'visible'
});
singleImage.fade('in');
}
});
So as you see, it takes an image with id="myimage2" (which I have initially hidden with CSS) and fades in when the document is ready. It fades in quickly and I'd like it to fade in more gradually. Any ideas? Thanks.

Using the example from your previous question - http://jsfiddle.net/RNeS5/208/
// set-up an event on the browsers window
window.addEvents({
// be sure to fire the event once the document is fully loaded
load: function(){
// assing 'singleImage' variable to the image tag with the 'image' ID
var singleImage = $('image');
// set a bunch of CSS styles to the aforementioned image
singleImage.set('styles', {
'opacity': 0,
'visibility': 'visible'
});
// fade in the image
singleImage.set('tween', { duration: 2000 }).fade('in');
}
});