[beeble]

Howdy all,

I'm a rookie and need some cheap help! This js is for a slideshow that seems to work fairly well but I need to move the all the image & slideshow related parts. I've got the border & container moved to where I need it on the page but I can't for the life of me figure out which line(s) move the slider location. I'll just go ahead and be embarrassed now...

Anyone? Buehler? Buehler?

Thanks!

Code:

*/
//---------------------------------------------------------------------------------------------------------
// Configuration
//---------------------------------------------------------------------------------------------------------

var slsWidth = 320;                         // content width (pixels)
var slsHeight = 240;                        // content height (pixels)
var slsColor = "#C6CEDE";                   // content background color
var slsOverflow = "hidden";                 // content scrollbars: "auto" or "hidden"
                                            // ("auto" may cause flickering with Gecko browsers)

var slsBorderWidth = 6;                     // border width (pixels)
var slsBorderStyle = "ridge";               // border style (CSS-spec, e.g. "solid", "outset", "inset", etc.)
var slsBorderColor = "#C6CEDE";             // border color

var slsBarHeight = 10;                      // scrollbar height (pixels)
var slsBarSpace = 2;                        // space between scrollbar and page contents (pixels)
var slsBarColor = "#F0F0FF";                // scrollbar background color

var slsImgLeft = "scroll_left.gif";         // left arrow: path to image
var slsImgLeftWidth = 10;                   // left arrow: image width (pixels)
var slsImgRight = "scroll_right.gif";       // right arrow: path to image
var slsImgRightWidth = 10;                  // right arrow: image width (pixels)
var slsImgBlank = "blank.gif";              // path to blank image

var slsIndCount = 10;                       // max. number of visible index entries
var slsIndHeight = 15;                      // index height (pixels);
var slsIndSpace = 10;                       // space between index and scrollbar
var slsIndColor = "";                       // index background color

var slsSlidingMax = 20;                     // if there are more than slsSlidingMax pages, sliding will be
                                            // turned off for performance reasons

//---------------------------------------------------------------------------------------------------------
// Functions
//---------------------------------------------------------------------------------------------------------

var DOM = document.getElementById ? true : false;
var OP = (navigator.userAgent.indexOf('Opera') != -1) ? true : false;
var IE4 = (document.all && !OP) ? true : false;
var GKO = (navigator.userAgent.indexOf('Gecko') != -1) ? true : false;

var slsBord, slsCont, slsArea, slsBarArea, slsIndArea, iv;
var slsIndStart = 0;
var slsPages = (typeof(slsContents) != 'undefined') ? slsContents.length : 0;

function slsObject(obj) {
  this.elem = DOM ? document.getElementById(obj) : document.all[obj];
  this.css = this.elem.style;
  this.width = this.elem.offsetWidth;
  this.left = 0;
  return this;
}

function slsPrevPage() {
  if(!sliding && slsArea.left < 0) slsJump(aktX + slsWidth);
}

function slsNextPage() {
  if(!sliding && slsArea.left > -slsArea.width+slsWidth) slsJump(aktX - slsWidth);
}

function slsJump(position) {
  if(!sliding) {
    newX = slsArea.left = position;
    if(slsPages > slsSlidingMax) {
      slsArea.css.left = aktX = newX;
      slsCheckImg();
      var start = Math.ceil(aktX / slsWidth / slsIndCount) * slsIndCount * -1 + 1;
      slsSetIndex(start);
    }
    else iv = setInterval('slsSlider()', 1);
  }
}

function slsCheckImg() {
  var scrollbar = 0;
  var img = document.images['slsLeft'];
  if(slsArea.left >= 0) img.src = slsImgBlank;
  else img.src = scrollbar = slsImgLeft;
  img = document.images['slsRight'];
  if(slsArea.left <= -slsArea.width+slsWidth) img.src = slsImgBlank;
  else img.src = scrollbar = slsImgRight;
  if(!scrollbar) slsBarArea.css.visibility = slsIndArea.css.visibility = 'hidden';
}

function slsSetIndex(start) {
  if(!sliding) {
    if(start) slsIndStart = start-1;
    var inhalt = '';
    for(var i = slsIndStart; i < slsPages && i < slsIndStart+slsIndCount; i++) {
      if(aktX == i * -slsWidth) inhalt += '[<b>' + (i+1) + '</b>] ';
      else inhalt += '[<a href="javascript:slsJump(' + (i * -slsWidth) + ')">' + (i+1) + '</a>] ';
    }
    if(slsIndStart) inhalt += '<a href="javascript:slsSetIndex(' + (slsIndStart-slsIndCount+1) + ')">&lt;&lt;</a> ';
    if(i < slsPages) inhalt += '<a href="javascript:slsSetIndex(' + (i+1) + ')">&gt;&gt;</a>';
    if(DOM) document.getElementById('slsInd').innerHTML = inhalt;
    else if(IE4) document.all.slsInd.innerHTML = inhalt;
  }
}

function slsInit() {
  if(DOM || IE4) {
    if(slsPages) {
      slsBord = new slsObject('slsBorder');
      slsCont = new slsObject('slsContainer');
      slsArea = new slsObject('slsSlider');
      slsBarArea = new slsObject('slsBar');
      slsIndArea = new slsObject('slsInd');

      if(slsColor) slsCont.css.backgroundColor = slsColor;
      if(slsBarColor) slsBarArea.css.backgroundColor = slsBarColor;
      if(slsIndColor) slsIndArea.css.backgroundColor = slsIndColor;

      if(slsBorderWidth) slsBord.css.borderWidth = slsBorderWidth + 'px';
      if(slsBorderStyle) slsBord.css.borderStyle = slsBorderStyle;
      if(slsBorderColor) slsBord.css.borderColor = slsBorderColor;

      slsBord.css.width = (slsWidth + (!GKO ? slsBorderWidth*2 : 0)) + 'px';
      slsBord.css.height = (slsHeight + (!GKO ? slsBorderWidth*2 : 0)) + 'px';

      slsArea.width = slsWidth * slsPages;
      slsArea.css.width = slsArea.width + 'px';
      slsArea.css.position = 'absolute';

      slsCont.css.width = slsWidth + 'px';
      slsCont.css.height = slsHeight + 'px';
      slsCont.css.visibility = 'visible';

      slsBarArea.css.top = (slsHeight + slsBorderWidth*2 + slsBarSpace) + 'px';
      slsBarArea.css.height = slsBarHeight + 'px';
      slsBarArea.css.width = (slsWidth + slsBorderWidth*2) + 'px';

      slsIndArea.css.top = (slsHeight + slsBorderWidth*2 + slsBarSpace + slsBarHeight + slsIndSpace) + 'px';
      slsIndArea.css.height = slsIndHeight + 'px';
      slsIndArea.css.width = (slsWidth + slsBorderWidth*2) + 'px';

      var slsBarInhalt = '<div id="slsImgLeftDiv" style="position:absolute; width:' + slsImgLeftWidth + '">' +
                         '<a href="javascript:slsPrevPage()">' +
                         '<img src="' + slsImgLeft + '" border=0 name="slsLeft" height=' + slsBarHeight + ' width=' + slsImgLeftWidth + '></a></div>' +
                         '<div id="slsImgRightDiv" style="position:absolute; left:' + (slsWidth+slsBorderWidth*2-slsImgRightWidth) + '; width:' + slsImgRightWidth + '">' +
                         '<a href="javascript:slsNextPage()">' +
                         '<img src="' + slsImgRight + '" border=0 name="slsRight" height=' + slsBarHeight + ' width=' + slsImgRightWidth + '></a></div>';

      if(DOM) document.getElementById('slsBar').innerHTML = slsBarInhalt;
      else if(IE4) document.all.slsBar.innerHTML = slsBarInhalt;

      slsSetIndex();
      setTimeout('slsCheckImg()', 100);
    }
    else alert("No contents found.");
  }
  else alert("Sorry, this script doesn't work with your browser.");
}

window.onload = slsInit;

//---------------------------------------------------------------------------------------------------------
// Page-slider
//---------------------------------------------------------------------------------------------------------

var aktX = newX = percent = sliding = 0;

function slsSlider() {
  if(aktX != newX) {
    sliding = 1;
    percent = .1 * (newX - aktX);
    if(percent > 0) percent = Math.ceil(percent);
    else percent = Math.floor(percent);
    aktX += percent;
    slsArea.css.left = aktX + 'px';
  }
  else {
    sliding = 0;
    clearInterval(iv);
    slsCheckImg();
    var start = Math.ceil(aktX / slsWidth / slsIndCount) * slsIndCount * -1 + 1;
    slsSetIndex(start);
  }
}

//---------------------------------------------------------------------------------------------------------
// Styles for border, container and pages
//---------------------------------------------------------------------------------------------------------

document.write('<style> ');
document.write('#slsBorder { ');
document.write('position:absolute; top:300px; left:235px; } ');
document.write('#slsContainer { ');
document.write('position:absolute; top:0px; left:0px; ');
document.write('clip:rect(0,' + slsWidth + ',' + slsHeight + ',0); ');
document.write('z-index:0; visibility:hidden; } ');
document.write('.slsPage { width:' + slsWidth + 'px; height:' + slsHeight + 'px; ');
document.write('float:left; overflow:' + slsOverflow + '; } ');
document.write('</style>');

//---------------------------------------------------------------------------------------------------------
// Build border, contents, scrollbar and index
//---------------------------------------------------------------------------------------------------------

if(slsPages) {
  document.write('<div style="position:absolute">');
  document.write('<div id="slsInd" style="position:absolute; z-index:69; text-align:center"></div>');
  document.write('<div id="slsBar" style="position:absolute; z-index:69"></div>');
  document.write('<div id="slsBorder"><div id="slsContainer"><div id="slsSlider">');

  for(var i = 0; i < slsPages; i++) {
    document.write('<div class="slsPage">' + slsContents[i] + '</div>');
  }

  document.write('</div></div></div></div>');
}

//---------------------------------------------------------------------------------------------------------