Функция Outerwidth() возвращает 0 при использовании для братьев и сестер

Question

У меня 4 разных div с миниатюрами изображений. Для миниатюрного клика я создал скрипт jQuery для увеличения изображения. Увеличить изображение работает для первой страницы #C1, но остальные страницы, outerWidth возвращает 0. Следовательно, увеличенное изображение не отображается должным образом. Столбец коллекции класса установлен в display: none в CSS. По нажатию раскрывающегося меню я использую fadeOut() скрыть всех своих братьев и сестер и отобразить текущий #(атрибут href). Я не могу использовать visibility:hidden как это полностью скрывает страницу.

Как я могу использовать outerWidth() функция для всех остальных страниц.

<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>

Кто-нибудь сталкивался с подобной проблемой? Пожалуйста помоги!!

Answer 1

В этой проблеме есть обходной путь, который устанавливает абсолютное положение и перемещает элемент в невидимую область. Затем получите его размеры и восстановите исходное положение.

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;
}

Использование:

getOuterWidth($("#c4"));