JavaScript / jQuery GURU required for difficult graphical webpage project - repost

You MUST have high-level skills with JavaScript and/or jQuery to apply for this project. Do NOT apply unless your skill level is EXCELLENT!

The project involves:

* graphics being drawn by JavaScript

* drag-and-drop items on a webpage

You are required to build a user-interface VERY similar to the one described here: [url removed, login to view]

This video shows a web-based facility for placing singers onto "risers", when the singers are standing on stage singing in a choir. "Risers" are steps where singers stand to sing. The larger rows at the back, which contain more singers, are higer up. This way, all singers can be seen by the audience.

I only require the functionality described from 0:43 to 3:00 in that video. I require several minor changes from what is described in the video, but the video summarised quite well what I need.

The page you create will be part of a larger web-application written in PHP, but this project does not include any server-side programming.

Here's what's NOT required from the video:

* The page header and left menu. I only require you to create the functional graphical area in the main part of the page (the "risers") and the controls immediately above and below it.

* The "Filter Setting" drop-down list is not required

* The "Sections" and "Front row: even/odd" controls should be combined into a single control called "Number in Front Row", which will be a drop-down list containing the numbers from 1 to 20. When the user selects a value from the drop-down, the risers area should redraw to show a larger or smaller set of risers. The row behind the front row should contain space for exactly one more person than the front row, and the next row should contain space for one more person, etc etc. The people are always centred on the risers. The risers will always be curved, and the more people in the front row, the more of an arc the risers will become. When there are 20 singers in the front-row, the risers should form a semi-circle.

* The "Display" drop-down doesn't require the "Voice type" option

* The "vertical" lines separating the "sections" of the risers are not required to be drawn, but one line should always be drawn vertically down the middle of the risers.

* The "Save" button at the bottom does not require a name to be specified, and there is no need for a "delete" button. Nor is there any need for a "save a copy" tickbox. Nothing below that tickbox is required either

* The tabs across the top ("View", "Edit", "Outline", etc) are not required (nor is anything above them).

All other functionality and visuals are required.

When the PHP application creates the page, the full list of singers (including URLs of their photos) will be provided within the page itself. If you prefer, this can be provided via an AJAX call (whatever you prefer). The parameters of the risers (number of rows, number of singers in the front row, and the current placement of all singers) will also be provided within the page (or via AJAX). The format that this data is provided in can be any format you want (XML, JSON, a simple array of JavaScript objects embedded in the page, etc).

When the save button is pressed, the riser configuration (placement of each singer) must be submitted to the server. Again, you can send this data any way you prefer.

There will also be an extra parameter passed: Whether the page should be in "Read-only" or "Editable" mode. In "read-only" mode, none of the controls will be displayed, and drag-and-drop will not be enabled.

This needs to work in ALL major browsers, including IE7 and iPad (phones not required).

If you require it, I can give you access to a working version of the page shown in the video, but you must NOT copy the code from that page. All code must be either open-source or created by you.

Please watch this video several times before quoting. There is quite a complex piece of coding.

Kemahiran: Reka Bentuk Grafik, HTML, Javascript

Lihat lebih lanjut: xml guru, www graphical design com, where is guru, what is server side programming, what is.json, what is guru.com, what is guru, what is graphic design major, what is embedded programming, what is application programming interface, what is an array in programming, what is an application programming interface, what is a graphic design major, what graphic design always do, what does ajax stand for, what can you do with a graphic design major, what can i do with a graphic design major, what a person needs to create a web page, webpage format, web enabled programming in c#, web design guru, web design from outline, web design for phones, web design drag and drop, watch video web design

Tentang Majikan:
( 8 ulasan ) Mullumbimby, Australia

ID Projek: #4140858

2 pekerja bebas membida secara purata $625 untuk pekerjaan ini


hello i can help you with that let me know to discuss further thank u

$1000 AUD dalam 30 hari
(52 Ulasan)

No problem,sir. Pleasure to see this work...i can guarantee quality . Thanks and regard

$2350 AUD dalam 5 hari
(9 Ulasan)

hi this is devtechsol availble 24/7 for serving the services , have done the work like this same drag drop , rotate , add pic del it and much more kinldy give a moment to show and see you pm Kind Regards Devtechs Lagi

$250 AUD dalam 0 hari
(4 Ulasan)

Hi Mvirtue ! We have gone through your posted project details & have the complete idea of the work, what & how it is to be done & turn it into successful project. KINDLY CHECK PMB FOR FULL DETAILS & REPLY WITH YOUR PR Lagi

$749 AUD dalam 10 hari
(0 Ulasan)