Can't get a jQuery plugin wroked - Direction Aware Hover Effect

Question

I did the same as the tutorial yet I can't get it work. Basically, It's a jQuery plugin that detects the direction that you're coming from with the mouse.

This is the tutorial (Codrops): http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

And my code: http://jsfiddle.net/hk73k/1/

You'll see that there are 3 li's, but only one alert message. So I guess it's something with the JS code.

.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
}
.da-thumbs li a div {
    position: absolute;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
}

$(function () {
    $(' #da-thumbs > li ').each(function () {
        alert('I should be shown 2 more times!');
        $(this).hoverdir();
    });
});

I'm so frustrated. What did I do wrong?

score 0 · Answer 1 · edited Dec 23 '13 at 18:17

0

Fix the JS errors in your jsfiddle console window. That will help you understand the real problem if there is any.

You need to add moderenizr JS to your fiddle.

Here is the fiddle for that: jsfiddle.net/hk73k/2/

edited Dec 23 '13 at 18:17

Afzaal Ahmad Zeeshan

15,669
12
55
103

answered Dec 23 '13 at 17:30

bp4D

915
12
20

That's not the solution! :/ – Afzaal Ahmad Zeeshan Dec 23 '13 at 17:32
@AfzaalAhmadZeeshan the jsfiddle link needs modernizr references. It is throwing outright reference error . After that there are cross domain related errors. Fixing these two may resolve the problem. Why do think it's not a solution? – bp4D Dec 23 '13 at 17:36
In fact, adding modernizr reference to the jsfiddle link fixes the problem. Here is the updated link: http://jsfiddle.net/hk73k/2/ – bp4D Dec 23 '13 at 17:39
Thanks DevPat. I am using the bootstrap framework, will it conflict anything if I'm adding modernizr? Actually, better for is finding a way to make this code work W/o modernizr. Is that possible? – user3121234 Dec 23 '13 at 18:01
Ooh, sorry for the misunderstanding! You're right! :) @DevPat :) – Afzaal Ahmad Zeeshan Dec 23 '13 at 18:17
@user3121234 There will be no conflicts in using bootstrap with modernizr. You can read this [post](http://stackoverflow.com/questions/11209478/is-okay-to-implement-modernizr-with-twitter-bootstrap). However, the plugin in your jsfidle link uses only one property of `Modernizr` object i.e., `csstransitions`. If you don't want to use `Modernizr` then the plugin needs to do browser sniffing and set the value as `true` or `false` based on browser. Read more about this at [Modernizr documentation](http://modernizr.com/docs/). – bp4D Dec 23 '13 at 19:41

Can't get a jQuery plugin wroked - Direction Aware Hover Effect

1 Answers1