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
});
}
Related
I have the following code which works exactly as I need for refreshing a page using a submit button.
However I have added code in it to make it scroll down to a specific location after updating, the problem is, it scrolls down to the location, then springs back to the top of the page
any ideas why anybody please?
$(".visitpage").on('click', function() {
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
$('html, body').animate({
scrollTop: $("#search-results").offset().top
}, 2000);
});
function removeLoader() {
$("#loadingDiv").fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").remove(); //makes page more lightweight
});
}
You will surely need the scrollTo method of the window object in javascript. Then I would figure out how far down your element is by getting a reference for that object in pixels on the page. See Retrieve the position (X,Y) of an HTML element for how to do that, since part of your answer would be a duplicate question I will let you read it. And this article is helpful http://javascript.info/coordinates
window.scrollTo(500, 0);
https://www.w3schools.com/jsref/met_win_scrollto.asp
Maybe I'm wrong here; but if you created a div where you want the page to scroll, or if you have on there make sure it's named, then right after the refresh command add
window.location.href = "#YOURDIVTAGHERE"; so
So if this is the part of the page you want it to go down to:
<div id="search-results">
CONTENT
</div>
so then your JS code, maybe try:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(".visitpage").on('click', function(){
$('body').append('<div style="" id="loadingDiv"><div class="loader"></div><center><span style="font-size:22px;color:#000000;z-index:99999;"><b>Updating your results...</b></span></center></div>');
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
window.location.href = "#search-results";
}
I want to achieve a sticky menu like the left navigation on this page: http://getbootstrap.com/2.3.2/scaffolding.html.
My menu is a nav element with position:relative (I tried static as well) that goes fixed when it reaches the top of the viewport.
here's my function:
$(document).ready(function() {
function stickyNav() {
var elementPosition = $('nav').offset();
console.log(elementPosition);
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('nav').addClass("sticky");
} else {
$('nav').removeClass("sticky");
}
});
}
stickyNav();
}); //document ready
the console.log(elementPosition); returns an offset top of around 1200px on page load, which is wrong. But if i resize the page, the value changes to around 650px which is the correct offset top and the function does what it is supposed to be doing.
I've looked around and found out that offsetp top maybe wrong when it's on hidden elements, or it has issues with margins but I actually don't have any complex structure here, just a single visible nav element .
any help on figuring this out would be much appreciated! thanks!!
jQuery(document).ready handler occurs when the DOM is ready. Not when the page is fully rendered.
https://api.jquery.com/ready/
When using scripts that rely on the value of CSS style properties,
it's important to reference external stylesheets or embed style
elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the
dimensions of an image are required), the code should be placed in a
handler for the load event instead.
So if you're using stylesheets that are loaded AFTER the script in question, or the layout of the page depends on image sizes, or other content, the ready event will be hit when the page is not in its final rendering state.
You can fix that by:
Making sure you include all stylesheets before the script
Making sure the CSS is more robust, and doesn't depend that much on content size (such as images)
Or, you can do this on window load event.
Edit:
If you want to make your script dependent on more than one async event (like the loadCSS library), use this:
var docReady = jQuery.Deferred();
var stylesheet = loadCSS( "path/to/mystylesheet.css" );
var cssReady = jQuery.Deferred();
onloadCSS( stylesheet, function() {
cssReady.resolve();
});
jQuery(document).ready(function($) {
docReady.resolve($);
});
jQuery.when(docReady, cssReady).then(function($) {
//define stickyNav
stickyNav();
});
You can add a check to see if your CSS has loaded by setting a style tag in your document which shows a test element, and then overwrite this in your CSS file to hide it. Then you can check the status of your page by checking this element. For example...
In your HTML:
<div id="loaded-check" style="display:block; height:10px; width:10px; position:fixed;"></div>
In your CSS:
#loaded-check { display:none; }
In your jQuery script:
var startUp = function() {
var cssLoaded = $('#loaded-check').is(':visible');
if (cssLoaded) {
$('#loaded-check').remove();
doOtherStuff()
}
else {
setTimeout(function() {
startUp();
}, 10);
}
}
var doOtherStuff = function () {
//bind your sticky menu and any other functions reliant on DOM load here
}
I'm building an JQM app and I'm having a few JS problems which im sure are quite easy to fix but I dont know much JS.
1) I'm placing divs on top of an image which links to over images. So when the app loads the divs are visible and then they fadeout. The problem is I want them to still be clickable and link to the other images when they are invisible.
CODE
setTimeout(function () {
$(".link").fadeIn(3000);
$(".link").fadeOut('slow');
}, 2000 /* Time to wait in milliseconds */);
setTimeout();
Simple but I want to just make them not viewable and keep the link.
2) my second problem is I have a sound file that plays onload and two images that turn the sound file on and off. The code I made will only change the image on the home page and will not work on any other page (turning the sound on and off works but the image wont change)
CODE
function playSound() {
sound.play();
}
sound.play();
newsrc = "soundOff.png";
function changeImage() {
if ( newsrc == "soundOff.png" ) {
document.getElementById("sound").src = "img/soundOff.png";
document.getElementById("sound").alt = "Sound Off";
newsrc = "soundOn.png";
sound.pause();
}
else {
document.getElementById("sound").src = "img/soundOn.png";
document.getElementById("sound").alt = "Sound On";
newsrc = "soundOff.png";
sound.play();
}
};
From the jQuery manual:
The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.
If you set the display property back to inline or block after the fadeOut() is finished, the elements will remain clickable. You can do this using the complete paramater of fadeOut(). Something like this should work:
$(".link").fadeOut('slow', function(){
$(".link").css({"display":"inline"});
});
When .fadeOut is complet element display is none and not clickable. You should change element display property and hide it by visibility property. I would do that this way:
$(".link").fadeOut('slow', function(){
//animation complete callback
$(this).show().css('visibility', 'hidden');
});
I'm trying to scrape images from a url, and only allow the user to pick images that are of a certain size. I was having issues getting this to work good with Nokogirl, and thought about just proceessing it client side with jquery when the page to select the image's appears. For some reason, it isn't working 100%
.select_product is the name of the image class that renders images for the user to select.
$(document).ready(function () {
$("img").load(function () {
$(".select_product").each(function () {
var width = $(this).width();
if (width < 100) {
$(this).hide();
}
});
});
});
This js works, but for some reason it always see's the width on the "this" as having a width < 100, when in fact some images are certainly higher.
load event is fired once for every image, supposing you have 10 images, it's fired 10 times and when the first image is loaded the handler is executed even if other images are not loaded yet, you can listen to the load event of the window object instead:
window.onload = function() {
$(".select_product").filter(function() {
return $(this).width() < 100;
}).hide();
}
But I would read the images' width on the server-side instead of loading and then hiding them, also note that jQuery load() event method as of jQuery 1.8 is deprecated.
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');
}
});