Develop Reference

Is Javascript an Effective Method of Creating Fluid Layouts?

I'd like opinions on whether or not Javascript is a still a viable and relatively effective method of producing fluid website layouts. I know that it is possible to create fluid layouts with Javascript, but relative to other methods (e.g. CSS3/HTML5) how does it stand up in terms of performance and complexity? The function below represents what I mean. In the function, javascript is being used to find the dimensions of various elements and place other elements accordingly. To see it working, follow this link.
function onPageResize() {
//center the header
var headerWidth = document.getElementById('header').offsetWidth; //find the width of the div 'header'
var insideHeaderWidth = (document.getElementsByClassName('header')[0].offsetWidth + document.getElementsByClassName('header')[1].offsetWidth + document.getElementById('logoHeader').offsetWidth); //find the combined width of all elements located within the parent element 'header'
document.getElementsByClassName('header')[0].style.marginLeft = ((headerWidth - insideHeaderWidth) / 2) + "px"; //set the margin-left of the first element inside of the 'header' div
/////////////////////////////////////////////////////////////////
//justify alignment of textboxes
var subtitleWidth = document.getElementsByClassName('subtitle'); //assign the properties of all elements in the class 'subtitle' to a new array 'subtitleWidth'
var inputForm = document.getElementsByClassName('inputForm'); //assign the properties of all elements in the class 'inputForm' to a new array 'inputForm'
for (i = 0; i < inputForm.length; i++) { //for every element in the array 'inputForm' set the margin-left to dynamically place the input forms relative to eachother
inputForm[i].style.marginLeft = (subtitleWidth[4].offsetWidth - subtitleWidth[i].offsetWidth) + "px";
}
/////////////////////////////////////////////////////////////////
//place footer on absolute bottom of page
if (window.innerHeight >= 910) { //when the page is larger than '910px' execute the following
var totalHeight = 0; //initialize a new variable 'totalHeight' which will eventually be used to calulate the total height of all elements in the window
var bodyBlockHeight = document.getElementsByClassName('bodyBlock'); //assign the properties of all elements in the class 'bodyBlock' to a new array 'bodyBlockHeight'
for (i = 0; i < bodyBlockHeight.length; i++) { //for every instance of bodyBlockHeight in the array, add the height of that element into the 'totalHeight'
totalHeight += bodyBlockHeight[i].offsetHeight;
}
totalHeight += document.getElementById('header').offsetHeight; //finally, to add the height of the only element that has yet to be quantified, include the height of the element 'header' into the 'totalHeight'
/*Set the margin-top of the element 'footer' to the result of subtracting the combined heights of all elements in the window from the height of the window.
This will cause the footer to always be at the absolute bottom of the page, despite whether or not content actually exists there. */
document.getElementById('footer').style.marginTop = (window.innerHeight - totalHeight) - document.getElementById('footer').offsetHeight + "px";
} else {
//if the page height is larger than 910px (approx the height of all elements combined), then simply place the footer 20px below the last element in the body
document.getElementById('footer').style.marginTop = "20px"
}
/////////////////////////////////////////////////////////////////
}
Again, the result of the above function can be viewed at this link.
Thank you to any and all who offer their opinions!

You should be using CSS rather than JavaScript because that is what CSS is designed to do. If you want a fluid layout play around with using percentage widths, floats and media queries.

JQuery - waiting until image loaded not working

I need to get the height of an image on the page and try to do so only after the image has been loaded. However, it seems like I'm still getting a height of 0 for some of the images on the page. Here's my code:
carousel_img.on('load', function(){
setCarouselImageMargins(carousel_img, carousel_width);
});
function setCarouselImageMargins(image, width){
var carousel_left_margin = (image.width()-parseInt(width))/2*-1;
image.css('margin-left', carousel_left_margin);
console.log('carousel image width: ' + image.width()); // this is returning 0
console.log('carousel_left_margin: ' + carousel_left_margin);
}
Is there another way to ensure the image is fully loaded on the page?

you can do it after
$( document ).ready(function() {
setCarouselImageMargins(carousel_img, carousel_width);
});

You can use clientWidth and clientHeight DOM properties to get the inner dimension of a DOM element in your case image. So in your scenario, it will get the actual dimension of the visible image
var image = document.getElementById('imageid');
//or however you get a handle to the IMAGE
var width = image.clientWidth;
var height = image.clientHeight;

jQuery animate div that is dynamically created

I have a div that is being created in one of six locations (columns) and I then want these newly created divs (.letter-block). It should create a new block each second and these blocks need to "fall" to the bottom of the container column div (or stop at the top of last block in that column so as to get the effect the blocks are stacking on top of each other, similar to Tetris). I can get the blocks to create but once created, they don't "fall" to the bottom of the container div.
$(document).ready(function(){
setInterval(newLetter, 1000)
function newLetter(){
var $randCol = $("#col" + (Math.floor(Math.random()*6) + 1));
$randCol.prepend("<div class='letter-block'></div>").animate({'bottom':'0'}, 500);
};
});

Your code:
var $randCol = $("#col" + (Math.floor(Math.random()*6) + 1));
$randCol.prepend("<div class='letter-block'></div>").animate({'bottom':'0'}, 500);
The element that is selected here is one of your six columns. You prepend the new <div>, but the column is still what is selected, so you are trying to animate the column instead of the new <div>. Then you need to calculate how many blocks you are sitting on top of. Count the number of blocks in the column and then multiply that by their height, that is you new bottom position. Try this code:
$(document).ready(function(){
setInterval(newLetter, 1000);
function newLetter(){
var $randCol = $("#col" + (Math.floor(Math.random()*6) + 1));
var $newDiv = $("<div class='letter-block'></div>");
$randCol.prepend($newDiv);
$(document).ready(function(){
var $oldBlocks = $randCol.find('.letter-block');
var yPos = '' + ($oldBlocks.length * $oldBlocks.first().outerHeight());
$newDiv.animate({
'bottom': yPos
}, 500);
});
};
});
Make sure that the new div is position: absolute or position: relative (probably absolute in your case) or directional properties like bottom won't work on it. CSS:
.letter-block {
position: absolute;
// other CSS
}

Resizing child DIV equal to parent DIV

I have a DIV with width 400px and height 200px. Inside this div is another div with some text at position 50,50 and font-size 14px;
When the parent DIV resizes (for example to 600px x 300px), i want that the text-size inside the child DIV resizes too (to a larger font-size), equal to the resized parent DIV.
How can i do that with jQuery and HTML?

make the child div width and height 100%
childDiv {
display:block;
width: 100%;
height: 100%;
position:relative //so you dont lose the positioning of your text
}

when the parent dives size becomes (600 / 300) from (400 / 200) for example, you should apply a javascript function to the child div like so
function resizeFont(parentElementId, childElementId, newWidth) {
currWidthParentElement = parseFloat( $(parentElementId).width() ); // get current width
currChildFontSize = parseInt( $(childElementId).css('font-size') ); // get font size for child
percentaRaise = (newWidth - ceil(currWidthParentElement)) * (100/ceil(currWidthParentElement)); // calculate how much parent increase
// calculate and apply new font size
newFontSize = currChildFontSize * percentaRaise/100 + currChildFontSize;
$(childElementId).css(newFontSize);
}
is seems tricky but is simple algebra. I hope thihs will help you

http://codepen.io/rafaelcastrocouto/pen/EiFIL
var div = $('div');
$(window).on('resize', function(){
var u = div.width() / 200;
div.css('font-size', u +'em');
});

There is an extension for jquery that allows resize to be fired on elements like it would on the window itself.
The extension: Jquery Resize Plugin
So something like this will do the trick:
$("#parent").resize(function(){
var newFontSize = $("#parent").height() * 0.07
$("#child").css("font-size",newFontSize +"px");
});
Check out this JsFiddle for an example: http://jsfiddle.net/Mm3jr/1/

Javascript offsetWidth returning undefined

I have a JS function that gets the width of a div on my page:
function getWidth() {
var container = document.getElementsByClassName('tag');
var message = "The width of the contents width padding: " + container.width + "px.\n";
alert(message);
}
The function doesn't run until page is loaded:
<body onload="getWidth()">
And the div is defined in CSS as a percentage, with a max-width of 900px, which is what the output should be. But instead, I'm getting this alert:
The width of the contents width padding: undefinedpx.
I've looked around for an answer, but it looks like this should be work. Any reason why it's not working?

getElementsByClassName returns a collection of nodes.
You are acting like it is one.
You would need to select the index.
var container = document.getElementsByClassName('tag')[0];