CODEWITHSUNDEEP
javascripthtmlcssoffsetwidth
Jordan Adams
Jordan Adams

Reputation: 434

offsetWidth is returning incorrect value

Okay so I'm attempting to make a horizontal site but when I try getting the offsetWidth of the navigation, it returns a value far higher than the true width. The design in question can be found here. The CSS for the page is here and the JS here.

Many thanks to anyone who can work this out :)

Upvotes: 5

Views: 14271

Answers (3)

Rodrigo
Rodrigo

Reputation: 1688

Another solution is set the body margin to 0, usually when no width is set and the body margin is untouched, the render might be off by 16 pixels which accounts for 8 pixels to each side (left and right) of the body tag.

Rodrigo.

Upvotes: 2

Marko Vranjkovic
Marko Vranjkovic

Reputation: 6869

This is how your page looks like just moment before CSS is applied: http://img571.imageshack.us/img571/1047/shotjt.png . In that moment width of #projects nav is width of client screen.

You have two solutions:

  1. specify width of #projects nav in style attribute
  2. add some timeout to the init JS function: domready(function() { setTimeout("initPageFunction()", 200); }

Surprisingly, it works good in IE :)

Upvotes: 4

Jay
Jay

Reputation: 4686

It's because the space created by margins are calculated, and there's a right margin for the last article. Here's the fixed script.

domready(function() {

    var projectsContainer = qwery('#projects')[0];
    var projects = qwery('.project');
    var projectsNav = qwery('#projects nav')[0];

    var pMargin = 40;
    var pnW = projectsNav.offsetWidth+cMargin;

    for(p in projects) {
        projects[p].style.marginRight = pMargin+'px';
    }

    projectsContainer.style.width = (projects.length*(projects[0].offsetWidth+pMargin))+pnW+'px';

});

Upvotes: 0

Related Questions