Workaround for Lack of Viewport Standards

[Jesdisciple]

ProblemI'm trying to develop a workaround for the lack of standards regarding the viewport, discussed at http://www.quirksmode.org/viewport/intro.html, but my table (makeshift viewport) isn't showing. I get no complaints from Firefox, Opera, Internet Explorer 7, and JSLint.ImplementationI've coded the table to be resizable, so the user can simply drag the corner (it only has a right-bottom corner; the others are 1 pixel out of the viewport) to the corresponding corner of the viewport, in order to tell any scripts which depend upon viewport size how much room they have. I have denied class/function status to the Viewport object, because only one object per page is needed.Viewport.html:

Jesdisciple = {    ensureEvent: function(ev){        ev = ev || window.event;        if(!ev.target){            ev.target = ev.srcElement;        }        return ev;    },        getMousePosition: function(ev){        if(ev.pageX || ev.pageY){            return {x:ev.pageX, y:ev.pageY};        }        return {            x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,            y: ev.clientY + document.body.scrollTop  - document.body.clientTop        };    },        getPositionOf: function(element){        var top = 0;        var left = 0;                while(element.offsetParent){            left += element.offsetLeft;            top += element.offsetTop;            element = element.offsetParent;        }                left += element.offsetLeft;        top += element.offsetTop;                return {x: left, y: top};    },        getMouseOffsetFrom: function(element, ev){        var elemPos  = Jesdisciple.getPositionOf(element);        var mousePos = Jesdisciple.getMousePosition(ev);        return {x:mousePos.x - elemPos.x, y:mousePos.y - elemPos.y};    }};Viewport = {    grabbed: null,        grab: function(ev){        if(!Viewport.grabbed){            Viewport.grabbed = ev.target;            Viewport.mouseOffset = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);        }    },        mouseMove: function(ev){        if(Viewport.grabbed){            ev = Jesdisciple.ensureEvent(ev);            var directions = Viewport.grabbed.className.split('-');            if(directions.length == 2){ //resize                var m = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);                switch(directions[0]){                    case 'top':                        alert('top impossibly grabbed');                        break;                    case 'bottom':                        Viewport.update(Viewport.neu.width, parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y);                        if(Viewport.neu.height >= 1 || Viewport.neu.height > Viewport.old.height){                            Viewport.table.style.height = parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y;                        }                        break;                    default:                                        }                switch(directions[1]){                    case 'left':                        alert('left impossibly grabbed');                        break;                    case 'right':                        Viewport.update(parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x, Viewport.neu.height);                        if(Viewport.neu.width >= 1 || Viewport.neu.width > Viewport.old.width){                            Viewport.table.style.width = parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x;                        }                        break;                    default:                                        }            }            return false;        }    },        mouseUp: function(ev){        Viewport.grabbed = null;    },        build: function(){        Viewport.table = document.createElement('table');            Viewport.table.className = 'viewport';            Viewport.table.style.left = '-1px';            Viewport.table.style.top = '-1px';            Viewport.table.style.width = '200px';            Viewport.table.style.height = '200px';                        Viewport.table.insertRow(0);                Viewport.table.rows[0].insertCell(0);                    Viewport.table.rows[0].cells[0].className = 'top-left';                Viewport.table.rows[0].insertCell(1);                    Viewport.table.rows[0].cells[1].className = 'top-center';                Viewport.table.rows[0].insertCell(2);                    Viewport.table.rows[0].cells[2].className = 'top-right';                                Viewport.table.insertRow(1);                Viewport.table.rows[1].insertCell(0);                    Viewport.table.rows[1].cells[0].className = 'middle-left';                Viewport.table.rows[1].insertCell(1);                    Viewport.contentArea = Viewport.table.rows[1].cells[1];                Viewport.table.rows[1].insertCell(2);                    Viewport.table.rows[1].cells[2].className = 'middle-right';                    Viewport.table.rows[1].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };                                Viewport.table.insertRow(2);                Viewport.table.rows[2].insertCell(0);                    Viewport.table.rows[2].cells[0].className = 'bottom-left';                Viewport.table.rows[2].insertCell(1);                    Viewport.table.rows[2].cells[1].className = 'bottom-center';                    Viewport.table.rows[2].cells[1].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };                Viewport.table.rows[2].insertCell(2);                    Viewport.table.rows[2].cells[2].className = 'bottom-right';                    Viewport.table.rows[2].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };                document.onmousemove = Viewport.mouseMove;        document.onmouseup = Viewport.mouseUp;                Viewport.table.style.position = 'absolute';        Viewport.table.style.visibility = 'visible';        document.body.appendChild(Viewport.table);    },        update: function(width, height){        Viewport.old = {                            width: parseInt(Viewport.table.style.width.replace(/px/, ''), 10),                            height:    parseInt(Viewport.table.style.height.replace(/px/, ''), 10)                        };        Viewport.neu = {                            width: width,                            heihgt: height                        };    }};

Viewport.css:

td.top-left, td.top-center, td.top-right,td.middle-left, td.middle-right,td.bottom-left, td.bottom-center, td.bottom-right{	background-color: #000000;}td.top-left, td.top-center, td.top-right,td.bottom-left, td.bottom-center, td.bottom-right{	height: 1px;}td.top-left, td.top-right,td.middle-left, td.middle-right,td.bottom-left, td.bottom-right{	width: 1px;}

[justsomeguy]

Put alert statements throughout the build method to tell you what it's doing, does it get all the way down to appendChild? You might also try moving the appendChild call right after the createElement call, before you assign any attributes or properties. Also, you might need to create a tbody element to hold all the tr elements.

[Jesdisciple]

Put alert statements throughout the build method to tell you what it's doing, does it get all the way down to appendChild?

The HTML hasn't changed, but here are the CSS (with more-visible borders and a resize cursor) and JS (with event handlers for the hidden sides, in case something funky happens):Viewport.css:

table.viewport{	left: -1px;	top: -1px;	width: 200px;	height: 200px;	position: absolute;	visibility: visible;}td.top-left, td.top-center, td.top-right,td.middle-left, td.middle-right,td.bottom-left, td.bottom-center, td.bottom-right{	background-color: #000000;}td.top-left, td.top-center, td.top-right,td.bottom-left, td.bottom-center, td.bottom-right{	height: 5px;}td.top-left, td.top-right,td.middle-left, td.middle-right,td.bottom-left, td.bottom-right{	width: 5px;}td.top-left{	cursor: nw-resize;}	td.top-center{		cursor: n-resize;	}		td.top-right{			cursor: ne-resize;		}td.middle-left{	cursor: w-resize;}						td.middle-right{			cursor: e-resize;		}td.bottom-left{	cursor: sw-resize;}	td.bottom-center{		cursor: s-resize;	}		td.bottom-right{			cursor: se-resize;		}

Viewport.js:

Jesdisciple = {	ensureEvent: function(ev){		ev = ev || window.event;		if(!ev.target){			ev.target = ev.srcElement;		}		return ev;	},		getMousePosition: function(ev){		if(ev.pageX || ev.pageY){			return {x:ev.pageX, y:ev.pageY};		}		return {			x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,			y: ev.clientY + document.body.scrollTop  - document.body.clientTop		};	},		getPositionOf: function(element){		var top = 0;		var left = 0;				while(element.offsetParent){			left += element.offsetLeft;			top += element.offsetTop;			element = element.offsetParent;		}				left += element.offsetLeft;		top += element.offsetTop;				return {x: left, y: top};	},		getMouseOffsetFrom: function(element, ev){		var elemPos  = Jesdisciple.getPositionOf(element);		var mousePos = Jesdisciple.getMousePosition(ev);		return {x:mousePos.x - elemPos.x, y:mousePos.y - elemPos.y};	}};Viewport = {	grab: function(ev){		if(!Viewport.grabbed){			Viewport.grabbed = ev.target;			Viewport.mouseOffset = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);		}	},		mouseMove: function(ev){		if(Viewport.grabbed){			ev = Jesdisciple.ensureEvent(ev);			var directions = Viewport.grabbed.className.split('-');			if(directions.length == 2){ //resize				var m = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);				switch(directions[0]){					case 'top':						alert('top impossibly grabbed');						break;					case 'bottom':						Viewport.update(Viewport.neu.width, parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y);						if(Viewport.neu.height >= 1 || Viewport.neu.height > Viewport.old.height){							Viewport.table.style.height = parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y;						}						break;					default:										}				switch(directions[1]){					case 'left':						alert('left impossibly grabbed');						break;					case 'right':						Viewport.update(parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x, Viewport.neu.height);						if(Viewport.neu.width >= 1 || Viewport.neu.width > Viewport.old.width){							Viewport.table.style.width = parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x;						}						break;					default:										}			}			return false;		}	},		mouseUp: function(ev){		Viewport.grabbed = undefined;	},		build: function(){		Viewport.table = document.createElement('table');		document.body.appendChild(Viewport.table);			Viewport.table.className = 'viewport';			Viewport.table.insertRow(0);				Viewport.table.rows[0].insertCell(0);					Viewport.table.rows[0].cells[0].className = 'top-left';					Viewport.table.rows[0].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[0].insertCell(1);					Viewport.table.rows[0].cells[1].className = 'top-center';					Viewport.table.rows[0].cells[1].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[0].insertCell(2);					Viewport.table.rows[0].cells[2].className = 'top-right';					Viewport.table.rows[0].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };								Viewport.table.insertRow(1);				Viewport.table.rows[1].insertCell(0);					Viewport.table.rows[1].cells[0].className = 'middle-left';					Viewport.table.rows[1].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[1].insertCell(1);					Viewport.contentArea = Viewport.table.rows[1].cells[1];				Viewport.table.rows[1].insertCell(2);					Viewport.table.rows[1].cells[2].className = 'middle-right';					Viewport.table.rows[1].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };								Viewport.table.insertRow(2);				Viewport.table.rows[2].insertCell(0);					Viewport.table.rows[2].cells[0].className = 'bottom-left';					Viewport.table.rows[2].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[2].insertCell(1);					Viewport.table.rows[2].cells[1].className = 'bottom-center';					Viewport.table.rows[2].cells[1].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[2].insertCell(2);					Viewport.table.rows[2].cells[2].className = 'bottom-right';					Viewport.table.rows[2].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				document.onmousemove = Viewport.mouseMove;		document.onmouseup = Viewport.mouseUp;				Viewport.table.style.position = 'absolute';// Commenting this line makes the alert show the nullstring.		Viewport.table.style.visibility = 'visible';alert(Viewport.table.style.position);	},		update: function(width, height){		Viewport.old = {			width: parseInt(Viewport.table.style.width.replace(/px/, ''), 10),			height:	parseInt(Viewport.table.style.height.replace(/px/, ''), 10)		};		Viewport.neu = {			width: width,			height: height		};	}};

As I was pasting my script in just now, I noticed that I had misspelled "height" as "heihgt" in the assignment to Viewport.neu in Viewport.update(width, height). (See my last post.) But Ctrl+F found no other occurrences of the misspelling, and the script's operation didn't improve when I corrected it.While testing with alert(), I interestingly found that the current argument of Viewport.table.style.position is shown as "" (the nullstring) when I don't assign it in the JavaScript, even though I specify it in the CSS.

You might also try moving the appendChild call right after the createElement call, before you assign any attributes or properties.

I have done so above, but to no avail.

Also, you might need to create a tbody element to hold all the tr elements.

For this, I got:

Error: Viewport.table.createTBody is not a functionSource File: http://localhost/Viewport/Viewport.jsLine: 96

Did you mean by using createElement('tbody'), or is there another way to do it? (Table.tBodies[] at http://w3schools.com/htmldom/dom_obj_table.asp makes me think there's a special function for it; an element simply created and added wouldn't show up in a special collection, I wouldn't think.)

[justsomeguy]

When you assign the class use both the class and className properties. I believe className is IE-only, or the other way around. But assigning both won't hurt anything. Also, I'm not entirely positive if assigning a class and then checking a style property is going to produce the expected results, but it might.When I create a table in Javascript I do it all using createElement. It's not the prettiest set of code, but it runs well. For that I create a table, tbody, tr, and a few td elements and then some content elements, divs and inputs and such. After creating everything I append it all like it needs to be done, IE has issues with input elements unless you set the type before you append. After appending I set the properties for everything else. I'm not saying that's the right way, it just works for me.

[Jesdisciple]

Including Viewport.table.class = 'viewport'; makes IE expect an identifier, I assume after "class", and this throws the entire script off (only in IE). Because of this unique error, I had been deceived into thinking that IE could actually be good for something, lol.Viewport.html

// Dynamic JavaScript DocumentJesdisciple = {	ensureEvent: function(ev){		if(!ev){			ev = window.event;		}		if(!ev.target){			ev.target = ev.srcElement;		}		return ev;	},		ensureError: function(err){		if(!err.message){			err.message = err.description;		}		return err;	},		GET: function(){		var url = window.location.href;		var array = url.indexOf('#') == -1 ?					url.substring(url.indexOf('?') + 1).split(/&;/):					url.substring(url.indexOf('?') + 1, url.indexOf('#')).split(/&;/);								//URLs can be like either "sample.html?test1=hi&test2=bye" or									//"sample.html?test1=hi;test2=bye"		window._GET = {			keys: [],						values: [],						toString: function(){				return '[object _GET]';			}		};		for(var i = 0; i < array.length; i++){			var assign = array[i].indexOf('=');			_GET.keys[i] = array[i].substring(0, assign);			_GET.values[i] = _GET[keys[i]] = assign == -1 ?												true : //if no value, treat as boolean												array[i].substring(assign + 1);		}	},		getMousePosition: function(ev){		if(ev.pageX && ev.pageY){			return {x:ev.pageX, y:ev.pageY};		}		return {			x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,			y: ev.clientY + document.body.scrollTop  - document.body.clientTop		};	},		getPositionOf: function(element){		var top = 0;		var left = 0;				while(element.offsetParent){			left += element.offsetLeft;			top += element.offsetTop;			element = element.offsetParent;		}				left += element.offsetLeft;		top += element.offsetTop;				return {x: left, y: top};	},		getMouseOffsetFrom: function(element, ev){		var elemPos  = Jesdisciple.getPositionOf(element);		var mousePos = Jesdisciple.getMousePosition(ev);		return {x:mousePos.x - elemPos.x, y:mousePos.y - elemPos.y};	},		setSensitiveClosure: function(bool, message){		window.onbeforeunload = !bool ? undefined : function () {			return message;		}	}};Viewport = {	grab: function(ev){		if(!Viewport.grabbed){			Viewport.grabbed = ev.target;			Viewport.mouseOffset = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);		}	},		mouseMove: function(ev){		if(Viewport.grabbed){			ev = Jesdisciple.ensureEvent(ev);			var directions = Viewport.grabbed.className.split('-');			if(directions.length == 2){ //resize				var m = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);				switch(directions[0]){					case 'top':						alert('top impossibly grabbed');						break;					case 'bottom':						Viewport.update(Viewport.neu.width, parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y);						if(Viewport.neu.height >= 1 || Viewport.neu.height > Viewport.old.height){							Viewport.table.style.height = parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y;						}						break;					default:										}				switch(directions[1]){					case 'left':						alert('left impossibly grabbed');						break;					case 'right':						Viewport.update(parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x, Viewport.neu.height);						if(Viewport.neu.width >= 1 || Viewport.neu.width > Viewport.old.width){							Viewport.table.style.width = parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x;						}						break;					default:										}			}			return false;		}	},		mouseUp: function(ev){		Viewport.grabbed = undefined;	},		build: function(){		Viewport.table = document.createElement('table');		document.body.appendChild(Viewport.table);			Viewport.table.className = 'viewport';			Viewport.table.insertRow(0);				Viewport.table.rows[0].insertCell(0);					Viewport.table.rows[0].cells[0].className = 'top-left';					Viewport.table.rows[0].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[0].insertCell(1);					Viewport.table.rows[0].cells[1].className = 'top-center';					Viewport.table.rows[0].cells[1].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[0].insertCell(2);					Viewport.table.rows[0].cells[2].className = 'top-right';					Viewport.table.rows[0].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };								Viewport.table.insertRow(1);				Viewport.table.rows[1].insertCell(0);					Viewport.table.rows[1].cells[0].className = 'middle-left';					Viewport.table.rows[1].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[1].insertCell(1);					Viewport.contentArea = Viewport.table.rows[1].cells[1];				Viewport.table.rows[1].insertCell(2);					Viewport.table.rows[1].cells[2].className = 'middle-right';					Viewport.table.rows[1].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };								Viewport.table.insertRow(2);				Viewport.table.rows[2].insertCell(0);					Viewport.table.rows[2].cells[0].className = 'bottom-left';					Viewport.table.rows[2].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[2].insertCell(1);					Viewport.table.rows[2].cells[1].className = 'bottom-center';					Viewport.table.rows[2].cells[1].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[2].insertCell(2);					Viewport.table.rows[2].cells[2].className = 'bottom-right';					Viewport.table.rows[2].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				document.onmousemove = Viewport.mouseMove;		document.onmouseup = Viewport.mouseUp;				Viewport.table.style.position = 'absolute';// Commenting this line makes the alert show the nullstring.		Viewport.table.style.visibility = 'visible';	},		update: function(width, height){		Viewport.old = {			width: parseInt(Viewport.table.style.width.replace(/px/, ''), 10),			height:	parseInt(Viewport.table.style.height.replace(/px/, ''), 10)		};		Viewport.neu = {			width: width,			height: height		};	}};

Viewport.css

table.viewport{	left: -1px;	top: -1px;	width: 200px;	height: 200px;	position: absolute;	visibility: visible;}td.top-left, td.top-center, td.top-right,td.middle-left, td.middle-right,td.bottom-left, td.bottom-center, td.bottom-right{	background-color: #000000;}td.top-left, td.top-center, td.top-right,td.bottom-left, td.bottom-center, td.bottom-right{	height: 5px;}td.top-left, td.top-right,td.middle-left, td.middle-right,td.bottom-left, td.bottom-right{	width: 5px;}td.top-left{	cursor: nw-resize;}	td.top-center{		cursor: n-resize;	}		td.top-right{			cursor: ne-resize;		}td.middle-left{	cursor: w-resize;}						td.middle-right{			cursor: e-resize;		}td.bottom-left{	cursor: sw-resize;}	td.bottom-center{		cursor: s-resize;	}		td.bottom-right{			cursor: se-resize;		}

[Jesdisciple]

Update: I started over and met a whole lot of bugs, but discovered that whether the table appears depends upon whether I include the CSS directly into the document; the linked style doesn't work. So I copied the version from here into my code, and included the style directly, and now it works. (EDIT: If I use decimal pixels, IE and Opera go nuts... I did it with the width of the left and right because a 1px width is rendered as 3px, and they make the sides' width a percentage of the table's. Grr... Also, IE has the origin (0, 0) really far away from the corner of the viewport.)Viewport.html

<html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		<title>Titled Document</title>		<style type="text/css">			table.viewport{				left: -5px;				top: -5px;				width: 200px;				height: 200px;				position: absolute;				visibility: visible;				border-spacing: 0;				padding: 0;			}						td.top-left, td.top-center, td.top-right,			td.middle-left, td.middle-right,			td.bottom-left, td.bottom-center, td.bottom-right{				background-color: #000000;			}			td.top-left, td.top-center, td.top-right,			td.bottom-left, td.bottom-center, td.bottom-right{				height: 3px;			}			td.top-left, td.top-right,			td.middle-left, td.middle-right,			td.bottom-left, td.bottom-right{				width: 1px;			}			td.top-left{				cursor: nw-resize;			}				td.top-center{					cursor: n-resize;				}					td.top-right{						cursor: ne-resize;					}			td.middle-left{				cursor: w-resize;			}																		td.middle-right{						cursor: e-resize;					}			td.bottom-left{				cursor: sw-resize;			}				td.bottom-center{					cursor: s-resize;				}					td.bottom-right{						cursor: se-resize;					}		</style><!--		<link type="text/css" href="Viewport.css">-->		<script type="text/javascript" src="Viewport.js.php"></script>		<script type="text/javascript">			function main(){				Viewport.build();			}		</script>	</head>	<body onLoad="main();">	</body></html>

Viewport.js.php

Jesdisciple = {	ensureEvent: function(ev){		if(!ev){			ev = window.event;		}		if(!ev.target){			ev.target = ev.srcElement;		}		return ev;	},		ensureError: function(err){		if(!err.message){			err.message = err.description;		}		return err;	},		GET: function(){		var url = window.location.href;		var array = url.indexOf('#') == -1 ?					url.substring(url.indexOf('?') + 1).split(/&;/):					url.substring(url.indexOf('?') + 1, url.indexOf('#')).split(/&;/);								//URLs can be like either "sample.html?test1=hi&test2=bye" or									//"sample.html?test1=hi;test2=bye"		window._GET = {			keys: [],						values: [],						toString: function(){				return '[object _GET]';			}		};		for(var i = 0; i < array.length; i++){			var assign = array[i].indexOf('=');			_GET.keys[i] = array[i].substring(0, assign);			_GET.values[i] = _GET[keys[i]] = assign == -1 ?												true : //if no value, treat as boolean												array[i].substring(assign + 1);		}	},		getMousePosition: function(ev){		if(ev.pageX && ev.pageY){			return {x:ev.pageX, y:ev.pageY};		}		return {			x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,			y: ev.clientY + document.body.scrollTop  - document.body.clientTop		};	},		getPositionOf: function(element){		var top = 0;		var left = 0;				while(element.offsetParent){			left += element.offsetLeft;			top += element.offsetTop;			element = element.offsetParent;		}				left += element.offsetLeft;		top += element.offsetTop;				return {x: left, y: top};	},		getMouseOffsetFrom: function(element, ev){		var elemPos  = Jesdisciple.getPositionOf(element);		var mousePos = Jesdisciple.getMousePosition(ev);		return {x:mousePos.x - elemPos.x, y:mousePos.y - elemPos.y};	},		setSensitiveClosure: function(bool, message){		window.onbeforeunload = !bool ? undefined : function () {			return message;		};	}};Viewport = {	grab: function(ev){		if(!Viewport.grabbed){			Viewport.grabbed = ev.target;			Viewport.mouseOffset = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);		}	},		mouseMove: function(ev){		if(Viewport.grabbed){			ev = Jesdisciple.ensureEvent(ev);			var directions = Viewport.grabbed.className.split('-');			var m = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);			switch(directions[0]){				case 'top':					alert('top impossibly grabbed');					break;				case 'bottom':					Viewport.update(Viewport.neu.width, parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y);					if(Viewport.neu.height >= 1 || Viewport.neu.height > Viewport.old.height){						Viewport.table.style.height = parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y;					}				break;				default:							}			switch(directions[1]){				case 'left':					alert('left impossibly grabbed');					break;				case 'right':					Viewport.update(parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x, Viewport.neu.height);					if(Viewport.neu.width >= 1 || Viewport.neu.width > Viewport.old.width){						Viewport.table.style.width = parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x;					}					break;				default:							}			return false;		}	},		mouseUp: function(ev){		Viewport.grabbed = undefined;	},		build: function(){		Viewport.table = document.createElement('table');			Viewport.table.id = 'viewport';			Viewport.table.className = 'viewport';			Viewport.table.style.left = '-3px';			Viewport.table.style.top = '-3px';			Viewport.table.style.width = '200px';			Viewport.table.style.height = '200px';			Viewport.table.className = 'viewport';			Viewport.table.insertRow(0);				Viewport.table.rows[0].insertCell(0);					Viewport.table.rows[0].cells[0].className = 'top-left';					Viewport.table.rows[0].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[0].insertCell(1);					Viewport.table.rows[0].cells[1].className = 'top-center';					Viewport.table.rows[0].cells[1].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[0].insertCell(2);					Viewport.table.rows[0].cells[2].className = 'top-right';					Viewport.table.rows[0].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };						Viewport.table.insertRow(1);				Viewport.table.rows[1].insertCell(0);					Viewport.table.rows[1].cells[0].className = 'middle-left';					Viewport.table.rows[1].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[1].insertCell(1);					Viewport.contentArea = Viewport.table.rows[1].cells[1];				Viewport.table.rows[1].insertCell(2);					Viewport.table.rows[1].cells[2].className = 'middle-right';					Viewport.table.rows[1].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };						Viewport.table.insertRow(2);				Viewport.table.rows[2].insertCell(0);					Viewport.table.rows[2].cells[0].className = 'bottom-left';					Viewport.table.rows[2].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[2].insertCell(1);					Viewport.table.rows[2].cells[1].className = 'bottom-center';					Viewport.table.rows[2].cells[1].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[2].insertCell(2);					Viewport.table.rows[2].cells[2].className = 'bottom-right';					Viewport.table.rows[2].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				document.onmousemove = Viewport.mouseMove;		document.onmouseup = Viewport.mouseUp;				document.body.appendChild(Viewport.table);		Viewport.table.style.position = 'absolute';// Commenting this line makes the alert show the nullstring.		Viewport.table.style.visibility = 'visible';		Viewport.update();	},		update: function(width, height){		Viewport.old = {			width: parseInt(Viewport.table.style.width.replace(/px/, ''), 10),			height: parseInt(Viewport.table.style.height.replace(/px/, ''), 10)		};		Viewport.neu = {			width: width,			height: height		};	}};

One last question... Why does the linked style not work?

[justsomeguy]

I have linked stylesheets in my pages that add elements like this and it works fine. One thing is you need to assign both the class and className attributes, browsers don't use the same one.

[Jesdisciple]

One thing is you need to assign both the class and className attributes, browsers don't use the same one.

I tried this and removed it because...

Including Viewport.table.class = 'viewport'; makes IE expect an identifier, I assume after "class", and this throws the entire script off (only in IE).

Firefox, Opera, and IE all do fine with the inline stylesheet (meaning that .className works), and IE rejects .class, I guess in case JScript needs to use it as a keyword later on. To use .class, I'll need a browser detection to exclude IE (and any other offending browsers) for the statement. So I have 2 questions:1) What browser requires .class?2) What script could accomplish this exclusion (preferably without obfuscating the code)? (Would it work to use a try...catch around the assignment? Since it's a syntax error, I'm not sure...)Also, how can I get Firefox, Opera, and IE to recognize my linked stylesheet? It makes no sense to me that it works internally but not externally.

[jesh]

Also, how can I get Firefox, Opera, and IE to recognize my linked script? It makes no sense to me that it works internally but not externally.

Are you referring to this linked script?

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

It may be that the browsers are looking for content that is being returned as "text/javascript" but is getting it returned as something else (e.g. text/plain). You might check what the Response has for the content-type on that page.

[justsomeguy]

When assigning attributes I use setAttribute instead of the dot notation. This is one example that works fine everywhere I've tested it:

function reset_new_app(){  var el = document.getElementById("add_app");  // remove child elements from the div  for (var i = el.childNodes.length - 1; i >= 0; i--)	el.removeChild(el.childNodes[i]);  // add the text link back to the div  var a = document.createElement("a");  var t = document.createTextNode("[+] Add Application");  el.appendChild(a);  a.appendChild(t);  a.setAttribute("className", "light_link");  a.setAttribute("class", "light_link");  a.setAttribute("href", "javascript:void(0);");  a.onclick = show_add_app;}

[Jesdisciple]

Are you referring to this linked script?

Jesdisciple = {	ensureEvent: function(ev){		if(!ev){			ev = window.event;		}		if(!ev.target){			ev.target = ev.srcElement;		}		return ev;	},		ensureError: function(err){		if(!err.message){			err.message = err.description;		}		return err;	},		GET: function(){		var url = window.location.href;		var array = url.indexOf('#') == -1 ?					url.substring(url.indexOf('?') + 1).split(/&;/):					url.substring(url.indexOf('?') + 1, url.indexOf('#')).split(/&;/);								//URLs can be like either "sample.html?test1=hi&test2=bye" or									//"sample.html?test1=hi;test2=bye"		window._GET = {			keys: [],						values: [],						toString: function(){				return '[object _GET]';			}		};		for(var i = 0; i < array.length; i++){			var assign = array[i].indexOf('=');			_GET.keys[i] = array[i].substring(0, assign);			_GET.values[i] = _GET[keys[i]] = assign == -1 ?												true : //if no value, treat as boolean												array[i].substring(assign + 1);		}	},		getMousePosition: function(ev){		if(ev.pageX && ev.pageY){			return {x:ev.pageX, y:ev.pageY};		}		return {			x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,			y: ev.clientY + document.body.scrollTop  - document.body.clientTop		};	},		getPositionOf: function(element){		var top = 0;		var left = 0;				while(element.offsetParent){			left += element.offsetLeft;			top += element.offsetTop;			element = element.offsetParent;		}				left += element.offsetLeft;		top += element.offsetTop;				return {x: left, y: top};	},		getMouseOffsetFrom: function(element, ev){		var elemPos  = Jesdisciple.getPositionOf(element);		var mousePos = Jesdisciple.getMousePosition(ev);		return {x:mousePos.x - elemPos.x, y:mousePos.y - elemPos.y};	},		setSensitiveClosure: function(bool, message){		window.onbeforeunload = !bool ? undefined : function () {			return message;		};	},		setClass: function(element, value){		element.setAttribute('class', value);		element.setAttribute('className', value);	}};Viewport = {	grab: function(ev){		if(!Viewport.grabbed){			Viewport.grabbed = ev.target;			Viewport.mouseOffset = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);		}	},		mouseMove: function(ev){		if(Viewport.grabbed){			ev = Jesdisciple.ensureEvent(ev);			var directions = Viewport.grabbed.className.split('-');			var m = Jesdisciple.getMouseOffsetFrom(Viewport.grabbed, ev);			switch(directions[0]){				case 'top':					alert('top impossibly grabbed');					break;				case 'bottom':					Viewport.update(Viewport.neu.width, parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y);					if(Viewport.neu.height >= 1 || Viewport.neu.height > Viewport.old.height){						Viewport.table.style.height = parseInt(Viewport.table.style.height.replace(/px/, ''), 10) + m.y;					}				break;				default:							}			switch(directions[1]){				case 'left':					alert('left impossibly grabbed');					break;				case 'right':					Viewport.update(parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x, Viewport.neu.height);					if(Viewport.neu.width >= 1 || Viewport.neu.width > Viewport.old.width){						Viewport.table.style.width = parseInt(Viewport.table.style.width.replace(/px/, ''), 10) + m.x;					}					break;				default:							}			return false;		}	},		mouseUp: function(ev){		Viewport.grabbed = undefined;	},		build: function(){		Viewport.table = document.createElement('table');			Viewport.table.id = 'viewport';			Jesdisciple.setClass(Viewport.table, 'viewport');			Viewport.table.style.width = '200px';			Viewport.table.style.height = '200px';			Jesdisciple.setClass(Viewport.table, 'viewport');			Viewport.table.insertRow(0);				Viewport.table.rows[0].insertCell(0);					Jesdisciple.setClass(Viewport.table.rows[0].cells[0], 'top-left');					Viewport.table.rows[0].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[0].insertCell(1);					Jesdisciple.setClass(Viewport.table.rows[0].cells[1], 'top-center');					Viewport.table.rows[0].cells[1].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[0].insertCell(2);					Jesdisciple.setClass(Viewport.table.rows[0].cells[2], 'top-right');					Viewport.table.rows[0].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };						Viewport.table.insertRow(1);				Viewport.table.rows[1].insertCell(0);					Jesdisciple.setClass(Viewport.table.rows[1].cells[0], 'middle-left');					Viewport.table.rows[1].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[1].insertCell(1);					Viewport.contentArea = Viewport.table.rows[1].cells[1];				Viewport.table.rows[1].insertCell(2);					Jesdisciple.setClass(Viewport.table.rows[1].cells[2], 'middle-right');					Viewport.table.rows[1].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };						Viewport.table.insertRow(2);				Viewport.table.rows[2].insertCell(0);					Jesdisciple.setClass(Viewport.table.rows[2].cells[0], 'bottom-left');					Viewport.table.rows[2].cells[0].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[2].insertCell(1);					Jesdisciple.setClass(Viewport.table.rows[2].cells[1], 'bottom-center');					Viewport.table.rows[2].cells[1].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				Viewport.table.rows[2].insertCell(2);					Jesdisciple.setClass(Viewport.table.rows[2].cells[2], 'bottom-right');					Viewport.table.rows[2].cells[2].onmousedown = function(ev){ Viewport.grab(Jesdisciple.ensureEvent(ev)); return false; };				document.onmousemove = Viewport.mouseMove;		document.onmouseup = Viewport.mouseUp;				document.body.appendChild(Viewport.table);		Viewport.table.style.position = 'absolute';// Commenting this line makes the alert show the nullstring.		Viewport.table.style.visibility = 'visible';		Viewport.update();	},		update: function(width, height){		Viewport.old = {			width: parseInt(Viewport.table.style.width.replace(/px/, ''), 10),			height: parseInt(Viewport.table.style.height.replace(/px/, ''), 10)		};		Viewport.neu = {			width: width,			height: height		};	}};

Viewport.html

<html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		<title>Titled Document</title><!--		<style type="text/css">			table.viewport{				left: -5px;				top: -5px;				width: 200px;				height: 200px;				position: absolute;				visibility: visible;				border-spacing: 0;				padding: 0;			}						td.top-left, td.top-center, td.top-right,			td.middle-left, td.middle-right,			td.bottom-left, td.bottom-center, td.bottom-right{				background-color: #000000;			}			td.top-left, td.top-center, td.top-right,			td.bottom-left, td.bottom-center, td.bottom-right{				height: 3px;			}			td.top-left, td.top-right,			td.middle-left, td.middle-right,			td.bottom-left, td.bottom-right{				width: 1px;			}			td.top-left{				cursor: nw-resize;			}				td.top-center{					cursor: n-resize;				}					td.top-right{						cursor: ne-resize;					}			td.middle-left{				cursor: w-resize;			}																		td.middle-right{						cursor: e-resize;					}			td.bottom-left{				cursor: sw-resize;			}				td.bottom-center{					cursor: s-resize;				}					td.bottom-right{						cursor: se-resize;					}		</style>-->		<link type="text/css" href="Viewport.css">		<script type="text/javascript" src="Viewport.js.php"></script>		<script type="text/javascript">			function main(){				Viewport.build();			}		</script>	</head>	<body onLoad="main();">	</body></html>

Viewport.css

table.viewport{	border-spacing: 0;	padding: 0;}td.top-left, td.top-center, td.top-right,td.middle-left, td.middle-right,td.bottom-left, td.bottom-center, td.bottom-right{	background-color: #000000;	z-index: 0;}td.top-left, td.top-center, td.top-right,td.bottom-left, td.bottom-center, td.bottom-right{	height: 1px;}td.top-left, td.top-right,td.middle-left, td.middle-right,td.bottom-left, td.bottom-right{	width: 1px;}td.top-left{	cursor: nw-resize;}td.top-center{	cursor: n-resize;}td.top-right{	cursor: ne-resize;}td.middle-left{	cursor: w-resize;}td.middle-right{	cursor: e-resize;}td.bottom-left{	cursor: sw-resize;}td.bottom-center{	cursor: s-resize;}td.bottom-right{	cursor: se-resize;}

[jesh]

Sorry, "linked stylesheet". The script works fine. My problem is that my stylesheet only works when I embed it in the HTML, whether or not I use the LINK tag.

<link type="text/css" href="Viewport.css">

It may be because you are missing the rel attribute:

<link rel="stylesheet" type="text/css" href="Viewport.css">

[Jesdisciple]

Yup, that was it. It seems that every time I get hung up on something and need help, it's something absurdly simple. Thanks to both of you!