My partner put together this piece of Javascript to “un-class” all anchors which were childnodes of list items and add the class “selected” to the anchor that is clicked…
<script type="text/javascript">
function CngClass(obj){
ulist = obj.parentNode.parentNode;
if (ulist.hasChildNodes() ) {
liElems = ulist.childNodes;
// Loop through the children
for(c=0; c < liElems.length; c++) {
if ( liElems[c].hasChildNodes() ) {
aTags = liElems[c].childNodes;
for(a=0;a<aTags.length;a++) {
aTags[a].className='';
}
}
}
}
obj.className='selected';
}
</script>
We added the “un-classing” because we were having an issue where if more than one instance of “slider” was used, selecting any other cleared all of them. We needed them to function independently of each other as there could be several per page.
This works great in Firefox and in IE8 but unfortunately, IE7 is choking on line 29, character 5:
aTags[a].className=' ';
Then giving me an “Object doesn’t support this property or method” javascript error. We can’t figure out what’s going on… anyone out there care to try it?
Full Page code here:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" media="screen" href="slider_test.css" />
<title>Privacy UI - Privacy Level Slider</title>
<script type="text/javascript">
/*<![CDATA[*/
function CngClass(obj){
ulist = obj.parentNode.parentNode;
if (ulist.hasChildNodes() ) {
liElems = ulist.childNodes;
// Loop through the children
for(c=0; c < liElems.length; c++) {
if ( liElems[c].hasChildNodes() ) {
aTags = liElems[c].childNodes;
for(a=0;a<aTags.length;a++) {
aTags[a].className='';
}
}
}
}
obj.className='selected';
}
/*]]>*/
</script>
</head>
<body>
<!-- begin slider instance 1 -->
<div id="form1PrivacySlider1" class="slider">
<ul class="bar">
<li class="deny"><a onclick="CngClass(this);" id="POSITION_NOT_ALLOWED" href="javascript:void(0);">Deny</a></li>
<li class="askDeny"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_GRANTED" href="javascript:void(0);">Ask Deny</a></li>
<li class="askAllow"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_NO_RESPONSE" href="javascript:void(0);">Ask Allow</a></li>
<li class="notify"><a onclick="CngClass(this);" id="NOTIFY_POSITION" href="javascript:void(0);">Notfiy</a></li>
<li class="allow"><a onclick="CngClass(this);" id="POSITION_WITHOUT_NOTIFY" href="javascript:void(0);">Allow</a></li>
</ul>
</div>
<!-- end slider instance 1 -->
<!-- begin slider instance 2 -->
<div id="form1PrivacySlider2" class="slider">
<ul class="bar">
<li class="deny"><a onclick="CngClass(this);" id="POSITION_NOT_ALLOWED" href="javascript:void(0);">Deny</a></li>
<li class="askDeny"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_GRANTED" href="javascript:void(0);">Ask Deny</a></li>
<li class="askAllow"><a onclick="CngClass(this);" id="NOTIFY_POSITION_IF_NO_RESPONSE" href="javascript:void(0);">Ask Allow</a></li>
<li class="notify"><a onclick="CngClass(this);" id="NOTIFY_POSITION" href="javascript:void(0);">Notfiy</a></li>
<li class="allow"><a onclick="CngClass(this);" id="POSITION_WITHOUT_NOTIFY" href="javascript:void(0);">Allow</a></li>
</ul>
</div>
<!-- end slider instance 2 -->
</body>
</html>
Thanks in advance to anyone who cares to take a shot at this one!