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/
Related
I can't seem to figure out how to calculate this value
While scrolling down a page, I would like to make a function that return the percertage of 'scrolled through'.
So my 0 would be when the element is on the cusp of being shown (it's at the bottom of the window, 0 pixels shown) and 100 being when the element is completely passed (the element is over the top of the window, 0 pixels shown).
I would need that to do parralax with custom animations, to make an animation that starts when the element is shown, and animates through until the element is gone.
EDIT: All Paralax plugins I see seem to force you in premade animations. I'd like to animate my own thing, so thats why I need that percent value.
After asking the question, I didn't just sit on my hands and continued working on this. This seems to do what I wish to do.
function ScrollPercent(jQEl){
var currY = $('html').scrollTop();
var elH = $(jQEl).height();
var elTop = $(jQEl).offset();
elTop = elTop.top;
var fullH = $('html').height();
var zero = elTop-elH;
var hundred = elTop+$( window ).height();
var scrollPercent = (currY-zero)/(hundred-zero);
return scrollPercent;
}
I've never used jquery. But I can help you with this function.
function ScrollPercent(selector) {
var currY = document.documentElement.scrollTop;
var elH = document.querySelector(selector).offsetHeight;
var elTop = document.querySelector(selector).offsetTop;
var fullH = document.documentElement.scrollHeight;
var zero = elTop - elH;
var hundred = elTop + window.innerHeight;
var scrollPercent = (currY - zero) / (hundred - zero);
return scrollPercent;
}
How to add to the outerHeight() function additional pixels?
So we have a variable, that gets .pg-sect `s outerHeight:
var $section = $('.pg-sect').outerHeight();
And what I want is to add to the height we got additional 70 px. What would the code look alike?
var $section = $('.pg-sect').outerHeight() + 70px;
Okay, let me clarify:
I'd like to add a condition: whether the scrolling area equals to the area of .pg-sect - 100 px before an outerHeight, we do something. And the question is how to get these - 100px of the elements outerHeight
var $section = $('.pg-sect').outerHeight();
//Here you're just assigning a value rather than modifying the element itself
var $section = $('.pg-sect').outerHeight() + 70;
To modify the element:
var $section = $('.pg-sect').outerHeight() + 70;
$('.pg-sect').outerHeight($section);
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
I apologize if some terms I will use, will not be right. I'm not a pro.
I used JavaScript to embed a popup window into a website and I need it to be 50% from the left and 50% from the top. Here is some lines of the code:
var exepopuptop = jQuery(window).scrollTop()+50;
var exepopupleft = 50;
If I write "50%", dw tell me "there is a syntax error".
How can I solve the problem?
I solved my problem in this way:
var exepopupwindow = jQuery(window).height();
var exepopupdiv = jQuery("#exepopup").height();
var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;
var exepopupww = jQuery(window).width();
var exepopupwww = jQuery("#exepopup").width();
var exepopupleft = (exepopupww-exepopupwww)/2;
Thank you for your answers.
var $window = $(window),
winHeight = $window.height(),
winWidth = $window.width(),
$exepopup = $('#exepopup'),
exepopupHeight = $exepopup.height(),
exepopupWidth = $exepopup.width(),
scrollTop = $window.scrollTop(),
scrollLeft = $window.scrollLeft(),
offsetTop = (winHeight / 2) - (exepopupHeight / 2) + scrollTop,
offsetLeft = (winWidth / 2) - (exepopopWidth / 2) + scrollLeft;
if(offsetTop < 0) { offsetTop = 0; }
if(offsetLeft < 0) { offsetLeft = 0; }
$exepopup
.css('YOUR CSS PROP', offsetTop)
.css('YOUR CSS PROP', offsetLeft);
So why is this cleaner and faster?
First of all cleaner. It is a common convention to group all of the var declarations together so that they form a nice clean statement. Additionally using correct casing for variables known as camelCase.
Now why is it faster? Well with the original code the issue was that you were rewrapping the window object in jQuery (which takes time), as well as the exepopup element. This way you hold a reference to those and just take from them as required.
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;
}