0

I am trying to create a light box kind of thing in jQuery. For vertically aligning my lightbox,I am using jQuery. Here is my plugin code:

(function($){
    $.fn.lightbox = function(){
        return this.each(function(){

            /*plugin code starts here*/

            var self = this;
            console.log(self);

            /*
            * Now we will vertically align the lightbox
            * To do that we will calculate the body's height,lightboxes height
            * and then subtract later from earlier one.This will give us the total empty space
            * So the margin from the top of lightbox will be half of the result we got from subtraction
            */
            //calculating body's height
            var doc_body_height = $('body').height();
            var lightbox_height = $(self).height();
            var margin_top = (doc_body_height - lightbox_height)/2;
            $(self).css('margin-top',margin_top);
            console.log($(self).height());
            /*plugin code ends here*/

        });
    }
})(jQuery);

But the problem is, I am getting either 18 or 300 as height. 300 is the actual height of the div#lightbox,I don't know why the same function is returning different heights randomly.

See Image: enter image description here

Clearly the div#lightbox is not 18px in height.

Community
  • 1
  • 1
Rajat Saxena
  • 3,834
  • 5
  • 45
  • 63
  • Are you calling your plugin when document is ready or how? I think this is not problem of your plugin. Also, you may round your final value. – Manolo Jul 05 '14 at 08:18
  • You want the window height not the body height too. – jme11 Jul 05 '14 at 08:23
  • [**Using jQuery to center a DIV on the screen**](http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen) – adeneo Jul 05 '14 at 08:34
  • Can you post a fiddle? It would be helpful to see how you are calling your plugin and how the page in which it is being used is designed, including the css. I suspect the issue might originate in the fact that the jQuery height() method returns the computed value of the element. That means that a hidden element (display: none) for example will return 0. – jme11 Jul 05 '14 at 09:51

3 Answers3

0

You are calculating the height using the $('body').height(). This is the computed value for the height of the body element. That means that for a page with just one visible element that is 50px high on it, the body will return 50px. Conversely, a long page that requires lots of scrolling will return the entire body height, not just the portion that is visible in the viewport.

You need to use $(window).height(); in your calculation instead.

jme11
  • 17,134
  • 2
  • 38
  • 48
0

But the problem is, I am getting either 18 or 300 as height. 300 is the actual height of the div#lightbox,I don't know why the same function is returning different heights randomly -Rajat Saxena

At original post

 var self = this;
 console.log(self);

 var lightbox_height = $(self).height();

window.innerHeight appear to return viewport of window . See Window.innerHeight .

Try, at console , this page , while periodically adjusting console "height" , and within piece at original post

console.log($(window).height()
             , $(self).height()
             , $(window)[0].innerHeight
             , $(window).height() === $(self).height()
             , $(this).height());
guest271314
  • 1
  • 15
  • 104
  • 177
0

If you're only supporting modern browsers then you could use CSS and take advantage of a flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hargrovm
  • 1,053
  • 8
  • 10