2 
<style>
<script>
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
    screenW = screen.width;
    screenH = screen.height;
}
else if (navigator.appName == "Netscape" 
&& parseInt(navigator.appVersion)==3
&& navigator.javaEnabled()
) 
{
    var jToolkit = java.awt.Toolkit.getDefaultToolkit();
    var jScreenSize = jToolkit.getScreenSize();
    screenW = jScreenSize.width;
    screenH = jScreenSize.height;
}

document.write(
".wrap, html {font-family: 'PT Sans', sans-serif;     width:"+screenW+"px;height:"+screenH+"px;}"
)
</script>
</style>

This script is meant to add the user's screen size into the height and width parameters of this short CSS piece, which I have included internally, lacking a method of doing it with an external style sheet.

I'll be happy to learn a new and more efficient method of doing this. My official question, however, is will this script work?

http://www.javascripter.net/faq/screensi.htm is the page location that I grabbed this from!

Improve this question
14
  • Note: I do not understand this script as of yet, I simply borrowed if from another developer that uses it to get screen size in a short info page. Commented Sep 16, 2013 at 3:57
  • 1
    It will not work as written. Putting a <script> tag inside a <style> tag will just make sure that the script gets rejected by the CSS parser without ever reaching the JavaScript engine. Commented Sep 16, 2013 at 3:57
  • 1. java is not javascript. 2. Do not embed a script block inside a style block. Commented Sep 16, 2013 at 3:58
  • So you're getting the screen size in pixels, and then setting it to percentages in CSS with a script tag inside a style tag? None of this makes any sense! Just set the height and width of the html tag to 100% ? Commented Sep 16, 2013 at 3:59
  • 1
    You set the height to 100% in CSS. Commented Sep 16, 2013 at 4:08

1 Answer 1

Reset to default
1

I did this using XHTML (if it works in XHTML it works in HTML, but 99.9% of the time not vice-versa) so you know you're getting a quality example here.

First off you don't make a script element the child of a style element.

Secondly never ever put a script element inside of the body element unless you want to accrue serious damage to getting things to work down the road.

Never use document.write as it's not XHTML compatible or innerHTML as it treats code as text strings instead of code, meaning when you try to change something dumped in to the DOM it may or may not work because you may be referring to code or you may be referring to text that simply looks like code.

Save the following as example.xhtml and then open in Firefox. I recommend using Firebug's inspector to look at the DOM so you can see that the link element referring to the style sheet with the screen_height and screen_width can be confirmed at your end. Feel free to ask me any (sane) questions.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<script type="application/javascript">
//<![CDATA[
function load_css()
{
 var l = document.createElement('link');
 l.setAttribute('href','themes/example/style.css?screen_height='+encodeURIComponent(screen.height)+'&screen_width='+encodeURIComponent(screen.width));
 l.setAttribute('rel','stylesheet');
 l.setAttribute('title','example');
 l.setAttribute('type','text/css');
 document.getElementsByTagName('head')[0].appendChild(l);
}

window.onload = function()
{
 load_css();
}
//]]>
</script>
</head>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you, this worked perfectly! everyone else, sorry about my confusion and, as I said, very uneducated question. Being new to javascript is not so great, but I'll pull it in quickly, I think.
I also recommend reading about CSS3 media queries that will allow you to adjust your layout based on screen resolutions without the need to have a PHP variable to refer to. See my video here: youtube.com/watch?v=6MWCt9QWhyI

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.