0

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

kyun
  • 9,710
  • 9
  • 31
  • 66
Usha
  • 1
  • Well, by the time you calling outer width, your image not yet loaded. Use image load event to do your calculations . – Suresh Atta Oct 17 '17 at 17:02
  • Its working fine for the first page "#C1", It is returning the outerWidth() correct value. But not for the other pages #C2 ,#C3, etc.. – Usha Oct 17 '17 at 19:47
  • You can't get dimensions of hidden elements. But there are workarounds. – Taha Paksu Oct 18 '17 at 05:15

1 Answers1

0

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"));
Taha Paksu
  • 15,371
  • 2
  • 44
  • 78
  • Thank you. But i am not sure how to use it. Let me give clear picture of my issue.. THis is my website link: http://ushaprudhvi.000webhostapp.com/ Under the collection link, i have links for four pages. At the moment 2nd(crop tops and skirts) and 3rd link(handbags) trying to display the image thumbnails and they are using the same class name that is 'collecion-column'. when i click the thumbnail it is enlarging the image. This function works fine with the 2nd link. But not with the 3rd link. – Usha Oct 20 '17 at 11:15
  • I can't open that url because of the corporate firewall. – Taha Paksu Oct 20 '17 at 11:17