Javascript / jQuery challenge

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. [url removed, login to view]

- a simple, empty screen, the content window has a min-height of 490px

2. [url removed, login to view]

- 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. [url removed, login to view]

- 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. [url removed, login to view]

- 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. [url removed, login to view]

- 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. [url removed, login to view]

- 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. [url removed, login to view]

- 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!

CSS HTML JavaScript jQuery / Prototype

Numer ID Projektu: #1649235

O projekcie