I'm trying to modify the WP-Canvas Gallery plugin to endlessly repeat the images in the gallery it is showing when the user scrolls down to the end of the page. The gallery is located at http://www.armijostudio.com.
I have VERY limited knowledge of JavaScript, but here's what I've tried:
In the code, I've found the place where the gallery is created:
var initGallery = function() {
$('.gallery-masonry').each( function() {
var $container = $(this);
var $posts = $container.children('.gallery-item');
$posts.hide();
// keeps the media elements from calculating for the full width of the post
runMasonry(0, $container, $posts);
// we are going to append masonry items as the images load
$container.wcGalleryMasonryImagesReveal( $posts );
$(window).resize(function() {
runMasonry(0, $container, $posts);
});
});
Before the closing bracket, I've tried re-running initGallery when the page is scrolled to the bottom and the following:
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
var $container = $(this);
var $posts = $container.children('.gallery-item');
$posts.hide();
// keeps the media elements from calculating for the full width of the post
runMasonry(0, $container, $posts);
// we are going to append masonry items as the images load
$container.wcGalleryMasonryImagesReveal( $posts );
$(window).resize(function() {
runMasonry(0, $container, $posts);
});
}
});
But it doesn't work.
Any ideas?
Thank you all in advance!
Related
I have a homepage with a 100vh div at the top, and I would like to hide it when you scroll down after this div. Or disable the posibility to scroll up after scrolling this 100vh div. This div should only appear once when you arrived on the website.
Here the link : http://tmp.thomasdesnoyers.com/
After the big coloured background div you shloudn't be able to scroll up.
I tried to add a 'display:none' proprety to this div after scrolling the height of the window but it has the effect of take all the content up...
If anybody have any clues on this…
This the div to hide :
<div id="home-background" class="monobg">
<?php $images_toomany = array("/wp-content/img/toomany.svg", "/wp-
content/img/toomany_2.svg", "/wp-content/img/toomany_3.svg", "/wp-
content/img/toomany_4.svg", "/wp-content/img/toomany_5.svg");?>
<?php echo '<img src="'.$images_toomany[array_rand($images_toomany)].'"
class="toomany" />';?>
<?php $images_pictures = array("/wp-content/img/pictures.svg", "/wp-
content/img/pictures_2.svg", "/wp-content/img/pictures_3.svg", "/wp-
content/img/pictures_4.svg", "/wp-content/img/pictures_5.svg",);?>
<?php echo '<img src="'.$images_pictures[array_rand($images_pictures)].'"
class="pictures" />';?>
</div>
Thank you.
Thomas
Yes. Super simple. Just add overflow:hidden to your body element when you want to prevent scrolling beyond the current viewport. You can do this dynamically via JS or jQuery.
Try this
$(window).scroll(function() {
var div_height = $('#home-background').height();
var page_scroll = $(window).scrollTop();
if(page_scroll > div_height) {
$('#home-background').css('display', 'none');
}
});
here my code with the overflow technic.
I think it's a good start :
jQuery(function($) {
var $nav = $('body');
var $win = $(window);
var winH = $win.height(); // Get the window height.
$win.on("scroll", function () {
if ($(this).scrollTop() > winH ) {
$nav.addClass("hide");
}
}).on("resize", function(){ // If the user resizes the window
winH = $(this).height(); // you'll need the new height value
});
});
I'm doing an infinite scroll page with angularjs that loads more items when the user reaches the bottom of the page. My problem is that under the infinite scroll container may or may not have more "stuff". So i don't want to load more items if the user reaches the bottom of the page if that "stuff" is present. So i want to load more items when the infinite scroll container reaches the end of that container and not the end of the page.
For the infinite scroll i have an angularjs directive like this:
myApp.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function(event) {
var docHeight = $(document).height();
var reachBottom = $($window).scrollTop() == (docHeight - $($window).height());
if (reachBottom) {
setTimeout(scope.loadMore(), 100);
}
});
};
});
you can get stuff height under infiniti scroll container and use it
var docHeight = $(document).height();
var stuffHeight = $('#stuff').height();
var reachBottom = $($window).scrollTop() == (docHeight - ($($window).height() + stuffHeight));
if (reachBottom) {
setTimeout(scope.loadMore(), 100);
}
Only using jQuery you can do it. See this code snippet below.
<script>
$(function () {
var w = $(window);
loadNewPage();
// Each time the user scrolls
w.scroll(function () {
// End of the document reached?
if ($(document).height() - win.height() == win.scrollTop()){
loadNewPage();
}
});
});
</script>
jQuery(window).scroll( function(){
/* Check the location of element */
jQuery('.logoscrollbg').each( function(i){
var logo = jQuery(this).outerHeight();
var position = jQuery(window).scrollTop();
/* fade out */
if( position > logo ){
jQuery(this).animate({'opacity':'1'},100);
}else{ jQuery(this).animate({'opacity':'0'},100);}
});
});
Above is my script for a class (the header) with should blend in when the page is being scrolled down and blend out when you are on the top of the page, with other words the start.
I don't understand javascript at all, but I do a little php and I was wondering if someone could help me write there a elseif tag and later make the else tag so that is the page is loaded the class(.logoscrollbg) isn't visible and when u start scrolling it gets visible and when you get to the top it gets invisivle again :)
The script works like this right now: when I enter the site it shows the bar(bad), later when scrolling it stays or well is there(good), then when getting to top again it fades out(good).
The code inside your scroll event needs to be run when the page is loaded as well as when it scrolls.
jQuery(function() {
// object to hold our method
var scrollCheck = {};
// define and call our method at once
(scrollCheck.check = function() {
// only need to get scrollTop once
var logo, position = jQuery(window).scrollTop();
/* Check the location of element */
jQuery('.logoscrollbg').each(function() {
logo = jQuery(this).outerHeight();
/* fade out or in */
// cleaned this up a bit
jQuery(this).animate({'opacity': position > logo ? 1 : 0}, 100);
});
})();
jQuery(window).scroll(function(){
// call our method
scrollCheck.check();
});
});
It looks to me like this will only fire when you scroll. Try updating your js to this:
jQuery(window).on('scroll, load', function() {
/* Check the location of element */
jQuery('.logoscrollbg').each( function(i){
var logo = jQuery(this).outerHeight();
var position = jQuery(window).scrollTop();
/* fade out */
if( position > logo ){
jQuery(this).animate({'opacity':'1'},100);
}else{ jQuery(this).animate({'opacity':'0'},100);}
});
});
*note: You may want to fire the callback on document load instead of window.
I am trying to hide my Masonry images until the page finished loading as currently the images load in a long strip to the left of the screen, before organising themselves.
I cannot seem to get the container to hide and then show once everything else has been loaded.
Here is the link: http://inspiredworx-labs.com/sites/blg/
Here is my snippet (with commented out code that I've tried to implement for the hide/show bit):
<script>
$(window).load( function(){
var $container = $('#masonry-container');
// initialize
$container.masonry({
//columnWidth: 60,
gutter: 6,
itemSelector: '.masonry-item'
});
})
/*
$('#masonry-container').hide();
$container.imagesLoaded(function(){
$('#masonry-container').show();
})
*/
</script>
You should include your Masonry instance within your images imagesLoaded like so:
var $container = $('#masonry-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.masonry-item',
gutter: 6
});
});
I do not getting whatever you have tried.
But there is a javascript library that is "imagesLoaded".
that will help you
I did it in this way
// created a array with image and data
var elemar = [];
$.each(data, function(j,subData){
var img = document.createElement('img');
img.src = 'images.jpg';
item.appendChild( img );
elemar.push(item);
});
// loading div after image loaded
imagesLoaded(elemar).on( 'progress', function( imgLoad, image ) {
var item = image.img.parentNode;
container.appendChild( item );// container is an javascript , $('#containerdiv'), where all div will be publish
msnry.appended( item ); // msnry intializaion
});
});
I am trying to implement an "infinite-scroll" behaviour to load some photos on a page and I'm using the following JavaScript to do so:
$(document).ready(function(){
$(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.10;
if ((wintop/(docheight-winheight)) > scrolltrigger) {
console.log('scroll bottom');
lastAddedLiveFunc();
}
});
});
By default I would like to fill up the users page with just enough photos to throw in a scroll bar - otherwise the above JavaScript would never fire (if only 3 images are loaded say). The photos are loaded with an ajax call at the end of
lastAddedLiveFunc()
Any idea how I could achieve this?
He is a jsFiddle I made that does what I think you are looking for: http://jsfiddle.net/pseudosavant/FENQ5/
Basically any time the position of the bottom of the window gets within X pixels of the bottom of the document I add some content.
Javascript:
$(document).ready(function(){
$(window).scroll(function(){
var docBottom = $(document).height();
var winBottom = $(window).height() + $(window).scrollTop();
var scrollTrigger = $(window).height() * 0.25;
if ((docBottom - scrollTrigger) < winBottom) {
$("#container").append("<div class='box red'></div>");
console.log("added more");
}
});
});