Tabbed navigation with JS scrollbar and imageswap

**Harvengure** · 03-23-2010, 05:56 PM

I'm currently working on a site that I've used n-son.com's tabbed nav and js scrollbar for but for the life of me have not been able to successfully make it so that when you click one of the tabs an image loads outside of the of the containing div.

Basically what I've set up and failed to make work is I have a gif set up behind all the rest of the content as a sort of background and would like that every time someone clicks one of the tabs it loads the gif fresh as it is set up only to play once.

My several attempts at coding it myself as well as using other bits of code found online just seem to break the tabs or scoller.

Here is the code from n-son.com should be of help to anyone in providing the code I am hoping for (I've replaced the lorem ipso text to save room). Thank you in advance.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jsScrollbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.Scroller-Container {
  position: absolute;
  top: 0px; left: 0px;
}
.Scrollbar-Up {
  position: absolute;
  width: 10px; height: 10px;
  background-color: #CCC;
  font-size: 0px;
}
.Scrollbar-Track {
  width: 10px; height: 160px;
  position: absolute;
  top: 20px;
  background-color: #EEE;
}
.Scrollbar-Handle {
  position: absolute;
  width: 10px; height: 30px;
  background-color: #CCC;
}
.Scrollbar-Down {
  position: absolute;
  top: 190px;
  width: 10px; height: 10px;
  background-color: #CCC;
  font-size: 0px;
}
#Scrollbar-Container {
  position: absolute;
  top: 50px; left: 460px;
}

#Container {
  position: absolute;
  top: 50px; left: 50px;
  width: 400px;
  height: 200px;
  background-color: #EEE;
}
#News, #About, #Extra { 
  position: absolute;
  top: 10px; 
  overflow: hidden;
  width: 400px;
  height: 180px;
  display: none;
}
#News {display: block;}
p {
  margin: 0; padding: 0px 20px 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #777;
}
#Navigation {
  position: absolute; 
  top: 30px;
  left: 75px;
}
#Navigation a {
  margin: 5px 2px 0 0;
  padding: 0 5px;
  height: 20px;
  background-color: #E4E4E4;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #AAA;
  text-decoration: none;
  display: block;
  float: left;
  letter-spacing: 1px;
}
#Navigation a:hover {
  margin-top: 0px;
  height: 25px;
}
#Navigation a.current {
  margin-top: 0px;
  height: 25px;
  background-color: #EEE;
  color: #777;
}
</style>
<script type="text/javascript" src="src/jsScroller.js"></script>
<script type="text/javascript" src="src/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller  = null;
var scrollbar = null;

window.onload = function () {
  scroller  = new jsScroller(document.getElementById("News"), 400, 180);
  scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true, scrollbarEvent);
}

function scrollbarEvent (o, type) {
	if (type == "mousedown") {
		if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#E3E3E3";
		else o.style.backgroundColor = "#BBB";
	} else {
		if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#EEE";
		else o.style.backgroundColor = "#CCC";
	}
}

function swapIt(o) {
	o.blur();
	if (o.className == "current") return false;
  
	var list = document.getElementById("Navigation").getElementsByTagName("a");
	for (var i = 0; i < list.length; i++) {
		if (list[i].className == "current") {
			list[i].className = "";
			document.getElementById(list[i].title).y = -scroller._y;
		}
		if (list[i].title == o.title) o.className = "current";
	}
  
	list = document.getElementById("Container").childNodes;
	for (var i = 0; i < list.length; i++) {
		if (list[i].tagName == "DIV") list[i].style.display = "none";
	}
  
	var top = document.getElementById(o.title);
	top.style.display = "block";
	scrollbar.swapContent(top);
	if (top.y) scrollbar.scrollTo(0, top.y);
  
	return false;
}
</script>
</head>
<body>
<div id="Navigation">

  <a href="#" onclick="return swapIt(this)" title="News" class="current">news</a>
  <a href="#" onclick="return swapIt(this)" title="About">about</a>
  <a href="#" onclick="return swapIt(this)" title="Extra">extra</a>
</div>
<div id="Container">
  <div id="News">
    <div class="Scroller-Container">
      <p> Filler text</p>
    </div>

  </div>
  <div id="About">
    <div class="Scroller-Container">
      <p> Filler text</p>
    </div>

  </div>
  <div id="Extra">
    <div class="Scroller-Container">
      <p> Filler text</p>
    </div>
  </div>
</div>
<div id="Scrollbar-Container">
  <div class="Scrollbar-Up"></div>

  <div class="Scrollbar-Down"></div>
  <div class="Scrollbar-Track">
    <div class="Scrollbar-Handle"></div>
  </div>
</div>
</body>
</html>

**Harvengure** · 04-20-2010, 01:14 AM

Turns out I needed this:

HTML Code:

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

Thread: Tabbed navigation with JS scrollbar and imageswap

Thread Tools

Search Thread

Tabbed navigation with JS scrollbar and imageswap

Figured it out

Bookmarks

Bookmarks

Posting Permissions