Will make it work for a single class. If you want to make it work for multiple classes, you’ll have to split() SRC and loop through each class to compare.
What exactly are you trying to accomplish with the code?
then a list. some of the list items will have 1 class, or 2, or all 3.
i need 3 divs, that when hovered over, make the relevant list items have an opacity of 1.
E.G -
you hover over a div called “brand” and all of the list items who’s class CONTAINS “brand” should light up. onMouseOut they should return to 0.5 (they could be <li class=“brand digital”> and because it contains “brand” the script picks this up and applies an opacity of 1 to that item. (and all the other items containing that class name)
First, you should make a function called hasClass(el, class). indexOf is a bad way of matching classnames, because it would return true for a partial match (e.g. the class “foo-bar” would match a test for class “foo”).
function hasClass(el, class) {
class = class.toLowerCase()
var classNames = el.className.toLowerCase();
classNames = classNames.split(" ");
for (var i = 0; i < classNames.length; i++) {
if (class == classNames[i]) return true;
}
return false;
}
Then your fadeIn / out functions should be altered to use that function. You can reduce fade() to one function for simplicity:
function fade(class, fadeIn) {
var els = document.getElementsByTagName("*");
for (var i = 0; i < els.length; i++) {
if (hasClass(els[i], class)) {
els[i].style.opacity = fadeIn ? '1.0' : '0.5';
}
}
}
And finally, update your html to reference your new function:
never mind!
it works PERFECTLY as is. thank you so much!
one last thing though…how do i change it slightly, so that all the <li>'s are set to opacity 1.
then on:hover the ones that DONT have the classname fade to 0.5 and the ones that do stay at 1? (then they all go back to 1 onMouseOut)
function fade(class, fadeIn) {
var els = document.getElementsByTagName("li");
for (var i = 0; i < els.length; i++) {
els[i].style.opacity = (hasClass(els[i], class) || !fadeIn) ? '1.0' : '0.5';
}
}
here’s the full error:
SCRIPT1010: Expected identifier
line 108 character 23: function hasClass(el, class) {
LOG: [cycle] terminating; zero elements found by selector
sorry THIS is the code that works in FF & Chrome but not Safari or IE:
<script language="Javascript">
function hasClass(el, class) {
class = class.toLowerCase()
var classNames = el.className.toLowerCase();
classNames = classNames.split(" ");
for (var i = 0; i < classNames.length; i++) {
if (class == classNames[i]) return true;
}
return false;
}
function fade(class, fadeIn) {
var els = document.getElementsByTagName("*");
for (var i = 0; i < els.length; i++) {
if (hasClass(els[i], class)) {
els[i].style.opacity = fadeIn ? '1.0' : '0.5';
}
}
}
</script>
If it says “fade is undefined” in IE you may have another piece of javascript that’s causing the JS engine to shut down. That’s the only thing that I can think of… I don’t see how the code above could cause an error in IE.
Try stripping out your other JS and putting it back bit by bit to debug (IE doesn’t have a great way to debug JS unfortunately).
Get that working and then we’ll figure out the other issue.
<script type="text/javascript">
function hasClass(el, class) {
class = class.toLowerCase()
var classNames = el.className.toLowerCase();
classNames = classNames.split(" ");
for (var i = 0; i < classNames.length; i++) {
if (class == classNames[i]) return true;
}
return false;
}
function fade(class, fadeIn) {
var els = document.getElementsByTagName("*");
for (var i = 0; i < els.length; i++) {
if (hasClass(els[i], class)) {
els[i].style.opacity = fadeIn ? '1.0' : '0.5';
}
}
}
</script>
try this: