Click here to Skip to main content
16,020,313 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
My final is goal to implement a app like http://www.crystal.ch/abb/power_systems_landscape/[^] using html5.

As you see, we may need a large(2000*600) canvas, but im not sure.

Can anyone give me idea just for following behavior of above link ?

1. Scrolling left-right smoothly using mousemove and mousedown operation
2. Scrolling left-right smoothly according to power system selection
3. Zoom in zoom out
4. Fade out effect like plus iconic circles

Any kind of idea would be appreciated.
Posted
Updated 25-Feb-12 18:02pm
v2

1 solution

Start by looking some HTML5/CSS3 and look at how to use overflow, position, top, left, width and height styles to get the canvas to move show only one portion. Increasing width/height proportionally will get you zoom functionality. Finally, look at jQuery - type it into Google. Learn how to use it for manipulating the above styles in JavaScript and for handling events. These few things are all that you need. I suggest you look up the W3Schools website for learning HTML5/CSS3.

Hope this helps,
Ed
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900