How to implement a web page that scales when the browser window is resized?

后端 未结 11 889
伪装坚强ぢ
伪装坚强ぢ 2020-12-29 15:42

How to implement a web page that scales when the browser window is resized?

I can lay out the elements of the page using either a table or CSS float sections, but i

11条回答
  •  余生分开走
    2020-12-29 15:56

    Thanks for all of the suggestions! It looks like the ugly stuff i had to do was necessary. The following works (on my machine, anyway) in IE and FireFox. I may make an article out of this for CodeProject.com later ;-)

    This javascript goes in the section:

    
    

    the starts off like this:

    
        
    

    the DIVs float left for the layout. I had to set the height and width to percentages just shy of the full amount (e.g., 99.99%, 59.99%, 39.99%) to keep the floats from wrapping, probably due to the borders on the DIVs.

    Finally, after the content section, another javascript block to manage the refreshing:

    var isWorking = false;
    var currentEntity = <%=currentEntityId %>;
    
    //try to detect a bad back-button usage;
    //if the current entity id does not match the querystring 
    //parameter entityid=###
    if (location.search != null && location.search.indexOf("&entityid=") > 0)
    {
        var urlId = location.search.substring(
            location.search.indexOf("&entityid=")+10);
        if (urlId.indexOf("&") > 0)
        {
            urlId = urlId.substring(0,urlId.indexOf("&"));
        }
        if (currentEntity != urlId)
        {
            mustReload = true;
        }
    }
    //a friendly please wait... hidden div
    var pleaseWaitDiv = document.getElementById("divPleaseWait");
    //an example content div being refreshed via AJAX PRO
    var contentDiv = document.getElementById("contentDiv");
    
    //synchronous refresh of content
    function RefreshAll()
    {
        if (isWorking) { return; }  //no infinite recursion please!
    
        isWorking = true;
        pleaseWaitDiv.style.visibility = "visible";
    
        if (mustReload)
        {
            Reload();
        }
        else
        {
            contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(
                (currentEntity, contentDiv.offsetWidth, 
                 contentDiv.offsetHeight).value;
        }
    
        pleaseWaitDiv.style.visibility = "hidden";
        isWorking = false;
        if (tmout != null)
        {
            clearTimeout(tmout);
        }
    }
    
    var tmout2 = null;
    var refreshInterval = 60000;
    
    //periodic synchronous refresh of all content
    function Refreshing()
    {
        RefreshAll();
        if (tmout2 != null)
        {
            clearTimeout(tmout2);
            tmout2 = setTimeout(Refreshing,refreshInterval);
        }
    }
    
    //start periodic refresh of content
    tmout2 = setTimeout(Refreshing,refreshInterval);
    
    //clean up
    window.onunload = function() 
    {
        isWorking = true;
        if (tmout != null)
        {
            clearTimeout(tmout);
            tmout = null;
        }
        if (tmout2 != null)
        {
            clearTimeout(tmout2);
            tmout2 = null;
        }
    

    ugly, but it works - which i guess it what really matters ;-)

提交回复
热议问题