onClick of SPAN set class, unset others

linuxinit · June 2, 2006

Okay I've been screwing this this for the last 5 hours. I give up. I haven't had to ask for help on something like this in years. It's actually kind of depressing. Javascript really isn't my thing.

Anyways...

Here's the layout I'm working on:
[a href=\"http://linuxinit.net/site/temp/new_layout/\" target=\"_blank\"]http://linuxinit.net/site/temp/new_layout/[/a]

Right now... I'm trying to get the recent comments working the way I see it in my head:

When you click on one of the comment authors, the rest of the comment should slide out. While you are hovered, it should have a similar background as the top of the page. The problem is, when you move the mouse off of the span it goes away. What I want it do do is, when you click on a span inside #sidebar it is set to the css class ".toggled", and any other spans that are set to toggled would be set to ".untoggled".

I'd prefer a way to do this without putting tons onclicks in each span to unset the others, so that it's cleaner. I really don't like javascript, and usually do as much with css as possible, but this requires javascript, which I'm not proficient in.

In psuedo-code it would go something like:
[code]onclick setClass='toggled' && setotherClass='untoggled';[/code]

I honestly have no idea how to do it with JS. If the moo.fx script can let you click on one item, then another, and have the previous one reset, I figure it shouldn't be too complex to just add on to it somehow.

I figured I could just add a function to one of the libraries that I'm already including that would get the job done without having to modify the html source.

Again real quick if you skimmed:
1. Click span.
2. Set span class to toggled.
3. Set other span's class to untoggled.

I'd like to be able to click the same span twice to toggle it on and off if possible, but it's not really required.

Any help is greatly appreciated.

Here's the link again if you skimmed:
[a href=\"http://linuxinit.net/site/temp/new_layout/\" target=\"_blank\"]http://linuxinit.net/site/temp/new_layout/[/a]

I have no problem linking back to anyone that helps. :)

Thanks in advance,
Gordon

GBS · June 7, 2006

Hi there,,

Hmm,... I think I've found a start to solve your problem,... not sure if it would be good enough for you,,
So,... the idea is to change the class value, using javascript,,

Under Firefox, no problem,,... using 'setAttribute' method, the changes take effect, & all is running fine,,
problem comes with IE (brrrr, as >TOO much< often...................)
as test, on a simple:
[code]alert(document.getElementById('test').getAttribute("class"));[/code]
it reports 'null',.... as it works fine with FF,...
Try this code:
[code]
<html>
<style>
body {
background-color:white;
}
.classA {
font-weight:bold;
color:blue;
}
.classB  {
font-weight:normal;
color:black;
}
</style>
<body>
<input type="button" id="button1" value="click me!" onclick="DochangeClass()">
<div id="test" class="classA">Yes,, I'm a span test,,;)</div>
<script>
// detecting browser, & mostly IE,,
var Brows = new Array();
Brows['user']="";

function Browser() {
  var ua, s, i;
  this.isIE    = false;
  this.version = null;
  ua = navigator.userAgent;
  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    Brows['user']="IE";
    return;
  }
}
var browser = new Browser();

function DochangeClass()
{
if (Brows['user']=="IE")
    {
alert(document.getElementById('test').getAttribute("class"));
//brrrrr,, that one doesn't seem to work with IE,...
    var func="function anonymous() {classB}";
    eval("document.getElementById('test').setAttribute(\"class\","+func+")");
alert(document.getElementById('test').getAttribute("class"));
//brrrrr,,,, still unlucky,...
//Hmm,.... so, we have to use that one to change the class:
    document.getElementById('test').innerHTML="<span class='classB'>I'm a span test,,</span>";
    document.getElementById('button1').value="WoW,, something has changed! :)";
    }
else
    {
//works fine with Firefox:
//alert(document.getElementById('test').getAttribute("class"));
    document.getElementById('test').setAttribute("class","classB")
//alert(document.getElementById('test').getAttribute("class"));
    document.getElementById('button1').value="WoW,, something has changed! :)";
    }
}
</script>
</body>
</html>
[/code]
So, with IE, you will have to change the innerHTML value from the wanted element, to change the class value,,
If some know some better way to do this, we would be glad to learn,,... :)

Hoping it helps,,

l8tr,,
[edit]
& try that one to play between the classA & the classB,,
[code]
<html>
<style>
body {
background-color:white;
}
.classA {
font-weight:bold;
color:blue;
}

.classB  {
font-weight:normal;
color:black;
}
</style>

<body>
<input type="button" id="button1" value="click me!" onclick="DochangeClass()">
<div id="test" class="classA">Yes, I'm a span test,, :)</div>
<script>
// detecting browser, & mostly IE,,
var Brows = new Array();
Brows['user']="";

function Browser() {
  var ua, s, i;
  this.isIE    = false;
  this.version = null;
  ua = navigator.userAgent;
  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    Brows['user']="IE";
    return;
  }
}
var browser = new Browser();
function DochangeClass()
{
if (Brows['user']=="IE")
    {
//alert(document.getElementById('test').getAttribute("class"));
//brrrrr,, that one doesn't work with IE,...
    var func="function anonymous() {classB}";
    eval("document.getElementById('test').setAttribute(\"class\","+func+")");
//alert(document.getElementById('test').getAttribute("class"));

//Hmm,.... so, we have to use that one to change the class:
    document.getElementById('test').innerHTML="<span class='classB'>I'm a span test,,</span>";
    document.getElementById('button1').value="WoW,, something has changed! :)";
    var func="function anonymous() {BackToFirstClass()}";
    eval("document.getElementById('button1').setAttribute(\"onclick\","+func+")");
    }
else
    {
//works with Firefox:
//alert(document.getElementById('test').getAttribute("class"));
    document.getElementById('test').setAttribute("class","classB")
//alert(document.getElementById('test').getAttribute("class"));
    document.getElementById('button1').value="WoW,, something has changed! :)";
    document.getElementById('button1').setAttribute("onclick","BackToFirstClass()")
    }
}

function BackToFirstClass()
{
if (Brows['user']=="IE")
    {
    document.getElementById('test').innerHTML="<span class='classA'>I'm a span test,,</span>";
    var func="function anonymous() {DochangeClass()}";
    eval("document.getElementById('button1').setAttribute(\"onclick\","+func+")");
    }
else
    {
    document.getElementById('test').setAttribute("class","classA")
    document.getElementById('button1').setAttribute("onclick","DochangeClass()")
    }
    document.getElementById('button1').value="hmm, I'm really sure now,... I'm really a test span for lifetime!";
}
</script>
</body>
</html>
[/code]

nogray · June 7, 2006

I didn't got through the whole thing, but if you want to change a class, you can use className
[code]
document.getElementById('id here').className = 'class name here';
[/code]

GBS · June 8, 2006

erffff,,, so easier to code,,,,,, ;p

I didn't know that one,,... thanks for the tips,, :)

Sign In

onClick of SPAN set class, unset others

Recommended Posts

linuxinit

Link to comment

Share on other sites

GBS

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

GBS

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information