Javascript / jQuery challenge

IN PROGRESS
Bids
7
Avg Bid (USD)
$381
Project Budget (USD)
$250 - $750

Project Description:
Intro:

- I'm working on the integration of a new module in an existing web application.
- The additional module is be a completely seperate application, and will be included in the existing application by using an <object>, <frame> or <iframe> (whatever works best).
- Major challenge: the additional module needs to have the <em>exact</em> same look and feel as the existing application.
- HTML/CSS have been adjusted, but the existing application has a couple of features that will require some nifty Javascript code - that's what this project is all about.
- The project actually consists of 3 different Javascript challenges - main challenge will probably be to make them work together...


A bit more detail:

- A simplified version of the relevant screens of the existing application:

1. http://www.tfo.be/jobs/lab/demo2.htm
- a simple, empty screen, the content window has a min-height of 490px

2. http://www.tfo.be/jobs/lab/demo.htm
- this same screen, containing a large table
- note how the table fills the space between div#searchPanel_-1 and div#BUTTON_Panel1_-1
- note the internal scrollbar on the table
- note how div#BUTTON_Panel1_-1 sticks to the bottom of the browser window on a larger screen

3. http://www.tfo.be/jobs/lab/demo1.htm
- this same screen, with the same table, but with less data
- note the fact that the table stretches to the bottom of the screen

(the source code of the existing application is pretty messy, nothing to be done about that, but since it's completely separate this won't be a problem for the current project)


- A simplified version of the current state of the project, with the embedded additional module, and an explanation of the problem, can be found on the following links (szip file for all source files):

4. http://www.tfo.be/jobs/lab/noproblem/
- The additional module basically consists of 2 screens (menu + main screen), and has been embedded (a bit awkwarky, I admit) with a relatively positioned <object> and a <frameset> containing the two screens.
- The reason for this awkward way of embedding are the very strong restrictions on the existing application: nothing in the code outside of the <object> can be changed.
- The better news: if necessary, the <object> can be replaced by an <iframe>. Also, we are free to do whatever we want within the <object> - so if necessary, we can also replace the <frameset> by two <iframes>.
- On this particular screen, there's no problem: the content is less high than the min-height of 490px, and behaviour is exactly as we want it.

5. http://www.tfo.be/jobs/lab/problem/
- This screen shows a first problem: if the content exceeds the min-height of 490px, a scrollbar appears at the border of the frame.
- As you can read in the further description on this screen, the height of the content window should be passed to the parent element(s) - so content is controlled by one browser scrollbar.

6. http://www.tfo.be/jobs/lab/table/
- As you can read in the description on this screen, the table should be (visually) stretched to the available height (exactly like example 3)
- If changes need to be made to the inner html code: no problem

7. http://www.tfo.be/jobs/lab/largetable/
- As you can read in the description on this screen, the table should be made scrollable, and should be (visually) stretched to the available height (exactly like example 2)
- If you can just reuse the code that's been used in the existing application, great. If you need to use a custom solution, no problem either.
- If changes need to be made to the inner html code: no problem


Final thoughts + requirements:

- All of the above needs to function correctly on IE6, 7, 8 and 9, and all modern browsers.

- If you need additional information, do not hesitate to ask.
- Please only respond if you have sufficient Javascript experience, and if you are confident you can do the job.

- If you made it this far in my explanation: wonderful - thanks for your attention!

Skills required:
CSS, HTML, Javascript, jQuery / Prototype
Additional Files: lab.zip
Hire ptriek
Project posted by:
ptriek Belgium
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.