a javascript way to emulate a 1280x800 display for design

Post by **darknkreepy3#** » 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)

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>