JavaScript / CSS issue with IE and NOT firefox...

[cloude000]

Hey there, I'm a developer who is using a portlets to generated tagged data to a page, and then using these tags to enable highlighting of these terms via JavaScript and CSS.... this works great in Firefox, but for some reason I can't get the highlighting to display with IE6... any ideas?

the css :

<style>
.off {
}

.qtOn {
background: yellow;
}

.fiOn {
background: lightblue;
}
</style>


the script ::

<script language="JavaScript">
function change(id, newClass) {
tagged=document.getElementsByTagName(id);

for(i = 0 ; i < tagged.length ; i++){
tagged[i].className=newClass;
}
}
</script>

the call to turn on highlighting for the <qt></qt> tagged stuff :

<a href="javascript:;" onClick="change('qt', 'qtOn');">on</a>

sample of tagged text :

... in their latest <fi>financial</fi> report, <qt>IBM</qt> stated that the net project <fi>revenue</fi> was ...

Thanks!

[jscheuer1]

From what I can tell, IE doesn't support invented tag names as tags in this type of situation. Better to use a real tag like span and access the elements by their class names like:

function change(oldClass, newClass) {
var tagged=document.getElementsByTagName('span');
for(var i = 0 ; i < tagged.length ; i++)
if (tagged[i].className==oldClass)
tagged[i].className=newClass;
}

and:

in their latest <span class="off_fi">financial</span> report, <span class="off_qt">IBM</span> stated that the net project <span class="off_fi">revenue</span> was

The style could be like so but, you really shouldn't need to define the off values in the style section if they have no settings:

<style type="text/css">
.off_fi, .off_qt {
}

.qtOn {
background: yellow;
}

.fiOn {
background: lightblue;
}
</style>

If you are determined to write as little markup as possible and willing to break a number of rules that most browsers will not hold you to, you can hijack the <b> and <u> tags, setting their css to font-weight:normal and text-decoration:none, respectively and use id's instead of classes for the highlight effects. I would advise against this in this situation.

[mwinter]

<style>

The type attribute is required:

<style type="text/css">

.qtOn {
background: yellow;
}

The background property should always be paired with the color property, unless another rule that contains one will apply directly. For example:

p {
  background: transparent;
  color: #000000;
}
p.warning {
  background: #ff4040;
}

All paragraph (p) elements will have an explicitly defined black foreground colour, so paragraphs with a 'warning' class name (which will have a red background colour) don't need to duplicate the color declaration as the cascade will do that.

<script language="JavaScript">

The language attribute has long been deprecated in favour of the type attribute:

<script type="text/javascript">

function change(id, newClass) {
tagged=document.getElementsByTagName(id);

for(i = 0 ; i < tagged.length ; i++){
tagged[i&#93;.className=newClass;
}
}

Neither the tagged, nor the i variable need to be global. Variables should always have their scope limited as far as possible. One can declare function-local variables using the var keyword:

function change(id, newClass) {
  var tagged = document.getElementsByTagName(id);

  for(var i = 0, n = tagged.length; i < n; ++i) {
    tagged[i&#93;.className = newClass;
  }
}

the call to turn on highlighting for the <qt></qt> tagged stuff :

One cannot just invent new element names and expect them to appear in the document tree like all others. In principle, this would be possible with XHTML, but IE doesn't support it.

Use defined elements, like the semantic-neutral span, and use the class attribute (it is a space-separated list) to indicate the 'type' of that element. The change function above could then add to, or remove from, the class attribute any extra names used by your style sheet.

Mike

[cloude000]

Thanks guys, the <span> tag solution worked like a charm.