I have the following problem:
I want image related captions in a div to show up while scrolling through my tumblr blog. So far I embedded the following code and managed to get it work:
script I used:
Fiddle
$(window).load(function () {
$(window).on("scroll resize", function () {
var pos = $('#captionposition').offset();
$('.post').each(function () {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
$('#captionposition').html($(this).find('.tags').text()); //or any other way you want to get the date
return; //break the loop
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
})
My blog
I am not sure how exactly "top" is defined, but it turned out being quite confusing for the viewer as there's no "pause" inbetween the captions and the div seems to pop up eventhough the image is not even fully visible in the window. Plus if two or even more images show up at the same time it's uncertain to which the info belongs.
What would I aim for?
I would love to have the div with the informations only visible for the image fully centered. center +/- 10% would be enough I guess (but would like to play around with this if possible). And a rather smooth fade in/out animation would be great as well.
I am super thankful in advance if anybody can help me!
original code:
{block:Photo}
<li class="post photo">
<ul class="post-data">
{block:IfPhotoIconImage}<li class="icon"></li>{/block:IfPhotoIconImage}
<li class="info"></li>
</ul>
<div class="post-content">
<div class="content-img-wrapper">{LinkOpenTag}<img src="{PhotoURL-1280}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{block:HasTags}
<ul class="tags" style="display: none;">
{block:Tags}
<li>{Tag} </li>
{/block:Tags}
</ul>
{/block:HasTags}
</li>
{/block:Photo}
<div id='captionposition'></div>
okay, so this is what worked well for me (check iris post for further explanations):
$(window).load(function () {
var window_center = $(window).height()/2;
var threshold = 0;
$(window).on("scroll resize", function () {
scroll = $(window).scrollTop();
//var pos = $('#captionposition').offset();
$('.post').each(function () {
var post_center = $(this).height()/2 + $(this).offset().top;
if (post_center + threshold < window_center + scroll ||
post_center - threshold < window_center + scroll) {
if (!$(this).hasClass('active')){
$('.post').removeClass('active');
$(this).addClass('active');
$( "#captionposition" ).hide();
$( "#captionposition").html($(this).find('.caption').text());
$( "#captionposition" ).fadeIn('slow');
}
return; //break the loop
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
})
</script>
Ok I made a Demo that could help you.
$(window).load(function () {
var window_center = $(window).height()/2;
var threshold = 0;
$(window).on("scroll resize", function () {
scroll = $(window).scrollTop();
$('.post').each(function () {
var post_center = $(this).height()/2 + $(this).offset().top;
if (post_center + threshold < window_center + scroll ||
post_center - threshold < window_center + scroll){
if (!$(this).hasClass('active')){
$('.post').removeClass('active');
$(this).addClass('active');
$('#captionposition').hide();
var newDescr = $(this).find('.tags');
$('#captionposition').html(newDescr.html());
$('#captionposition').fadeIn('slow');
}
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
});
Things to know:
I used $(window).scrollTop() as reference, so we know how much it's scrolled.
Added a Threshold variable, to set the +/- percent you wanted.
The scripts calculates the center of window and center of each .post.
Related
I'm trying to change one image at a time when I'm scrolling through the page.
This code actually changes all images classes when we get to that point of the scroll.
Is there any other way we can change images individually when scrolling?
Thank you.
jQuery(function($) {
var show = $(".show");
var hide = $(".hide");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if($(window).scrollTop() >= 500){
show.removeClass('show').addClass("hide");
hide.removeClass('hide').addClass("show");
} else {
show.removeClass("hide").addClass('show');
hide.removeClass('show').addClass("hide");
}
});
});
Since you're checking the scroll position of window and hiding/showing, this will hide/show all elements with the specified class name.
To achieve your purpose, add css position: relative to all images (if no position is specified already),
Then, iterate through each image as follows...
jQuery(function($) {
//var show = $(".show");
//var hide = $(".hide");
$(window).scroll(function() {
/*var scroll = $(window).scrollTop();
if($(window).scrollTop() >= 500){
show.removeClass('show').addClass("hide");
hide.removeClass('hide').addClass("show");
} else {
show.removeClass("hide").addClass('show');
hide.removeClass('show').addClass("hide");
}*/
var images = $('img');//or any other selector
$.each(images, function () {
if($(this).offset().top <= -500) {
$(this).hide();
}
else {
$(this).show();
}
});
});
});
I'm new to this stuff.
I'm using this to make a div appear on scroll and to make it disappear when I scroll further.
It's working pretty good. It fade's out when I pass 1750. But on page load the div is already there. It should appear when I scroll past 1500.
What I need is the div be visible between 1500 and 1750. Hope you can help!
<script type="text/javascript">
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x > 1500) {
$('#form_1_container').fadeIn(150);
} if (x > 1750) {
$('#form_1_container').fadeOut(150);
}
});
</script>
This is the site = http://www.stilld.nl/brrreuk/
You can see if you scroll, that the div appears and disappears. But then it start to pulse...
I'm using display=none on my div.
You can try this
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x > 1500 && x < 1750) {
$('#form_1_container').stop().fadeIn(150);
}
else{
$('#form_1_container').stop().fadeOut(150);
}
});
i was working on a galery where when the user scrolls and reaches a thumb certain background action occurs.
Now did this coding and i am able to get the result but somehow i am confused as it only works one time and then when i again scroll to that position it does nothing.
I am using alert boxes to reach 5th and 7th thumb and it only shows message once.
I am using something like this
$(document).ready(function () {
// Thumb 1
var thumb4Target = $("#myImg1").offset().top;
var interval = setInterval(function () {
if ($(window).scrollTop() >= thumb4Target) {
alert('1nd Image Position Obtained');
clearInterval(interval);
}
}, 0);
//Thumb 2
var thumb4Target2 = $("#myImg2").offset().top;
var interval2 = setInterval(function () {
if ($(window).scrollTop() >= thumb4Target2) {
alert('2nd Image Position Obtained');
clearInterval(interval2);
}
}, 0);
});
check this Fiddle
LINK
Please tell me where i am doing wrong.Thanks.
Use scroll event instead of interval. LIVE DEMO 1 Or LIVE DEMO 2
$(window).scroll(function()
{
var thumb4Target = $("#myImg1").offset().top;
var thumb4Target2 = $("#myImg2").offset().top;
if ($(window).scrollTop() >= thumb4Target) {
alert('1nd Image Position Obtained');
}
if ($(window).scrollTop() >= thumb4Target2) {
alert('2nd Image Position Obtained');
}
});
simple question, easy points, cannot find the answer in SO. The javascript function below alerts when a user scrolls to the bottom of a div. I have many divs, but I only want the alert to run when a div id=imageloc is scrolled.
$(window).scroll( function() {
if ( document.documentElement.clientHeight + $( document ).scrollTop() >= document.body.offsetHeight ) {
if (this.id == "imageloc" ) {
alert("bottom of the page.");
}
}
});
The javascript function below alerts when a user scrolls to the
bottom of a div. I have many divs, but I only want the alert to run
when a div id=imageloc is scrolled.
Maybe I have misunderstood, but it's phrased like you have many scrollable divs and want to do something if one of them is scrolled to the bottom. Then you should listen to scroll event on this particular div:
$("#imageloc").scroll( function(e) {
if ( this.scrollTop >= this.scrollHeight - this.offsetHeight ) {
console.log( 'bottom' )
}
});
http://jsfiddle.net/aheh5/
If you want to do something when the document has been scrolled past the bottom of a particular div try this: http://jsfiddle.net/aheh5/1/ (it will, however, trigger every time the user scrolls the window and #imageloc is above the viewport).
Use like this
$(window).scroll(function() {
var winTop = $(this).scrollTop();
var $divs = $('div');
var top = $.grep($divs, function(item) {
return $(item).position().top <= winTop;
});
alert($(top).attr('id'));
});
You can try something like this,
var imgLocTop = $('#imageloc').offset().top ;
var $window = $(window);
var limit = Math.abs($window.height() - imgLocTop);
$window.scroll( function() {
if($window.scrollTop() >= limit) {
alert('Reached the required div');
}
});
Demo
I currently have a page in the form of
<div id="content">
<div id="content-page-1">
<!--content-->
</div>
<div id="content-page-2">
<!--content-->
</div>
</div>
Is there any way to make scrolling either
Stick/snap to divs (these are 100% height and 100% width of the display area)
Auto-scroll to next div when scrolling detected
with jquery?
If you listen for the scroll event on your node, you could easily use a plugin like scrollTo to smooth scroll to the "next div" or previous div (however you define that).
var prevScrollTop = 0;
var $scrollDiv = $('div#content');
var $currentDiv = $scrollDiv.children('div:first-child');
$scrollDiv.scroll(function(eventObj)
{
var curScrollTop = $scrollDiv.scrollTop();
if (prevScrollTop < curScrollTop)
{
// Scrolling down:
$currentDiv = $currentDiv.next().scrollTo();
}
else if (prevScrollTop > curScrollTop)
{
// Scrolling up:
$currentDiv = $currentDiv.prev().scrollTo();
}
prevScrollTop = curScrollTop;
});
I tried different plugins but they all had problem with multiple event firing in mvc, so i came up with this solution using underscore.js
<script type="text/javascript">
$(document).ready(function () {
var isc = _.throttle(function (event) {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
if (event.handled !== true) {
$.post('#path', function (html) {
$('#user-feed').append(html);
});
}
}
}, 300);
$(window).scroll(isc);
});
</script>