Permalink
Browse files

"crushed some bugs, created others..."

  • Loading branch information...
1 parent b37b2b1 commit e7c79a5c26639654f0e03cd3914082c9cfc85543 @agryson committed Feb 27, 2012
Showing with 62 additions and 40 deletions.
  1. +1 −1 MainPageFiles/main.html
  2. +58 −36 MainPageFiles/mainScript.js
  3. +3 −3 MainPageFiles/mainStyles.css
View
2 MainPageFiles/main.html
@@ -79,7 +79,7 @@
</div>
- <div class="glassPanel panelLeft" id="linksPanel" onClick="expand(panel7)">
+ <div class="glassPanel panelLeft" id="panel7" onClick="expand(panel7)">
</div>
</div>
</body>
View
94 MainPageFiles/mainScript.js
@@ -7,7 +7,7 @@ var panel5;
var panel6;
var panel7;
/*And their array*/
-var panelsArray = [];
+var panelsArray;
/*The values to apply (can be easily edited, script wide, here)*/
var bump = 290;
@@ -24,72 +24,94 @@ function init() {
panel5 = document.getElementById("panel5");
panel6 = document.getElementById("panel6");
panel7 = document.getElementById("panel7");
- panelsArray = [ //a single panelArray = [sequence #, id, bumpedOnce?, bumpedTwice?, open?]
- [1,panel1,false,false,false],
- [2,panel2,false,false,false],
- [3,panel3,false,false,false],
- [4,panel4,false,false,false],
- [5,panel5,false,false,false],
- [6,panel6,false,false,false],
- [7,panel7,false,false,false]
+ panelsArray = [ //a single panelArray = [sequence #, id, bumpedOnce?, bumpedTwice?, open?, top]
+ [1,panel1,false,false,false,210],
+ [2,panel2,false,false,false,210],
+ [3,panel3,false,false,false,500],
+ [4,panel4,false,false,false,500],
+ [5,panel5,false,false,false,790],
+ [6,panel6,false,false,false,790],
+ [7,panel7,false,false,false,1080]
];
}
function expand(panel) { //expands clicked on panel, closing any other open ones and shifting other panels
for(var i = 0; i < panelsArray.length; i++) { //loops through the array
- closeAll(); //closes all other open panels
if(panel === panelsArray[i][1]){ //locks onto the panel we've been passed
+ closeAll(); //closes all other open panels
shiftOthers(i); //shifts others to make room
panelsArray[i][1].style.width = openWidth + "%";
panelsArray[i][1].style.height = openHeight + "px";
+ panelsArray[i][4] = true;
}
}
}
function closeAll() { //loops through array and closes the open panel before returning all panels to starting positions
- for(var i = 0; i < panelsArray.length; i++) {
- if(panelsArray[i][4] === true) {
- panelsArray[i][1].style.width = origWidth + "%";
- panelsArray[i][1].style.height = origHeight + "px";
+ for(var j = 0; j < panelsArray.length; j++) {
+ if (panelsArray[j][4] === true) {
+ panelsArray[j][1].style.width = origWidth + "%";
+ panelsArray[j][1].style.height = origHeight + "px";
+ panelsArray[j][4] = false;
startingPositions();
}
}
}
function startingPositions() { //Returns all shifted panels to their original positions
- for (var i = 0; i<panelsArray.length; i++) {
- if(panelsArray[i][2] === true){ //if shifted once, shift it back up one
- panelsArray[i][1].style.top = (parseInt(panelsArray[i][1].style.top, 10) - bump) + "px";
- panelsArray[i][2] = false; //then reset our marker
- } else if (panelsArray[i][3] === true){ //if shifted down twice, shift back up twice
- panelsArray[i][1].style.top = (parseInt(panelsArray[i][1].style.top, 10) - (bump * 2)) + "px";
- panelsArray[i][3] = false; //then reset our marker
+ var step = 0;
+ while ( step < panelsArray.length) {
+ console.log("startingPositions" + step);
+ if(panelsArray[step][2] === true){ //if shifted once, shift it back up one
+ panelsArray[step][5] -= bump;
+ panelsArray[step][1].style.top = panelsArray[step][5] + "px";
+ panelsArray[step][2] = false; //then reset our marker
+ } else if (panelsArray[step][3] === true){ //if shifted down twice, shift back up twice
+ panelsArray[step][5] -= (bump * 2);
+ panelsArray[step][1].style.top = panelsArray[step][5] + "px";
+ panelsArray[step][3] = false; //then reset our marker
}
- }
+ step++;
+
+ }
}
-function shiftOthers(i) { //Shifts all but the clicked upon panel to make room for expansion
- var j;
- if (panelsArray[i][0]%2 === 0 && i < panelsArray.length) { //if the panel is on the right (but stop at the last one)
- for (j = i-1; j < panelsArray.length; j++) { //for every panel after and the one to the left of it
- if (panelsArray[j][0]%2 !== 0) { //if it's odd (on the left)
- panelsArray[j][1].style.top = parseInt(panelsArray[j][1].style.top, 10) + (bump * 2) + "px";//bump it down twice
- panelsArray[j][3] = true; //mark it as bumped down twice
- } else if(j !== i) { //if it's on the right (and not the one we've clicked on)
- panelsArray[j][1].style.top = parseInt(panelsArray[j][1].style.top, 10) + (bump) + "px"; //bump it down once
+function shiftOthers(num) { //Shifts all but the clicked upon panel to make room for expansion
+ var j = num - 1;
+ if (j < 0) {
+ j = 0;
+ }
+ if (panelsArray[num][0]%2 === 0 && num < panelsArray.length) { //if the panel is on the right (but stop at the last one)
+ while (j <= panelsArray.length) { //for every panel after and the one to the left of it
+ if (panelsArray[j][0]%2 !== 0 && panelsArray[j][3] === false && panelsArray[j][2] === false) { //if it's odd (on the left)
+ console.log(panelsArray[j][5]);
+ panelsArray[j][5] += (bump * 2);
+ panelsArray[j][1].style.top = panelsArray[j][5] + "px";//bump it down twice //it's applying this six times to same thing
+ panelsArray[j][3] = true;//mark it as bumped down twice
+ console.log(panelsArray[j][5]);
+
+ } else if(j !== num && panelsArray[j][3] === false && panelsArray[j][2] === false) { //if it's on the right (and not the one we've clicked on)
+ console.log("theory");
+ panelsArray[j][5] += bump;
+ panelsArray[j][1].style.top = panelsArray[j][5] + "px"; //bump it down once
panelsArray[j][2] = true; //mark it as bumped down once
- }
+ }
+ j++;
}
- } else if (i < panelsArray.length) { //if the panel is on the left and not the last panel
- for (j = i+1; j < panelsArray.length; j++) { //for every panel after
+ } else if (num < panelsArray.length) { //if the panel is on the left and not the last panel
+ while (j < panelsArray.length) { //for every panel after
if (panelsArray[j][0]%2 === 0) { //if it's even (on the right)
- panelsArray[j][1].style.top = parseInt(panelsArray[j][1].style.top, 10) + (bump * 2) + "px";//bump it down twice
+ panelsArray[j][5] += (bump * 2);
+ panelsArray[j][1].style.top = panelsArray[j][5] + "px";//bump it down twice
panelsArray[j][3] = true; //mark it as bumped down twice
} else { //if it's on the left
- panelsArray[j][1].style.top = parseInt(panelsArray[j][1].style.top, 10) + (bump) + "px"; //bump it down once
+ panelsArray[j][5] += bump;
+ panelsArray[j][1].style.top = panelsArray[j][5] + "px"; //bump it down once //null bug here
panelsArray[j][2] = true; //mark it as bumped down once
}
+ j++;
+
}
}
}
View
6 MainPageFiles/mainStyles.css
@@ -32,15 +32,15 @@ body {
width: 47%;
padding-left: 20px;
padding-right: 20px;
- -webkit-transition: height 0.3s ease, width 0.3s ease;
+ -webkit-transition: height 0.3s ease, width 0.3s ease, top 5s ease;
}
.panelRight {
position: absolute;
right: 0px;
height: 260px;
width: 47%;
- -webkit-transition: height 0.3s ease, width 0.3s ease;
+ -webkit-transition: height 0.3s ease, width 0.3s ease, top 5s ease;
}
.panelContainer {
@@ -138,6 +138,6 @@ body {
top: 790px;
}
-#linksPanel {
+#panel7 {
top: 1080px;
}

0 comments on commit e7c79a5

Please sign in to comment.