Welcome to WebmasterWorld Guest from 54.158.65.139

Forum Moderators: open

resetting shifted elements to zero

   
6:04 pm on Aug 5, 2009 (gmt 0)

5+ Year Member



Okay, this is a bit tough to explain without a link, but I need help so will try to make this as clear as possible! I didn't write the original JS code for this, so am a bit lost.

I have a page that has different sections that are displayed with JS. Each section has photos that scroll when you click them, revealing the next photo. When you get to the last photo the next section is loaded. There are also thumbnails below the photo that have an indication of which photo you are looking at (but other than that have no function).

You can also navigate between the sections with a side nav. So clicking a link will load that section. So far so good.

The problem is that when you return to a previously scrolled section, it will load the last photo you saw, which is confusing. I need it to start at the beginning again, to reset to zero when you click the side navigation. It also needs to set the thumbnail correctly.

Here's the partially trimmed JS, with important parts in bold:
-------------------------------

var arrPanel = new Array('', 'projectPanel1', 'projectPanel2', 'projectPanel3', 'projectPanel4', 'projectPanel5', 'projectPanel6', 'projectPanel7', 'projectPanel8');
var arrScroll = new Array('', 'scrollContent1', 'scrollContent2', 'scrollContent3', 'scrollContent4', 'scrollContent5', 'scrollContent6', 'scrollContent7', 'scrollContent8');
var arrDesc = new Array('', 'desc1', 'desc2', 'desc3', 'desc4', 'desc5', 'desc6', 'desc7', 'desc8');

var arrThumb = new Array();
arrThumb[1] = new Array('', 'proj1_tmb1', 'proj1_tmb2', 'proj1_tmb3', 'proj1_tmb4', 'proj1_tmb5', 'proj1_tmb6');
arrThumb[2] = new Array('', 'proj2_tmb1', 'proj2_tmb2', 'proj2_tmb3', 'proj2_tmb4', 'proj2_tmb5', 'proj2_tmb6');
arrThumb[3] = new Array('', 'proj3_tmb1', 'proj3_tmb2', 'proj3_tmb3', 'proj3_tmb4');
arrThumb[4] = new Array('', 'proj4_tmb1', 'proj4_tmb2', 'proj4_tmb3', 'proj4_tmb4');
arrThumb[5] = new Array('', 'proj5_tmb1', 'proj5_tmb2', 'proj5_tmb3', 'proj5_tmb4');
arrThumb[6] = new Array('', 'proj6_tmb1', 'proj6_tmb2', 'proj6_tmb3', 'proj6_tmb4');
arrThumb[7] = new Array('', 'proj7_tmb1', 'proj7_tmb2', 'proj7_tmb3', 'proj7_tmb4', 'proj7_tmb5', 'proj7_tmb6');
arrThumb[8] = new Array('', 'proj8_tmb1', 'proj8_tmb2', 'proj8_tmb3', 'proj8_tmb4', 'proj8_tmb5', 'proj8_tmb6');

var enableFade = true;
var currentPanelTop = arrPanel[1];
var currentScrollTop = arrScroll[1];

var scrollDist = 581;
var enableScroll = true;

[b]function loadSection(panelName)
{
for (var i = 1; i <= arrPanel.length; i++)
{
if (arrPanel[i] == panelName)
{
fadeIn(arrPanel[i]);
loadDesc(i);
scrollReset(panelName); // reset to zero
}
}
}

function scrollReset(panelName)
{
var nail = panelName.replace('projectPanel',''); // returns just the number of the panel
var totalScroll = arrThumb[nail].length-1;
var dvscroll = ('scrollContent' + nail);
var sc = document.getElementById(dvscroll);
var orgX = sc.style.left.replace('px', '').replace('pt', '');

if (orgX == "") { orgX = 0; } // orgX returns a negative number (the current scroll position) or zero

var sum = 0;
var step = 0;
var speed = 10;
var timer = 0;
var distancetoreset = Math.abs(orgX); // converts current position to a positive number

if (enableScroll)
{
enableScroll = false;

while (sum < distancetoreset)
{
if (sum < 10) { step = 1; } // why aren't we moving? we do get this far, but sum never changes
else if (sum >= 10 && sum <= 20) { step = 2; }
else if (sum >= 20 && sum <= 70) { step = 5; }
else if (sum <= scrollDist-20 && sum >= scrollDist-70) { step = 5; }
else if (sum <= scrollDist-10 && sum >= scrollDist-20) { step = 2; }
else if (sum > scrollDist-10) { step = 1; }
else { step = 7; }

sum = sum + step;

setTimeout(sc.id + ".style.left = " + distancetoreset + " = " + sum, (timer * speed));
timer++;
}

setTimeout("enableScroll=true;", (timer * speed));
var scrollPos = parseInt(orgX) + parseInt(sum); // this needs to be set to 1?
displayThumb(dvScroll, scrollPos);
}
}[/b]

function scrollLeft(dvScroll)
{
var nail = dvScroll.replace('scrollContent','');
var totalScroll = arrThumb[nail].length-1;
var sc = document.getElementById(dvScroll);
var orgX = sc.style.left.replace('px', '').replace('pt', '');

if (orgX == "") { orgX = 0; }

if (orgX <= (totalScroll-1) * -scrollDist)
{
// If the current scroll is the last in the scroll list, load the next panel.
var nextPanelIndex = 1;
// Determine current panel index.
for (var i = 1; i <= arrPanel.length; i++)
{
if (arrScroll[i] == dvScroll)
{
nextPanelIndex = i + 1;
}
}

if (nextPanelIndex > arrPanel.length-1) { nextPanelIndex = 1; }
// Load next panel.
loadSection(arrPanel[nextPanelIndex]);

return;
}

var sum = 0;
var step = 0;
var speed = 10;
var timer = 0;

if (enableScroll)
{
enableScroll = false;

while (sum < scrollDist)
{
if (sum < 10) { step = 1; }
else if (sum >= 10 && sum <= 20) { step = 2; }
else if (sum >= 20 && sum <= 70) { step = 5; }
else if (sum <= scrollDist-20 && sum >= scrollDist-70) { step = 5; }
else if (sum <= scrollDist-10 && sum >= scrollDist-20) { step = 2; }
else if (sum > scrollDist-10) { step = 1; }
else { step = 7; }

sum = sum + step;
setTimeout(sc.id + ".style.left = " + orgX + " - " + sum, (timer * speed));
timer++;
}

setTimeout("enableScroll=true;", (timer * speed));
var scrollPos = parseInt(orgX) - parseInt(sum);
displayThumb(dvScroll, scrollPos);
}
}

function scrollRight(dvScroll)
{
var sc = document.getElementById(dvScroll);
var orgX = sc.style.left.replace('px', '').replace('pt', '');

if (orgX == "") { orgX = 0; }

if (orgX >= 0)
{
// If the current scroll is the last in the scroll list, load the next panel.
var nextPanelIndex = 1;
// Determine current panel index.
for (var i = 1; i <= arrPanel.length; i++)
{
if (arrScroll[i] == dvScroll)
{
nextPanelIndex = i - 1;
}
}

if (nextPanelIndex == 0) { nextPanelIndex = arrPanel.length-1; }
// Load next panel.
loadSection(arrPanel[nextPanelIndex]);

return;
}

var sum = 0;
var step = 0;
var speed = 10;
var timer = 0;

if (enableScroll)
{
enableScroll = false;

while (sum < scrollDist)
{
if (sum < 10) { step = 1; }
else if (sum >= 10 && sum <= 20) { step = 2; }
else if (sum >= 20 && sum <= 70) { step = 5; }
else if (sum <= scrollDist-20 && sum >= scrollDist-70) { step = 5; }
else if (sum <= scrollDist-10 && sum >= scrollDist-20) { step = 2; }
else if (sum > scrollDist-10) { step = 1; }
else { step = 7; }

sum = sum + step;

setTimeout(sc.id + ".style.left = " + orgX + " + " + sum, (timer * speed));
timer++;
}

setTimeout("enableScroll=true;", (timer * speed));
var scrollPos = parseInt(orgX) + parseInt(sum);
displayThumb(dvScroll, scrollPos);
}
}

[b]function displayThumb(dvScroll, scrollPos)
{
var listIndex = 1;

for (var i = 1; i <= arrScroll.length; i++)
{
if (dvScroll == arrScroll[i])
{
listIndex = i;
}
}[/b]

var opacity = 50;

if (scrollPos == 0) { setOpacity(arrThumb[listIndex][1], opacity); } else { setOpacity(arrThumb[listIndex][1], 100); }
if (scrollPos == (1 * -scrollDist)) { setOpacity(arrThumb[listIndex][2], opacity); } else { setOpacity(arrThumb[listIndex][2], 100); }
if (scrollPos == (2 * -scrollDist)) { setOpacity(arrThumb[listIndex][3], opacity); } else { setOpacity(arrThumb[listIndex][3], 100); }
if (scrollPos == (3 * -scrollDist)) { setOpacity(arrThumb[listIndex][4], opacity); } else { setOpacity(arrThumb[listIndex][4], 100); }
if (scrollPos == (4 * -scrollDist)) { setOpacity(arrThumb[listIndex][5], opacity); } else { setOpacity(arrThumb[listIndex][5], 100); }
if (scrollPos == (5 * -scrollDist)) { setOpacity(arrThumb[listIndex][6], opacity); } else { setOpacity(arrThumb[listIndex][6], 100); }
}

function setOpacity(id, opacity)
{
var obj = document.getElementById(id);

obj.style.opacity = (opacity / 100);
obj.style.MozOpacity = (opacity / 100);
obj.style.KhtmlOpacity = (opacity / 100);
obj.style.filter = "alpha(opacity=" + opacity + ")";
}

function fadeIn(src)
{
if (enableFade == true && currentPanelTop != src)
{
enableFade = false;

var divTop = document.getElementById(currentPanelTop);
var divBottom = document.getElementById(src);

divBottom.style.zIndex = 3;

var speed = 5;
var timer = 0;

for (var i = 100; i >= 0; i--)
{
setTimeout("setOpacity('" + divTop.id + "', " + i + ")", (timer * speed));
timer++;
}

setTimeout("document.getElementById('" + divTop.id + "').style.zIndex = 1;", (timer * speed));
setTimeout("document.getElementById('" + divBottom.id + "').style.zIndex = 4;", (timer * speed));
setTimeout("setOpacity('" + divTop.id + "', 100)", (timer * speed));
//setTimeout("setOpacity('" + divBottom.id + "', 100)", (timer * speed));
setTimeout("currentPanelTop = '" + divBottom.id + "';", (timer * speed));
setTimeout("enableFade = true;", (timer * speed));
}
}

function loadDesc(panelIndex)
{
currentPanelTop = arrPanel[panelIndex];
currentScrollTop = arrScroll[panelIndex];

for (var i = 1; i < arrDesc.length; i++)
{
if (i == panelIndex)
{
expand(arrDesc[i], 80);
}
else
{
collapse(arrDesc[i]);
}
}
}

function collapse(id)
{
var obj = document.getElementById(id);
var y = obj.clientHeight;
var sum = y;
var step = 0;
var speed = 15;
var timer = 0;

while (sum > 0)
{
if (sum < 5) { step = 1; }
else if (sum >= 5 && sum <= 15) { step = 2; }
else if (sum <= y-5 && sum >= y-15) { step = 2; }
else if (sum > y-5) { step =1; }
else { step = 3;}

sum = sum - step;

if (sum <= 0)
{
setTimeout(id + ".style.display = 'none'", (timer * speed));
}
else
{
setTimeout(id + ".style.height = " + sum, (timer * speed));
}

timer++;
}
}

function expand(id, dist)
{
var obj = document.getElementById(id);
var y = dist;
var sum = 0;
var step = 0;
var speed = 15;
var timer = 0;

obj.style.height = 1;
obj.style.display = "block";

while (sum < dist)
{
if (sum < 5) { step = 1; }
else if (sum >= 5 && sum <= 15) { step = 2; }
else if (sum <= y-5 && sum >= y-15) { step = 2; }
else if (sum > y-5) { step =1; }
else { step = 3;}

sum = sum + step;

setTimeout(id + ".style.height = " + sum, (timer * speed));
timer++;
}
}


-------------------------------

(sorry that was so long!)

and the HTML code to load a panel: javascript:loadSection('projectPanel1')"

I've tried to modify the scrollRight function to make a reset function, but it fails... I think I have some logic mix up.

Help!

Thanks!

9:45 pm on Aug 6, 2009 (gmt 0)

5+ Year Member



anything I can add to make it clearer?

any ideas?

thanks!

1:16 am on Aug 13, 2009 (gmt 0)

5+ Year Member



oh well, never mind I guess
5:48 pm on Aug 15, 2009 (gmt 0)

5+ Year Member



and here is the solution. thanks again for all your help, lol!

function scrollReset(panelName)
{
var nail = panelName.replace('projectPanel','');
var totalScroll = arrThumb[nail].length-1;
var dvscroll = ('scrollContent' + nail);
var sc = document.getElementById(dvscroll);
var orgX = sc.style.left.replace('px', '').replace('pt', '');
sc.style.left=0;
orgX=0;
var scrollPos = 0;
displayThumb(dvscroll, scrollPos);
}

2:29 am on Aug 16, 2009 (gmt 0)

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Glad you got it sorted out. :)
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month