Wikipedia Viewer: almost done, need help with animation. Please give feedback!

Wikipedia Viewer: almost done, need help with animation. Please give feedback!
0

#1

Hi,

Here is my wikipedia viewer: https://zelite.github.io/A-Wikipedia-Viewer/

I’m using http://daneden.github.io/animate.css/ to make the search results come floating from the left.
However, at the moment they all come at once. How I can make them come one at a time with a very small delay?

Also, I would like to have the all search result div be the link for the article and not only the “read article” text. I know I should just make the a tags around the div, but it’s not so clear how to do that in my javascript.

If anyone could take a look and provide some guidance: https://github.com/zelite/A-Wikipedia-Viewer/blob/gh-pages/js/searchWiki.js


#2

searchWiki.js
Either wrap every h2, p in a tag
Either make click handler for div, but just create prop on div for referencing url, like data-href, and then extract that from clicked div, and use like
window.open(…

Animation
U can use setTimeout to handle delay, jst wrap append section, and set second paremeter, something like
i * 200


#3

Thanks for the help. I implemented the click handler for the div.

The animation turned out to be too tricky because I’m appending divs in a for loop, and the setTimeout requires a function inside it, which in the for loop it’s tricky to create. I’ll leave that alone for now.

Here’s the final version: https://zelite.github.io/A-Wikipedia-Viewer/

All feedback welcome! :slight_smile: