2011-01-22 29 views
1

我想使網頁瀏覽器調整餘量保持不變。我使用windowResize,但即使自定義單擊Web瀏覽器的還原按鈕,如何調整餘量?我上傳2個screenshort圖像進行解釋。 alt text第一張圖片,我打開網頁瀏覽器沒有最大化,所以頁面製作一個窗口Resize並計算餘量,然後我點擊窗口最大化,然後得到alt text秒圖片,但內容不在頁面中央。如何做一個正確的windowResize?謝謝。windowResize問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
    <script type="text/javascript"> 
    jQuery(document).ready(function() {  
     var width = document.body.clientWidth; 
     windowResize(width); 
     $(window).resize(function() {  
      windowResize(width);  
      }); 
     }); 
    function windowResize(width) { 
    if(width>1024){  
    $('#content').css({   
     'margin-left':(width-1024)/2+32 + 'px'  
     }); 
    }else{ 
     $('#content').css({   
     'margin-left': 32 + 'px'  
     }); 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <style> 
    body, #box{min-width:1024px;width:100%;} 
    #content{float:left;width:960px;height:300px;background-color:#F00;} 
    </style> 
    <div id="box"> 
    <div id="content"> 
     some words 
    </div> 
    </div> 
    </body> 
    </html> 
+0

我不知道爲什麼這個問題陷入膠着,我認爲這是問得非常好。代碼縮減的好例子。 – Hemlock 2011-01-22 16:11:17

回答

1

有一兩件事我注意到的是,這個代碼將只調用windowResize與初始寬度:

jQuery(document).ready(function() {  
    // this value will always be passed to windowResize 
    var width = document.body.clientWidth; 
    windowResize(width); 
    $(window).resize(function() {  
     windowResize(width);  
     }); 
    }); 

我改變了它如此寬度的windowResize內部計算和工作的事情。

jQuery(document).ready(function() {  
    windowResize(); 
    $(window).resize(windowResize); 
}); 

function windowResize() { 
    var width = document.body.clientWidth; 
    if(width>1024){  
    $('#content').css({   
     'margin-left':(width-1024)/2+32 + 'px'  
    }); 
    }else{ 
    $('#content').css({   
     'margin-left': 32 + 'px'  
    }); 
    } 
} 

+0

很好,謝謝Hemlock,現在工作很好。 – cj333 2011-01-22 17:51:09