html5 - How to create an MS Project style web app -



html5 - How to create an MS Project style web app -

as part of personal project understand web better, build web app.

my thought complicated has growing space in it. build page deed kind of 'ms project' finances. have similar construction project, on left list of tasks , on right gantt. instead of displaying milestones , tasks, web app show phased diagram of spend (with maybe comparing between forecast , actual).

i can server side stuff don't know begin structuring html accomplish this. of getting started questions:

how accomplish synchronised vertical scrolling between left , right pane? how accomplish resizeable central diving bar can moved left , right?

i familiar jquery want utilize handle java scripting

(turns out i'm not allowed post images due low reputation. here's google photos link: https://lh5.googleusercontent.com/-yyvk62uplj4/u6ms-_akk1i/aaaaaaaaaty/ksi-h8rvdtu/w1325-h750-no/imag0742+%25281%2529.jpg)

check out illustration uses jquery vertical sync'd scrolling , re-sizing. jsfiddle (i set jquery script below , html , css examples in fiddle)

$(function(){ // set initial; states pf panels $('#panel2').height("75px"); $('#panel1').height($('#panel2').height()); $('#panel1inner').height($('#panel1').height()); $('#panel2inner').height($('#panel2').height()); $('#panel1').width("49.5%"); $('#panel1inner').width($('#panel1').width() + 17); $('#panel2').width("49.5%"); $('#panel2inner').width($('#panel2').width() + 17); //make panels resizable $('#panel1').resizable(); //link panels scrolling $('.linked').scroll(function(){ $('.linked').scrolltop($(this).scrolltop()); }) //force panels react resizing $('#panel1').resize(function(){ var newwidth = $('#container').width() - $('#panel1').width() - 3; $('#panel1inner').width($('#panel1').width() + 17); $('#panel1inner').height($('#panel1').height()); $('#panel2').height($('#panel1').height()); $('#panel2inner').height($('#panel2').height()); $('#panel2').width(newwidth); $('#panel2inner').width(newwidth + 17); }); });

html5 web-applications

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -