Develop Reference

Javascript fails to execute properly for some images

I'm building my personal e-commerce website with vertical rhythm in mind. It's just a challenge for myself. But images are so problematic for me. I need to set their height using javascript (script below?), for some images it's executed properly but not some others. The not executed properly images will have 0 height.
I've tried using window.onload but still don't work. I also looking for proper vanilla JS plugin but none of them available to use.
function adjustImg(element) {
var images = document.getElementsByTagName(element),
lineHeight = parseInt(window.getComputedStyle(document.body).getPropertyValue('line-height')),
newLineHeight = lineHeight / 2;
for(i = 0; i < images.length; i++) {
var aspectRatio = images[i].offsetWidth / images[i].offsetHeight,
originalHeight = images[i].offsetWidth / aspectRatio,
div = Math.round(originalHeight / newLineHeight),
newHeight = newLineHeight * div;
images[i].style.height = newHeight + 'px';
}
}
I expected all images to have corrected height properly. But like I said some of them don't show up because of the 0 height. My hypothesis is because the image is not completely loaded, but the javascript has been executed. Therefore the javascript could not obtain the offsetWidth and offsetHeight
I've no idea how to fix this issue, any helps are much appreciated. Sorry for my english.

Perhaps try img.onload. This event fires when an image is loaded.

Javascript bug with .height() in chrome

I have the following code (coffeescript) that is setting the height of one of my divs dynamically for the content. It works perfectly for Firefox and Safari. I am having problems with chrome. Ive been doing a lot of reading and they say chrome has a bug in the sense that it measures heights from the .height() function differently then other browsers. Is there anyway to fix this or any work arounds anyone has found?
resize = ->
window_height = $(window).height()
$('.full-height').each ->
elm = $(this)
wrapper_height = elm.height()
difference_height = window_height - wrapper_height
new_height = wrapper_height + difference_height
content_height = $('#wrapper').height()
offset = elm.data('offset-height') || 0
if(window_height >= content_height)
elm.css
height: new_height

Running Javascript after CSS is fully loaded

I have some code that depends on the css being loaded.
I load css on the header before I load the javascripts on the footer
I tried the javascript with $(document).ready
$(document).ready(function() {
var bar_position, width;
bar_position = $('body').height() - 38;
width = $('body').width();
console.log(bar_position);
if (width &lt= 480) {
console.log("Entered");
$('#accounts-bar').css("top", bar_position);
}
});
I tried $(window).ready, $(window).load, but all of them fail.

You code is really messed up (unless you are using CoffeeScript.) This is what it should be:
$(function () {
bar_position = $('body').height() - 38; //38 is the size of the bar
width = $('body').width();
console.log(bar_position);
if (width <= 480) { //480 is the mobile width
console.log("Entered");
$('#accounts-bar').css("top", bar_position);
}
});

With CSS being loaded in the header, JS in the footer, and wrapped in a doc-ready, you should be fine as far as the CSS being applied before the JS code is executed. I'm guessing the reason your element has no width is that it is display: none;, or contains only floated elements, or something along those lines. In other words - I think this is a CSS issue, not a JS timing issue. Try going into your Firebug/Chrome console, selecting the element in question, and getting its width.

JavaScript comments are not #, they are //
wrong
bar_position = $('body').height() - 38 #38 is the size of the bar
right
bar_position = $('body').height() - 38 //38 is the size of the bar
And there are a bunch of other errors where that code would not run. Guessing you missed a tag and this is not pure JavaScript since it is indented for block scope and missing braces/closures all over.

The ready event should suffice.
When using scripts that rely on the value of CSS style properties,
it's important to reference external stylesheets or embed style
elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the
dimensions of an image are required), the code should be placed in a
handler for the load event instead.
Also, your javascript is invalid. If it is supposed to be CoffeeScript, you are missing ->:
$(document).ready ->
bar_position = $('body').height() - 38 #38 is the size of the bar
width = $('body').width()
console.log(bar_position)
if (width <= 480) #480 is the mobile width
console.log("Entered");
$('#accounts-bar').css("top", bar_position)
return
If it's supposed to be JavaScript, you have more issues:
$(document).ready(function(){
bar_position = $('body').height() - 38; //38 is the size of the bar
width = $('body').width();
console.log(bar_position);
if (width <= 480) //480 is the mobile width {
console.log("Entered");
$('#accounts-bar').css("top", bar_position);
}
});

$(window).bind("load", function() {
// code here
});

Getting height and width of body or window of web page

Depending on which mode of IE8 i'm in (quirks or standard) i get different values for the height and width. I've tried standard javascript and jquery but both return different results.
In Quirks
$('body').width = 1239
$('body').height = 184
document.body.clientWidth = 1231
document.body.clientHeight = 176
In standards
$('body').width = 1260
$('body').height = 182
document.body.clientWidth = 1254
document.body.clientHeight = 176
Any ideas how to get a value unchanged by the mode of IE8.
Thanks in adv.

Perhaps the issue is due to the scrollbars being included in the width and height regardless of whether or not they are there. I don't have IE (on a mac) so can't verify.
However, I can tell you what does work as in my project jQuery Lightbox I have no such issue. We use the following code in it:
// Make the overlay the size of the body
var $body = $(this.ie6 ? document.body : document); // using document in ie6 causes a crash
$('#lightbox-overlay').css({
width: $body.width(),
height: $body.height()
});
// ... some code ...
// Get the window dimensions
var $window = $(window);
var wWidth = $window.width();
var wHeight = $window.height();
And the overlay displays correctly. I would trust jQuery's result of the width and height compared to that of the native result, as jQuery should naturally be taking into account any quirks with the browser.
It is important to note that the lightbox script above tends to prefer $(document) over $(document.body) for some reason - I can't remember sorry :O - so perhaps this solves the issue as well?

Just a quickshot. Try to give your body #page:
function getPageHeight() {
var pageHeight = document.getElementById('page').offsetHeight;
var pageWidth = document.getElementById('page').offsetWidth;
alert(pageHeight);
alert(pageWidth);
}

Try this:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
var width = viewport.width;
var height = viewport.height;

IE6 crashes with this jQuery

The following code crashes IE6 every time. It keeps refreshing the page and crashes after a minute:
$(window).bind("load resize", function () {
var hnf = $('#header').height() + $('#footer').height();
$('#main').height($(window).height() - (hnf));
$('.fluid').height($('#main').outerHeight());
$('#content').width($('#main').width() - $("#aside").width() - 90);
});
..whats causing it?
EDIT: Okay the "resize" in $(window).bind("load resize", function () { is causing it, how do I fix?
Many thanks for your help!

It looks as though IE6 incorrectly fires the onResize event even when the document body dimensions change. Here's a link with more information.
I would look for a non-jQuery way to do what you want. If you use CSS to control the fixed-size elements of your page, won't the browser take care of the variable-size elements on its own?

The fix Drew Wills links to sounds like it should work. Try:
var prevHeight;
$(window).bind("load resize", function () {
var height = $(window).height();
if ( prevHeight == height )
return; // hack to prevent recursion in IE6
prevHeight = height;
// resize content
var hnf = $('#header').height() + $('#footer').height();
$('#main').height(height - (hnf));
$('.fluid').height($('#main').outerHeight());
$('#content').width($('#main').width() - $("#aside").width() - 90);
});
Feel free to pretty that up a bit (attach prevHeight to something else, etc).

I think it might have to do with the fact that you are trying to set the height and width without CSS. I am not sure but if I was going to do it I would use the JQUERY .css() method to set he height and width. so it would look like this,
$(window).bind("load resize", function () {
var hnf = $('#header').height() + $('#footer').height();
$('#main').css("height", ($(window).height() - hnf));
$('.fluid').css("height", ($('#main').outerHeight()));
$('#content').css("width", ($('#main').width() - $("#aside").width() - 90));
});
This might not work I did not test it.