Develop Reference

jQuery not calculating correct height of text if there is an orphaned word on line break

If you look at this page I'm developing: http://dev.aaronpitts.ch/test/ you will see three green buttons in rows saying 'Find out more'. I'm trying to get them to always be aligned using the following jQuery:
var maxHeight = 0;
$(".same-height-inner").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".same-height-inner").height(maxHeight);
The p block in .same-height-inner has a margin-bottom of 20px bottom but this isn't being included in the height of .same-height-inner. Also, if you look at this on a screen size of 1024 x 768 you will see the left hand column's text gets further miscalculation in height as it's not including the orphaned word which is broken to a new line. I've tried using
outerHeight(true)
but it makes no difference. How can I achieve the above?

You can simply add .find('p') to your jQuery code, so it would be:
var maxHeight = 0;
$(".same-height-inner").find('p').each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".same-height-inner").height(maxHeight);
The same way if you'r using outerHeight(true), for example, I'm using this code:
function calculateHeight($el) {
var height = 0;
$el.children().find('a').each(function() {
height = height + $(this).outerHeight(true);
});
$el.data('oHeight', height);
}
Good luck.

This is because the paragraph element is larger than the enclosing div as it's an inline element inside a block element, just include the p in your selector
$(".same-height-inner p").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".same-height-inner").height(maxHeight);
You could alternatively make the enclosing div inline which will also fix the problem, but may have unintended consequences elsewhere on the site.
.same-height-inner {
display: inline-block;
}

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;

Responsive margin resizing

I want to have my elements resize their margins equally so that they fill the page. I tried turning the page width into a value using jquery but that didn't work.
var margen = $(window).width()
$(document).ready(function () {
$('#FixedMenu *').animate({
'margin-left': 'margen/6'
});
});
http://jsfiddle.net/clarinetking/2PGZS/40/

I make little update to your jsFiddle, you can see it here:
jsFiddle
What i change is this:
1.
You found width of screen:
var screenWidth = $(window).width();
2.
You found total width of child elements of your fixed menu
var widthOfChilds = 0;
$('#FixedMenu > *').each(function() {
widthOfChilds += $(this).outerWidth( true );
});
3.
You take off total width of child elements from screen size and you will get "free"width around child elements.
There are six of them, but you need space after last one from right, so you divide "free"width by number of childs + 1
var newmargin = (screenWidth - widthOfChilds)/7;
$('#FixedMenu *').animate({
'margin-left': newmargin
});
I hope it helped! :)

Runtime error with footer's resizing using jQuery

I'm currently working with PHP, and this footer is one of the components of every page. First off, I know that a footer of this size needs to be made smaller before I publish it; it's currently formatted like this before I create drop-down (or in this case, pop-up) menus.
I currently have jQuery set to auto-resize the footer's height on window resize (with debounce), since the internal elements move in a grid pattern. However, I've run into a couple issues:
On the first page load, before any resizes, it doesn't extend the footer sufficiently far enough so all internal elements are on the same colored background. I know I could just add a constant, but I want it to scale with the end user's default text size.
After multiple resizes, the footer's total height is several times more than intended.
I can't spot the error; what am I doing wrong? I've pasted the relevant code into jsFiddle, as it's rather long.
Code (jsFiddle)
EDIT: Problem 2 fixed. Default behavior is now Problem 1.
EDIT 2: Here's a preview. You should still checkout the fiddle, though.
var maxWidth, maxHeight, numBoxes;
function arrangeFooter() {
// Get the width of the footer to determine # of rows
var footerWidth = $("#footer").width();
// Get list of .box divs' widths and lengths
var widths = $(".box").map(function() {
return $(this).innerWidth();
}).get();
var heights = $(".box").map(function() {
return $(this).height();
}).get();
numBoxes = widths.length;
// Find maxWidth, maxHeight of .box divs
// From these, finds # of cols that can fit with the maxWidth,
// and number of rows
maxWidth = Math.max.apply(Math, widths);
maxHeight = Math.max.apply(Math, heights);
var cols = Math.floor(footerWidth / maxWidth);
var rows = Math.ceil(numBoxes / cols);
// Calculates footer's new height, defined as
// maxHeight * num rows + height of .firstrow div
var newHeight = maxHeight * rows + parseFloat($(".firstrow").css("font-size"));
// Prints out resulting CSS rules directly to page
var styling = "\n .box {\n height: " + maxHeight + "px;\n width: " +
maxWidth + "px;\n }\n"
styling += "\n #footer {\n height:" + newHeight + "px;\n }\n";
$("#style").text(styling);
}
function resizeFooter() {
var footerWidth = $("#footer").width();
var cols = Math.floor(footerWidth / maxWidth);
var rows = Math.ceil(numBoxes / cols);
// Calculates footer's new height, defined as
// maxHeight * num rows + height of .firstrow div
var newHeight = maxHeight * rows + parseFloat($(".firstrow").css("font-size"));
// Prints out resulting CSS rules directly to page
$('#footer').css('height',newHeight);
}
// Debounce method; used to ensure that only one event is fired
// after ms if multiple identical events are triggered
var delay = (function() {
var timers = {};
return function(callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout(timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
function init() {
// calls arrangeFooter after 200ms to ensure page loads first
setTimeout(arrangeFooter, 200);
// Problem? Executes 500ms after window resize is "complete"
$(window).on("resize", function() {
delay(function() {
resizeFooter();
}, 500, "resize");
});
}
window.onload = init();​

After messing with the code a bit I think the problem is related to adding the font size of the first row to the size of the content in the box div.
This will add about 16 pixels to the height, but won't add the margin (10 pixels), padding (another 10 pixels) or border (1 pixel). Furthermore if the screen is so thin that for some reason that row extends to two lines then it'll only add the font-size once and not twice.
Therefore I propose the alternative:
var newHeight = maxHeight * rows + $(".firstrow").outerHeight(true);
.outerHeight(true) will give you the height of the element including margins.

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.