We Keep Coding

How can I calculate scroll percentage of a div instead of whole page with JS?

I found the following code used to track the scroll percentage as you scroll down the page.
document.addEventListener('scroll', function(){
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
document.getElementById('scroll').textContent = 'scrolled: ' + percent + '%';
});
That shows the percentage of the whole page. If I only want the scroll percentage of a specific div like this example https://www.thefarmersdog.com/ how the dog bowl scrolls over when you move down the page.

You need to use getBoundingClientRect()
const coordinates = document.getElementById('your-id').getBoundingClientRect();
console.log(coordinates.top); // This is the distance to the top of the screen
Here is a detailed article that you can read if you need more info.

Divide number of pixels that an element's content has been scrolled vertically by the height of an element's content minus an element's offset height and multiply by 100 to get percentage value from 0 to 100. Optionally, round it to get an integer value.
scrollPercent = scrollTop / (scrollHeight - offsetHeight)
const scrollLabelElement = document.getElementById('scroll');
element.addEventListener('scroll', (_event) =>
const percentScrolled = Math.round(element.scrollTop / (element.scrollHeight - element.offsetHeight));
scrollLabelElement.textContent = `Scrolled: ${percentScrolled}%`;
});

DIV fades onto another DIV

How would you make it if the user scrolls down a page, the top DIV fades into the DIV underneath it, and so on and so forth until it fades to a white background?
Here's a jsfiddle of my attempt: https://jsfiddle.net/fkgzzxku/
And here's it's hosted on a staging server for a better illustration: http://bound.staging.wpengine.com/
var target = $('div.slider-item');
var targetHeight = target.height();
var containerHeight = $('#intro-slider').outerHeight();
var maxScroll = containerHeight - targetHeight;
var scrollRange = (maxScroll / (target.length - 1)) + 250; // originally 450
$(document).scroll(function(e) {
var scrollY = $(window).scrollTop();
var scrollPercent = (scrollRange - scrollY % scrollRange) / scrollRange;
var divIndex = Math.floor(scrollY / scrollRange);
target.has(':lt(' + divIndex + ')').css('opacity', 0);
target.eq(divIndex).css('opacity', scrollPercent);
target.has(':gt(' + divIndex + ')').css('opacity', 1);
});
But the DIVs don't completely fade to 0, they fade to a number close to 0 so I feel like my math is wrong.
I also found that if the user scrolls too fast (by pressing page down, etc) you can see all 3 of the images faded into another.
Thanks!

I think because scrollY%scrollRange is never equal to scrollRange your scrollPercent is never 0. You can use scrollPercent= Math.round(scrollPercent*10)/10; after calculating scrollPercent to round it off to 0.
Moreover the problem caused by scrolling too fast seems to be caused by the has function replacing it with slice function works fine for me ( I can't understand why ). Here is the updated code
$(document).scroll(function(e) {
var scrollY = $(window).scrollTop();
var scrollPercent =(scrollRange - scrollY % scrollRange) / scrollRange;
var divIndex = Math.floor(scrollY / scrollRange);
target.slice(0,divIndex).css('opacity', 0);
target.eq(divIndex).css('opacity', scrollPercent);
target.slice(divIndex+1).css('opacity', 1);
});
This works without rounding off scrollPercent. Hope it helps

Find rotated div top position from left

I want find top position of rotated div from element, I can able find top position of element but I want top(Y pos) position from left(x) position.
I am used this
var degree = degree;
if (degree < 0) {
var sign = -1;
} else {
var sign = 1;
}
var numY = Math.abs(myElem.position().top + sign * ((myElem.outerHeight() / 2) - Math.sin(degree)));
var numX = 0
var bottom = myElem.position().top + myElem.outerHeight(true);
y = numY;
Thanks in Advance
Slope:20 deg, height: 20px,width:400px, left 150px i want find top position
I want to re arrange dragged items after rotation for that I am finding top position.
Please find the jsbin link drop weights into plank.

I think it makes more sense to add the draggable image into the rotated div and to let everything rotate together, rather than worrying about the position of the draggable image. Here is a jsfiddle with your code updated (I only implemented dropping on the right side): http://jsfiddle.net/brendaz/17wwtffz/
drop:
// ...
var offset = ui.draggable.offset();
var rotateOffset = $('.rotatableAra').offset();
// Take the weight out of it's parent div and add it to the rotatable area
ui.draggable.remove();
ui.draggable.addClass("dropped");
ui.draggable.addClass("rightPlankDropped");
$('.rotatableAra').append(ui.draggable);
ui.draggable.css("top", ($('.rightPlank').position().top- ui.draggable.height()).toString() + "px");
ui.draggable.css("left", (offset.left - rotateOffset.left).toString() + "px");
rightArray[ind] = $textval * pos;
// ...

Detect percent on screen of an element

I'm trying to detect what % of the element can be seen on the current window.
For example, if the user can only see half the element, return 50. If the user can see the whole element, return 100.
Here's my code so far:
function getPercentOnScreen() {
var $window = $(window),
viewport_top = $window.scrollTop(),
viewport_height = $window.height(),
viewport_bottom = viewport_top + viewport_height,
$elem = $(this),
top = $elem.offset().top,
height = $elem.height(),
bottom = top + height;
return (bottom - viewport_top) / height * 100;
}
But it doesn't seem to be working. Can anyone help me out in achieveing this I seem to be spinning gears.

What you want to get is the amount of pixels that the element extends past the top and bottom of the viewport. Then you can just subtract it from the total height and divide by that height to get the percentage onscreen.
var px_below = Math.max(bottom - viewport_bottom, 0);
var px_above = Math.max(viewport_top - top, 0);
var percent = (height - px_below - px_above) / height;
return percent;
One thing to note is that jQuery's height method won't include padding. You probably want to use .outerHeight for that.

Your $elem = $(this)assignment seems wrong, here function scoping means this refers to the function you're in (ala ~ the function getPercentOnScreen), try referencing by $elem = $('#yourElementId')instead.

if you only want to calculate percent of element then just do this
function getPercentOnScreen(elem) {
$docHeight = $(document).height();
$elemHeight = $(elem).height();
return ($elemHeight/$docHeight)* 100;
}

How to center a div vertically between two div's? jQuery?

I would say that I'm great with HTML and CSS, it's when I start to touch JavaScript that I struggle; I can understand some of it but I couldn't write it for my life! I'm trying to learn though, any ways; I've put together this jQuery script with the goal to vertically center a div between a relative positioned top div, and an absolute positioned bottom div. It's not working out for me, lol.
Because I'm trying to learn how to work with jQuery and create my own scripts, I'd like to try and get this working. However, if there is a better way to accomplish my goal, I would greatly appreciate your input in that way as well!
<script type="text/javascript">
$(document).ready(function() {
$(window).ready(function(){
vertical_height()
});
$(window).resize(function(){
vertical_height()
});
function vertical_height(){
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var pos_height = Math.round(head_height+foot_height);
var neg_height = Math.round((head_height-foot_height)/2);
var fin_height = Math.round(doc_height-(pos_height-neg_height));
$('.midcontent').css({
"marginTop","-"+fin_height+"px",
"marginBottom","-"+fin_height+"px"
}
}
});
</script>
.headcontent is the top div.
.midcontent is the middle div that I'd like to center.
.footer is the bottom div.

Here's your code, tidied into something that will run :
$(function() {
function vertical_height() {
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
//var mid_height = $(".midcontent").height();//not used
var foot_height = $(".footer").height();
var pos_height = head_height + foot_height;
var neg_height = (head_height - foot_height) / 2;
var fin_height = doc_height - (pos_height - neg_height);
$('.midcontent').css({
"marginTop": "-" + fin_height + "px",
"marginBottom": "-" + fin_height + "px"
});
}
$(window).resize(vertical_height).trigger('resize');
});
Now you can concentrate on getting the algorithm right.
As it stands, combining and simplifying expressions, I get :
var fin_height = doc_height - head_height*3/2 - foot_height*3/2;
which doesn't look right to me but I could be wrong.
EDIT
To avoid overlap, try this version :
var $$ = {}; //jQuery object cache.
$$.w = $(window);
$$.h = $(".headcontent");
$$.m = $(".midcontent");
$$.f = $(".footer");
function vertical_height() {
var w = $$.w.height(),
h = $$.h.outerHeight(true),
m = $$.m.outerHeight(),
f = $$.f.outerHeight(true),
fin_height = Math.max(0, (w - h - m - f) / 2);
$$.m.css('marginTop', Math.floor(fin_height)).css('marginBottom', Math.ceil(fin_height));
$$.h.text(fin_height);
};
$(window).on('resize', vertical_height).trigger('resize');
DEMO
Notes
position:absolute removed from the footer's CSS
jQuery objects now cached in $$ to give the resize handler less work to do.
Calculation now based on window height not document height.
The three divs now measured with .outerHeight(false) to include vertical padding and borders.
Overlap is prevented by Math.max(0, ...), which ensures fin-height can't go negative.
The statement $$.h.text(fin_height); is for debugging and can be removed.
EDIT 2
The following code will "debounce" the resize event.
Replace :
$(window).on('resize', vertical_height).trigger('resize');
with :
var do_resize;
$(window).on('resize', function(){
clearTimeout(do_resize);
do_resize = setTimeout(vertical_height, 100);
}).trigger('resize');

Just a little tip when calculating something, never round until you get to your final number.
h = Header Height
f = Footer Height
m = Middle Height
d = Document Height
s = Height of the space above or below the div
Here we assume the height of the document is equal to that of all the other elements combined. Since there is a space above and below the middle div that is equal we have two spaces.
d = h + f + m + 2s
d - h - m -f = 2s
(d - h - m - f) / 2 = s
Let's put this into some javascript
$(document).ready(function() {
$(window).resize(vertical_height());
function vertical_height() {
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var fin_height = Math.round((doc_height - head_height - mid_height - foot_height) / 2);
$('.midcontent').css("margin-top", fin_height)
}
});
For the css we only need to add a top margin as this will push it away from the header because I am assuming the absolutely positioned footer will be stuck to the bottom.
Here is a working fiddle: http://jsfiddle.net/nBUnt/14/