1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 3:27 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

resetting shifted elements to zero

         

trick

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

10+ 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!

trick

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

10+ Year Member



anything I can add to make it clearer?

any ideas?

thanks!

trick

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

10+ Year Member



oh well, never mind I guess

trick

5:48 pm on Aug 15, 2009 (gmt 0)

10+ 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);
}

whoisgregg

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

WebmasterWorld Senior Member 10+ Year Member



Glad you got it sorted out. :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 3:27 am May 14, 2026