Infinite Scrollable Div with Ajax loaded Content? - javascript

I want to implement a technique called scrollable div in GWT. What I am trying to do is the following.
If a user is on my page he can only see the viewport (green box in the image). All DOM elements that are in this viewport are visible to the user on page load. Alle DOM elements that are not on the viewport have not been loaded after a page has been loaded on page load (blue boxes in the image).
If the user drag and move the viewport, all dom elements become visible which come onto the viewport. If they are on the viewport they will be loaded via ajax.
The user can zoom in and out the viewport to make it bigger and smaller. Also, if elements that are invisible to the user and thus not loaded yet become visible, than they have to be loaded via ajax and displayed on the viewport.
How do I have to implement this with GWT?
If the user loads the page it looks like the following image:
The user can drag and move the viewport to 8 directions. These are top, top right, right, right bottom, bottom, bottom left, left and top left. The following image shows a movement to the left.
When the viewport moves new content should be loaded with ajax.
The viewport can also be zoomed in. In this case also new content should be loaded.
The viewport can also be zoomed out. Note that the viewport must be of fixed dimensions. Only the content should be zoomable.


UPD:
jsfiddle EXAMPLE: http://jsfiddle.net/hv57s/9/
UPD:
jsfiddle with zoom in/out buttons an functionality: http://jsfiddle.net/hv57s/11/
Answer based on this example: Indira.js Inifinite Scroll
<div id="scrollableDiv" data-scroll-callback="$('#load_button').trigger('click')">
<table>
...
<tbody id="scrollable_tbody">
<tr>
...
</tr>
</tbody>
<button id="load_button" onclick="load_more(page_number)">Show more</button>
</div>
<script>
var scroll_el_id = 'scrollableDiv';
var element = $('#scrollableDiv');
$(window).unbind('scroll.' + scroll_el_id).bind('scroll.' + scroll_el_id, function(event){
var scrollBottom = $(window).scrollTop() + $(window).height();
var elementBottom = element[0].scrollHeight + element.offset().top;
if(scrollBottom >= elementBottom){
eval($(element).attr('data-scroll-callback'));
$(window).unbind('scroll.' + scroll_el_id);
}
});
</script>
Next you just append to #scrollable_tbody AJAX-response, like:
function load_more(page){
$.ajax({type: "GET", url: 'some/url/load_more.php?page='+page,})
.done(function( html ) {
$('#scrollable_tbody').append(html);
});
}
UPD:
I think you should set big size for html,body like:
html, body{
min-width: 8192px;
width: 8192px;
min-height: 8192px;
height: 8192px;
}
And set viewport in size you want.
But maybe it will more easier if you will set some wrap div right after body tag with
div.wrap{
overflow: scroll;
-webkit-overflow-scrolling: touch;
/*Do not forget to change your_viewport_* to actual size, also you can do this via jQuery on the fly*/
max-height: your_viewport_height;
min-height:your_viewport_height;
height:your_viewport_height;
max-width: your_viewport_width;
min-height:your_viewport_width;
height:your_viewport_width;
}
and inside of this element Bigger div which will be scrollable.
div.huge{
min-width: 8192px;
width: 8192px;
min-height: 8192px;
height: 8192px;
}
HTML:
<html>
<head>
...
</head>
<body>
<div class="wrap">
<div class="huge">
...
</div>
</div>
</body>
</html>
Also do not forget to set scrolling control for all sides of elements, in example I have only Bottom line control, something like:
var scrollBottom = $(window).scrollTop() + $(window).height();
var elementBottom = element[0].scrollHeight + element.offset().top;
var scrollTop = $(window).scrollTop();
var elementTop = element.offset().top;
var scrollRight = $(window).scrollLeft() + $(window).width();
var elementRight = element[0].scrollWidth - element.offset().left;
var scrollLeft = $(window).scrollLeft();
var elementLeft = element.offset().left;
if(scrollBottom >= elementBottom && scrollTop <= elementTop && scrollRight >= elementRight && scrollLeft <= elementLeft){
eval($(element).attr('data-scroll-callback'));
$(window).unbind('scroll.' + scroll_el_id);
}
I didn't test this, and anyways you will have to play around with this. Hope I'm point you into right direction.

Related

Calculating how many pixels user has scrolled down page

I want to know how many pixels from the top a user has scrolled down my page. So , the number of pixels ABOVE that can't be seen PLUS the number of pixels viewable in the current viewport.
With Jquery I'm using $(window).scrollTop() which is showing 612 pixels once scrolled to bottom of page, but $(document).height() reports a total height of 1276 pixels.
When I reach the bottom of the page the number I'm wanting to know will be 1276.
Hope that makes sense.

It sounds like what you're trying to get is the bottom of the window's current Y offset.
This can be calculated by summing the window's scrollTop() and innerHeight:
$(window).scrollTop() + window.innerHeight
$(window).scroll(function() {
$("#scrollTop").text($(window).scrollTop() + window.innerHeight);
$("#docHeight").text($(document).height());
}).scroll();
body {height: 2500px;}
div {position: fixed; top: 0; left: 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span>scrollTop:</span> <span id="scrollTop"></span>
<br>
<span>document Height:</span> <span id="docHeight"></span>
</div>

To calculate how much the user has scrolled the page vertically in terms of pixels from the very top, in JavaScript, we would probe either window.pageYOffset, or in older versions of IE, one of several variants of document.body.scrollTop, whichever property is supported:
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
Using jQuery instead, the equivalent would be:
var scrollTop = $(window).scrollTop()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div style="height:1000px"></div>
<p id="output" style="position:fixed; left:0; top:0; padding:10px; font-weight:bold">
You have scrolled the page by:
</p>
<script>
var output = document.getElementById('output')
window.addEventListener("scroll", function(){
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
output.innerHTML = 'You have scrolled the page by: ' + scrollTop +'px'
}, false)
</script>
<script>
/* ### jQuery version below. Uncomment to see: ### */
/*
var $output = $('#output')
$(window).on('scroll', function(){
var scrollTop = $(window).scrollTop()
$output.html( 'You have scrolled the page by: ' + scrollTop +'px' )
})
*/
</script>
</body>

Dynamically change height of div using onscroll not working

I am trying to use jquery to change the height of a div across a bottom and top nav as on this codepen.
The jquery is this:
$(document).ready(function() {
var lastScrollTop = 0;
var img = 100;
$(window).scroll(function() {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
// downscroll code
console.log('downward')
img = img + 1;
$('.img').height(img);
} else if (st < lastScrollTop) {
// upscroll code
console.log('upward')
img = img - 1;
$('.img').height(img);
}
lastScrollTop = st;
}).scroll();
})
body {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Below is the html for the jquery:
<div class='wrapper'>
<nav>
<div class='topnav'>
<div class='img'>
</div>
</div>
<div class='bottomnav'>
</div>
</nav>
<div class='main'>
I am main content
</div>
</div>
The problem is that the console.logs scrolling down doesn't match the console.logs scrolling upwards. So the polygon div spanning both navs doesn't end up where it's supposed to. Please see the image below for console.logs:
I am trying to make the top nav disappear as you scroll the grey nav becomes fixed and the polygon shaped div becomes the size of the grey nav component. The idea is to get a similar effect like the one on fantasy premier leagues website.
Any help would be appreciated. If you need more details please ask and ill provide clarification.

Scrolling upwards and downwards do not always happen in increments of 1, hence the mismatch. If you scroll upwards slowly, its count would exceed downwards scroll. Instead what you need to do is, determine the breakpoints where you want the changes to happen. So for e.g. you want the top navbar to disappear on scroll. The top navbar has height of 50, so when your scrollTop exceeds 50, make grey bar position fixed and at the top. Check this codepen https://codepen.io/anon/pen/RxjoeG
$(document).ready(function () {
var lastScrollTop = 0;
var img = 100;
$(window).scroll(function () {
var st = $(this).scrollTop();
if(st >= 50) {
$('.bottomnav').css({'position':'fixed', 'top':0});
} else {
$('.bottomnav').css({'position':'initial'});
}
}).scroll();
})

Change z-index of div 2 once div 1 becomes sticky

On this page http://www.younity.co.nz/testScrolling.html I need to change the z-index of the second navigation menu that appears from behind the video container so that it has a higher z-index and blocks out the grey 'Y' graphic once the initial menu has scrolled off the page. Hope that makes sense. So I need to test that the initial nav menu has started to leave the top of browser or it has left.
This is housing menu 1
<div class="nav-wrap-height">
<div class="nav-wrap-box">
menu
</div>
</div>
When it scrolls to the top '.nav-wrap-height' becomes sticky
.nav-wrap-height{
float:left;
width:100%;
position:relative;
z-index: 100;
position: sticky;
top: 0;
}
What I want to do is change the z-index of the second menu (.nav-wrap-box#showNow) once .nav-wrap-height has become sticky
<div class="cntrl-nav-2" id="showNow">
<div class="nav-wrap-box">
menu
</div>
</div>
.cntrl-nav-2{z-index:10;}
I'm trying the below but not getting any result.
<script>
var distance = $('.nav-wrap-height').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$('.cntrl-nav-2').css({
z-index:'300'
});
}
});
</script>
Any assistance with this problem would be really most helpful.
Cheers
Grant

You are using the wrong selector
$('.nav-wrap-box.showNow')
when it should be
$('.nav-wrap-box#showNow')

This is what I was after. I was writing the z-index part wrong.
var distance = $('.nav-wrap-height').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$('.cntrl-nav-2').css('z-index', 200);
}
else{
$('.cntrl-nav-2').css('z-index', 10);
}
});

jquery background image scroll effect speed issue

I have purchased a template for my shopify store that scrolls a site wide absolutely positioned background image at a slower speed than what the user scrolls for a neato perspective effect.
I have found the script used in the template that animated the scrolling effect for the background image. It is as follows:
<script type="text/javascript">
(function($) {
if(device.desktop()){
// PARALLAX INIT
$(window).bind('scroll',function(e){
parallaxScroll1();
});
function parallaxScroll1(){
var scrolled = $(window).scrollTop();
$('#wrapper .wrapper_bg').css('top',(0+(scrolled*.75))+'px');
}
// SMOOTHSCROLL 4 WEBKIT
var platform = navigator.platform.toLowerCase();
if (platform.indexOf('win') == 0 || platform.indexOf('linux') == 0) {
if ($.browser.webkit) {
/* jquery.simplr.smoothscroll - https://github.com/simov/simplr-smoothscroll */
;(function(e){"use strict";e.srSmoothscroll=function(t){var n=e.extend({step:85,speed:600,ease:"linear"},t||{});var r=e(window),i=e(document),s=0,o=n.step,u=n.speed,a=r.height(),f=navigator.userAgent.indexOf("AppleWebKit")!==-1?e("body"):e("html"),l=false;e("body").mousewheel(function(e,t){l=true;if(t<0)s=s+a>=i.height()?s:s+=o;else s=s<=0?0:s-=o;f.stop().animate({scrollTop:s},u,n.ease,function(){l=false});return false});r.on("resize",function(e){a=r.height()}).on("scroll",function(e){if(!l)s=r.scrollTop()})}})(jQuery);
/* jquery.mousewheel - https://github.com/jquery/jquery-mousewheel */
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
$.srSmoothscroll({
step: 55,
speed: 100,
ease: 'swing'
});
}
};
};
})(jQuery);
</script>
The issue that I am having is that the scrolling effect moves to quickly, and by the time the user has reached the bottom of the page they are viewing, the background image has prematurely cut off.
I have been fidling around with the values in this script, trying to slow down the effect, with no success. Any insights?
Thanks! You can view this script in action on our site at:
http://ts8276eb.myshopify.com/
the password is: yandasmusic

That code is way too complicated for me to even consider trying to debug.
So I made a much simpler version.
var wrapper = document.getElementById('wrapper'),
checkbox = document.getElementById('scrolleffect');
function parallax() {
if( checkbox.checked) {
wrapper.style.backgroundPosition = "center " + (this.scrollTop / (this.scrollHeight - window.innerHeight) * 100) + "%";
}
else {
wrapper.style.backgroundPosition = "";
}
}
document.body.onscroll = function() {parallax.call(document.body);};
document.documentElement.onscroll = function() {parallax.call(document.documentElement);};
#wrapper {
background: #333 url('http://cdn.shopify.com/s/files/1/0810/2125/t/21/assets/body_bg_img.png?677044079657970527') no-repeat scroll center top;
color: white;
padding: 8px;
}
.spacer {
height: 800px;
}
body {
margin: 0;
}
<div id="wrapper">
<p>Content!</p>
<p style="position: fixed;"><label><input type="checkbox" id="scrolleffect" /> Toggle background scroll effect</label></p>
<div class="spacer"></div>
<p>More content!</p>
<div class="spacer"></div>
<p>Content ends</p>
</div>
The important part here is that the background position is updated according to how far down the page we've scrolled. It ranges from center 0% to center 100%. The convenient thing about background image positioning is that 0% means "align top of image with top of element", and 100% means "align bottom of image with bottom of element". Values are interpolated in-between, so 25% would be "align the top quarter mark of the image with the top quarter mark of the element".
Much simpler.

The numbers appear to be crunched here:
$('#wrapper .wrapper_bg').css('top',(0+(scrolled*.75))+'px');
So it currently scrolls 25% slower than the page. If you lower this number, it will go more slowly...
$('#wrapper .wrapper_bg').css('top',(0+(scrolled*.25))+'px');

Resize based on page/screen height

My page is divided into left and right divs, the right div has a border left partitioning the two. if the height of the right box is bigger then left, it works fine. However if the left box height is more, then the border is only halfway.
How can i resize the height of the right box based on the height of entire screen so that the border runs all the way to the end.

You can provide height to your right div like, place a id ( like rightDiv ) there if not (in jQuery).
$('#rightDiv').height($(window).height());
if you want to height of your entire document use:
$('#rightDiv').height($(document).height());
$(window).height() will retrun available browser window height.
$(document).height() will retrun document height.
or you can make a comparison:
var doc = $(document);
var win = $(window);
var maxHeight = doc.height() > win.height() ? doc.height() : win.height() ;
$('#rightDiv').height(maxHeight);
You have min-height, for animate height you can try:
$('#rightDiv').animate( { height : maxHeight}, <duration>);
<duration> is optional, you can provide here 'slow', 'fast', miliseconds

Another solution would be this pure CSS one: http://jsfiddle.net/zgMv5/
You put around the left and the right div another <div> and use it as CSS table row. Then the 2 containing <div> will be the same height.
<div id="outer">
<div id="left">This is some text.</div>
<div id="right">This is some text.</div>
</div>
The corresponding CSS would look like this:
div#outer {
display:table-row; }
div#outer > div {
display:table-cell; }
div#left {
border-right:1px solid red; }
I am not sure about the compatibility with old browsers...

Categories