homepage Welcome to WebmasterWorld Guest from 54.211.47.170
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
resetting shifted elements to zero
trick




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

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




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

anything I can add to make it clearer?

any ideas?

thanks!

trick




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

oh well, never mind I guess

trick




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

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




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

Glad you got it sorted out. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved