Develop Reference

Check if window height is greater than div#content height in AngularJS

I'd like to add css styles (position: fixed) to footer only if window.height is greater than height of div with main content.
In my solution (below) the condition is always true, so it dosn't work as I expect. Moreover I'm not sure if I used $scope.$watch in right way to control window height - I don't want to press f5 every time when I change page (eg. form home page to contact page) to refresh scope and apply additional styles.
I've found similar topics (eg. Forcing footer to bottom of page, if document height is smaller than window height ) but nothing for AngularJS
I'm using AngularJS 1.6.
This is my code:
controllersFooter.controller( 'footer' , [ '$scope' , '$window' , function( $scope , $window ){
var $footer = angular.element(document.querySelector('#site-footer'));
$scope.windowHeight = jQuery( window ).height();
$window.onload = function() {
$scope.$watch(function(){
var contentHeight = document.getElementById('content-container').scrollHeight;
return contentHeight;
}, function(value){
var contentHeight = value;
if ( contentHeight < $scope.windowHeight ) {
$footer.css(
{
"position":"fixed",
"bottom":0,
"left": 0,
"right": 0
}
);
}
});
}; }]);

You can use ng-class in the footer with a scope variable and make it true or false according the height of the page
More about ng-class
https://docs.angularjs.org/api/ng/directive/ngClass

1
Please make sure that the document body has a scroll.
Just it can be any other div with overflow: auto... you expect that it will be document.body, but that is not always true
2
I advice you to just subscribe to scroll event on element with scroll-bar, like:
jQuery( elementWithScrollBar ).scroll(function() {
$scope.fixed = calculateIfFooterIsFixed();
$scope.$digest(); // run angular digest cycle to reflect scope changes to DOM,
// most likely you will need it
});

Event on windows resize is available natively in angularjs.
angular.element($window).on('resize', this.onResize);
In your case for example sth like that:
var footerHeight = document.getElementById('side-footer').scrollHeight;
this.onResize = function() {
var contentHeight = document.getElementById('content-container').scrollHeight;
$scope.$apply(function() {
$scope.isFixed = contentHeight > $window.innerHeight - footerHeight
});
}
and use ng-class:
<div id="side-footer" ng-class="{'fixed': isFixed}">
Position "fixed" when main content is smaller than visible window:
https://jsfiddle.net/UncleGoogle/jpy4zse9/25/
(for some reason need to run twice to set fiddle footer size properly)

Binding a jquery value to a specific DIVs height

Sorry, I'm a jquery/js apprentice. I have a jquery sticky nav setup with skrollr set to "stick" at a top offset of 590px. This seemed okay but I came to find I need that offset to be unique on some pages and instead of having to manually apply the unique offset I wanted to know if I can bind the offset value to a specific DIVs height? This would help make things easier to manage in the future.
Here is my codez:
$(document).ready(function() {
var stickyNavTop = $('#navmenu').offset().top+590;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#navmenu').addClass('sticky');
} else {
$('#navmenu').removeClass('sticky');
}};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
The DIV in question with the height value I need to bind it to has a class of .custom-hero-background
It has a global height applied of 600px but on some pages I override this with unique heights.

Just add this in your script, outside of all the other functions, except for $(document).ready(function(
var theHeight = $('.custom-hero-background').height();
and then instead of having a fixed +590 for the offeset, just do + theHeight. If you need it to be 10 pixels less than theHeight, just do theHeight - 10
var stickyNavTop = $('#navmenu').offset().top+theHeight;

Bootstrap Slide in Navbar Clean Up jQuery remove active when user resizes to the min-width

I have this script below working well but I can't figure out how to do 1 thing:
A: When a user sizes to below the min-width threshold and clicks the toggle to view the menu and then just resizes back to > 767 -- though highly unlikely in real world situations -- the .slide-active class is still there and I can't figure out how to get rid of it. I can fake it with the css (which I've done) but it'd be nice to actually remove it when it's large, tried wrapping the script in an if .navbar-toggle is visible and it only worked on reload, so can't have that.
DEMO:
http://jsbin.com/ucARonA/1/edit
http://jsbin.com/ucARonA/1
$(document).ready(function () {
//stick in the fixed 100% height behind the navbar but don't wrap it
$('#slide-nav.navbar .container').
append($('<div id="navbar-height-col"></div>'));
// Enter your ids or classes
var toggler = '.navbar-toggle';
var pagewrapper = '#page-content';
var navigationwrapper = '.navbar-header';
var menuwidth = '100%'; // the menu inside the slide menu itself
var slidewidth = '80%';
var menuneg = '-100%';
var slideneg = '-80%';
$("#slide-nav").on("click", toggler, function (e) {
var selected = $(this).hasClass('slide-active');
$('#slidemenu').stop().animate({
left: selected ? menuneg : '0px'
});
$('#navbar-height-col').stop().animate({
left: selected ? slideneg : '0px'
});
$(pagewrapper).stop().animate({
left: selected ? '0px' : slidewidth
});
$(navigationwrapper).stop().animate({
left: selected ? '0px' : slidewidth
});
$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active');
$('#page-content, .navbar, body, .navbar-header').
toggleClass('slide-active');
});
});

If you need to toggle something on a browser size change and if it meets a min-width, combind a resize event with a if statement.
$(window).on("resize",function(){
if ($(window).width() > 760) {
$(selected).removeClass('slide-active');
}
});

how to re-calculate variables in javascript

function scrollContent(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
}
This is how I scroll my image list. The problem is that #scrolling-content element's size is dynamic. It changes on window resize. Here;
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
});
So it has to recalculate the left value when user changes windows size. How sould I change script to do that? Recalling scrollContent() function with window.resize function is a noob solution I guess. And it creates conflict for IE.

You could set the width on resize and make your function call the variable like so. This method turns your function into a js object and the window update resets the width var inside that object. Course now you call the function like this: scrollContent.scroll();
var scrollContent = {
width: 0,
scroll:function(){
var div = $('#scrolling-content'),
ul = $('ul.image'),
// unordered list's left margin
ulPadding = 0;
//Get menu width
scrollContent.width = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var left = (e.pageX - div.offset().left) * (ulWidth-scrollContent.width) / scrollContent.width;
div.scrollLeft(left);
});
}
};
$(window).resize(function() {
$("#scrolling-content").css("width",$(window).width() + "px");
$("#scrolling-content").css("height",($(window).height()-400) + "px");
scrollContent.width = $(window).width();
});
You can also just declare a standard js var and use that to keep things simple. I just prefer working with js objects to eliminate possible var interference.

Check block visibility

We have code like:
<body>
<div class="blocks">some text here</div>
<div class="end"></div>
</body>
Text can fit in current browser visible part or not.
How to detect, does the block is in visible part of browser window?
I mean, if resoution is 1024x768 and .block height bigger than 768, then .end is invisible.
we should detect this on window.ready and also on browser window change.
if block is visible, then run some function.
Any help is appreciated.

Something like this:
$.fn.viewport = (function() {
var vp = function(el, opts){
this.el = $(el);
this.opts = opts;
this.bind(); // bind resize and scroll
this.change(); // init change
};
vp.prototype = {
bind: function(){
$(window).bind('resize scroll',
$.proxy(this.change, this));
},
change: function(e){
var p = this.el.position(),
o = this.el.offset(),
d = { w: this.el.width() +o.left, h: this.el.height()+o.top },
win = $(window),
winD = {w:win.width() + win.scrollLeft(), h:win.height()+win.scrollTop()};
if(d.w <= winD.w && d.h <= winD.h){
console.log('inview');
} else {
console.log('out of view');
this.opts.outOfView.call(this);
}
}
};
return function(opts){
return $(this).each(function(){
$(this).data('vp', new vp(this, opts));
});
};
})();
And use like this:
$('#el').viewport({
outOfView: function(){
alert('out of view');
}
});

First grab the window dimensions.
var windowSize = {width: $(window).width(), height: $(window).height() + $(window).scrollTop()};
Next grab the div position in relation to the document:
var position = $('.block').offset()
Then make your if's:
if(position.top > windowSize.height){ /* here we go */ }
You might want to also grab div dimensions in case there is a possibility it will be out of bounds on the top or left side.
You could make it into a function that returns a boolean value and then call it on the window.resize and document.ready events.
EDIT: Added scrollTop to account for scrolling.

As a quick answer you'll have to do some computation on load (psuedocode assumes jQuery).
Find the window height $(window).outerHeight(true)
Find the offset of the ".end" element $(".end").offset()
Find the scroll distance of the window $(window).scrollTop()
Calculate! It should roughly be:
if ((step1 + step3) > step2) {
//do stuff here
}
Note that that does not check if you are scrolled past the ".end" element. I didn't verify this one, so hopefully I'm not missing something big.

Get the offsetTop and offsetLeft attributes of the element
Get the width of the element in question
Get the width of screen
Do the relevant maths and see if the element is in the viewport or now.
in jQuery you can do something like
$("#element").attr("offsetTop")
EDIT:
Simple and Effective: http://jsfiddle.net/hPjbh/