Stylesheet Modification + Href Deletetion

Changing CSS with Javascript and PHP as backup

Page 1 of 1

4 Replies - 2264 Views - Last Post: 28 May 2007 - 05:15 PM

#1 AdemoS  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-April 07

Stylesheet Modification + Href Deletetion

Posted 27 April 2007 - 11:44 PM

Before I begin, I'd like to start off by saying I did search the board, Googled, and tried various Javascript websites, but none of them specficily answered my question. So while I was trying on my own, I came here to see if anyone could either point me in the right direction or solve my problem.

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Stylesheet Modification + Href Deletetion

#2 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: Stylesheet Modification + Href Deletetion

Posted 28 April 2007 - 11:04 PM

I've never heard of 'deleting the HREF' to control whether a link works or not using Javascript...generally, the method that I use is to set something like this for an <a> tag:
<a href='test.php' onclick='doFunction();return false;'>test</a>


The return false; part of that will prevent the browser from actually going to the location defined in the href attribute. For users with Javascript disabled, the onclick part of the <a> tag will just get ignored.
Was This Post Helpful? 0
  • +
  • -

#3 AdemoS  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-April 07

Re: Stylesheet Modification + Href Deletetion

Posted 29 April 2007 - 10:45 AM

Hmm I talked to the friend who started the script:

Quote

preventDefault() is the correct way to do "return false". However, since pD doesn't work in IE and that's the only way that I knew how to cancel a default event via a .js file...I ended up removing the href attribute as an alternative.


Either way though, I tried it and the PHP wasn't disabled.

Thanks for your help though, girasquid.

============

Overall though, the two problems that seem to be hindering me the most are:

How TESTING7 continues to show the "Summary" box ontop of the other boxes, instead of disappearing

And that TESTING7 does not correctly change the border colors of the tabs to show which tab was selected.


If anyone has ideas for fixing those problems---especially the first problem---I'd appreciate any ideas.

This post has been edited by AdemoS: 29 April 2007 - 10:46 AM

Was This Post Helpful? 0
  • +
  • -

#4 Petebardo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 14-December 06

Re: Stylesheet Modification + Href Deletetion

Posted 25 May 2007 - 04:30 PM

Maybe you've already figured this out. The difference between CascadingContentBox1 and the rest of the content boxes is in the CSS id definition. All the others contain "display:none;", but CascadingContentBox1 does not.

I did a couple of things to make it work. First, I added "style='display:none;'" to CascadingContentBox1.

The next thing was the replace statement in the javascript. There's really no reason to use replace since you already know the value you want it to be. So I made it a simple assignment.

You used += assignment opreator to assign the ShowCascadingContentBoxClassName. That had the effect of concatenating the class names. I also made this a simple assignment.

This works fine, but you can't see CascadingContentBox1 when the page loads, so I added a line at the end of your function basic() to display the block.

Here's the end result, (I nested the blocks to make it easier to read):
// 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 Inactive Anchor Elements
var InactiveTabClassName = "myInactiveTabClassName";
// 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 set class to InactiveTabClassName
			 document.getElementById("ContentButton" + j).className = InactiveTabClassName;
			 // on click, cycle through the CascadingContentBox elements and remove ShowCascadingContentBoxClassName
			 if (document.getElementById("CascadingContentBox" + j).className) {
				document.getElementById("CascadingContentBox" + j).className = 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;
		 this.parentNode.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 = 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 = "";
		 }
 }
 document.getElementById("CascadingContentBox1").className = ShowCascadingContentBoxClassName;
}
window.onload = basic;



This leaves the problem of the tabs not changing display. The solution is basically the same as for the content boxes.

Your style sheet defines the style for each of the buttons. When you change the class name on an items defined this way, the styles assigned to the id take precedence. Changing the className has no effect. Next problem is you were changing the class name of the anchor, when you should have been changing the name of the list item (parentNode). And even then you were using the += assignment operator. The end result was that all of your class names were incorrect in addition to having no effect.

I created two CSS classes for tabs, mySelectedTabClassName and myInactiveTabClassName, then fixed the Javascript to change the right object's class name to the desired name. I also commented out all of the individual CSS class names.

Then it all worked! Here are the relevant CSS changes:

/* define a class for Selected Tab, not each button */
.mySelectedTabClassName {
  border-bottom: 2px solid white;
  border-right: 2px solid black;
  border-left: 2px solid black;
}

.mySelectedTabClassName a {
  display: block;
  border-top: 0px solid white;
  border-bottom: 2px solid white;
  color: black;
  text-align: center;
  font: 14.5px Arial, sans-serif;
  text-decoration: none;
  }

.mySelectedTabClassName a:hover {
  background-color: white;
  border-top: 0px solid black;
  border-bottom: 2px solid white;
  color: black;
  cursor: pointer;
  }

/* Define a class for inactive Tab */
.myInactiveTabClassName {
  border-right: 0px solid;
  border-left: 0px solid;
  border-bottom: 2px solid black;
  }
  
.myInactiveTabClassName a {
  display: block;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
  text-align: center;
  font: 14.5px Arial, sans-serif;
  text-decoration: none;
  }
  
.myInactiveTabClassName a:hover {
  background-color: white;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
  color: black;
  font-style: italic;
  font-weight: bold;
  cursor: pointer;
  }
  
*#ContentButton1 {
  width: 20%;
  margin-left: 12px;
}

*#ContentButton2 {
  width: 15%;
}

*#ContentButton3 {
  width: 22%;
}

*#ContentButton4 {
  width: 15%;
}

*#ContentButton5 {
  width: 18%;
}




You have to either comment out or delete the other *#ContentButton? definitions for this to work.

This was an interesting problem. I hope you find the solution equally interesting. It's all about the cascading part of style sheets.
Was This Post Helpful? 0
  • +
  • -

#5 AdemoS  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 27-April 07

Re: Stylesheet Modification + Href Deletetion

Posted 28 May 2007 - 05:15 PM

Wow Petebardo, quite a lot of work you put in there. Thanks a lot.

Alright, so I tried your idea out and it DOES work well.

I uploaded my attempt at your idea here:
http://www.blkflm.com/TESTING9

But there are a couple issues:

Note: I may not have followed your directions correctly or entirely, so it's possible that it does work without issues for you. (If I did, it wasn't on purpose, and I'd appreciate any assistance.)

With Javascript Off (when using the backup PHP switcher)
Because of the "style='display:none;'" rule in the CascadingContentBox1 div, the Summary Box stays hidden in-definitely.


With Javascript On

1. If you try to use a PHP command to directly link to a tab, the Javascript commands break.
Example: Turn on Javascript and load this link: http://www.blkflm.co...index.php?tab=2
After trying that, even if you try to load the more direct http://www.blkflm.com/TESTING9 and refresh, the issue is stuck until reloading Firefox.
(Firefox 2.0.0.3)

2. I probably mis-understood an instruction, but the tab styles don't change on click.



Other than those few issues though, I think you've figured out a way to fix the snag. So thanks again in advance for your time. And hopefully we can figure out what went wrong with your idea.

This post has been edited by AdemoS: 28 May 2007 - 09:45 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1