The Code

From CSScripting

Contents

Instructions

  • Use the 'edit' tab to add your modifications to the code (see Help:Editing).
  • Unfinished code (skeletons) is ok, if properly commented.
  • Use the 'discussion' tab if you need to post for any other purpose.
  • You may create new pages as necessary.


Code Overview


1. LoadCSS - Retrieves and caches the stylesheets content as a text string.

2. ParseCSS - Parses the cached CSS strings looking for CSS3 multi-col properties.

3. CSSQuery - Finds the DOM element to which the CSS rule applies.

4. GetElementDimension - Retrieves the dimension of the affected element (width, padding, border).

5. ComputeColumnWidth - Compute column width, column gap and rule width.

6. CreateWrapper - Wraps the affected element into a DIV element.

7. ComputeColumnHeight- Retrieves the column height once the desired width is applied.

8. FindSplitPoint - Find the deeped nested element that 'sits' where the column content must be splitted.

9. CreateColumn - Creates a new column and move the contained elements that are 'below the fold' to the new column.

10. SplitElement - Removes text content from the element until the desired height is met. Add the removed content to a new element added at the top of the new column.

11. Repeat 8,9 and 10 until the number of column desired is reach.

12. Repeat 4 to 11 until all the elements have been processed.

13. Repeat 3 to 11 until all the CSS rules have been applied.


See The Script for the current full version.


Coding requirements

  • The code should be Unobtrusive.
  • The code should be Self-sufficient.
  • The code should degrade gracefully.
  • The code should work across major browsers.


Other Resources

DOM_Dimensions