...

View Full Version : Style switcher with conflicting javaScripts



romkebomke
12-07-2006, 01:45 PM
Hello,
I use javaScript to make a pull-down menu CSS style switcher. It works fine. On a few pages I use a separate script to highlight odd rows of tables. This works fine with default CSS, but conflicts with my "title='large'" style sheet. It also overrides this style sheet. How can I block the one script if the "large"style sheet is active? Or at least have the alternate style sheet override the one javaScript?
Greetings,
romkebomke

mrhoo
12-07-2006, 06:31 PM
change the className for highlighted rows instead of
directly changing inline style properties

romkebomke
12-07-2006, 08:19 PM
change the className for highlighted rows instead of
directly changing inline style properties
Thanks,
But the rows are highlighted by a script that does not use a className (so there's nothhing to change, only to add):


function stripeTables() {
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
rows[j].style.backgroundColor = "#eef";
odd = false;
} else {
odd = true;
}
}
}
}
addLoadEvent(stripeTables);

Would adding a className to this or another script override this script then?
-romkebomke

Arbitrator
12-07-2006, 08:37 PM
He meant to use a CSS class instead of the style attribute to alter the document style, since inline CSS (style attribute) will override CSS that is embedded in (style element) or external to (link element or @import at-rule) the document. The line of code element.style.backgroundColor&#160;=&#160;"#eef" is identical to <element&#160;style="background-color:&#160;#eef;">.

To use a CSS class, you would create a class in your style sheet and assign or remove that class to or from an element with className, setAttribute, or removeAttribute. If you place that class above the rules that you donít want to override, then it will not override them. Alternatively, you can simply use the !important rule to set the priority of certain declarations so that they arenít overridden by declarations that appear later in the style sheet.

romkebomke
12-07-2006, 09:54 PM
Thanks,
You nudged me in the right direction. It works.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum