a javascript way to emulate a 1280x800 display for design
Posted: Mon Oct 03, 2011 9:05 pm
I wanted to check the flow of my css without using a tablet, and I wanted to see it's limitations with 1280W x 800H, easy enough on a 4:3 monitor (1280W x 1024H). on a larger monitor for design, a 1920W x 1200H, I can run a page I call emulate.php and put in javascript that uses ajax to load a page into a new document, size it appropriately (1280W x 800H), remove scrollbars, disable resize, etc.
emulate.php (loads index.php or whatever you like etc)
emulate.php (loads index.php or whatever you like etc)
Code: Select all
<html>
<head>
</head>
<body>
<input type="button" value="1280x800" onClick="emulate('index.php','1280','800');">
</body>
</html>
<script language="javascript">
//-----
function emulate(sFile,sW,sH)
{
var page_request=false;
//
if(window.XMLHttpRequest)//ff
{page_request=new XMLHttpRequest();}
//
else if(window.ActiveXObject)//ie
{
try
{page_request=new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
}
//
else
{return false;}
page_request.onreadystatechange=function()
{
//
switch(page_request.readyState)
{
case 0:
//uninitialized
break;
case 1:
//loading
break;
case 2:
//loaded
break;
case 3:
//interactive
break;
case 4:
//done
var features = 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, width='+sW+', height='+sH;
var dlg=window.open("","Dialog",features);
dlg.document.write(page_request.responseText);
dlg.document.close();
break;
default:
break;
}
}
page_request.open('GET',sFile,true);
page_request.send(null);
}
</script>