Develop Reference

How to get correct div innerHeight the first time?

I have a hidden sub nav with height set to 0. Inside of that div are several sections of sub navs.
I get the name of the section that is clicked, then get the innerHeight of that div. Then using that height, I animate the .sub_navigation height from 0 to the value. However for some reason the first time you click (get the value) it's off, too high, the 2nd time it's perfect.
How would you fix this?
Angular (converted from jQuery)
// Controller for Nav
app.controller('NavController', function(){
// Property of Controller
this.clicked = function(menuItem) {
console.log(menuItem);
var contentHeight = $('.'+menuItem+'-content').innerHeight();
var content_height = $('.'+menuItem+'-content').innerHeight();
$('.sub_navigation').css({'height' : '0px'});
$('.'+menuItem+'-content').siblings().css({'display' : 'none'});
$('.'+menuItem+'-content').css({'display':'block', 'height':'auto'});
$('.sub_navigation').animate({
height: contentHeight
});
console.log('content_height = '+content_height);
console.log(contentHeight);
};
});
jQuery
$(document).delegate(".navigation-links a", "click", function(){
var myContent = $(this).attr("data-content");
var contentHeight = $("."+myContent+"-content").innerHeight();
$("."+myContent+"-content").siblings().css({"display":"none"});
$("."+myContent+"-content").css({"display":"block", "height":"auto"});
$(".subNavigation").animate({
height: contentHeight
});
});
If you click on Grow, the first time height is 400, the 2nd time it's 266 :(

The innerHeight documentation says that:
The value reported by .innerHeight() is not guaranteed to be accurate
when the element's parent is hidden. To get an accurate value, you
should show the parent first, before using .innerHeight().
So although the parent is visible, maybe the fact that the element itself is invisible makes the height value to be inaccurate.
Have you tried, changing the order?
//Make the sub menu visible first
$('.'+menuItem+'-content').siblings().css({'display' : 'none'});
$('.'+menuItem+'-content').css({'display':'block', 'height':'auto'});
var contentHeight = $('.'+menuItem+'-content').innerHeight();
var content_height = $('.'+menuItem+'-content').innerHeight();
$('.sub_navigation').css({'height' : '0px'});
....

Try to show the menuItem while getting the height:
this.clicked = function(menuItem) {
var menu = $('.'+menuItem+'-content');
menu.show();
var contentHeight = menu.outerHeight();
menu.hide();
...

jQuery function on window events (load and resize)

I'm not sure how to use the order of the window events load and resize on jQuery to make it work when resizing. The first function is used to get the total width except the scrollbar width, because the CSS is using the device width, but the JS is using the document width.
The second function adds a style when the total screen width is between 768px and 1024px, and it should work when I load the page at any screen, after resizing, etc. I'm doing a lot of tests and I think the problem is about the window events order.
For being more specific about the problems, it doesn't remove the style when I load the page at 900px and I expand it to > 1024px! Or by the contrary, it doesn't add the style when I load the page at 1300px and I shorten the width to 900px.
I think it's 'cause of the load and resize events order, but I'm not totally sure. Or maybe I'm not doing the correct declaration of the variable into the resize.
The code:
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
$(document).ready(function(){
var vpwidth=$(window).width();
$(window).on('resize', function(){
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});

I believe the issue is that you're not re-calculating the vpwidth on resize, So the value you got when the page was loaded will be used every time window is resized.
try
$(document).ready(function(){
$(window).on('resize', function(){
var vpwidth=$(window).width(); // get the new value after resize
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});

The issue is because you are not recalculating the width (vpwidth) on resize function.
It is initialized and set on page load itself and hence doesn't change when the window is resized causing the style to not be added or removed.
You need to re-assign the value to the variable from within the resize function.
$(window).on('resize', function(){
var vpwidth=$(window).width();
}
Demo Fiddle

Do not execute jQuery script if CSS is of particular value

On my website, I have a sidebar DIV on the left and a text DIV on the right. I wanted to make the sidebar follow the reader as he or she scrolls down so I DuckDuckGo'ed a bit and found this then modified it slightly to my needs:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
$window.scroll(function(){
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
})
});
});//]]>
</script>
And it works just like I want it to. However, my website uses Skeleton framework to handle responsive design. I've designed it so that when it goes down to mobile devices (horizontal then vertical), sidebar moves from being to the left of the text to being above it so that text DIV can take 100% width. As you can probably imagine, this script causes the sidebar to cover parts of text as you scroll down.
I am completely new to jQuery and I am doing my best through trial-and-error but I've given up. What I need help with is to make this script not execute if a certain DIV has a certain CSS value (i.e. #header-logo is display: none).
Ideally, the script should check for this when user resizes the browser, not on website load, in case user resizes the browser window from normal size to mobile size.
I imagine it should be enough to wrap it in some IF-ELSE statement but I am starting to pull the hair out of my head by now. And since I don't have too much hair anyway, I need help!
Thanks a lot in advance!

This function will execute on window resize and will check if #header-logo is visible.
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
});
I think you need to check this on load to, because you don't know if the user will start with mobile view or not. You could do something like this:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
}).resize();
This will get executed on load and on resize.
EDIT: You will probably need to turn off the scroll function if #header-logo is not visible. So, instead of create the function inside the scroll event, you need to create it outside:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
function myScroll() {
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
}
$window.on('scroll', myScroll);
} else {
$(window).off('scroll', myScroll);
}
});
Didn't test it, but you get the idea.

$("#headerLogo").css("display") will get you the value.
http://api.jquery.com/css/
I also see you only want this to happen on resize, so wrap it in jquery's resize() function:
https://api.jquery.com/resize/

Change li height on browser width resize

I made a little script to change the height of a group of li-elements to the one with the most content.
The code works fine, but it should also work by resizing the browser width.
I need to know why it doesn't reload by changing the browser width ?
Here is my Code :
//changes slider hight to the hight of the li with the most content
function heightChange() {
var max = -1;
$(".feedback li").each(function() {
var h = $(this).height();
max = h > max ? h : max;
});
$(".feedback li").css("height", max);
};
// start by open site
heightChange();
// load function by resizing of the browser window
$(window).bind("resize", function(){
heightChange();
});

You need to reset your height before setting it again. Demo
$(window).on("resize", function(){
$(".feedback li").css("height", "auto");
heightChange();
});
Otherwise will height() just return the specified value;
Also, .on() is the preferred way to bind and event, as of jQuery 1.7

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/