Outerwidth() function returns 0, when using for siblings

Question

I have 4 different div with image thumbnails. For thumbnail click I have created a jQuery script to enlarge the image. Enlarge image works for the first page #C1, but remaining pages, the outerWidth is returning 0. Hence the Enlarge image is not displaying as expected. The class collection-column set to display: none in CSS. On the click of the drop down menu, I use fadeOut() to hide all its siblings, and to display the current #(href attribute). I can't use visibility:hidden as it is completely hiding the page.

How can I use outerWidth() function for all the other pages.

<div class="collection-column" id = "#c1">....</div>
<div class="collection-column" id = "#c2">....</div>
<div class="collection-column" id = "#c3">....</div>
<div class="collection-column" id = "#c4">....</div>

Did anyone face the similar issue? Please help!!

Answer 1

There's a workaround about this issue that sets the position to absolute and moves the element to a non visible area. Then get's it's dimensions and restores the original position.

var getStyle = function (el, prop) {
    if (typeof getComputedStyle !== 'undefined') {
        return getComputedStyle(el, null).getPropertyValue(prop);
    } else {
        return el.currentStyle[prop];
    }
}

var getOuterWidth = function(element){
   var originalDisplay = getStyle(element.get(0), "display");
   if(originalDisplay == "hidden"){
       var originalPos = getStyle(element.get(0), "position");
       var originalLeft = getStyle(element.get(0), "left");
       var originalTop = getStyle(element.get(0), "top");
       element.css({ top : -10000, left: -10000, position: "absolute", display: "block"  });
    }

    var outerWidth = element.outerWidth();

    if(originalDisplay == "hidden"){
        element.css({ top : originalTop, left: originalLeft, position: originalPosition, display: originalDisplay });
    }

    return outerWidth;
}

Usage:

getOuterWidth($("#c4"));