views:

30

answers:

2

I have system-generated links which I hide manually. Now I want to remove the link's title attributes sicne those are copied when the user copies surrounding text.

<html>
<head>
<script type="text/javascript">

    var getElementsByClassName = function (className, tag, elm){
    if (document.getElementsByClassName) {
        getElementsByClassName = function (className, tag, elm) {
            elm = elm || document;
            var elements = elm.getElementsByClassName(className),
                nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
                returnElements = [],
                current;
            for(var i=0, il=elements.length; i<il; i+=1){
                current = elements[i];
                if(!nodeName || nodeName.test(current.nodeName)) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    else if (document.evaluate) {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = "",
                xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
                returnElements = [],
                elements,
                node;
            for(var j=0, jl=classes.length; j<jl; j+=1){
                classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
            }
            try {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
            }
            catch (e) {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
            }
            while ((node = elements.iterateNext())) {
                returnElements.push(node);
            }
            return returnElements;
        };
    }
    else {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = [],
                elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
                current,
                returnElements = [],
                match;
            for(var k=0, kl=classes.length; k<kl; k+=1){
                classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
            }
            for(var l=0, ll=elements.length; l<ll; l+=1){
                current = elements[l];
                match = false;
                for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
                    match = classesToCheck[m].test(current.className);
                    if (!match) {
                        break;
                    }
                }
                if (match) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    return getElementsByClassName(className, tag, elm);
};

function notitle() {
  var mylist=document.getElementsByClassName("notitle");
  for (j=0; j<mylist.length; j++) {
    var listitems= mylist[j].getElementsByTagName("a");
    for (i=0; i<listitems.length; i++) {
      listitems[i].removeAttribute("title");
    }
  }
}
</script>
</head>

<body onLoad="notitle()">

<p>Before hidden link 1: <span class="notitle" style="display: none;">
<a href="#Foo" title="Foo">This link should have no title attribute</a>
</span>After hidden link 1.</p>

<p>Before hidden link 2: <span class="notitle" style="display: none;">
<a href="#Foo" title="Foo">This link should have no title attribute</a>
</span>After hidden link 2.</p>

<p>Before hidden link 3: <span class="notitle" style="display: none;">
<a href="#Foo" title="Foo">This link should have no title attribute</a>
</span>After hidden link 3.</p>
</body>
</html>

How should the function look like correctly? I once got it working using this

function notitle() {
  var mylist=document.getElementById("notitle");
  var listitems= mylist.getElementsByTagName("a");
  for (i=0; i<listitems.length; i++) {
    listitems[i].removeAttribute("title");
  }
}

but that only applied to the first link.

+1  A: 

Your approach is correct but you're using the same id multiple times. Either make sure the id's are different, or use a generic class name and retrieve the elements that way.

Peter Kruithof
A: 

that is because you should't give the same id attribute to multiple elements. The id attribute must be unique all over your document. if not it only finds the first element with this id.

try class="notitle" instead of id="notitle" and you JS should look like this:

function notitle() {
  var mylist=document.getElementsByClassName("notitle");
  for (j=0; j<mylist.length; j++) {
    var listitems= mylist[j].getElementsByTagName("a");
    for (i=0; i<listitems.length; i++) {
      listitems[i].removeAttribute("title");
    }
  }
}

As I've just learned this would not work cross browser, I would suggest to use a Javascript framework for this kind of propblem, because such a framework is crossbrowser compatible.

You can add the following script to your website to make it work in all browsers: http://code.google.com/p/getelementsbyclassname/downloads/detail?name=getElementsByClassName-1.0.1.js

It's far easier if you would use some JavaScript Framework. Here an example for jQuery:

function notitle() {
  $(".notitle a").removeAttr("title");
}
jigfox
You should note that document.getElementsByClassName is not supported by all browser/versions.
Peter Kruithof
@Peter Kruithof: Thanks for this tip. I wasn't aware of this.
jigfox
Thanks, I tried the class version (as updated on top) but couldn't make it work in latest FF and Chrome.
Martin
@Martin: Did you change the javascript to? So it looks for classname instead of id?
jigfox
Yep, as on top. Opera and IE fail too.
Martin
try to add the script I added to my answer, or start using some framework. It will make your work with javascript a lot easier.
jigfox
Thanks. Will try :)
Martin
It should work in FF, Safari and Chrome. I've found the error: it was a typo `lenght` should be `length`
jigfox
So the function should work in these browsers without the getElementsByClassName-1.0.1.js script?I can't get it working. How to include your script? I can understand if you give up here :D I think using jQuery just for this little addition is too much atm.
Martin
yes it should work in these browsers if you correct your code. To Include the file: Download, put it on your webserver, add it to the header of your html.
jigfox
Updated top post. Doesn't work. I feel dumb :P
Martin
It works for me: http://jsfiddle.net/t9vmL/1/
jigfox
Alright, it was the missing `notitle();`. Thanks for the patience with me :)
Martin