jQuery Lazy load for animated scrolling - javascript

I would like to use Lazy load to my site, but there is a little problem: I scroll the content with JS (animate the content with X px ), so I don't use the scrollbars. Sadly, lazy load doesn't trigger in this case. Got any ideas how to make this?
My site scrolling horizontally, all content div-s float near each other and only the current one is visible, all other are on display: none;
Here is a not so pro pic of my site: I marked with black the visible area and with red, the moving parts.
my site in pic

All I can think of is hook into when the content slides, then add the images in or the whole content with AJAX if thats your aim. Plugins will usually focus on the majority of use cases, so Lazy load might not be good for you.

I would just write my own simple lazy load script:
$(function(){
$('img').each(function(){
var $this = $(this)
$this.data('origImg',$this.attr('src'))
$this.removeAttr('src') // or set a placeholder img
})
var $window = $(window), $container = $('#sliding_content')
window.lazyLoad = function () {
$container.find('img:not([src])').each(function(){
var $this = $(this), left = $this.offset().left
if (!(left < 0) && !(left > $window.width()))
$this.attr('src',$this.data('origImg'))
})
}
})
And then when the divs are animated, call lazyLoad().
Let me know if this works for you. :)

Ok, after some hours I've decided to use JAIL for this. Not the best solution, but better than nothing since I'm dumb with AJAX JAIL aka jQuery Asynchronous Image Loader

Related

Preloading JS calculation prior to images loading

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.

jQuery positioning footer without element the jump

So I am using jQuery to position the footer absolutely on pages where there isnt much content.
The problem I have noticed is that the footer loads in it's normally position and then visibily jumps to the bottom of the page when the jQuery adds the class. Is there anyway to get around this jump?
/* Position footer bottom of all pages */
positionFooter: function () {
var windowHeight = jQuery(window).height();
var content = jQuery("#content").height() + jQuery("#footer-wrapper").height();
if (windowHeight > content){
jQuery("#content").css("padding-bottom", jQuery("#footer-wrapper").height());
jQuery("#footer-wrapper").addClass("fixed-bottom");
}
}
I am using window.load:
jQuery(window).load(function()
How about this
positionFooter: function ()
{
var windowHeight = jQuery(window).height();
var content = jQuery("#content").height() + jQuery("#footer-wrapper").height();
jQuery("#footer-wrapper").addClass("fixed-bottom");
jQuery("#footer-wrapper").hide();
if (windowHeight > content)
{
jQuery("#content").css("padding-bottom", jQuery("#footer-wrapper").height());
jQuery("#footer-wrapper").show();
}
}
If you can change the html, maybe you should use a css sticky footer
http://ryanfait.com/sticky-footer/
I've used this in a lot of websites and works just fine
A quick dirty fix would be to give the body { opacity: 0} before the document loads, and then animate the opacity back up to 1 over a period of, say, 1 second. That way, the whole body will fade in after the footer has already jumped.
simple fiddle
This is how a lot of people deal with Flashes Of Unstyled Content (or FOUC).
Edit: As Freeeeez pointed out below, using body as the animatee isn't necessary, but in my opinion the effect is pleasing :)
If you set it to display:none as default with a specific class. You could then use jQuery to remove the class after the document has finished loading with something like this:
$(document).ready(function(){
$('.hideMe').removeClass('hideMe');
});

JS (No Jquery) - Change CSS when scrolled to a set point

Sorry, but I am a complete noob with JS. I am using Bootstrap to try build my first website.
The website has a fixed top navbar. I want to change the navbar's border-bottom properties when it reaches the bottom of the header div (about 480/500px down the page).
Currently the border-bottom is white, but I want to change it to blue when scrolled beyond a certain point (bottom of header) and then change back to white if scrolled back up again. The effect I want is the appearance of the fixed nav 'picking up' the bottom border of the banner section when it scroll's past.
I have given the navbar div an id of id="n1", and created a class .navbar1{border-bottom: 1px solid rgba(46,152,255,1)!Important;} to add to override the existing css.
I am not using jQuery because I don't use much JS and I don't want to call it just for a few things - it is a big file. I have tried various things without any success. Probably because they relied on jQuery? I don't know. For example, the last one was:
$(window).scroll( function(){
if($(window).scrollTop() > 50) $("n1").addClass("navbar1");
else $("n1").removeClass("navbar1");
});
Anyway, I was hoping someone may be able to help me with the plain/pure JS to change the attribute properties as described. Thank you in advance for any assistance.
EDIT:
This has been kindly answered below. But given some comments, I thought it might be useful to clarify my use of JS: My website requires very little JS functionality so I have chosen to inline my JS, rather than call an external JS file or files - such as jquery.js and bootstrap.js which are relatively large files.
Although I lose the benefit of caching the JS, and my HTML is slightly larger, I am happy to do that because in my case I feel those losses are more than made up for the increased initial page load speed from:
not having to make additional http requests,
not having to load relatively large files.
It is certainly not for everyone, but I feel that it suits my case. Having said that, when all is done and my website is up and running I will probably do some testing to see whether a custom external JS file is better again. Basically, I am only using Bootstrap for its CSS functionality, not its JS functionality. I hope that makes sense.
This demo may help you!
It doesn't use jQuery.
Here is the javascript code:
window.onscroll = function() {
var nav = document.getElementById('nav');
if ( window.pageYOffset > 100 ) {
nav.classList.add("navbar1");
} else {
nav.classList.remove("navbar1");
}
}
I did a small change on #radonirina-maminiaina amazing answer.
While it works, I do prefer avoiding doing unnecessary DOM calls during the onScroll event. The onScroll event can be triggered quite often on some devices, so it's best to keep its handler as fast as possible.
In my solution, I cache the nav DOM element on a closure and I only update its classes if the offset changes.
window.onscroll = function () {
let isScrolled = false
const scrollPoint = 100
const nav = document.getElementById('navbar')
function onScroll () {
if ( window.pageYOffset > scrollPoint && !isScrolled ) {
nav.classList.add("scroll");
isScrolled = true
} else if (window.pageYOffset <= scrollPoint && isScrolled) {
nav.classList.remove("scroll");
isScrolled = false
}
}
onScroll() // Makes sure that the class is attached on the first render
return onScroll
}()

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.
}
}

enlarge image and move it with the pointer on mouse over

Sorry if this might seem trivial for me to ask but..
I have some images and I need them to enlarge when I hover my mouse over them. But.. I want for the enlarged image to stick next to the pointer as I move it across the image. I don't know what to call it. I'm pretty sure it's only done with javascript, just css won't work here.
Something like this http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ , but you know, it has to move with the pointer in motion.
What's the most effective way to do this?
The previous answers may be exactly what you're looking for, and you may already have this solved. But I note that you didn't mention jquery anywhere in your post and all of those answers dealt with that. So for a pure JS solution...
I'll assume from the way the question was phrased that you already know how to pop the image up? This can be done by coding an absolutely positioned hidden img tag in the html or generated on the fly with JS. The former may be easier if you are a JS novice. In my examples I'll assume you did something similar to the following:
<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;">
Then you need an onMouseOver function for your thumbnail. This function must do three things:
1) Load the actual image file into the hidden image
//I'll leave it up to you to get the right image in there.
document.getElementById('bigImg').src = xxxxxxxx;
2) Position the hidden image
//See below for what to put in place of the xxxx's here.
document.getElementById('bigImg').style.top = xxxxxxxx;
document.getElementById('bigImg').style.left = xxxxxxxx;
3) Make the hidden image appear
document.getElementById('bigImg').style.display = 'block';
document.getElementById('bigImg').style.visibility = 'visible';
Then you'll need to capture the onMouseMove event and update the now un-hidden image's position accordingly using the same code you would have used in (2) above to position the image. This would be something like the following:
//Get the mouse position on IE and standards compliant browsers.
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
var curCursorX = e.pageX;
var curCursorY = e.pageY;
} else {
var curCursorX = e.clientX + document.body.scrollLeft;
var curCursorY = e.clientY + document.body.scrollTop;
}
document.getElementById('bigImg').style.top = curCursorY + 1;
document.getElementById('bigImg').style.left = curCursorX + 1;
And that should just about do it. Just add an onMouseOut event to hide the bigImg image again. You can change the "+1" in the last two lines to whatever you like to place the image correctly in relation to the cursor.
Note that all of the code above was for demonstration purposes only; I haven't tested any of it, but it should get you on the right track. You may want to expand upon this idea further by preLoading the larger images. You could also forgoe capturing mousemove events by using setTimeout to update the position every 20 ms or so, though I think that approach is more complicated and less desirable. I only mention it because some developers (including me when I started) have an aversion to JS event handling.
I did something similar to this with a custom ColdFusion tag I wrote that would generate a floating div users could click and drag around the screen. Same principle. If you need me to I can dig that out to answer any additional questions in more depth.
Good luck!
Liece's solution is close, but won't achieve the desired effect of the large image following the cursor.
Here's a solution in jQuery:
$(document).ready(function() {
$("img.small").hover (function () {
$("img.large").show();
}, function () {
$("img.large").hide();
});
$("img.small").mousemove(function(e) {
$("img.large").css("top",e.pageY + 5);
$("img.large").css("left",e.pageX + 5);
});
});
The HTML is:
<img class="small" src="fu.jpg">
<img class="large" src="bar.jpg">
CSS:
img { position: absolute; }
Try this links [jquery with auto positioning]
1.Simple
http://jquery.bassistance.de/tooltip/demo/
2.Good with forum
http://flowplayer.org/tools/tooltip/index.html
if I understood you correctly you want to position your big image relatively to the cursor. One solution in jquery (i'm not 100% sure of the code here but the logic is there):
$('.thumb').hover(function(e){
var relativeX = e.pageX - 100;
var relativeY = e.pageY - 100;
$(.image).css("top", relativeY);
$(.image).css("left", relativeX);
$(.image).show();
}, function(){
$(.image).hide();
})
Jquery is the easiest route. position absolute is key.
^ In addition to the above, here is a working JS Fiddle. Visit: jsfiddle.net/hdwZ8/1/
It has been roughly edited so it isnt using just overall IMG css tags, easy for anyone to use with this now.
I am using this script instead of a Lightbox in my Wordpress client site, a quick zoomed in image with mouse over is much nicer IMO. It is very easy to make efficient galleries especially with AdvancedCustomFields plug-in & in the WP PHP repeater loops!

Categories

Resources