Start Building Professional
Web Apps Today

dhtmlx windows centeronscreen method

When using:
window_object.centerOnScreen();

This works fine in firefox.

But if the page is long, in IE7 the box appears down on the page (requiring scrolling to see it). It looks as if its centering it based on the TOTAL height of the page rather than the screen/viewing area.

Here is a demo (file dhtmlxwindows.js is updated).

I can't get it to work on our site even with the new JS file sent. 

This is the code we use:
                    var dhtmlx_windows = new dhtmlXWindows();
                    dhtmlx_windows.setImagePath("./images/");
                    dhtmlx_windows.setSkin("clear_silver");
                    var user_id_window_object = dhtmlx_windows.createWindow("user_id_window",50,50,500,300);
                    user_id_window_object.centerOnScreen();
                    user_id_window_object.setText("User ID");

The demo sent does not appropriately recreate the bug I am talking about.

The page must be long and have a scroll bar on the browser.

All works fine on our side, screenshots are attached.

That looks like IE6?  We are doing this in IE7

Did dhtmlxwindows.js contain a fix for this so would my version have a bug?

I have //v.2.0 build 81107

I am the owner of a commercial license so have the PRO version.

IE7: The same result. Here is a screenshot.
Yes you should update your dhtmlxwindows.js file.

Do you need to send me the PRO version of the file?

updated dhtmlxwindow.js for dhtmlxWindows v.2.0 build 81107 PRO, sent by email 

I don't know why, but I always have trouble receiving email from you.  I checked all spam lists, etc but it never seems to come.

I have emailed you at support@dhtmlx.com giving multiple alternate email addresses.

The file has been just sent to both your email addresses.

Still not working, plus the new file added new problems.  Emailed back with a screencast example.

I have another issue with this as well.

This happens in both firefox and IE.  If you have a long page that scrolls and you scroll to the bottom, then call centerOnScreen() you will not see the window.  Instead its centered if you scroll back up on the top part of the page.

I sent you a self contained demo via email.

See here:
http://www.javascriptkit.com/javatutors/static2.shtml

Near the bottom it talks about doctype.

I had to re-do your center function as it was faulty.  It did not take into account the offset.

Here is the new function.

    this._centerWindow = function(win, onScreen) {
        if (win._isMaximized == true) { return; }
        if (win._isParked == true) { return; }
        if (onScreen == true) {
            if(typeof(window.innerWidth) == 'number') {
                //Non-IE
                vpw = window.innerWidth;
                vph = window.innerHeight;
            } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                vpw = document.documentElement.clientWidth;
                vph = document.documentElement.clientHeight;
            } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                vpw = document.body.clientWidth;
                vph = document.body.clientHeight;
            }

            if(typeof(window.pageYOffset) == 'number') {
                //Netscape compliant
                vpw_offset = window.pageXOffset;
                vph_offset = window.pageYOffset;
            } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
                //DOM compliant
                vpw_offset = document.body.scrollLeft;
                vph_offset = document.body.scrollTop;
            } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
                //IE6 standards compliant mode
                vpw_offset = document.documentElement.scrollLeft;
                vph_offset = document.documentElement.scrollTop;
            }
            var vpw = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetWidth:window.innerWidth);
            var vph = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetHeight:window.innerHeight);
            //var vpw_offset = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetWidth:window.pageXOffset);
            //var vph_offset = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetHeight:window.pageYOffset);
        } else {
            //var vpw = (this.vp==document.body?document.body.offsetWidth:(Number(parseInt(this.vp.style.width))&&String(this.vp.style.width).search("%")==-1?parseInt(this.vp.style.width):this.vp.offsetWidth));
            //var vph = (this.vp==document.body?document.body.offsetHeight:(Number(parseInt(this.vp.style.height))&&String(this.vp.style.height).search("%")==-1?parseInt(this.vp.style.height):this.vp.offsetHeight));
            var vpw = (this.vp==document.body?document.body.offsetWidth:(Number(parseInt(this.vp.style.width))&&String(this.vp.style.width).search("%")==-1?parseInt(this.vp.style.width):this.vp.offsetWidth));
            var vph = (this.vp==document.body?document.body.scrollHeight:(Number(parseInt(this.vp.style.height))&&String(this.vp.style.height).search("%")==-1?parseInt(this.vp.style.height):this.vp.offsetHeight));
        }
        //alert(vpw+"x"+vph+"x"+document.body.scrollHeight)
        var newX = (Math.round((vpw/2) - (win.w/2))) + vpw_offset;
        var newY = (Math.round((vph/2) - (win.h/2))) + vph_offset;
        win.x = newX;
        win.y = newY;
        this._fixWindowPositionInViewport(win);
        this._redrawWindow(win);
    }

Small correct to code before... these two lines need to be commented out:
var vpw = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetWidth:window.innerWidth);
var vph = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetHeight:window.innerHeight);

I already did?

Just to update this for you... here is the final code I am using for the centerOnScreen fix.

    this._centerWindow = function(win, onScreen) {
        if (win._isMaximized == true) { return; }
        if (win._isParked == true) { return; }
       
        vpw_offset = 0;
        vph_offset = 0;
       
        if (onScreen == true) {
            if(typeof(window.innerWidth) == 'number') {
                //Non-IE
                vpw = window.innerWidth;
                vph = window.innerHeight;
            } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                vpw = document.documentElement.clientWidth;
                vph = document.documentElement.clientHeight;
            } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                vpw = document.body.clientWidth;
                vph = document.body.clientHeight;
            }

            if(typeof(window.pageYOffset) == 'number') {
                //Netscape compliant
                vpw_offset = window.pageXOffset;
                vph_offset = window.pageYOffset;
            } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
                //DOM compliant
                vpw_offset = document.body.scrollLeft;
                vph_offset = document.body.scrollTop;
            } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
                //IE6 standards compliant mode
                vpw_offset = document.documentElement.scrollLeft;
                vph_offset = document.documentElement.scrollTop;
            }
            //var vpw = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetWidth:window.innerWidth);
            //var vph = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetHeight:window.innerHeight);
            //var vpw_offset = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetWidth:window.pageXOffset);
            //var vph_offset = (_isIE?(document.compatMode && document.compatMode != "BackCompat" ? document.documentElement : document.body).offsetHeight:window.pageYOffset);
        } else {
            //var vpw = (this.vp==document.body?document.body.offsetWidth:(Number(parseInt(this.vp.style.width))&&String(this.vp.style.width).search("%")==-1?parseInt(this.vp.style.width):this.vp.offsetWidth));
            //var vph = (this.vp==document.body?document.body.offsetHeight:(Number(parseInt(this.vp.style.height))&&String(this.vp.style.height).search("%")==-1?parseInt(this.vp.style.height):this.vp.offsetHeight));
            var vpw = (this.vp==document.body?document.body.offsetWidth:(Number(parseInt(this.vp.style.width))&&String(this.vp.style.width).search("%")==-1?parseInt(this.vp.style.width):this.vp.offsetWidth));
            var vph = (this.vp==document.body?document.body.scrollHeight:(Number(parseInt(this.vp.style.height))&&String(this.vp.style.height).search("%")==-1?parseInt(this.vp.style.height):this.vp.offsetHeight));
        }
        //alert(vpw+"x"+vph+"x"+document.body.scrollHeight)
        var newX = (Math.round((vpw/2) - (win.w/2))) + vpw_offset;
        var newY = (Math.round((vph/2) - (win.h/2))) + vph_offset;
        win.x = newX;
        win.y = newY;
        this._fixWindowPositionInViewport(win);
        this._redrawWindow(win);
    }

The answer was sent by email.

How come this was never fixed in the new version?  This still not work work properly.  I still have to replace the code in this file with the code I provided here.

Yes I posted a few messages concerning this.

It simply does not work.

For instance check out jQuery's dialogue box and how it centers properly and does the modal background properly (in all browsers).  This is how we need your dialogue boxes to work.