Hi folks, I'm really very new to javascript, and trying to validate a page to xhtml transitional. I use onselectstart="return false"
So I understand that I am wanting to create a javascript function that will insert that as an id. I even found this http://www.webmasterworld.com/javascript/3054096.htm and he figured out how to do it.
He is putting the onload in the body and setting the ids. Can I do this with a class and not set specific ID numbers?
EDIT - This modified answer incorporates my previous answer with the answer provided by CMS.
This code works in IE 6/7/8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test page</title>
<script type="text/javascript" language="javascript">
window.onload = function() {
var elements = getElementsByClassName(document, 'noselect');
for (var i = 0; i < elements.length; i++) {
elements[i].attachEvent('onselectstart', rfalse);
}
}
function rfalse() { return false; }
function getElementsByClassName(node, classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass, node) {
if (node == null)
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
</script>
</head>
<body>
<h2 class='noselect'>
this text cannot be selected
</h2>
<h2>
this text can be selected
</h2>
<h2 class='noselect'>
this text cannot be selected
</h2>
</body>
</html>
You can use the document.getElementsByClassName method, but it isn't standard yet (it will be part of HTML5), you can be completely sure that it will not work on any IE version, some modern browsers provide a native implementation, but if it isn't available, a loop checking for the specific class you look for can be done.
I personally use the following function, inspired by the Dustin Diaz implementation:
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
Then you can use it like this:
window.onload = function () {
var returnFalse = function () { return false; },
els = getElementsByClassName(document, 'yourClassName'),
n = els.length;
while (n--) {
els[n].onselectstart = returnFalse;
}
};
None of the above solutions worked for me-though I'm sure that was due to user error. We have Jquery already running, and turns out they are already set up for this. We used this code in the head section, and it works great!
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//alert($(".unselectable").length)
var returnFalse = function () { return false; },
els = $(".yourClassNameHere"),
n = els.length;
while (n--) {
els[n].onselectstart = returnFalse;
}
});
</script>