Search for a Functional CSS Layout

initResize() function

initResize() takes two arguments, the first argument is the id of the resize div, the second is an array of elements that must be moved with the handle, this array needs to include the resize handle as well. Using the initResize() function isn't as simple as I hoped it would be. The problem I ran into while writing the code is that there is no way to determine the original layout of the page; getComputedStyle() returns everything in fixed pixel values so the code can't distinguish between an element that is positioned to the right with a fixed width and an element that is fixed to the right and left with auto width, etc.

Therefore, the function needs to be told about each element that will be affected and how it is positioned relative to the resize handle. The second argument must be a array of objects with the following properties

The initResize() code might look a little strange. Since there are a variable number of arguments for this function and a lot of different code paths. I wanted to avoid needing to loop thru the elements and evaluate multiple if statements every time the handle moved, so I decided to build the function as a string and then use eval() to turn it into code. I think the results are great, clean code with no loops or conditions, but I have very little knowledge on the subject and I would appreciate some feedback.

Javascript to Initialize the Resize Handle

1 2 3 4 5 6 7 8 function onLoad() { /* set up the resize handle */ var elements = [ {n:'linkHandle_div',a:'left'}, {n:'link_div',a:'width',p:'left'}, {n:'content_div',a:'left'}]; initResize('linkHandle_div', elements); }