I have a couple of Swiffy (HTML5 SWF) animations which i only want to be loaded based on the users screen size!
iv found some JavaScript below which says it will loa
Change this:
if(screen.Width>1400)
to:
if (screen.width > 1400)
width
property of the screen
object should be lowercase.
Also note that when JavaScript is executed ServerSide processing is ended, and your document.write
s only output text instead of executable php codes, you can use the load
method of the jQuery instead.
Load data from the server and place the returned HTML into the matched element.
if (screen.width > 1400) {
$('#wrapper').load('/map/map4.php');
} else {
$('#wrapper').load('/map/map1.php');
}
If you just have SWF Objects you can add them to the document via DOM Manipulation
If you want to have a more sophisticated way of checking the users screen theres a library jRespond, it will poll for browser size and updates if the user resizes the browser
I was facing the same dilema, so i used this workaround, i hope it helps.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>435</title>
<script> if( document.cookie.indexOf("resolucion5") < 0) {
//alert("Cargando resolucion.");
if (screen.width > 1199){ document.cookie = "resolucion5=desktop; max-age=" + 5; }
if ((screen.width > 768)&&(screen.width < 1200)){ document.cookie = "resolucion5=tablet; max-age=" + 5; }
if ((screen.width > 380)&&(screen.width < 780)){ document.cookie = "resolucion5=cel; max-age=" + 5; }
if (screen.width < 381){ document.cookie = "resolucion5=mini; max-age=" + 5;
}
location.reload();
}</script>
<? if ($_COOKIE["resolucion5"]=="desktop"){$resolucion="";}
elseif ($_COOKIE["resolucion5"]=="tablet"){$resolucion="med";}
elseif ($_COOKIE["resolucion5"]=="cel"){$resolucion="med";}
elseif ($_COOKIE["resolucion5"]=="mini"){$resolucion="mini";} ?>
<link href="style<? echo $resolucion; ?>.php" rel="stylesheet">
<script src="somescript<? echo $resolucion; ?>.js" type="text/javascript"></script>
</head>
<body>
<? require("menu".$resolucion.".php"); ?><br>
<img src="welcome<? echo $resolucion; ?>.jpg">
</body>
</html>
The contents of those php files will be injected into the JavaScript literal and could possibly break the literal. Could you post the resultant html when viewed from a browser.
Possibly what you want to do is put both php files into the code in seperate divs and then use CSS to hide or display the relevant one.
If you do this you could use @media css queries to display/hide the sections based on window size and this would dynamically adjust as the user resizes the browsers.