New Topic/Question
Reply
Also this is NOT homework or a project I am getting paid for, it is just a site I plan to use to show some films I make, and publish some articles I write.
The way this concept started, was a PHP stylesheet switcher. The purpose of the switcher, was to change the "display:none" CSS attribute to show and hide different parts of an article.
Before The Switcher
Here is how the article looks without the switcher:
http://www.blkflm.com/TESTING4/
I used PHP instead of a Javascript switcher, because it would allow greater accessibility to visitors with Javascript turned off or not installed correctly.
However, the PHP stylesheet switcher was slow and bandwith intensive. So I wanted to continue using a Javascript stylesheet switcher, with the PHP switcher as a backup. The point was if Javascript was not able to be used, the PHP stylesheet switcher would take over. A friend helped me start out a very unusal Javascript.
The script first deletes the href attribute of the tab buttons; doing so blocks the slower PHP switcher and allows the faster Javascript switcher to run. This works well, because if Javascript is disabled or not correctly installed, the href will stay intact and the PHP switcher will work, but if Javascript is installed it will block the PHP and run the Javascript switcher instead, working faster and with less bandwith.
However, the Javascript method he came up with ran into a snag.
To understand the snag, you must first be shown the correct method.
Working Method
This is the PHP-only method of switching tabs:
http://www.blkflm.com/TESTING6/
Though fairly slow, it illustrates how the "Summary" "Article", etc tabs are supposed to function.
Broken Method
This is the Javascript and PHP method, where the Javascript disables the PHP part and operates the tab switching by itself:
http://www.blkflm.com/TESTING7/
So the problem at hand is...
Unlike in TESTING6, TESTING7 continues to show the "Summary" box ontop of the other boxes, instead of disapearing.
And unlike TESTING6, TESTING7 does not correctly change the border colors of the tabs to show which tab was selected.
Here is the Javascript in question:
// Class Names
// Change the class names in quotation marks as desired.
// Style of Anchor Elements on Hover
var HoverTabClassName = "myHoverTabClassName";
// Style of Anchor Elements on Click
var SelectedTabClassName = "mySelectedTabClassName";
// Style of Visibility (as visible) for CascadingContentBox Elements
var ShowCascadingContentBoxClassName = "myCascadingContentBoxClassName";
// Remove Visibility
var HideCascadingContentBoxClassName = "hideBox";
/* Example Style Sheet:
a.myHoverTabClassName { color: green !important; }
li#ContentButton1 a.mySelectedTabClassName { color: red !important;}
li#ContentButton2 a.mySelectedTabClassName { color: red !important;}
li#ContentButton3 a.mySelectedTabClassName { color: red !important;}
li#ContentButton4 a.mySelectedTabClassName { color: red !important;}
li#ContentButton5 a.mySelectedTabClassName { color: red !important;}
div.myCascadingContentBoxClassName { display: block !important; }
div.hideBox { display: none !important; }
*/
function basic() {
for (var i = 1; i <= 5; i++) {
// remove href attributes from anchor elements to prevent default action (PHP) from conflicting
document.getElementById("ContentButton" + i).firstChild.removeAttribute("href");
// attach click event to anchor elements
document.getElementById("ContentButton" + i).firstChild.onclick = function() {
for (var j = 1; j <= 5; j++) {
// on click, cycle through the anchor elements and remove SelectedTabClassName
for (var k = 1; k <=5; k++) {
if (document.getElementById("ContentButton" + k).firstChild.className) {
document.getElementById("ContentButton" + k).firstChild.className = document.getElementById("ContentButton" + k).firstChild.className.replace(SelectedTabClassName, "");
}
}
// on click, cycle through the CascadingContentBox elements and remove ShowCascadingContentBoxClassName
if (document.getElementById("CascadingContentBox" + j).className) {
document.getElementById("CascadingContentBox" + j).className = document.getElementById("CascadingContentBox" + j).className.replace(ShowCascadingContentBoxClassName, HideCascadingContentBoxClassName);
}
}
var ContentButtonNumber = this.parentNode.getAttribute("id").charAt(this.parentNode.getAttribute("id").length - 1);
// on click, assign the class SelectedTabClassName to an anchor element (tab)
this.className += " " + SelectedTabClassName;
// on click, assign the class ShowCascadingContentBoxClassName to a CascadingContentBox element
if (!document.getElementById("CascadingContentBox" + ContentButtonNumber).className.match(/HideCascadingContentBoxClassName/)) {
document.getElementById("CascadingContentBox" + ContentButtonNumber).className += " " + ShowCascadingContentBoxClassName;
}
else {
document.getElementById("CascadingContentBox" + ContentButtonNumber).className = document.getElementById("CascadingContentBox" + ContentButtonNumber).className.replace(HideCascadingContentBoxClassName, ShowCascadingContentBoxClassName);
}
}
// attach mouse over event to anchor elements
document.getElementById("ContentButton" + i).firstChild.onmouseover = function() {
// on mouse over, attach HoverTabClassName to an anchor element
this.className += " " + HoverTabClassName;
}
// attach mouse out event to anchor elements
document.getElementById("ContentButton" + i).firstChild.onmouseout = function() {
// on mouse out, remove HoverTabClassName from an anchor element
this.className = this.className.replace(HoverTabClassName, "");
}
}
}
window.onload = basic;
Here is the part of the main CSS file that works with it:
li#ContentButton2 a.mySelectedTabClassName { color: red !important;}
li#ContentButton3 a.mySelectedTabClassName { color: red !important;}
li#ContentButton4 a.mySelectedTabClassName { color: red !important;}
li#ContentButton5 a.mySelectedTabClassName { color: red !important;}
div.myCascadingContentBoxClassName { display: block !important; }
Now that you've seen the Javascript in question, I would appericate it if anyone can figure out what the problem with this script was, and how it can be fixed.
I'm aware that this is asking board members to debug the script, but I can't seem to find the problem, so it's nearly impossible to find the soultion without it.
If you know any guides I'm willing to read them, but being a Javascript beginer, it'd be easier if someone could break down why the problem was occuring, so I could try to fix it myself. I'd perfer to be able to, if possible.
MultiQuote
| 