Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Software
60
setLocation WARP biggen then screen position not OK
posted

What I have done. Ia set the ProgressIndicator to something else. That indicator must be as big as the WARP. i do this, cause nobody may do anything in screen while postback.

This is the code  

function

WARP1_InitializePanel(oPanel)

{ 

var pi = oPanel.getProgressIndicator();  

var template = '<span id="spanWaitRefresh"><div id="divWaitRefresh" class="DialogContainer" style="z-index: 1000; height: ' + oPanel._element.clientHeight + 'px; width: ' + oPanel._element.clientWidth + 'px; text-align:center"></div>' ;  

template = template + 

 

 '<div id="divWaitRefresh" style="z-index: 1001; height: ' + oPanel._element.clientHeight + 'px; width: ' + oPanel._element.clientWidth + 'px; text-align:center">' ; '<table cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td valign="middle" align="center"><img src="../Images/progressbar2.gif" /></td></tr></table></div></span>';

 

template = template + 

This workst fine if the WARP is not heigher that the screen. If WARP is longer then the screen than the new indicator goes to the top of the page to the bottom. It is not going the the left.

Warppanel is defined at 175 from left and 150 from top. This is done by tables.

Does anyone know why the indicator is to big when warp is bigger than the screen?

  • 60
    Verified Answer
    posted

    Oke, after a lot of JavaScript, this is our solution (with use of jQuery):

     

    function WARP1_InitializePanel(oPanel){
        var oP_e = oPanel._element,
            pi = oPanel.getProgressIndicator(),
            cph = $("#ctl00_warpContentPlaceHolder"),
            clientWidth = Math.min(cph.width(), 4096),
            clientHeight = Math.min(cph.height(), 4096),
            clientLeft = cph.offset().left,
            clientTop = cph.offset().top;
       
        pi.setRelativeContainer(cph.get(0));
        pi.setLocation({ x: 0, y: 0 });
        pi.setTemplate(WaitRefreshTemplate(clientLeft, clientTop, 100, clientWidth, "loading..."));
        oPanel._oldFixPI = oPanel.fixPI;
        oPanel.fixPI = function(pi){
            this._oldFixPI(pi);
            window.setTimeout(function(){
                WaitRefreshPosition($(pi._elem), $(pi._rc));
            }, 1);
        }
    }

    function WaitRefreshTemplate(left, top, height, width, text){
        var template  = '<span>';
            template += '    <div class="DialogContainerThobber" style="position: fixed; left: ' + left + 'px; top: ' + top + 'px; height: ' + height + 'px; width: ' + width + 'px;">';
            template += '        <table cellspacing="0" cellpadding="0" width="100%" height="100%">';
            template += '            <tr><td valign="middle" align="center"><span class="DialogContainerText">' + (text || "&nbsp;") + '</span></td></tr>';
            template += '            <tr><td valign="middle" align="center"><img src="/Images/loading.gif" /></td></tr>';
            template += '        </table>';
            template += '    </div>';
            template += '    <div class="DialogContainerContainer">&nbsp;</div>';
            template += '</span>';
        return template;
    }
    function WaitRefreshPosition(root, cph){
        var top = 0,
            left = 0,                leftDef = left,
            width = cph.width(),    widthDef = width,
            height = cph.height();

        root.css({
            top: cph.offset().top,
            left: cph.offset().left,
            width: width,
            height: height
        });

        var screenHeight = $(window).height(),
            elemTop = cph.offset().top,
            scrollTop = parseInt($(window).scrollTop());

        $(".DialogContainerThobber", root).css({
            top: scrollTop > elemTop ? (screenHeight - 100) / 2 : elemTop + ((screenHeight - elemTop - 100) / 2),
            left: cph.offset().left
        });

        var dialogContainerContainer = $(".DialogContainerContainer", root).empty(),
            dialogContainer = $('<div class="DialogContainer" style="z-index:1000; text-align:center;" />');

        while(height >= 0){
            while(width >= 0){
                dialogContainerContainer.append(dialogContainer.clone().css({
                    width: Math.min(width, 4096),
                    height: Math.min(height, 4096),
                    top: top,
                    left: left
                }));
                width -= 4096;
                left += 4096;
            }
            width = widthDef;
            left = leftDef;

            height -= 4096;
            top += 4096;
        }
    }