I'm trying to create a messagebox that is fixed to the bottom of a webpage, so when a user scrolls, it stays put (simple css).
However, I'd like the messagebox to disappear when the user scrolls to a certain point in the webpage.
For example, if you have a signup form on the bottom of your site, I'd like to create a messagebox that reads "scroll down to signup", and when the user scrolled down to the top of the sign up form, the message would disappear, or get covered up by the form.
So when they scrolled up, the message would reappear.
This isn't my implementation, but an accurate illustration of the concept.
I haven't any experience developing with Javascript, but was hoping there was an existing method for this. I'm willing to learn though, this is something I'd like to use.
Any thoughts? Or concepts to start learning?
Thanks guys! (I think this could be a really clever method of highlighting certain content that perhaps users would miss if they didn't scroll through the entire page.)
This should do the trick (tested in IE7, Firefox, Chrome, Safari).
It uses jQuery and shows the element as soon as it is visible. This is the code:
$(document).ready(function() {
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
// the element to look for
var myelement = $('#formcontainer');
// the element to hide when the above is visible
var mymessage = $('#mymessage');
$(window).scroll(function() {
if(isScrolledIntoView(myelement)) {
mymessage.hide();
} else {
mymessage.show();
}
});
});
If you want the whole element to be visible before the message is hidden, replace the isScrolledIntoView above with this:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
}
Credit for both of these functions go to this question.
Related
I already have this which works great:
function isScrolledIntoView(elem) {
var docViewTop = jQuery(window).scrollTop();
var docViewBottom = docViewTop + jQuery(window).height();
var elemTop = jQuery(elem).offset().top;
var elemBottom = elemTop + jQuery(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
This detects when an ENTIRE #div is in the viewport. However, I cannot figure out how to alter this so that the code detects the #div when it is only PARTLY in the viewport. Can you help me? For you guys, this is probably super simple... Thanks! I have tried to enter pixel-values but I mess it up every time!
Just replace this:
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
with this:
return (docViewBottom >= elemTop && docViewTop <= elemBottom);
and isScrolledIntoView function will return true as soon as element is in the viewport.
This is possible without using jquery. We can get a bounding box that surrounds the element in question, and then check if the top or bottom of that box are between the top and bottom of our viewport!
// Assuming elem is an actual element, not a string selector
// You can use jquery or standard dom functions like querySelector to find the element if it's a selector
function isScrolledIntoView(elem) {
const box = elem.getBoundingClientRect();
const topInside = (box.top > 0 && box.top < window.innerHeight)
const bottomInside = (box.bottom > 0 && box.bottom < window.innerHeight)
return topInside || bottomInside
}
I have a div that becomes 'fixed' to the bottom of the window once it is scrolled out of view. I only want this behavior when the user is viewing the top half of the page. I do not want a fixed state being applied to the div when the user is on the bottom part of the page.
In short - The issue I have is that a fixed state is being applied when the div is out of view, regardless of page position.
Demo https://jsfiddle.net/DTcHh/19352/
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet) {
$("#myDiv").addClass('fixed');
}
});
function isScrolledIntoView(elem) {
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
This method involves editing your markup and your isScrolledIntoView function.
Wrap the top half (or whatever viewable area you want invoked) of your markup in a div give it an id of #top.
Modify your scroll markup as this is currently checking that ALL of the element is in view, you only want a partial check.
Demo https://jsfiddle.net/DTcHh/19366/
$(window).scroll(function() {
if(isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet && isScrolledIntoView($('#top'))) {
$("#myDiv").addClass('fixed');
}
});
function isScrolledIntoView(elem) {
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop)) ;
}
I would suggest modifying the isScrolledIntoView function so it accepts a second parameter/ele. This way you'd only need to call it once.
This if block will execute only if you are on lower half of the page
if($(window).scrollTop() + $(window).height()/2 > $(document).height() / 2)
updated fiddle - https://jsfiddle.net/DTcHh/19370/
I have some problem.
I write html code where have about 100 div.
<?php
for ($i=0;$i<100;$i++)
{
$post_block = '
<div id="1_%s" class="simple_wall_post" data-foo="bar_%s">
</div>';
$s = sprintf($post_block,$i,$i);
}
?>
windowsHeight = 10000 px
1 div element height = 100 px
For example facebook autoplay video, if video visible then played, if no stopped.
I can't get current div-foo when visible on window.
how can I implement it? thank you.
Did you try to determine the scrolling of the page, as suggested here: Check if element is visible after scrolling
Like this:
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
I got a scrollable page containing a lot of divs. I want to fade out the elements at the top and bottom of the page while the user is scrolling; so only the divs which are currently in the center of the viewport will have an opacity of 100%.
I am currently achieving this by observing the window.scroll event and calculating each divs opacity by their position in relation to the scroll offsets. This works, but has an huge impact on the clients performance (specially when there are a lot of divs) - which leads to a "non fluid" scrolling experience.
Are there other approaches available? Maybe even a solution without going through every single div?
Edit:
I setup a quick preview on jsFiddle, which illustrates my current approach (not optimized)
Thanks for you comments! I really like the idea of using a background gradient to fake the elements opacity - but in my case this won't work, because I got an background image.
Example on jsFiddle
// http://stackoverflow.com/a/488073/340760
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
// when you scroll the div
$(".list").scroll(function(e) {
var $list = $(this);
// apply logic only to visible elements
$list.find("div")
.filter(function(i, d) {
return isScrolledIntoView(d);
})
.each(function() {
var eTop = $(this).offset().top;
var center = $list.height() / 2;
// if the element is in the center it is 100%
// otherwise it will fade
var dif = center - eTop;
if (dif < 0) dif *= -1;
var pc = 1 - (dif / center);
// set the opacity for the elements
$(this).css("opacity", pc);
});
});
I have some divs, I need to trigger an action (float another div or fire an alert for example) when a certain div is viewed or scrolled to.. What is the best approach to do so?
What you mean by "viewed" I have no idea - but here is how you would do it when the user puts their mouse over the div:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function() {
if(isScrolledIntoView(myelement)) {
// in view
} else {
// not in view
}
});
Credit to Is there a way to detect when an HTML element is hidden from view?
You can probably use the Bullseye jQuery plugin which adds adds enterviewport and leaveviewport events to elements.