ترفندهاي طراحي وب

You are here: خانه

آخرين مطالب

پر طرفدار ترين موضوعات

Client Window Size

نمونه كدهاي زيادي رو براي بدست آوردن سايز پنجره مرورگر ديده بودم اما هيچكدوم قابليت اين نمونه كد رو نداشتن .
يه نمونه بود كه با دستور سوييچ تشخيص ميداد كه سايز صفحه سيستم كدوم يك از موارد از پيش تعيين شده هست و بقيه هم فقط سايز صفحه نمايش رو بدست مياوردن .
اين نمونه كد قابليت اين رو داره كه سايز مرورگر رو در هر حالت ري سايز شده بدست بياره
مثلا وقتي پنجره مرورگر رو با دكمه f11 به صورت تمام صفحه تغيير بديد اعداد خروجي اين كد تغيير ميكنه .
من فكر ميكنم كاراي خيلي جالبي ميشه با اين كد كرد و مثلا صفحه اي ساخت كه با ري سايز شدن صفحه بتونه كاراي جالبي بكنه .
در زير كد رو مبينيد :

<!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" />
<title>Client Window Size</title>
 
<script type="text/javascript">
 
function getClientWidth() 
{
  return document.compatMode==
'CSS1Compat' && !window.opera
?
document.documentElement.clientWidth
:
document.body.clientWidth;
}
 
function getClientHeight() {
  return document.compatMode==
'CSS1Compat' && !window.opera
?
document.documentElement.clientHeight
:
document.body.clientHeight;
}
 
function gethw()
{
var h = document.getElementById('h');
var w = document.getElementById('w');
h.value = getClientWidth();
w.value = getClientHeight();
}
</script>
 
</head>
 
<body>
  <input type="text" name="h" id="h" />
  <br />
  <input type="text" name="w" id="w" />
  <br />
  <input type="button" name="button" id="button" 
value="get client height and width" onclick="gethw()" />
</body>
</html>