Jump to content

Archived

This topic is now archived and is closed to further replies.

linuxinit

onClick of SPAN set class, unset others

Recommended Posts

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

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
erffff,,, so easier to code,,,,,, ;p

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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.