Screen dimension checking code

JavaScript
21

Okay, I rejigged my code about and now of course it does not work:


function popupCenter(pageURL, title, w, h) {
    var left = (screen.width / 2) - (w / 2);
    window.open(pageURL, title, 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
}
 
function dimension_test() {
var width = window.innerWidth || 
document.documentElement.clientWidth ||
document.body.clientWidth;    switch (width) {
    case 1024:
        popupCenter('http://www.meta.projectmio.com/index.html', 'MyWindow', 1024, 699);
        break;
    case 800:
        popupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);
        break;
    case 640:
        popupCenter('http://www.meta.projectmio.com/640.html', 'MyWindow', 640, 411);
        break;
    }
}

My first concerns lie with the “case” e.g. “case 640”; does that mean the code from felgall will look for 640px or less, does it even understand it? If so then that should be okay. Now I changed the code so there is no default, there shouldn’t have been anyway as the screen has to be one of the sizes and so there is always going to be a correct page.

I change the “window.location” to “popupCenter” as this made more sense, but nothing is loading now so I think its something just here that’s the issue as the dimensions are calculated and all the links work, its just that bit that the code does not understand, just the condition, not the calculations. What do you think?

@Mittineague: I take your point but I think that ridding all the functions is best for the window, its not a big deal really, only annoying I suppose but my webpage is size specific. No matter what you think, that’s the way it is.

@pmw57: Thanks but that’s not what I’m looking for.

22

When innerWidth is not supported, clientWidth won’t give you the same value as the screen resolution.
Instead of 1024 you will get 1007, but that will change depending on your web browser.

So, instead of using case, you might be better off with a series of if/else cases so that you can check if the size is within a certain range instead.


if (width > 1024) {
    // use 1280 size
} else if (width > 800 && width <= 1024) {
    // use 1024 size
} else if (width > 640 && width <= 800) {
    // use 800 size
} else if (width <= 640) {
    // use 640 size
}

You can even get away with it by leaving out the lessthan condition


if (width > 1024) {
    // use 1280 size
} else if (width > 800) {
    // use 1024 size
} else if (width > 640) {
    // use 800 size
} else {
    // use 640 size
}
23

Thanks, I like the streamlined approach with the second block of code. I’m confused with your foreword, 1024 to 1007 doesn’t make any sense to me, but I’ll play along…

I removed the code from “Felgall”, which is what I guess you were hinting to and reverted back to what you had, but with the streamlined approach:


<script>
function popupCenter(pageURL, title, w, h) {
    var left = (screen.width / 2) - (w / 2);
    window.open(pageURL, title, 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
}
 
function dimension_test() {
    var width = screen.width;
    switch (width) {	
			if (width > 800) {
		    // use 1280 size
		    http://www.meta.projectmio.com/index.html
		} else if (width > 640) {
		    // use 800 size
		http://www.meta.projectmio.com/800.html
		} else {
		    // use 640 size
		    http://www.meta.projectmio.com/640.html
		}
	
    }
}
</script>

I’m sure it works and that I’ve not implemented it properly, but it does not pop anything up for me here. I’ve cleared my cache too, so it must be how I’ve pasted it all together. Should I have kept Fengall’s code snippet?

Thanks again.

24

The code that I provided is not intended to be “plug and play”

Instead, it’s purpose is to allow you to easily see the structure that is likely to most effective for your situation. For example:


} else if (width > 640) {
    // use 800 size
} ...

Where it says “// use 800 size” is where you would add the code to open the new page at that size, which in this case may be something like:


// use 800 size
popupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);

You don’t need to keep the comment there either, if you think that the code makes the intention clear.

25

Right, I’m sticking with you code and as I have used the sample from before Fengall’s then I assume that the new streamlined snippet will work with it also. I see where I went wrong, but its still not working and I’ve run through the code in my mind and don’t understand why not.


function dimension_test() {
    var width = screen.width;
    switch (width) {	
			if (width > 800) {
		        popupCenter('http://www.meta.projectmio.com/index.html', 'MyWindow', 1024, 699);		
		    } else if (width > 640) {
        		popupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);		
        	} else {
        		popupCenter('http://www.meta.projectmio.com/640.html', 'MyWindow', 640, 411);
        	}
	
    }

The screen calculation conditions are right, the popup command seems to be something that worked in the past and so I would like to think would work now and so I’m again in the dimly lit position of not knowing where the mistake is.

26

Unless I’m missing something, where are the “top” and “left” variables coming from?

27

pmw57 - You might try this web page and script to see if this is what you were hoping to achieve.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”>
<title></title>
<script type=“text/javascript”>
<!–

	// The following code was taken from a tutorial located at http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
	//
	// Many thanks to Andy Langton for posting the code and allowing us to use it.
	
	
	function getTemplateSize()
	{
		var viewportwidth;
		var viewportheight;

		if (typeof window.innerWidth != 'undefined')
		{
			// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
			viewportwidth = window.innerWidth,
			viewportheight = window.innerHeight
		}
		else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
		{
			// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
			viewportwidth = document.documentElement.clientWidth,
			viewportheight = document.documentElement.clientHeight
		}
		else
		{
			// older versions of IE
			viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
			viewportheight = document.getElementsByTagName('body')[0].clientHeight
		}
		
		// The code listed below is based on your original code taken  
		// from your web site and modified for functionality and readability.


		if (viewportwidth &gt; 800) 
		{
			// Screen resolution is 1024 or higher so lets load the laarget template we have.
			popupCenter('http://www.meta.projectmio.com/index.html', 'MyWindow', 1024, 699);		
		} 
		else if (viewportwidth &gt; 640) 
		{
			// Screen resolution is lower than 1024 so lets load the medium template.
			popupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);		
		} 
		else 
		{
			// No other screen size matched so lets load the smallest template to ensure
			// the client can see the whole page.
			// Screen resolution is lower than 800 so lets load the smallest template.
			popupCenter('http://www.meta.projectmio.com/640.html', 'MyWindow', 640, 411);
		}
	}

	function popupCenter(pageURL, title, w, h) 
	{
		// Take the width of the screen and devide it by two, now take the width of the template 
		// by two and subtract it from the screen width / 2 to get the position of the upper left corner of the template.
		var left = (screen.width / 2) - (w / 2);
		
		// Pop open the window with all of the data like URL, size and position.
		window.open(pageURL, title, 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
	}
	//--&gt;
&lt;/script&gt;

</head>
<body onLoad=“getTemplateSize()”>

</body>
</html>
28

Oh wow S1ghup, this is a fantastic find, many thanks for sharing. Just the job.

One thing though (always one), while the pop-up works fine, if I have pop-ups disabled the whole thing looks like a blank page and in the case of Safari with no indication that any had been suppressed. To remedy this I had included a picture conveying that a pop-up was necessary and so to click the picture would invoke the pop-up, this picture activated the page’s code and so I’d need to encapsulate it. The original code:


<div align="center">
<img src="http://www.meta.projectmio.com/imagery/meta_popup.png" onclick= "dimension_test()" />
</div>

What would I need to do to encapsulate the code to call it with a click on the picture and how would the above code be modified?

Also, I find that FireFox (unlike Safari/Chrome) does not respect the percentage restriction I had in place to reduce the size of an image on a page, weird!


<div align="right" border="0">
<img src="/imagery/glycera_logo_gl640.png" title="A Glycera product" height=30&#37;>
</div>

Like I say it works in Safari and Chrome, not sure why it doesn’t in FireFox?

29

blinm - Replace your existing image tag with this one. As far as the issue that you are experiencing with your image scaling that appears to be an inherit problem with the way that different browsers handle image scaling. I did attempt to fix this issue as well how ever I did not make any progress and regrettably I have to get back to work for the day. I have to get this contract finished before the impending deadline. If you have any more trouble feel free to send me a PM and I will get back to you.

John

<div align=“center”>
<img src=“http://www.meta.projectmio.com/imagery/meta_popup.png” onclick= “getTemplateSize()” />
</div>

30

That’s it, that’s all I need. I thought I’d never get there! Thanks for all your help and the invitation about that issue of interpretation… I’ll look more into it myself.

I thought there would be a standard to use that all browsers would work to, so frustrating.

31

I think the answer was simple… Firefox only takes orders from the width, so setting the width value works. This works in FF and Safari/Chrome I find :]

I’ve finished my project, for now. Hope your project went okay, thanks for your time and effort (and everybody else’s!)