I've got a rather complex DHTML application that was initially constructed
using IE's quirks mode (no doctype at all).
I'd like to make the modifications to allow it to use strict mode (and
hopefully gain FireFox compatibility more easily).
Nearly all of the applications box management is done in one function, a
layout manager that's called onResize (allowing the application to flow into
whatever frame size the user likes - to a certain point).
I've appended it below to give you an idea of the complexity I'm looking at.
Right now IE 6 compatibility is all that's required (or budgeted for) but
I'd like to be as standardized as possible to future-proof it as much as
possible.
Any good resources for doing such a conversion before I go looking myself?
Thanks.
Jim Davis
function App.SetLayout() {
// Create the Layout information tree
App.Layout = new Object();
// Main Application elements
App.Layout.App = document.getElementsByTagName('HTML')[0];
App.Layout.Menubar = document.getElementById('App_Menubar');
App.Layout.Statusbar =
document.getElementById('App_Statusbar');
App.Layout.Body = document.getElementById('App_Body');
App.Layout.Sidebar = document.getElementById('App_Sidebar');
App.Layout.MainContent =
document.getElementById('App_MainContent');
// Windowing elements
App.Layout.Mask = document.getElementById('App_Mask');
App.Layout.ModalContent =
document.getElementById('App_ModalContent');
App.Layout.LoginContent =
document.getElementById('App_LoginContent');
// The sidebar Search controls
App.Layout.SideBar_Search_Frame =
document.getElementById('SideBar_Search_Frame');
App.Layout.SideBar_Search_Top =
document.getElementById('SideBar_Search_Top');
App.Layout.SideBar_Search =
document.getElementById('SideBar_Search');
App.Layout.SideBar_Search_Bottom =
document.getElementById('SideBar_Search_Bottom');
// The sidebar Pods
App.Layout.SideBar_Pods_Frame =
document.getElementById('SideBar_Pods_Frame');
App.Layout.SideBar_Pods_Top =
document.getElementById('SideBar_Pods_Top');
App.Layout.SideBar_Pods_Title =
document.getElementById('SideBar_Pods_Title');
App.Layout.SideBar_Pods =
document.getElementById('SideBar_Pods');
App.Layout.SideBar_Pods_Toolbar =
document.getElementById('SideBar_Pods_Toolbar');
App.Layout.SideBar_Pods_Bottom =
document.getElementById('SideBar_Pods_Bottom');
if ( App.Layout.App.clientHeight < App.MinHeight ) {
alert(App.Content.MinHeightWarning);
App.SetWindowUsableSize(App.MinHeight,
App.Layout.App.clientWidth);
};
if ( App.Layout.App.clientWidth < App.MinWidth ) {
alert(App.Content.MinWidthWarning);
App.SetWindowUsableSize(App.Layout.App.clientHeight,
App.MinWidth);
};
// Set positioning for major Layout elements
App.Layout.Body.style.height = App.Layout.App.clientHeight -
( App.Layout.Menubar.offsetHeight + App.Layout.Statusbar.offsetHeight);
App.Layout.Body.style.width = App.Layout.App.clientWidth;
App.Layout.Sidebar.style.width = 205;
App.Layout.Sidebar.style.height =
App.Layout.Body.offsetHeight - ( parseInt(App.Layout.Sidebar.style.padding)
* 2 );
App.Layout.MainContent.style.width =
App.Layout.Body.offsetWidth - App.Layout.Sidebar.offsetWidth - (
parseInt(App.Layout.MainContent.style.padding) * 2 );
App.Layout.MainContent.style.height =
App.Layout.Body.offsetHeight - (
parseInt(App.Layout.MainContent.style.padding) * 2 );
App.Layout.MainContent.style.left =
App.Layout.Sidebar.offsetWidth;
App.Layout.SideBar_Pods.style.height = 0;
App.Layout.SideBar_Pods_Frame.style.height = 0;
var Temp_SideBar_Pods_Frame_Height =
App.Layout.SideBar_Pods_Frame.offsetHeight;
App.Layout.SideBar_Pods_Frame.style.height =
parseInt(App.Layout.Sidebar.style.height) -
App.Layout.SideBar_Search_Frame.offsetHeight -
parseInt(App.Layout.SideBar_Search_Frame.style.marginBottom);
App.Layout.SideBar_Pods.style.height =
App.Layout.SideBar_Pods_Frame.offsetHeight - Temp_SideBar_Pods_Frame_Height;
// Set the App mask
App.Layout.Mask.style.left =
parseInt(App.Layout.Body.offsetLeft);
App.Layout.Mask.style.top =
parseInt(App.Layout.Body.offsetTop);
App.Layout.Mask.style.height = App.Layout.Body.style.height;
App.Layout.Mask.style.width = App.Layout.Body.style.width;
// Set positioning for the Modal Content Window
App.Layout.ModalContent.style.left =
parseInt(App.Layout.Body.offsetLeft) + 15;
App.Layout.ModalContent.style.top =
parseInt(App.Layout.Body.offsetTop) + 15;
App.Layout.ModalContent.style.height =
parseInt(App.Layout.Body.style.height) -
(parseInt(App.Layout.ModalContent.style.padding) * 2) - 30;
App.Layout.ModalContent.style.width =
parseInt(App.Layout.Body.style.width) -
(parseInt(App.Layout.ModalContent.style.padding) * 2) - 30;
// Set positioning for the Login Content Window
App.Layout.LoginContent.style.left =
parseInt(App.Layout.Body.offsetLeft) + 15;
App.Layout.LoginContent.style.top =
parseInt(App.Layout.Body.offsetTop) + 15;
App.Layout.LoginContent.style.height =
parseInt(App.Layout.Body.style.height) -
(parseInt(App.Layout.LoginContent.style.padding) * 2) - 30;
App.Layout.LoginContent.style.width =
parseInt(App.Layout.Body.style.width) -
(parseInt(App.Layout.LoginContent.style.padding) * 2) - 30;
};
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Get the mailserver that powers this list at
http://www.houseoffusion.com/banners/view.cfm?bannerid=17
Message: http://www.houseoffusion.com/lists.cfm/link=i:5:158303
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/5
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:5
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.5
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
