Positioning DIV

Question

Hey Guys,

I'm looking to deconstruct some javascript I found for a lightbox plugin on a site.

I was curious if someone could help to decode this piece of script? I would like to implement it into my jquery but need to discern what I can use what I cannot.

Currently my issue is that my positioning jquery aligns my div to the vertical center of the document as seen on initial load. So if I scroll down half the page, and click on a project to pop up, it loads the popup relative to the the top of the document somewhere as opposed to loading relative to the center of the viewport regardless of position of the document. Also ,if it is too big for the screen, it will load in the middle and the top and bottom would be cut off making those parts not visible, whereas this javascript I found will position the popup div 10px from the top if its too big.

Found Javascript:

//Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint  
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" 
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objheight=divobj.offsetHeight //height of div element

divobj.style.top=Math.floor(parseInt(topposition))+"px"

Current Jquery I am using:

$(document).ready(function() {
$(".projectThumb").click(function(e){
    $("#backgroundPopup").show();
    htmlName = $(this).find("img").attr("name");
    $("#data").load("/content/" + htmlName + ".html", null, function(){
        //Set Variables
        var container = $(".container");
        var project = $(".project");
        var popupWidth = container.find(".project img:first").width();
        var popupHeight = container.find(".project img:first").height()+35;
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;

        //Set popup dimensions
        container.css("width" , popupWidth);
        container.css("height" , popupHeight);

        //Set popup CSS
        container.css({"position": "absolute", "background": "#000", "top": (windowHeight / 2) - (popupHeight / 2) + "px" "left": (windowWidth / 2) - (popupWidth / 2) + "px", "z-index": "2" });
        project.css({"width": (popupWidth), "height": (popupHeight) });

        });
    });
});

Thanks in advance!

Answer 1

Try this:

var x = ($(window).width() / 2 - container.width() / 2) + $(window).scrollLeft();
var y = ($(window).height() / 2 - container.height() / 2) + $(window).scrollTop();

Then use y for your top value and x for your left value.