I made a WWII timeline in HTML and JS for a school project, thought I would share it if anyone is interested.

Timeline: http://toppagedesign.com/intime/
API: http://toppagedesign.com/intime/api.html




Feel free to let me know about bugs, usability issues, and misspellings. Smile
I'm seeing problems transitioning with your timeline. Seems like blacked-out/hidden images are being placed on top of visible ones.

Looks nice, although my only suggestion would be have some way for the user to scroll left/right rather than using a scrollbar. Maybe overlaid arrows? Or track the cursor when it approaches the sides to ease into a smooth scroll?
You can use the scroll wheel, though arrows is a good idea too...

Could you give me a screenshot of the black image? Also, what browser are you using?
You are relying on the end-user to actually have a functioning horizontal scrollwheel.

Here:
AHelper wrote:
Looks nice, although my only suggestion would be have some way for the user to scroll left/right rather than using a scrollbar. Maybe overlaid arrows? Or track the cursor when it approaches the sides to ease into a smooth scroll?
In viewing the source, I discovered a reference to mousewheel.js, and lo and behold, scrolling the mouse wheel makes the timeline scroll from side to side. I think that should be more obvious.
AHelper: hmm, looks like the jpeg is not completely loaded...

Kerm: ok, I'll see if I can make it more obvious. Smile
This is not related to the jpeg loading, that jpeg in the image already displayed in .fullscreen. Looking through webkit bugs, it looks like they had a lot of issues in the past with tags not rendering themselves when they were updated in any way if they were position: fixed;. My guess is that the background changing isn't updating the entire div on the screen.

<edit>

Those squares represent the compositing layer borders, so it is an internal rendering problem. Submitting your page as a bug report would probably be best.
Hmm, just checked it in chromium and it seems fine... You were using Google Chrome, right?
Google Chrome for x86_64 Linux version 35.0.1916.153 (Official Build 274914).
Hmm... I wonder if something happened in version 35 that makes it do that, or maybe chrome's rendering engine is modified or something? I have Version 34.0.1847.116 Ubuntu 12.04 (260972) 32-bit and it looks fine...


EDIT:

Oh wait, now I'm getting the problem, but only on some dates, and scrolling one click makes it go away...
Nice, it looks professional the only thing that I would recommend you take note of is you have an extra </span> on line 148.
This looks great!

I, too, am getting the same picture issue as AHelper using Google Chrome (Version 35.0.1916.153) using Windows 8.

And on the same machine, Ubuntu 14.04 Google Chrome (Version 35.0.1916.153)
Really this is strange I am using google chrome Version 35.0.1916.153 on Gentoo GNU/Linux x86_64 and does not work as I previously thought it did.
However the issue is not present in firefox 30.
If a minimal testcase can be created, a bug should be submitted with chromium (I think bugs for chrome go to chromium first, not sure). I have been googling for a while and haven't found anything.
I have added arrow buttons now Wink
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Page 1 of 1
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement