comparison core.js @ 1524:9c1550a1de6e

Bug #1300: Boxes are automatically scaled on load. Will add to 'resize' commands in the future.

 		var audioHolderObject = audioObject.specification.parent;
 		// Create document objects to hold the comment boxes
 		this.trackComment = document.createElement('div');
 		this.trackComment.className = 'comment-div';
 		this.trackComment.id = 'comment-div-'+audioObject.id;
+		var boxwidth = (window.innerWidth-100)/2;
+		if (boxwidth >= 624)
+		{
+			boxwidth = 624;
+		}
+		else if (boxwidth < 400)
+		{
+			boxwidth = 400;
+		}
+		this.trackComment.style.width = boxwidth+"px";
 		// Create a string next to each comment asking for a comment
 		this.trackString = document.createElement('span');
 		this.trackString.innerHTML = audioHolderObject.commentBoxPrefix+' '+audioObject.id;
 		// Create the HTML5 comment box 'textarea'
 		this.trackCommentBox = document.createElement('textarea');
 		this.trackCommentBox.rows = '4';
 		this.trackCommentBox.cols = '100';
 		this.trackCommentBox.name = 'trackComment'+audioObject.id;
 		this.trackCommentBox.className = 'trackComment';
+		this.trackCommentBox.style.width = boxwidth-6+"px";
 		var br = document.createElement('br');
 		// Add to the holder.
 		this.trackComment.appendChild(this.trackString);
 		this.trackComment.appendChild(br);
 		this.trackComment.appendChild(this.trackCommentBox);

 	this.commentBox = function(commentQuestion) {
 		this.specification = commentQuestion;
 		// Create document objects to hold the comment boxes
 		this.holder = document.createElement('div');
 		this.holder.className = 'comment-div';
+		var boxwidth = (window.innerWidth-100)/2;
+		if (boxwidth >= 624)
+		{
+			boxwidth = 624;
+		}
+		else if (boxwidth < 400)
+		{
+			boxwidth = 400;
+		}
+		this.holder.style.width = boxwidth+"px";
 		// Create a string next to each comment asking for a comment
 		this.string = document.createElement('span');
 		this.string.innerHTML = commentQuestion.question;
 		// Create the HTML5 comment box 'textarea'
 		this.textArea = document.createElement('textarea');
 		this.textArea.rows = '4';
 		this.textArea.cols = '100';
 		this.textArea.className = 'trackComment';
+		this.textArea.style.width = boxwidth-6+"px";
 		var br = document.createElement('br');
 		// Add to the holder.
 		this.holder.appendChild(this.string);
 		this.holder.appendChild(br);
 		this.holder.appendChild(this.textArea);

 	this.radioBox = function(commentQuestion) {
 		this.specification = commentQuestion;
 		// Create document objects to hold the comment boxes
 		this.holder = document.createElement('div');
 		this.holder.className = 'comment-div';
+		var boxwidth = (window.innerWidth-100)/2;
+		if (boxwidth >= 624)
+		{
+			boxwidth = 624;
+		}
+		else if (boxwidth < 400)
+		{
+			boxwidth = 400;
+		}
+		this.holder.style.width = boxwidth+"px";
 		// Create a string next to each comment asking for a comment
 		this.string = document.createElement('span');
 		this.string.innerHTML = commentQuestion.statement;
 		var br = document.createElement('br');
 		// Add to the holder.

 		this.span.style.marginLeft = '12px';
 		this.span.align = 'center';
 		this.span.style.marginTop = '15px';
 		
 		var optCount = commentQuestion.options.length;
-		var spanMargin = Math.floor(((600-(optCount*100))/(optCount))/2)+'px';
-		console.log(spanMargin);
+		var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px';
 		for (var i=0; i<optCount; i++)
 		{
 			var div = document.createElement('div');
-			div.style.width = '100px';
+			div.style.width = '80px';
 			div.style.float = 'left';
 			div.style.marginRight = spanMargin;
 			div.style.marginLeft = spanMargin;
 			var input = document.createElement('input');
 			input.type = 'radio';

 			div.appendChild(input);
 			this.inputs.appendChild(div);
 			
 			
 			div = document.createElement('div');
-			div.style.width = '100px';
+			div.style.width = '80px';
 			div.style.float = 'left';
 			div.style.marginRight = spanMargin;
 			div.style.marginLeft = spanMargin;
 			div.align = 'center';
 			var span = document.createElement('span');

 	this.checkboxBox = function(commentQuestion) {
 		this.specification = commentQuestion;
 		// Create document objects to hold the comment boxes
 		this.holder = document.createElement('div');
 		this.holder.className = 'comment-div';
+		var boxwidth = (window.innerWidth-100)/2;
+		if (boxwidth >= 624)
+		{
+			boxwidth = 624;
+		}
+		else if (boxwidth < 400)
+		{
+			boxwidth = 400;
+		}
+		this.holder.style.width = boxwidth+"px";
 		// Create a string next to each comment asking for a comment
 		this.string = document.createElement('span');
 		this.string.innerHTML = commentQuestion.statement;
 		var br = document.createElement('br');
 		// Add to the holder.

 		this.span.style.marginLeft = '12px';
 		this.span.align = 'center';
 		this.span.style.marginTop = '15px';
 		
 		var optCount = commentQuestion.options.length;
-		var spanMargin = Math.floor(((600-(optCount*100))/(optCount))/2)+'px';
-		console.log(spanMargin);
+		var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px';
 		for (var i=0; i<optCount; i++)
 		{
 			var div = document.createElement('div');
-			div.style.width = '100px';
+			div.style.width = '80px';
 			div.style.float = 'left';
 			div.style.marginRight = spanMargin;
 			div.style.marginLeft = spanMargin;
 			var input = document.createElement('input');
 			input.type = 'checkbox';

 			div.appendChild(input);
 			this.inputs.appendChild(div);
 			
 			
 			div = document.createElement('div');
-			div.style.width = '100px';
+			div.style.width = '80px';
 			div.style.float = 'left';
 			div.style.marginRight = spanMargin;
 			div.style.marginLeft = spanMargin;
 			div.align = 'center';
 			var span = document.createElement('span');