Mercurial > hg > webaudioevaluationtool

changeset 1136:45bb043fcd81

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Better AB positioning of boxes enabling multi-line
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Tue, 12 Jan 2016 14:22:36 +0000
parents 70215fb5b24f
children c2be8061af00
files AB.css AB.js
diffstat 2 files changed, 15 insertions(+), 18 deletions(-) [+]
line wrap: on
line diff
--- a/AB.css	Tue Jan 12 13:06:58 2016 +0000
+++ b/AB.css	Tue Jan 12 14:22:36 2016 +0000
@@ -41,8 +41,9 @@
 	width: 260px;
 	height: 300px;
 	border:  black 1px solid;
-	position: absolute;
+    float: left;
 	padding-top: 5px;
+    margin: 25px;
 }
 
 div.comparitor-selector {
--- a/AB.js	Tue Jan 12 13:06:58 2016 +0000
+++ b/AB.js	Tue Jan 12 14:22:36 2016 +0000
@@ -69,14 +69,15 @@
 	var boxes = document.createElement('div');
 	boxes.align = "center";
 	boxes.id = "box-holders";
+    boxes.style.float = "left";
 	
 	var submit = document.createElement('button');
 	submit.id = "submit";
 	submit.onclick = buttonSubmitClick;
 	submit.className = "big-button";
 	submit.textContent = "submit";
-	submit.style.position = "absolute";
-	submit.style.top = '466px';
+	submit.style.position = "relative";
+	submit.style.left = (window.innerWidth-250)/2 + 'px';
 		
 	feedbackHolder.appendChild(boxes);
 	feedbackHolder.appendChild(submit);
@@ -230,21 +231,16 @@
 {
 	document.getElementById('submit').style.left = (window.innerWidth-250)/2 + 'px';
 	var numObj = interfaceContext.comparitor.comparitors.length;
-	var boxW = numObj*260;
-	var spaces = numObj-1;
-	var spaceSize = 50;
-	var remainder = window.innerWidth - boxW;
-	if (remainder < spaces*spaceSize)
-	{
-		spaceSize = Math.floor(spaces/remainder);
-	}
-	var totalW = boxW + spaces*spaceSize;
-	var diff = (window.innerWidth - totalW)/2;
-	for (var i=0; i<interfaceContext.comparitor.comparitors.length; i++)
-	{
-		var obj = interfaceContext.comparitor.comparitors[i];
-		obj.box.style.left = diff + (260+spaceSize)*i + 'px';
-	}
+	var boxW = numObj*312;
+    var diff = window.innerWidth - boxW;
+    while (diff < 0)
+    {
+        numObj = Math.ceil(numObj/2);
+        boxW = numObj*312;
+        diff = window.innerWidth - boxW;
+    }
+    document.getElementById('box-holders').style.marginLeft = diff/2 + 'px';
+    document.getElementById('box-holders').style.width = boxW + 'px';
 }
 
 function buttonSubmitClick()