Problem starts if I have to do two separate lists more
example
####
HTML Code:
<body><ol id="toc"><li><a href="#Page_1">Page 1</a></li><li><a href="#Page_2">Page 2</a></li><li><a href="#Page_3">Page 3</a></li></ol><div class="content" id="Page_1"><h2>Page 1</h2><p>Text...</p></div><div class="content" id="Page_2"><h2>Page 2</h2><p>Text...</p></div>.....
<ol id="toc2"><li><a href="#Page_4">Page 4</a></li><li><a href="#Page_5">Page 5</a></li><li><a href="#Page_6">Page 6</a></li></ol><div class="content2" id="Page_4"><h2>Page 4</h2><p>Text...</p></div><div class="content2" id="Page_5"><h2>Page 5</h2><p>Text...</p></div>.......
<ol id="toc3"><li><a href="#Page_7">Page 7</a></li><li><a href="#Page_8">Page 8</a></li><li><a href="#Page_9">Page 9</a></li></ol><div class="content3" id="Page_7"><h2>Page 7</h2><p>Text...</p></div><div class="content3" id="Page_3"><h2>Page 3</h2><p>Text...</p></div><script type="text/javascript">
// CSS helper functions
CSS = {
// Adds a class to an element.
AddClass: function (e, c) {
if (!e.className.match(new RegExp("\\b" + c + "\\b", "i")))
e.className += (e.className ? " " : "") + c;
},
// Removes a class from an element.
RemoveClass: function (e, c) {
e.className = e.className.replace(new RegExp(" \\b" + c + "\\b|\\b" + c + "\\b ?", "gi"), "");
}
};
// Functions for handling tabs.
Tabs = {
// Changes to the tab with the specified ID.
GoTo: function (contentId, skipReplace) {
// This variable will be true if a tab for the specified
// content ID was found.
var foundTab = false;
// Get the TOC element.
var toc = document.getElementById("toc");
if (toc) {
var lis = toc.getElementsByTagName("li");
for (var j = 0; j < lis.length; j++) {
var li = lis[j];
// Give the current tab link the class "current" and
// remove the class from any other TOC links.
var anchors = li.getElementsByTagName("a");
for (var k = 0; k < anchors.length; k++) {
if (anchors[k].hash == "#" + contentId) {
CSS.AddClass(li, "current");
foundTab = true;
break;
} else {
CSS.RemoveClass(li, "current");
}
}
}
}
// Show the content with the specified ID.
var divsToHide = [];
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className.match(/\bcontent\b/i)) {
if (div.id == "_" + contentId)
div.style.display = "block";
else
divsToHide.push(div);
}
}
// Hide the other content boxes.
for (var i = 0; i < divsToHide.length; i++)
divsToHide[i].style.display = "none";
// Change the address bar.
if (!skipReplace) window.location.replace("#" + contentId);
},
OnClickHandler: function (e) {
// Stop the event (to stop it from scrolling or
// making an entry in the history).
if (!e) e = window.event;
if (e.preventDefault) e.preventDefault(); else e.returnValue = false;
// Get the name of the anchor of the link that was clicked.
Tabs.GoTo(this.hash.substring(1));
},
Init: function () {
if (!document.getElementsByTagName) return;
// Attach an onclick event to all the anchor links on the page.
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var a = anchors[i];
if (a.hash) a.onclick = Tabs.OnClickHandler;
}
var contentId;
if (window.location.hash) contentId = window.location.hash.substring(1);
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className.match(/\bcontent\b/i)) {
if (!contentId) contentId = div.id;
div.id = "_" + div.id;
}
}
if (contentId) Tabs.GoTo(contentId, true);
}
};
// Hook up the OnLoad event to the tab initialization function.
window.onload = Tabs.Init;
// Hide the content while waiting for the onload event to trigger.
var contentId = window.location.hash || "#Introduction";
if (document.createStyleSheet) {
var style = document.createStyleSheet();
style.addRule("div.content", "display: none;");
style.addRule("div" + contentId, "display: block;");
} else {
var head = document.getElementsByTagName("head")[0];
if (head) {
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(document.createTextNode("div.content { display: none; }"));
style.appendChild(document.createTextNode("div" + contentId + " { display: block; }"));
head.appendChild(style);
}
}
</script></body>
###############
My knowledge is to bad to resolve this problem. I tried many ways to do it and no hope.
If I put two scripts with diferent vars, they still getting into conflict with each other
here is the script:
Any help will be appreciated
Best to all
Daniel
Last edited by przemyskibatiar; 05-05-08 at 03:57 AM.
Reason: [html] wrappers.
I use something similar to produce my menu navigation on my home site. It's pretty simple to do. It's a little bit of CSS, little bit of javascript and a little bit of HTML.
Code:
<html>
<head>
<style type="text/css">
.hide{display:none;visibility:hidden;}
.show{display:block;visibility:visible;}
</style>
<script type="text/javascript">
function hideEle(what){
ele = document.getElementById(what);
ele.className = 'hide';
}
function showEle(what){
ele = document.getElementById(what);
ele.className = 'show';
}
</script>
</head>
<body>
<a href="" onmousedown="hideEle('page2');showele('page1')'">Page 1</a>
<a href="" onmousedown="hideEle('page1');showele('page2');">Page 2</a>
<div id="page1">This is page 1</div>
<div id="page2">This is page 2</div>
</body>
</html>
I didn't test the code but the basic premise of the code is when you click on a link it will switch the CSS class of all pages to hide, then show the page you selected. You could expand it by just adding more hideEle.
I would recommend making a better paging function for more pages but this works for a simple two pager.
__________________ Hawk Enterprises -- Home to PHP games, open-source code, tutorials and free downloads
I've used something called "Tabbifier" that I can recommend wholeheartedly. It handles multiple lists, allows for multi-line tabs, tab manipulation, presets, multiple tab sets, nested tabs, and more.
multi window tabbed navigation
Linear Mode
