Issues with changing a class

[alex.pedwysocki]

I am trying to change some elements from one class to another using
javascript. I would have expected the browser to apply the styles for
those classes, but they don't seem to bother and I would be really
interested to know what I could do about it.

Manually changing each property would work, but I don't want to if
this can be made to work reasonably.

Here is some code:

Some js:

function switchTab( i ) {
//terminology: tab is the bit at the top
//tab contents is the stuff that shows up underneath

//grab the new open tab (the selected close tab)
var nt = document.getElementById("t" + i);
//grab the new query tab contents
var ntc = document.getElementById("qt" + i);

for ( var x = 1; x < 11; x++ ) {
//set both the query tabs (tab contents) and the tabs themselves to
closed mode
//setting to closed mode involves resetting all of the parameters
var tab = document.getElementById("t" + x).setAttribute("class",
"ctab");
document.getElementById("qt" + x).style.display = 'none';
}

//set the new tab contents to being visible.
ntc.style.display='block';

//set the new open tab to open mode;
nt.setAttribute("class", "otab");

}


some css:

td.otab {
text-align:center;
background-color: AliceBlue;
padding: 0px 20px;
border-color: black;
border-top: 2px solid;
border-right: 2px solid;
border-left: 2px solid;
}

td.ctab {
text-align:center;
border-color: black;
border: 1px solid;
border-bottom: 2px solid;
}

table.tabs {
position: relative; /* This positioning is a hack to get the borders
to align right. */
top: 1px; /* It is only necessary for firefox but doesn't
upset IE */
width:938px;
border-collapse: collapse;
}


And selected bits of html look like this.

<table class="tabs">
<tr>
<td id="t1" class="otab" name="t" onclick="switchTab(1);">Query 1</
td>

<td id="t2" class="ctab" name="t" onclick="switchTab(2);">Query 2</
td>
<td id="t3" class="ctab" name="t" onclick="switchTab(3);">Query 3</
td>
<td id="t4" class="ctab" name="t" onclick="switchTab(4);">Query 4</
td>
<td id="t5" class="ctab" name="t" onclick="switchTab(5);">Query 5</
td>
<td id="t6" class="ctab" name="t" onclick="switchTab(6);">Query 6</
td>
<td id="t7" class="ctab" name="t" onclick="switchTab(7);">Query 7</
td>

<td id="t8" class="ctab" name="t" onclick="switchTab(8);">Query 8</
td>
<td id="t9" class="ctab" name="t" onclick="switchTab(9);">Query 9</
td>
<td id="t10" class="ctab" name="t" onclick="switchTab(10);">Query 10</
td>
</tr>
</table>


....

And this is what the tab contents div declarations look like:

<div name="qt" class="queryTab" id="qt1" style='display:block;' >...</
div>
<div name="qt" class="queryTab" id="qt2" style='display:none;' >...</
div>
etcetera.


The tab contents appear as expected. As for the tab tops
themselves . . . In IE, they don't change at all. In firefox, SOME
PARTS of the formatting defined by the stylesheet change depending on
which button was clicked. Since they should all be roughly the same,
that is sort of terrifying.

Thank you very kindly for your time.

 

[Joost Diepenmaat]

I am trying to change some elements from one class to another using
javascript. I would have expected the browser to apply the styles for
those classes, but they don't seem to bother and I would be really
interested to know what I could do about it.

//setting to closed mode involves resetting all of the parameters
var tab = document.getElementById("t" + x).setAttribute("class",
"ctab");

I *always* use element.className = someNewClassName; and it seems to
work all the time - or at least for the popular browsers, including IE.

 

[SAM]

(e-mail address removed) a écrit :

Here is some code:

Some js:

function switchTab( i ) {
//terminology: tab is the bit at the top

'tab' seems to be a cell (of a table), no?

//set the new tab contents to being visible.
ntc.style.display='block';

No, a cell of a table is NOT a block !

ntc.style.display=''; // to come back to normal

//set the new open tab to open mode;
nt.setAttribute("class", "otab");

nt.className = "otab";

 

[alex.pedwysocki]

That's a really good first step, thank you Joost! ... but only a
first step ...

It works flawlessly in IE now, but firefox is still acting weirdly.
It updates the background colour of the cell, as well as the padding.
But the td's borders stay just as they are when the page loads -- they
don't update with the rest of the class style (?).

I will try using something other than tables for the tab tops. Tables
are out of style anyway.

However I'm really curious about this, and it seems like it should
work, so if anybody has any thoughts I would love to hear them.

 

[alex.pedwysocki]

Little update:

Moving away from table cells (with identical javascript using
'element.className = "newClass"') to list items inline works perfectly
in both browsers.

I understand that it is something of a faux pas to use tables in
layout like I was doing, but honestly it was simpler to code and I
think it should have worked ... (Also I appreciated the automatic
sizing of cells.)

Note: I am not declaring that firefox has a bug here. I am (just
barely) past the point where errors that I don't understand are
_clearly_ bugs. That being said, does anybody know why the table
cells didn't update their borders to match their new class?

 

[Joost Diepenmaat]

Note: I am not declaring that firefox has a bug here. I am (just
barely) past the point where errors that I don't understand are
_clearly_ bugs. That being said, does anybody know why the table
cells didn't update their borders to match their new class?

Without looking at the code in detail, it may just be a CSS issue. Table
styles aren't as intuitive as you might like. To be sure it's *not* a
css issue, change the class to the new name statically (IOW, set the
class in the HTML, and don't change it via javascript, or disable
javascript altogether) and see if that has the same problem.

 

[SAM]

(e-mail address removed) a écrit :

Note: I am not declaring that firefox has a bug here. I am (just
barely) past the point where errors that I don't understand are
_clearly_ bugs. That being said, does anybody know why the table
cells didn't update their borders to match their new class?

because of collapse: collapse;


That here works not too bad with my Fx :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>tabs or not tabs that is the question</title>
<script type="text/javascript">
function switchTab( i ) {
var nt = document.getElementById("t" + i);
// var ntc = document.getElementById("qt" + i);
for ( var x = 1; x < 11; x++ ) {
document.getElementById("t" + x).className = '';
// document.getElementById("qt" + x).style.display = 'none';
}
//set the new tab contents to being visible.
// ntc.style.display='';
//set the new open tab to open mode;
nt.className = "otab";
}
</script>
<style type="text/css">
..tabs {
border-spacing: 0;
width:938px;
}
..tabs td {
text-align: center;
border: 1px solid black;
border-bottom-width: 2px;
cursor: pointer;
}
..tabs td:hover {
background-color: #eee;
}
td.otab,
td.otab:hover {
background-color: AliceBlue;
border-width: 2px 2px 0 2px;
cursor: default;
}
</style>
</head>
<body>
<table class="tabs">
<tr>
<td id="t1" class="otab" onclick="switchTab(1);">Query 1</td>
<td id="t2" onclick="switchTab(2);">Query 2</td>
<td id="t3" onclick="switchTab(3);">Query 3</td>
<td id="t4" onclick="switchTab(4);">Query 4</td>
<td id="t5" onclick="switchTab(5);">Query 5</td>
<td id="t6" onclick="switchTab(6);">Query 6</td>
<td id="t7" onclick="switchTab(7);">Query 7</td>
<td id="t8" onclick="switchTab(8);">Query 8</td>
<td id="t9" onclick="switchTab(9);">Query 9</td>
<td id="t10" onclick="switchTab(10);">Query 10</td>
</tr>
</table>
</body>
</html>