PDA

Click to See Complete Forum and Search --> : <SPAN> buttonType attribute

double_O_7
07-24-2004, 08:51 AM
Hi everyone,

I read in a couple of posts that in <span buttonType=""> the buttonType attribute is not valid, though I see it in some code and it does something, can anybody help me what it means or where to get info?

TIA.
Kenny
Mr J
07-24-2004, 09:40 AM
Can you show some code with this in?

I have never seen it before, to my knowledge you can have

<span></span>

<input type="button">

<button></button>

but not as you decribe it
double_O_7
07-24-2004, 10:05 AM
Thought so as well. Piece of the code is part of a menusystem, which lights menuitems when you go over it. Because I couln't find info about that attribute, I thought I could delete it. Except the items wouldn't light up anymore if I did, so it is used somehow. BTW. it uses some javascript.


<table onmousedown="DepressButton();" onmouseover="RaiseButton();" onmouseup="RaiseButton();">
<tr>
<td>
<a class="navlink" href="#" target="_self">
<span buttontype="nav" class="navoff">
item 1
</span>
</a>
</td>
</tr>
</table>


navlink and navoff are CSS names.
Mr J
07-24-2004, 10:28 AM
Search the script for "buttontype" and see how it is being referenced.

I have tried a few ways but get undefined or some other error
Mr J
07-24-2004, 10:38 AM
Ok, I found a way to reference it by using the elements index array so I can only put it down to being a custom attribute

<script type="text/javascript">
<!--
function mytest(){
tag=document.getElementsByTagName("SPAN")
alert(tag[3].buttontype)
}
// -->
</script>

<span buttontype="nav" class="navoff">
<span buttontype="main" class="navoff">
<span buttontype="menu" class="navoff">
<span buttontype="colour" class="navoff">
<span buttontype="hmm" class="navoff">

<a href="#null" onclick="mytest()">Test</a>
double_O_7
07-24-2004, 10:59 AM
Got a working (ugly) example here of it.


<html><head>
<style type="text/css"> <!--
.navlink {}
.navoff {background-color: #4F8FCF;border: 1px solid #7F8893;width: 100%;}
.navup {background-color: #DDE3EB;border: 1px solid #7F8893;width: 100%;}
.navdown {background-color: #C4CFDE;border: 1px solid #7F8893;width: 100%;}
}--></style>
</head>
<body>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="text/javascript">
<!--
var oLastBtn = 0;
function RaiseButton() {
window.event.cancelBubble = true;
oBtn = window.event.srcElement;

var bChosen = false;
if(oLastBtn && oLastBtn != oBtn){
HideButton();
}

if(oBtn.buttontype){
oBtn.className = oBtn.buttontype + "up";
oLastBtn=oBtn;
}
else {
oLastBtn = 0;
}
}
function DepressButton() {
window.event.cancelBubble=true;
oBtn = window.event.srcElement;

if(oBtn.buttontype) {
oBtn.className = oBtn.buttontype + "down";
}
}
function HideButton(){
oLastBtn.className = oLastBtn.buttontype + "off";
}
//-->
</script>

<table onmousedown="DepressButton();" onmouseover="RaiseButton();" onmouseup="RaiseButton();">
<tr>
<td>
<a class="navlink" href="#" target="_self">
<span buttontype="nav" class="navoff">
foto's
</span>
</a>
<a class="navlink" href="#" target="_self">
<span buttontype="nav" class="navoff">
video's
</span>
</a>
</td>
</tr>
</table>
</body>
</html>


As you can see the buttonType is used in the javascript functions. Now my question is, is it a correct way, because it is not a default HTML4 attribute ?
Mr J
07-24-2004, 01:50 PM
I would think that if it works in all current browsers then it can be deem as a correct way, this does not necessarily mean it is the preferred way.

Take a look at the following examples, the first 2 links are the originals.

I would prefer the last example because this uses the elements more commonly used ID attribute


<html>
<head>
<style type="text/css">
<!--
.navlink {}
.navoff {background-color: #4F8FCF;border: 1px solid #7F8893;width: 100%;}
.navup {background-color: #DDE3EB;border: 1px solid #7F8893;width: 100%;}
.navdown {background-color: #C4CFDE;border: 1px solid #7F8893;width: 100%;}
//-->
</style>
</head>
<body>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="text/javascript">
<!--
var oLastBtn = 0;
function RaiseButton() {
window.event.cancelBubble = true;
oBtn = window.event.srcElement;

var bChosen = false;
if(oLastBtn && oLastBtn != oBtn){
HideButton();
}

if(oBtn.buttontype){
oBtn.className = oBtn.buttontype + "up";
oLastBtn=oBtn;
}
else {
oLastBtn = 0;
}
}

function DepressButton() {
window.event.cancelBubble=true;
oBtn = window.event.srcElement;

if(oBtn.buttontype) {
oBtn.className = oBtn.buttontype + "down";
}
}

function HideButton(){
oLastBtn.className = oLastBtn.buttontype + "off";
}
//-->
</script>

<table onmousedown="DepressButton();" onmouseover="RaiseButton();" onmouseup="RaiseButton();">
<tr>
<td>
<a class="navlink" href="#" target="_self"><span buttontype="nav" class="navoff">foto's</span></a>
<a class="navlink" href="#" target="_self"><span buttontype="nav" class="navoff">video's</span></a>
</td>
</tr>
</table>

<P><hr></P>

<table><tr><td>
<a class="navlink" href="#" target="_self">
<span class="navoff" onmouseover="this.className='navup'" onmousedown="this.className='navdown'" onmouseup="this.className='navup'" onmouseout="this.className='navoff'">foto's</span>
</a>
<a class="navlink" href="#" target="_self">
<span class="navoff" onmouseover="this.className='navup'" onmousedown="this.className='navdown'" onmouseup="this.className='navup'" onmouseout="this.className='navoff'">video's</span>
</a>
</td></tr></table>

<P><hr></P>

<script language="JavaScript">
<!--
LastID = ""
function on(id){
(LastID != id?document.getElementById(id).className="navup":"")
}

function off(id){
(LastID != id?document.getElementById(id).className="navoff":"")
}

function active(id){
document.getElementById(id).className = "navdown"
if (LastID != id){
(LastID != ""?document.getElementById(LastID).className = "navoff":"")
}
LastID = id
}
// -->
</script>

<table><tr><td>
<a class="navlink" href="#" target="_self">
<span id="s1" class="navoff" onmouseover="on('s1')" onmouseout="off('s1')" onclick="active('s1')">foto's</span>
</a>
<a class="navlink" href="#" target="_self">
<span id="s2" class="navoff" onmouseover="on('s2')" onmouseout="off('s2')" onclick="active('s2')">video's</span>
</a>
</td></tr></table>


</body>
</html>
double_O_7
07-24-2004, 02:33 PM
Thanks J!

I will see if and which option I will use. I'd like your options more, because the original one didn't work with


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


and I think if you design pages it should be well constructed and not in way's that seems te work.

Kenny