I’m currently working on a web application (not a web “page”) that will combine ESRI mapping and graphics with data from a land and building permitting system. Why I call this an application rather than a page is that it is truly a JavaScript application, presenting maps and data to the user. The format makes used of the full width and height of the browser window so there’s no scrolling up or down to find hidden ‘stuff’.
Originally, the code to make the presentation divs stretch to the full window height and width were written in javascript and picked up the window resize event to re-draw the divs to the right size whenever the window changed size. Then I saw this post by Steve Sanderson on full-height application layouts. It wasn’t exactly ‘life changing’ but it did simplify my code considerably. Having CSS do all the window sizing work makes my life ever so much simpler, and allowed me to get rid of some complicated JavaScript code. Steve’s blog goes on to talk about pane transitions and history, but he does leave out something important (to me at least).
One feature that I’d gotten working is to allow the user to use ‘dragging’ with the mouse to resize the content and sidebar panes. The way this works is that if you have a main content div or ‘pane’ A and a sidebar div ‘C’ and you’d like to allow your user to dynamically resize the two by dragging with the mouse, you introduce a narrow div ‘B’ as the gutter between the two content divs. So, the layout is something like this:
[——A——][B][–C–].
You then make ‘B’ draggable, and in the on-Drag function you resize the widths of ‘A’ and ‘C’ so that they follow ‘B’. Once the drag operation is complete, your layout could look something like this:
[—-A—-][B][—-C—-].
It’s far simpler in practice than it reads on the page. Anyway, the code to make this happen (Assuming that you’re using Steve’s CSS row and col definitions) is:
$('#B').draggable({ drag: function (obj, ui) { var prevright = $(this).parent().width() – ui.position.left; $(this).prev().css('right', prevright); var nextwidth = prevright – $(this).width(); $(this).next().css('width', nextwidth); }, stop: function () { } });
This just modifies the width of the previous and next divs so that they ‘fit’ around the moved div. Not much, is it? But it adds a layer of functionality and user-control that can really set apart your web application.
Leave a comment