We Keep Coding

How to apply the offset .top to the height of a div?

On this blog I want to edit the height of the #content div and make it height: x.top px (of the article:last-child) so that the background which is repeating itself vertically.
http://manutdstream.tumblr.com/
I tried to do this:
$(document).ready(function(){
x=$("article:last-child").offset();
$('#content').css('height' : 'x.top px');
});
I think the problem is in the .css() as when I ran it to alert the x.top it went fine.

Your variable is being treated as a string, place it outside the quotes and add it to the string with a +:
$(document).ready(function(){
var x = $("article:last-child").offset();
$('#content').css('height' : x.top + 'px');
});

If you're just setting the height, no need to bother with css. Pixels is the default unit for the height function:
$(document).ready(function(){
var lastArticle = $("article:last-child");
$('#content').height(lastArticle.offset().top);
});
Not to nit-pick, but I'd recommend against using variables named something like x even for simple things -- unless you actually mean x (for example, coordinate spaces). Code is already hard to read, but good names can make it easier.

The syntax for .css() is incorrect, should be
$('#content').css('height', x.top + 'px');
Fiddle example:
http://jsfiddle.net/jessikwa/5vnbLr91/

Link two HTML divs' dimensions to each other?

If I have div A and div B, is there a way to say A.width = b.width = MAX(a.width, b.width) ? That is, whichever has the largest inner content would dictate how large both are.
The actual problem I'm trying to solve is with columns - left, middle, and right. I want the left and right to be the same fixed width (but this could vary depending on their content).

It is not possible to use CSS to achieve this. However, if there is a way to do it with a JS-based solution. Here I am using jQuery. Let's say you have two divs, with classes a and b respectively.
$(function() {
function equalizeSize($ele) {
if($ele.length > 1) {
// Let CSS automatically calculate natural width first
$ele.css({ width: 'auto' });
// And then we fetch the newly calculated widths
var maxWidth = Math.max.apply(Math, $ele.map(function(){ return $(this).outerWidth(); }).get());
$ele.css({ width: maxWidth });
}
}
// Run when DOM is ready
equalizeSize($('.a, .b'));
// Run again when viewport has been resized, which **may** affect your div width.
// This is optional, but good to have
// ps: You might want to look into throttling the resize function
$(window).resize(equalizeSize($('.a, .b')));
});
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/N4MMg/
The advantages of this simple function:
Allows you to dictate what elements you want to equalize widths with.
Uses the .map() function to construct an array, which we then use Math.max.apply to get the maximum value in the array
Forces automatic calculation of width when the function first fires (especially when resizing the viewport)
Allows you to call to recalculate the size again, using the handler equalizeSize() when you change the content in the divs... you can call the function again, say, after an AJAX call that appends content to either element.

It is not very clear what you want from the description. but I can rewrite your code this way.
var properWidth = Math.max($("#a").width(), $("#b").width());
$("#a").css("width", properWidth + "px");
$("#b").css("width", properWidth + "px");
I am not sure if it is this kind of solution you want.

I'm not sure there is a way to do it like that. But why not make a default function to set the size:
function changeSize(w, h)
{
A.setAttribute('style', 'width:'+w+'; height:'+h);
b.setAttribute('style', 'width:'+w+'; height:'+h);
}
Working fiddle: http://jsfiddle.net/kychan/ER2zZ/

jQuery animate and property values in percentage

I trying to animate a div and I try to use some value retreived somewhere else, I know the value to be correct because I've printed out the output... so I'm wondering why doesn't it work properly?
animateBar(percentage.toFixed(2)+'%');
[ . . . ]
function animateBar(percentage)
{
$('#innerBox').animate({width: percentage}, 3000);
}

It seems as though theres a bug with using a percentage with animate. http://bugs.jquery.com/ticket/10669
I would suggest calculating the number of pixels to add yourself, something like this may work:
percent = 0.25;
add_width = (percent*$('#innerBox').parent().width())+'px';
$('#innerBox').animate({'width': '+='+add_width}, 3000);

This works if you're happy using CSS3 transitions:
JS:
function animateBar(percentage){
$('#innerBox').width(percentage+'%');
}
CSS:
#innerBox{transition: 3s}

This is pretty old, but this way is working for me:
wthSelected = 85;
$(this).animate({
width:wthSelected+'%'
}, 1500);
Also i'm using jquery-1.11.2.min.js and jquery.mobile-1.4.5.min.js

Try adding the units text like this:
function animateBar(percentage)
{
$('#innerBox').animate({width: percentage+"px"}, 3000);
}

It may be that you're allowing 2 decimal points to the percentage. Have you tried using an integer value instead? I'm not sure all browsers support floating percentages.
Also, make sure $('#innerBox') has a set width to begin with. It doesn't have to be a percentage. It just has to be set in CSS or through a JS method.

If it's in percentage then try this one here
function animateBar(percentage) {
percentage = percentage+"%";
$('#innerBox').animate({'width': percentage}, 3000);
}
we're using a css property here so don't forget the single quotes, so it should be 'width' not width

jQuery calculation doesn't add up as expected when toggling height

I have the following function for calculating the height of .node. It then takes away the height of a possible image, .node-image, from the height of the .node, and sets a column, .node-content-column to have a height that is the difference (i.e. 500 - 50 = 450; column becomes 450 in height).
function initColumnSizer() {
imageHeight = $('.node-image').outerHeight(true);
resizeHeight = ($('.node').outerHeight() + 75) - imageHeight;
$('.node-content-column').removeAttr('style');
$('.node-content-column').css('min-height', resizeHeight);
$('.node-content-column').css('height', 'auto !important');
$('.node-content-column').css('height', resizeHeight);
}
This function gets called on page load, and resizes .node-content-column as expected.
It also gets called when a div within .node is toggled using jQuery.toggle(), but this calculation returns a larger number everytime, instead of reverting back to the original once this toggle is reverted.
Can anyone see where I am going wrong with this calculation? Or if I am going about it the wrong way?
Thanks in advance!
Karl

1) Maybe the problem is in outerHeight() function (it takes into account padding and border). Try using just height or clientHeight:
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
2) why do you need to cleanup the whole elements' style?
and then you try to assign height = auto, and after that: height = resizeHeight - what's the purpose for that ? check the logic of your code.

outerHeight(true) will return height + padding + border + margin. Possibly, you might want to use height() ?

Most possible is that "larger number everytime" have always constant difference -- for example 75.
May be you just have some dependecies between .node-content-column and .node?
If your nodes like .node-content-column, .node and .node-image are all singles, then it's better to use IDs for them -- not CSS classes.

Convert css width string to regular number

While trying to compute the width of an hidden element I found that jquery.width() returns 0 for that elements' width.
I found out that using jquery.css('width') would return the correct width by using the declared style width (even if that value is different from the initial stylesheet). The problem is that the css('width') method returns a string, generally in a "100px" fashion. My question resolves into: how to retrieve the number from the "100px" string?
Is there an easy way?

If it always returns in px format, "100px", "50px" etc (i.e. not "em" or percent), you could just...
var width = parseInt($("#myelem").css("width"),10); // always use a radix
or
var width = parseInt(element.style.width,10); // always use a radix
It ignores the "px" suffix so you should be good to go.
Although deep down I'm thinking that something isn't right if $("#myelem").width() isn't working.
Note on hidden elements.
If you are adding jQuery to progressively enhance you page, the element you are calculating should be visible when the page first loads. So you should get the width before you initially hide the element. By doing this, $("#myelem").width() will work.
var myWidth = 0;
$(document).ready( function () {
myWidth = $("#myelem").width();
$("#myelem").hide();
});

In plain JavaScript:
parseInt('100px', 10)
Works with "100em", "100%", and even with: "100". No need for any Regular Expression patterns.

You could remove non-numericals with a regular expression and then just convert to a number. This works no matter how you define the width (px, em, %, pt). Preserves decimal points too.
vanilla javascript
Number(elem.style.width.replace(/[^\d\.\-]/g, ''));
jQuery
Number($elem.css('width').replace(/[^\d\.\-]/g, ''));

Oh, I came up with:
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number
Now I only hope that jquery allways returns the same string fashion: "100px"

I would stick to .width() because it actually gets the computed width instead of css width. Instead of hiding it with .hide() (display: none) you could hide it with .css('visible', 'hidden') then .width() should work.
from my comment
If you don't want to change your .hide()´s then you could apply visible: hidden and thereafter .show() and then measure the height. After you have measured it, reverse that. Objects still affects the page layout when they are hidden by visible: hidden - beware of that.
To avoid tags which mess with the layout, you could set the position to absolute, move it to the body tag and then measure.