Simple Javascript Problem

**ttzary** · 01-20-2013 01:07 AM

Here goes again. This time, working with JavaScript. Here's my problem:
I have my site, right. I have a mobile version, and a desktop version. I know it isn't very common, but I
am putting a css/javascript popup which asks the iPad user which version he/she would like to use. Here is my HTML code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="csspopup.js"></script>

<script type="text/javascript" language="javascript">

if((navigator.userAgent.match(/iPad/i))) {
	
	popup('popUpDiv');
}
-->
</script>
<style type="text/css">
<!--
#blanket {
   background-color:#111;
   opacity: 0.65;
   position:absolute;
   z-index: 9001; /*ooveeerrrr nine thoussaaaannnd*/
   top:0px;
   left:0px;
   width:100%;
   display:none;
}
#popUpDiv {
	position:relative;
	background-color:#eeeeee;
	width:30%;
	height:20%;
	z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
	padding:15px 15px 15px 15px;
	display:none;
}
-->
</style>
<!--[if gte IE 5]> <style type="text/css"> #blanket {filter:alpha(opacity=65);}</style><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<title>Test Site</title>
</head>

<body>
<div id="blanket"></div>
<div id="popUpDiv"> You are on a wonderful device made by Apple called the iPad.  I cannot tell which iPad, but I know you are on one.  My question is: Would you like to view the <a href="mobilesite">Mobile Site</a> or the <a href="desktopsite">Desktop Site</a>?
</div>
<a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a>
</body>
</html>

And here is my JavaScript:

Code:

function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-150;//150 is half popup's height
	popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/2-150;//150 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle('blanket');
	toggle(windowname);		
}

This isn't my popup code, got it from a guy named Pat Burt.
As you can see in the HTML code:

HTML Code:

<script type="text/javascript" language="javascript">

if((navigator.userAgent.match(/iPad/i))) {
	
	popup('popUpDiv');
}
-->
</script>

Now why won't it work? I used the same format, and everything. Any help is appreciated. Note: the css file only includes a background image.
Thanks,
Treyton

**bionoid** · 01-20-2013 03:45 PM

Hey Treyton,

I didn't correct anything programatic, only shifting some css and the browser detection script to the end of the document to get things working.
(All changes in red)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="csspopup.js"></script>

<style type="text/css">
#blanket {
   background-color:#111;
   opacity: 0.65;
   position:absolute;
   z-index: 9001; /*ooveeerrrr nine thoussaaaannnd*/
   top:0px;
   left:0px;
   width:100%;
/*   display:none;*/
}
#popUpDiv {
	position:relative;
	background-color:#eeeeee;
	width:30%;
	height:20%;
	z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
	padding:15px 15px 15px 15px;
/*	display:none;*/
}
</style>
<!--[if gte IE 5]> <style type="text/css"> #blanket {filter:alpha(opacity=65);}</style><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" media="screen" />
<title>Test Site</title>
</head>

<body>
<div id="blanket" style="display: none;"></div>
<div id="popUpDiv" style="display: none;"> You are on a wonderful device made by Apple called the iPad.  I cannot tell which iPad, but I know you are on one.  My question is: Would you like to view the <a href="mobilesite">Mobile Site</a> or the <a href="desktopsite">Desktop Site</a>?
</div>
<a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a>

<script type="text/javascript" language="javascript">

if((navigator.userAgent.match(/iPad/i))) {

	popup('popUpDiv');
}

</script>

</body>
</html>

Thread: Simple Javascript Problem

Thread Tools

Display

Simple Javascript Problem

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions