WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 A little help with the DOM on this toolbar script?, Dougghnald, December 23, 2004
     Re:A little help with the DOM on this toolbar script?, Guilherme Blanco, December 29, 2004

Subject: Re:A little help with the DOM on this toolbar script? From: Guilherme Blanco Date: December 29, 2004

Simple...

You're using classname instead of className.
Put the "n" char uppercase and the problem solves.

Regards,

Gui Blanco

From: Dougghnald
Sent: December 22, 2004
Subject: Re:A little help with the DOM on this toolbar script?

I'm trying to make a script that will power a toolbar page I'm working on. The script switches CSS classes on the tools, hiding or showing them. But as I was testing, I ran over a little problem: the tools were not showing. Can you please help? My code is as follows:

<html>
<head>
<style>
body
{
background-color:#e0e2eb;
margin-top:1px;
margin-left:1px;
}
.toolbar
{
display:block;
}
.toolbar a.button
{
text-decoration:none;
color:#000000;
font-family:Tahoma;
font-size:11px;
border:solid #e0e2eb 1px;
height:16px;
}
.toolbar a.buttonactive
{
text-decoration:none;
color:#000000;
cursor:default;
font-family:Tahoma;
font-size:11px;
border:solid #e0e2eb 1px;
height:16px;
}
.toolbar a.buttonactive:first-letter
{
color:#0000ff;
}

.toolbar a.button:hover
{
border:solid #b2b4bf 1px;
background-color:#bbb7c7;
}
.tools
{display:inline;}
.active
{
display:inline;
font-family:Tahoma;
}

.inactive
{
display:none;
}

</style>
<script type="text/javascript">
function UIClassSwitch(elm)
{
document.getElementById('locator'+'').className="inactive";
document.getElementById('editor'+'').className="inactive";
document.getElementById('communicator'+'').className="inactive";
//then render the tool specified by string elm active
document.getElementById(elm+'').classname='active';
//do similar with buttons, render them ordinary
document.getElementById('locatorbutton').className='button';
document.getElementById('editorbutton').className='button';
document.getElementById('communicatorbutton').className='button';
//then render the button specified by string elm plus button active
document.getElementById(elm+'button').className='buttonactive';
}
</script>
</head>
<body>
<div class="toolbar">
<a href="#" class="button" id="locatorbutton" onclick="UIClassSwitch('locator')">Locator</a>
<a href="#" class="button" id="editorbutton" onclick="UIClassSwitch('editor')">Editor</a>
<a href="#" class="buttonactive" id="communicatorbutton" onclick="UIClassSwitch('communicator')">Communicator</a>
</div>
<div class="inactive" id="locator">Insert Locator Code.</div>
<div class="inactive" id="editor">Insert Editor Code.</div>
<div class="active" id="communicator">Insert Communicator Code.</div>
</body>

I would appreciate your help in pointing out my mistakes.

Dougghnald.





Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX