Did you click the “back to codrops article” link in the upper right?
It explains how this works little better and has a link to download the source, rather than trying to rip it out of the actual rendered source.
This is a CSS effect, not JavaScript.
The JavaScript you’re asking about looks like it is part of the scrolling effect to showcase the different styles of the hover effect… not the actual hover effect itself.
Just use jQuery, it’s already included in your page.
<script>
$('#galleries > a').each(function() {
var _href = $(this).attr('href');
var _url = document.location;
$(this).removeClass('current'); // just go ahead and remove it from all of them
if(_url.indexOf(_href) > -1) {
$(this).addClass('current');
}
});
</script>
Mawburn example was short and sweet and seems pretty straightforward.
problem is I added the script
<script>
$('#galleries > a').each(function() {
var _href = this.href;
var _url = document.location;
$(this).removeClass('current'); // just go ahead and remove it from all of them
if(_url.indexOf(_href) > -1) {
$(this).addClass('current');
}
});
</script>
If you look at your console, you’ll see this error:
Uncaught TypeError: undefined is not a function
Which points to painting2.php line 133. That’s if(_url.indexOf(_href) > -1) {.
That error means it’s trying to use a method that’s not available to the object, namely .indexOf because it’s the only method invoked. That method is a pretty common piece of the JavaScript’s String and Array prototype, so that means _url which comes from document.location is neither of those. Which is right, because it’s an Object, not a String. You can read more about document.location, which says:
To retrieve just the URL as a string, the read-only document.URL property can also be used.
so…
var _url = document.URL;
Should do it. I used the wrong one.
Anyway, it was my fault and that’s my thought process on debugging it. Hope it helps.
