Preloading JS calculation prior to images loading - javascript

This is essentially a follow up question to this question:
Positioning a div relative to a fixed div with responsive content
So we are on the same page, it might help if you read through that article! :)
Thank you in advance.
I am using the Javascript from the linked article's answer for a separate project where the "color" div is now a "content" div and inside of my content div are roughly 30 images. I'm having no issue getting my "content" div to position correctly with the fixed div now, but the issue I'm having is when I incorporate the Javascript that positions the "content" div, it is calculating and positioning the "content" div AFTER everything in that div is loaded. So essentially the first image is getting hidden under the fixed header until all the images are loaded and then it will position it where it needs to be. I need it to position the "content" div prior to any of the images inside of the "content" div loading.
I have done research trying to figure out how to pick and choose which code gets read first, but all of the things I have tried haven't worked yet. My most recent attempt was putting the JS that positions the "content" div right below the "head" and before the "body" so it is read first, but it still doesn't position the "content" div until everything in it fully loads.
Where am I going wrong?
Here is a JSFiddle with the code: https://jsfiddle.net/8wkotamf/
Here is the Javascript (also in the JSFiddle):
window.addEventListener('load', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
window.addEventListener('resize', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
It will be nearly impossible to recreate the issue on the JSFiddle because since the images aren't actually embedded, it loads instantly and you can't tell that the positioning happens after they are all fully loaded. Hopefully all the code will make it an easy fix though! Fingers are crossed!
Thank you guys so much. I appreciate it immensely.

window.addEventListener('load' ... fires when everything in the window has loaded - the HTML document and all content including images. You want your function to run when the document is loaded, ie the DOM is ready, but not necessarily waiting till all other resources such as images are fully loaded.
If you don't need to support IE 8 or lower try document.addEventListener("DOMContentLoaded", function() {... instead. This will fire when the DOM is parsed and ready, not waiting till images etc are loaded. If you do need to support old IE versions use Jquery's $(document).ready().
See window.onload vs $(document).ready() for more information.

Related

Want to change sticky sub nav position on window resize depending on header height

I'm very unfamiliar and still learning javascript/jQuery and I'm having trouble putting together the syntax to change a secondary navigation bar offset position to stick to a header that adjusts its size when the screen size changes (logo is setup to viewpoint percentage, hence its height varies with screen size).
So far I got the first part of the following script to calculate the header outerHeight and it works on any screen size but only on the first page load (not while resizing in real time).
jQuery(document).ready(function resizeHeader ($){
$('#CPOP-header').each(function(){
$('#CPOP-sticky-sub-menu').css({
'top' : $(this).outerHeight(true) + 'px'});
});
$(function() {
$(window).on('resize',resizeHeader);
alert($('#CPOP-header').outerHeight(true)+'px'); // works on first page load only, will remove later
});
});
However, I want it to "monitor" browser window resize dynamically to avoid browser refresh but I can't figure out how to bind or merge the second part on the same script since I'm not very familiar with javascript/jQuery:
$(function() {
$(window).on('resize',resizeHeader);
alert($('#CPOP-header').outerHeight(true)+'px'); // works on first page load only, will remove later
});
This is for a WordPress/Elementor website, the code will be inserted in an HTML widget.
Any help will be much appreciated!
if anyone is looking for something similar, here it is
const $ = jQuery;
function resizeHeader () {
$('#CPOP-header').each(function(){
$('#CPOP-sticky-sub-menu')
.css({'top' : $(this).outerHeight(true) + 'px'})
});
}
jQuery(document).ready(resizeHeader);
$(window).on('resize',resizeHeader);
Thank you to u/toi80QC at reddit for taking the time and giving a hand!

HTML localStorage CSS Issues?

Okay so I've successfully managed after a couple of hours to call over an image using HTML localStorage system but I now have one problem with the called over image.... I can't dictate where it goes..... It just sits at the bottom of the page as the code is purely javascript..... I've tried putting it in a div and changing its position but it won't budge any suggestions.... heres the code thats calling the image across:
window.onload = function() {
var picture = localStorage.getItem('img');
var image = document.createElement('img');
image.src = picture;
document.body.appendChild(image);
};
How can I edit the position on the page as well as the hight etc......................? Any help appreciated!
You're appending the image to the document body, so likewise, it's going to be added to the bottom of the page.
You can set the properties of image.style to change the image's CSS properties such as height (image.style.height) and width (image.style.width).
To position it elsewhere on the page, you can change it's display properties
image.style.position = "absolute"; //(for example)
image.style.top = "50px"; //drops the image down 50px from the top of the page
Or, you can add it to a different part of the DOM altogether:
document.getElementById('ID_OF_YOUR_DIV').appendChild(image);
Hope this helps.

Test if element can be seen by the user on an html page

Is there any way to know if an element is visible on an html page?
Like this:
One can probably do it considering the horizontal/vertical scrolling positions, the width/height of the browser window and the position/size of the element on the page, but I have little experience in jQuery so I don't know how to do it. And there might be a simple function one can call, I don't know.
You can use the .is(':visible') selectors to check if an element is currently visible in the DOM.
Edit:
However, as #BenM mentioned, this doesn't check if the elements on your page are actually out of your scrollable range - a great little plugin you could use in that case would be Viewport Selectors for jQuery.
Here is some code that I use to do this. It has been tested to work great.
function isVisible($obj) {
var top = $(window).scrollTop();
var bottom = top + $(window).height();
var objTop = $obj.offset().top;
var objBottom = objTop + $obj.height();
if(objTop < bottom && objBottom > top) {
//some part of $obj is visible on the screen.
//does not consider left/right, only vertical.
}
}

Get Default Height Of Element On Webpage after css height has been applied)

How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.

How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

I've got a web application that loads some content from an external source to the dom via an ajax call, one of the things that comes back is a set of images (different sizes and aspect ratios) to be displayed in an profile photo section. I'd like for each of the images to be resized to fit within a 64px x 64px area and I'd like to maintain aspect ratio. I was able to do this in firefox, chrome, and safari, but I've no luck getting this to work in IE 7 or 8. The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load. Here's what works in the listed browsers:
$(window).load(function () {
$('.profileThumbnail').each(function (i) {
var divHeight = $(this).height();
var divWidth = $(this).width();
if (divHeight > divWidth) {
$(this).css('height', '64px');
$(this).css('width', 'auto');
}
else {
$(this).css('height', 'auto');
$(this).css('width', '64px');
}
divHeight = $(this).height();
var divParentHeight = $(this).parent().parent().height();
var divNewHeight = (divParentHeight - divHeight) / 2;
$(this).parent().css('top', divNewHeight);
divWidth = $(this).width();
var divParentWidth = $(this).parent().parent().width();
var divNewWidth = (divParentWidth - divWidth) / 2;
$(this).parent().css('left', divNewWidth);
});
});
I'm also trying to center (horizontally and vertically) them which is what the rest of that code does, but I think I've got all of that working if I can find a way to trigger this code after the image loads in IE.
keep in mind this needs to work both on the first visit (not cached) and subsequent visits (cached). I'm looking for a jquery, javascript, or css solution as I want to avoid the roundtrip/bandwidth for each image.
Have you tired to add a load event to the images yourself which triggers when the image is loaded? This is how image preloaders work.
var img = document.createElement("img");
img.onload = function(){ alert('loaded'); }
img.onerror = function(){ alert('error'); }
img.src = "foo.png";
You can add the onload to the image elements themselves if you are not doing the preload approach.
The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load.
Instead of setting an onload listener for the window, set an onload listener for the images you are loading remotely. Set the listener after you create the image object and before you insert it into the body. The listener can basically be all the stuff insife of the .each() in the code you posted,

Categories

Resources