Software training courses are now available..!! email resume or Contact Us. C, JAVA, SQL, JS, HTML/CSS, PHP, Drupal, Wordpress

Getting Real Width of Hidden Element using Jquery

If an HTML element is hidden or its parents are hidden then Jquery .width() will return 0. But sometimes we need to get the actual width of element which would be applicable if element is visible. To get that real width of hidden element here is a small Jquery Hack:-

//Real Width of Element even if element/parents are hidden
  $.fn.elementRealWidth = function () {
    $clone = this.clone()
        .css("visibility","hidden")
        .appendTo($('body'));
    var $width = $clone.outerWidth();
    $clone.remove();
    return $width;
  };

Description: Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

The jQuery.fn.extend() method extends the jQuery prototype ($.fn) object to provide new methods that can be chained to the jQuery() function

Search Tags

Don't Know What is Best Solution for you.? We are here to help you.! Contact Us