Develop Reference

How do I limit draggable area? it functions on top and left side, but not on the right side and bottom

So I tried to block the draggable contents from overflowing the body.
It works on top and on the left side.
I can't limit the right side and bottom.
e.pageX -= e.offsetX;
e.pageY -= e.offsetY;
// left/right constraint
if (e.pageX - dragoffset.x < 0) {
offsetX = 0;
} else if (e.pageX + dragoffset.x > document.body.clientWidth) {
offsetX = document.body.clientWidth - e.target.clientWidth;
} else {
offsetX = e.pageX - dragoffset.x;
}
// top/bottom constraint
if (e.pageY - dragoffset.y < 0) {
offsetY = 0;
} else if (e.pageY + dragoffset.y > document.body.clientHeight) {
offsetY = document.body.clientHeight - e.target.clientHeight;
} else {
offsetY = e.pageY - dragoffset.y;
}
el.style.top = offsetY + "px";
el.style.left = offsetX + "px";
}
});
};
Also, my divs are getting glitchy while I drag them around. They only stop on the right side and bottom when the text inside them is selected.

There is drag&drop library with feature to restrict movements of draggables
https://github.com/dragee/dragee
By default it restrict movements of element inside container. It take into account size of element.
import { Draggable } from 'dragee'
new Draggable(element, { container: document.body })
In same time it's possible to use custom bound function
import { Draggable, BoundToRectangle, Rectangle } from 'dragee'
new Draggable(element, {
bound: BoundToRectangle.bounding(Rectangle.fromElement(document.body, document.body))
})
where BoundToElement describe restrictions that you need
class BoundToRectangle {
constructor(rectangle) {
this.rectangle = rectangle
}
bound(point, size) {
const calcPoint = point.clone()
const rectP2 = this.rectangle.getP3()
if (this.rectangle.position.x > calcPoint.x) {
(calcPoint.x = this.rectangle.position.x)
}
if (this.rectangle.position.y > calcPoint.y) {
calcPoint.y = this.rectangle.position.y
}
if (rectP2.x < calcPoint.x + size.x) {
calcPoint.x = rectP2.x - size.x
}
if (rectP2.y < calcPoint.y + size.y) {
calcPoint.y = rectP2.y - size.y
}
return calcPoint
}
}
Size of element you can calculate next way:
let width = parseInt(window.getComputedStyle(element)['width'])
let height = parseInt(window.getComputedStyle(element)['height'])
I can also suggest to use translate3d property for movements instead of positions left and top, because it is more efficient

I assume that since the draggable item is a dom element it will push the width and height of the body when moved right or down, this changes the body size, so using the body size might not be the right way. Maybe you can use window.width and window.height or so to restrict the area with values the draggable item cannot change. Hope this helps.

JavaScript - Scroll down to element

You can scroll to an element using a url with a hashtag and the elements ID:
window.location.href = "#ID"
This will scrol so that the top of the element is at the top of the browser. How would I scroll to an element so that it's vertically centered?

you can scroll up right after the navigation happens:
addEventListener("hashchange", function(){
setTimeout(function(){
document[
document.documentElement.scrollTop ?
"documentElement":
"body"
].scrollTop-= (innerHeight/2.1);
}, 1);
}, false);
this will cause the focused element to appear half-way up the screen, vertically centered.
the 2.1 causes it to scroll just under half the screen, since there will be some room at the top already. you can adjust the ".1" to match your desired effect (baseline, middle, etc).
obligatory fiddle link: http://jsfiddle.net/ckhafLzq/2/

This is what I have achieved:
function centerScroll(element) {
if (!(element instanceof Element)) {
throw new TypeError("Element expected");
}
var bodyRect = document.body.getBoundingClientRect();
var elementRect = element.getBoundingClientRect();
var left = elementRect.left - bodyRect.left;
var top = elementRect.top - bodyRect.top;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var elementWidth = element.offsetWidth;
var elementHeight = element.offsetHeight;
var x = left - Math.max(0, (windowWidth - elementWidth) / 2);
var y = top - Math.max(0, (windowHeight - elementHeight) / 2);
window.scrollTo(x, y);
return [x, y];
}

No, there's no built-in way, you'd have to write that yourself:
function center_element_vertically(elt) {
var rect = elt.getBoundingClientRect();
window.scrollTo(0, rect.top + window.pageYOffset -
(window.innerHeight - rect.height)/2);
}
Alternatives without writing your own code: you could scroll so that the element was at the bottom by passing false to scrollIntoView, or scroll only if the element is not already visible by calling scrollIntoViewIfNeeded, available only in Chrome AFAIK.

Auto scrolling to element in scrollable div

I have 5 elements that are within a div larger than the screen (on a mobile phone).
I want the user to be able to click on one of the elements and have that element scroll to the centre of the screen.
I've tried writing this with jQuery myself, but I can't seem to get the logic quite right. I've got it kind of moving but the element selected doesn't go to the centre of the screen.
Here's a Fiddle of what I have do far: http://jsfiddle.net/geQ64/1/
Here's the JS from the fiddle also:
$(window).on('load', function() {
$('.tab-3').trigger('click');
var width = $(window).width();
if (width < 651) {
$('.ul-wrap').scrollLeft( $('.tab-3').offset().left );
}
});
$('.single-tabs').on('click', function() {
var offset = $('.tabs').width();
offset = offset/5;
var center = offset/2;
var tab = $(this).data('tab');
$('.tabs-content').hide();
$('.tab'+ tab +'').show();
var width = $(window).width();
if (width > 650) {
var arrow = tab*20-12;
$('.arrow-up').css('margin-left', '' + arrow + '%');
} else {
tab = tab - 1;
var position = offset * tab - center;
$('.ul-wrap').scrollLeft(position);
}
});

Found a fix, here's the JS is anyone needs it.
The - 55 in the var position is for an arrow that sits in the centre of the page below the elements I'm moving with this script.
$(window).on('load', function() {
$('.tab-3').trigger('click');
var width = $(window).width();
if (width < 651) {
var offset = $('.tabs').width();
offset = offset/7;
var center = offset/2;
var position = offset * 2 + center - 50;
$('.ul-wrap').animate({
scrollLeft: position
}, 200);
}
});
$('.single-tabs').on('click', function() {
var offset = $('.tabs').width();
offset = offset/7;
var center = offset/2;
var tab = $(this).data('tab');
$('.tabs-content').hide();
$('.tab'+ tab +'').show();
var width = $(window).width();
if (width > 650) {
var arrow = tab*20-12;
$('.arrow-up').css('margin-left', '' + arrow + '%');
} else {
tab = tab - 1;
var position = offset * tab + center - 50;
$('.ul-wrap').animate({
scrollLeft: position
}, 200);
}

Text parallax not working

I'm using jquery.parallax-1.1.3.js for a parallax effect. (site: http://ianlunn.co.uk/plugins/jquery-parallax/)
Problem: it works with css background-position. This works for background images but not for text in my html.
What I want: add some code to this js file that allows me to use the parallax effect on html text (H1, H2). I prefer with an ID. So a H1 would have a div around it with an ID that is connected with the parallax effect.
This is the js:
(function( $ ){
var $window = $(window);
var windowHeight = $window.height();
$window.resize(function () {
windowHeight = $window.height();
});
$.fn.parallax = function(xpos, speedFactor, outerHeight) {
var $this = $(this);
var getHeight;
var firstTop;
var paddingTop = 0;
//get the starting position of each element to have parallax applied to it
$this.each(function(){
firstTop = $this.offset().top;
});
if (outerHeight) {
getHeight = function(jqo) {
return jqo.outerHeight(true);
};
} else {
getHeight = function(jqo) {
return jqo.height();
};
}
// setup defaults if arguments aren't specified
if (arguments.length < 1 || xpos === null) xpos = "50%";
if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
if (arguments.length < 3 || outerHeight === null) outerHeight = true;
// function to be called whenever the window is scrolled or resized
function update(){
var pos = $window.scrollTop();
$this.each(function(){
var $element = $(this);
var top = $element.offset().top;
var height = getHeight($element);
// Check if totally above or totally below viewport
if (top + height < pos || top > pos + windowHeight) {
return;
}
$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
});
}
$window.bind('scroll', update).resize(update);
update();
};
})(jQuery);
This is how to call the js from html:
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#third').parallax("50%", 0.5);
})
</script>
You give a div an ID. You give this Div a background-image. You connect the ID to the parallax effect above. I want to do the same, but then with an H1.

Deferred loading of page content using JavaScript or jQuery

I have seen a few websites where their home page is too big and when user scroll down to read the content at the end of the page then a few areas of that page load dynamically. How do they design their page?
As an example the site is http://blog.rainbird.me/ where you can see the effect. How can it be achieved it via jQuery and Ajax?

You do it like this:
1: figure out the maximum browser height for your users (it's probably safe to assume 1920px as very few users have larger than 2560x1920 displays)
2: render your list so it is slightly longer than the 1920px, you can even double it to have a safe margin
3: hook into the scroll event on the document $(document.body).scroll(myScrollHandler)
4: when document.body.scrollTop gets close enough to document.body.scrollHeight you append more data on your page
$.get(urlToGetMoreDataFrom,function(data){ $(document.body).append(data)});

Lazy load of content: http://www.appelsiini.net/projects/lazyload
Load content while scrolling: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

function CheckIfElementIsInsideViewport(element)
{
var jElement = jQuery(element);
var jElementTop = jElement.position().top;
var jElementBottom = jElement.height() + jElementTop;
var jElementLeft = jElement.position().left;
var jElementRight = jElement.width() + jElementLeft;
var windowTop = jQuery(window).scrollTop();
var windowBottom = jQuery(window).height() + windowTop;
var windowLeft = jQuery(window).scrollLeft();
var windowRight = jQuery(window).width() + windowLeft;
var topVisible = jElementTop > windowTop && jElementTop < windowBottom;
var bottomVisible = jElementBottom > windowTop && jElementBottom < windowBottom;
var leftVisible = jElementLeft > windowLeft && jElementLeft < windowRight;
var rightVisible = jElementRight > windowLeft && jElementRight < windowRight;
return (topVisible && (leftVisible || rightVisible)) || (bottomVisible && (leftVisible || rightVisible));
}
/* Magazine sneakpeak loader (Only loads content when visible in viewport!) */
var magazineSneakPeakHtml = "<p>Loaded!</p>";
jQuery(function()
{
var sneakPeak = jQuery(".box-newestmagazinepeek");
jQuery(window).bind("scroll", function() { SneakPeakMaybe(sneakPeak); });
SneakPeakMaybe(sneakPeak);
});
function SneakPeakMaybe(jElement)
{
if (CheckIfElementIsInsideViewport(jElement))
{
jQuery(".box-newestmagazinepeek .box-content").html(magazineSneakPeakHtml);
jQuery(window).unbind("scroll");
}
}
/**/
How to do it without jQuery:
How to tell if a DOM element is visible in the current viewport?
This will check if the element is entirely visible in the current viewport:
function elementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top >= window.pageYOffset &&
left >= window.pageXOffset &&
(top + height) <= (window.pageYOffset + window.innerHeight) &&
(left + width) <= (window.pageXOffset + window.innerWidth)
);
}
You could modify this simply to determine if any part of the element is visible in the viewport:
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
You can place elements on your page that note the end of content, when this element then enters the viewport you can load and append new content below it using jQuery ajax (get): http://api.jquery.com/jQuery.get/
Please note that this method is very cpu intensive, since it check if the element is inside the viewport everytime the client scroll!