How can I convert this jQuery handler on pure Javascript cross-browser?

Question

I have this jQuery handler :

$('a[rel="entra_handler"]').hover(
    function() {
        $(this).children().fadeOut(200);
    },
    function() {
        $(this).children().fadeIn(200);
    }
);

and I'd like to convert it to pure Javascript, that works with every kind of browsers. Is it easy and possible?

Well, I suppose you could use a JavaScript framework that's abstracted out the cross-browser issues. — Charles Sprayberry, Jun 22 '11 at 15:08
@mark seriously though, this is not trivial to do in pure JavaScript. You will want to rely on *some* framework that has worked out the numerous possible issues with finding child elements, fading, etc. — Pekka, Jun 22 '11 at 15:09
Is there a reason WHY you would want to use pure Javascript? One major reason jQuery and frameworks like it exist is simple cross-browser compatibility. It's obviously possible since it is attainable with jQuery, but it's definitely not going to be easy. I would expect that snippet to convert into at least 20 times the amount of code. — Fosco, Jun 22 '11 at 15:09
I suppose you could look at the jquery source to see how the methods you have used are implemented and go from there. — rajasaur, Jun 22 '11 at 15:09
jQuery does the cross browser support for you. Please give a reason why you would like to reinvent the wheel? — DanielB, Jun 22 '11 at 15:10
@Pekka no. jQUery is different from a DOM shim. You want a library that implements DOM3 events. — Raynos, Jun 22 '11 at 15:12
@Pekka there's a difference between using a library that abstracts out cross browser issues. One that defines `.addEventListener` and jQuery. `.addEventListener`. You just need a library that implements [DOM level 3 events w3 spec](http://www.w3.org/TR/DOM-Level-3-Events/) — Raynos, Jun 22 '11 at 15:15
@mark: please read the answers [here](http://stackoverflow.com/questions/978799/is-there-an-easy-way-to-convert-jquery-code-to-javascript) and ask a specific question if you run into trouble. — Shog9, Jun 22 '11 at 15:18

score 6 · Accepted Answer · answered Jun 22 '11 at 15:09

6

Well for one thing -- jQuery was made to be cross browser.

There is such thing as a pure js fadeout, but it's hideously complicated. (thanks @Pekka)

Also you would need some library do to the special selecting you want in the DOM.

answered Jun 22 '11 at 15:09

Naftali

144,921
39
244
303

`There is no such thing as a pure js fadeout without a long animation function.` of course there is. But it's hideously complicated – Pekka Jun 22 '11 at 15:10
@Pekka yes, that is basically what the intended wording was. i will fix that – Naftali Jun 22 '11 at 15:11
@Pekka I doubt it's that complicated. – Raynos Jun 22 '11 at 15:13
@Raynos if you want cross-browser support down to older IEs, I'm fairly sure it *is* going to be rather complicated. There is a number of quirks that need working around for it to work smoothly. Look at jQuery's `animate()` for example https://github.com/jquery/jquery/blob/master/src/effects.js#L122 – Pekka Jun 22 '11 at 15:17
@Pekka Oh you need a shim for `.addEventListener` once you have that it's smooth sailing. Of course `.animate` in jQUery has feature bloat. – Raynos Jun 22 '11 at 15:18

score 2 · Answer 2 · answered Jun 22 '11 at 15:13

2

Is it easy and possible?

No. Not without any libraries.

if you use DOM & ES5 shims then you might be able to get to some neat small code.

answered Jun 22 '11 at 15:13

Raynos

166,823
56
351
396

How can I convert this jQuery handler on pure Javascript cross-browser?

2 Answers2