Horizontal scrolling spry tabbed menu

[lastlifelost]

I've been stuck on this problem all day and I need some help. Admittedly, I know very little, almost no, javascript. My problem occurs when I add an extra div into a preset batch of scripting, provided by Dreamweaver, that changes the page content when a button is pushed.. The extra div is needed so I can integrate a second script that allows the menu to scroll.Below are what I think are the pertinent parts of the code, along with example pages of the two outcomes I'm trying to merge.Code for the content buttons

var Spry;if (!Spry) Spry = {};if (!Spry.Widget) Spry.Widget = {};Spry.Widget.TabbedPanels = function(element, opts){	this.element = this.getElement(element);	this.defaultTab = 0; // Show the first panel by default.	this.bindings = [];	this.tabSelectedClass = "TabbedPanelsTabSelected";	this.tabHoverClass = "TabbedPanelsTabHover";	this.tabFocusedClass = "TabbedPanelsTabFocused";	this.panelVisibleClass = "TabbedPanelsContentVisible";	this.focusElement = null;	this.hasFocus = false;	this.currentTabIndex = 0;	this.enableKeyboardNavigation = true;	Spry.Widget.TabbedPanels.setOptions(this, opts);	// If the defaultTab is expressed as a number/index, convert	// it to an element.	if (typeof (this.defaultTab) == "number")	{		if (this.defaultTab < 0)			this.defaultTab = 0;		else		{			var count = this.getTabbedPanelCount();			if (this.defaultTab >= count)				this.defaultTab = (count > 1) ? (count - 1) : 0;		}		this.defaultTab = this.getTabs()[this.defaultTab];	}	// The defaultTab property is supposed to be the tab element for the tab content	// to show by default. The caller is allowed to pass in the element itself or the	// element's id, so we need to convert the current value to an element if necessary.	if (this.defaultTab)		this.defaultTab = this.getElement(this.defaultTab);	this.attachBehaviors();};Spry.Widget.TabbedPanels.prototype.getElement = function(ele){	if (ele && typeof ele == "string")		return document.getElementById(ele);	return ele;}Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element){	var children = [];	var child = element.firstChild;	while (child)	{		if (child.nodeType == 1 /* Node.ELEMENT_NODE */)			children.push(child);		child = child.nextSibling;	}	return children;};Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className){	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))		return;	ele.className += (ele.className ? " " : "") + className;};Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className){	if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))		return;	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");};Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps){	if (!optionsObj)		return;	for (var optionName in optionsObj)	{		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)			continue;		obj[optionName] = optionsObj[optionName];	}};Spry.Widget.TabbedPanels.prototype.getTabGroup = function(){	if (this.element)	{		var children = this.getElementChildren(this.element);		if (children.length)			return children[0];	}	return null;};Spry.Widget.TabbedPanels.prototype.getTabs = function(){	var tabs = [];	var tg = this.getTabGroup();	if (tg)		tabs = this.getElementChildren(tg);	return tabs;};Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function(){	if (this.element)	{		var children = this.getElementChildren(this.element);		if (children.length > 1)			return children[1];	}	return null;};Spry.Widget.TabbedPanels.prototype.getContentPanels = function(){	var panels = [];	var pg = this.getContentPanelGroup();	if (pg)		panels = this.getElementChildren(pg);	return panels;};Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr){	ele = this.getElement(ele);	if (ele && arr && arr.length)	{		for (var i = 0; i < arr.length; i++)		{			if (ele == arr[i])				return i;		}	}	return -1;};Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele){	var i = this.getIndex(ele, this.getTabs());	if (i < 0)		i = this.getIndex(ele, this.getContentPanels());	return i;};Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function(){	return this.currentTabIndex;};Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele){	return Math.min(this.getTabs().length, this.getContentPanels().length);};Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture){	try	{		if (element.addEventListener)			element.addEventListener(eventType, handler, capture);		else if (element.attachEvent)			element.attachEvent("on" + eventType, handler);	}	catch (e) {}};Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab){	this.showPanel(tab);};Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab){	this.addClassName(tab, this.tabHoverClass);};Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab){	this.removeClassName(tab, this.tabHoverClass);};Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab){	this.hasFocus = true;	this.addClassName(this.element, this.tabFocusedClass);};Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab){	this.hasFocus = false;	this.removeClassName(this.element, this.tabFocusedClass);};Spry.Widget.TabbedPanels.ENTER_KEY = 13;Spry.Widget.TabbedPanels.SPACE_KEY = 32;Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab){	var key = e.keyCode;	if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))		return true;	this.showPanel(tab);	if (e.stopPropagation)		e.stopPropagation();	if (e.preventDefault)		e.preventDefault();	return false;};Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func){	var stopTraversal = false;	if (root)	{		stopTraversal = func(root);		if (root.hasChildNodes())		{			var child = root.firstChild;			while (!stopTraversal && child)			{				stopTraversal = this.preorderTraversal(child, func);				try { child = child.nextSibling; } catch (e) { child = null; }			}		}	}	return stopTraversal;};Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel){	var self = this;	Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);	Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);	Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);	if (this.enableKeyboardNavigation)	{		// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't		// rely on adding the tabindex attribute if it is missing to enable keyboard navigation		// by default.		// Find the first element within the tab container that has a tabindex or the first		// anchor tag.				var tabIndexEle = null;		var tabAnchorEle = null;		this.preorderTraversal(tab, function(node) {			if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)			{				var tabIndexAttr = tab.attributes.getNamedItem("tabindex");				if (tabIndexAttr)				{					tabIndexEle = node;					return true;				}				if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")					tabAnchorEle = node;			}			return false;		});		if (tabIndexEle)			this.focusElement = tabIndexEle;		else if (tabAnchorEle)			this.focusElement = tabAnchorEle;		if (this.focusElement)		{			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);			Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);		}	}};Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex){	var tpIndex = -1;		if (typeof elementOrIndex == "number")		tpIndex = elementOrIndex;	else // Must be the element for the tab or content panel.		tpIndex = this.getTabIndex(elementOrIndex);		if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())		return;	var tabs = this.getTabs();	var panels = this.getContentPanels();	var numTabbedPanels = Math.max(tabs.length, panels.length);	for (var i = 0; i < numTabbedPanels; i++)	{		if (i != tpIndex)		{			if (tabs[i])				this.removeClassName(tabs[i], this.tabSelectedClass);			if (panels[i])			{				this.removeClassName(panels[i], this.panelVisibleClass);				panels[i].style.display = "none";			}		}	}	this.addClassName(tabs[tpIndex], this.tabSelectedClass);	this.addClassName(panels[tpIndex], this.panelVisibleClass);	panels[tpIndex].style.display = "block";	this.currentTabIndex = tpIndex;};Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element){	var tabs = this.getTabs();	var panels = this.getContentPanels();	var panelCount = this.getTabbedPanelCount();	for (var i = 0; i < panelCount; i++)		this.addPanelEventListeners(tabs[i], panels[i]);	this.showPanel(this.defaultTab);};

HTML on page, including the offending div

<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" /><script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script><script type="text/javascript" src="mootools.svn.js"></script> <script type="text/javascript">	   //works with MooTools script		window.addEvent('domready', function(){			var scroll2 = new Scroller('container', {area: 75, velocity: .1});			$('container').addEvent('mouseover', scroll2.start.bind(scroll2));			$('container').addEvent('mouseout', scroll2.stop.bind(scroll2));		}); 	</script></head><body><div id="wrapper"><div id="TabbedPanels1" class="TabbedPanels">	<div id="container">												   <!--  I'm the offending div!  -->		  <ul class="TabbedPanelsTabGroup">			<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 4</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 5</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 6</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 6</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 7</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 8</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 9</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 10</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 11</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 12</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 13</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 14</li>			<li class="TabbedPanelsTab" tabindex="0">Tab 15</li>		</ul>	</div>																		   <!-- I close the offending div -->	<div class="TabbedPanelsContentGroup">		<div class="TabbedPanelsContent">Lorem ipsum dolor sit amet, etc., etc., et al.</div>		<div class="TabbedPanelsContent">Continuum et a lorem ipsum</div>		<div class="TabbedPanelsContent">etc</div>		<div class="TabbedPanelsContent">et al</div>	</div></div></div><script type="text/javascript">	// Needed for SpryTabbedPanels script<!--var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");//--></script></body></html>

I think that the problem has to do with the firstChild elements in the SpryTabbedPanels script, but I don't know how to fix it even if that is culprit. Examples of the effects below:The tab menu on this page scrolls when you hover over the edges of the containing div, but clicking the tabs doesn't change the page content:http://sosimagesonline.com/samples/scrollingsprytabsClicking the tabs here will change the page content:http://sosimagesonline.com/samples/sprytabbedmenu

[lastlifelost]

Problem resolved. I found a different way to get the same results.