How to show data only when in viewport - javascript

I'm planning to use a jQuery plugin called charts.js
for graphs and charts. However, on a larger page, the animations of those graphs get completed even before the user sees them.
My question is, how do we fade in the content of a particular div/section only when it is visible inside the viewport as exactly depicted on charts.js website. The content fades in sequentially as we scroll down and hence even the animations of the graphs aren't missed. How can I achieve this with the help of jQuery?

Take a look at this jsFiddle. The author fades in boxes as they become visible. You porbably need to call chart.js to create the graphs as they become visible, rather than just fade them in (that is if you want the fancy graph animations, rather than just a fade-in :-)) I have tweaked the fiddle and included it below:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.graph').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
//Code to initialize the graph here.
//This initialization should probably
//be deferred, to ensure performance,
//and the graphs should be marked as
//initialized so we dont't init them
//multiple times (possibly by changing
//their class so .each ignores them).
}
});
});
});

Mika's Viewport Selectors plugin works for the browser window viewport and not html elements. In other words if you got some css like #container{width:350px;height:150px;overflow:auto;} it will not work when scrolling.
I recommend trying his other plugin, Lazy Load
Here's an example: http://jsbin.com/efazos/1/edit

The following code will enable you to determine whether an element is within the window on the scroll of the document. From there you can enable your chart and do whatever animations you like :
<script type="text/javascript">
$(document).ready(function() {
$(document).on('scroll', function() {
//Get Div 1's Top and Left offsets from the Document.
var divTop = $('#div1').offset().top;
var divLeft = $('#div1').offset().left;
//Get the current window height and width.
var winHeight = $(window).height();
var winWidth = $(window).width();
if (divPos <= winHeight && divLeft <= winWidth) {
//Div is visible in window
//Fade in Chart
}
});
});
</script>

Related

jQuery element height calculation behaving unexpectedly

New to playing with jQuery and javascript (and stackOverflow). My project is basically a scrolling page with linked divs.
For aesthetic reasons, I wold like to have each div fill the size of window and I decided that jQuery would be an easy way to do this. The basic structure is this:
IF the div is shorter than the window
THEN grow to the size of the window.
ELSE use an auto height
I can get a single div to behave this way, the problem is I am applying this to a class and the other objects do not seem to want to behave in the same manner. Here is a fiddle (first time making a fiddle so if the link is not working let me know -
http://jsfiddle.net/ksaiyo/VBMVQ/3/
This fiddle shows the exact opposite:
http://jsfiddle.net/ksaiyo/6YYFU/1/
My script is here, but the fiddle seems to show the effect well enough. The heights stay at the auto height. (I have a fixed navigation header and unelegantly used padding on top so the linked elements in the page line up correctly - thus the extraneous variables)
$(document).ready(function() {
var divHeight = $( ".content" ).height();
var winHeight = $( window ).height();
var headerHeight = $( "header" ).height();
var viewHeight = winHeight - headerHeight
var newHeight = winHeight + headerHeight;
if (divHeight <= viewHeight ) {
$( ".content" ).height(newHeight);
};
)}
I have searched around and I can't seem to nail down the exact reason to why this is occurring. I tried to use an else statement in conjunction, but then everything including the small elements adopt the auto height. (I tried it in the fiddle as well)
Thanks in advance for your help.

how does facebook ticker work, e.g on certain res or zoom it hides

I have been trying to figure out how to make a ticker like facebook.
the ticker automatically hides when you zoom past 110% and thats because the ticker would start to cover the whole layout.
I was wondering how they have done this? how does it detect when to hide the ticker? does it grab the resolution in javascript?
Whatever they are doing, it is done through Javascript. You can get the width and height of the browser window and also any element in the DOM.
You can use pure Javascript, but jQuery makes this a doddle:
// Get the pixel width and height of the window
var window_height = $(window).height(); // not required, but for clarity
var window_width = $(window).width();
var ticker_width = $('div#ticker_wrapper').width();
// ON rezise, do something
$(window).resize(function() {
// Do a caculation
var new_width = (window_width/100)*10; // 10% width
// Adjust the width of the ticker to suit
$('div#ticker_width').css('width', new_height);
});

window size jquery bug

While trying to create a single page template with parallax scrolling I found and odd problem. I'm am suspecting that the problem is in either the jQuery portion of maybe even the CSS it self, but I am rather not sure.
My current jQuery code bit reads the window size of the visitors browser and adjusts the height of the slides for each different anchored page. This way I achieved full with backgrounds no matter the window size. But in same time I realized that If I add different CSS components, they will not expand the active anchor background height, but rather will overflow onto the other slide.
Here is the jQuery portion responsible for the slides height
$(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
$(window).resize(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
});
});
And here is the site URL https://docstax.net/esgh/
Go to Plans and resize your browser you will see what I mean by not adjusting the high of slide based on needed high of content inside.
Edit: As suggested by putvande there where way to many $(window) which I was aware of, do to that I updated and minimized the code.
Basically you don't want to manually add a height component to the div if the content is going to be too large for the container. Here's what I think would work:
$(window).bind("load", function()
{
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
$(window).resize(function() {
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
});
});
You can try like this one:
<script type="text/javascript">
$(function(){
var height = window.innerHeight;
$('.windows') .css({'height': height+'px'});
$(window).resize(function() {
var reheight = window.innerHeight;
$('.windows') .css({'height': reheight+'px'});
});
});
</script>
I tried your page, I'm failing to see a problem :
The sections are resized as they should. Content is display as it should considering the styles applied.
When a section is smaller than its content, the content starts bleeding out on other pages. Perfectly normal. You could set overflow: hidden; on your .windows to prevent that from happening and/or use media queries to resize the content.
Here is a lighter function by the way, just edited your code :
$(function() {
$(window).resize(function() {
$('.windows').css({ 'height': $(window).height() });
}).resize();
});
No need to write the code twice : setting the resize handler and triggering it manually should do.
Write it once, so when you need to change it, you'll change it only once.
You could also reset de scrollTop in your resize handler to keep focus on the same portion of the page.

if target element is visible on screen quasion

I am using wordpress, and we have there dynamic sidebar. in the sidebar we have many widgets. what am I trying to do is to show the divis (widgets) that visible on the screen (onload - after the page is load). the others widgets will be hidden(opacity 0 or something like that) but when I will scroll I want that widget(that was not visible on screen) will appear in fade effect.
I using this code that hide all my sidebar block is on opacity=0 on load.
I need help to show always all widgets that is visible on screen and then make the fade effect on scroll to others.
$(document).ready(function(){
tiles = $("#sidebar1 div").fadeTo(0, 0);
});
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
});
the function for scrolling is working. the problem is that when the page is full load my sidebar class that hold all widgets is on opacity 0 (like display:none). what I need is when the page load it will give opacity=1 to all widgets that visible on screen (for example 2 of 10 widgets). then when user will scroll it will show others widgets each by other with fade effect.
Extract the block of code that makes these widgets visible and put it in a function. Then add a handler to both scroll and "DOM ready" pointing to this function.
// Determine show or hide
function showOrHide(){$(document).ready(function(){
$("#sidebar1 div").each(function(i) {
var a = $(this).offset().top + $(this).height();
var b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
}
// Assign to both
$(document).ready(showOrHide);
$(window).scroll(showOrHide);
Now there's a performance penalty here. On scroll fire several times per second. You wouldn't want to query the DOM for these elements and run each on them multiple times a second. For that' I'll leave it to you to search (It's asked frequently on both SO and CodeReview)

How to make div fade in/out on scroll

Need some advice: I'm looking to create a fadeIn/fadeOut script that works responsively as the page scrolls. What I want to do:
on scroll, once it gets to a hidden div, it fades in.
once scroll reaches the top of the page, it fades out.
any future scrolls have the div fade in and out, as it appears/disappears.
Here's a sample code that creates the fadein, but only does it once. I need it to fade in and out each time it is triggered.
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
Any advice?
Thanks, and I hope that made sense!
Have you considered jQuery Waypoints? It's a plugin that allows you to execute functions whenever you scroll to an element.
http://imakewebthings.com/jquery-waypoints/
You can then execute a .fadeIn() on that element when you scroll to it.

Categories