MackPexton.com

History

This is a history of my past work. Most of it is dated. If anything, it is a reflection of how programming styles have changed over the years. It at least gives me a place to look up stuff.

Several demonstrations require you to sign in. This is to prevent robots from hammering my site. Just sign in as user demo with a password of demo.

AcmeBase (demo)
AcmeBase is a meta-database where the database schema, lists, forms, lookups, and business rules could be described in loosely formated text files which are used to generate web pages. The demo is a CRM system. To keep robots away, you will need to sign in to the demo system with the user name demo and password demo.
AcmeBase project logo.
Maintenance Console (demo) (small demo)
I worked for a hosting company that had 60 servers to look after, so I ended up making a web site to control the servers and service our customers. The system became comprehensive enough to track and control our servers and load-balance them by moving web domains to and fro, all from our phones (there is a small format web site too). The page tabs are independent so each tab can be working at once. Most of the server command and control functions are logged so that there is a record of what previously happened. Security is based on SSL, Apache authentication, sudo privilege escalation, and ssh certificates. The remote servers are also setup to only pay attention to the control server(s) by restricting access using firewall rules (iptables), ssh configuration (/etc/ssh/sshd_conf), tcp wrappers (/etc/hosts.allow,/etc/hosts.deny), or being on a local private network. The above demo is quite crippled as there is not a bank of servers to control here as if I would want the general public controlling them anyway. But they keep trying and trying so you will need to sign in with the user name demo and password demo.

Javascript

Many of these Javascript projects are now dated. For example, the AcmeMenu project was built to accommodate the dreaded Internet Explorer 5 and 6 and Netscape (remember them?) and consequently has way more code than necessary for today's standard compliant browsers.

Locator (demo)
The locator is a Google Maps application used to lookup the UTM coordinates of any point on the map. A "bomb sight" is overlaid onto the map and its coordinates are recorded when you click it or press the space-bar. A feature is the map scales to your entire browser window — something you use to not be able to do. As this application was written for a real estate company, you can also lookup the location of addresses. You can view it here. This application uses the now dated GMap2 interface to Google Maps.

The following Javascript libraries do not refer to any external libraries or Javascript frameworks such as jQuery.

TreeMenu (javascript)
TreeMenu.js provides a Javascript function that turns HTML <UL> lists into expandable tree menus. It's great for directory listings or category lists.
InlineEditor (javascript)
InlineEditor.js has a function edit_inline() that can be assigned to a button or it can be used as an onclick handler attached to a document element. It creates a little edit form that can be used to change the document element inline without refreshing the page.
ColorPicker (demo)
This color picker studies the interaction between text colors and background colors.
AcmeMenu
AcmeMenu dynamically turns a list of <A> tags into a drop-down, push-up, pop-anyway type of menus.

More

Most of the following projects do not have documentation but the source code is well commented.

Simple Image Utilities (javascript) (php) (demo)
Javascript functions which rotate and magnify images on your web page after the page has been rendered. As most know, Javascript cannot do that by itself. These routines refer to a server side program simgu.php. Here is a demonstration. Note: Debian lenny 5.0 does not include GD imagefilter() in their apache php module, which is used by the following demo. A more extensive demonstration can be found here, which also demonstrates slideshow javascript.
PScroller (javascript) (demo)
A page scroller that works like a horizontal scroll bar.
Scroller example.
Working just like the vertical scroll bars on a page, you can quickly scroll to a specific page in a long list. The appearance of the scroll bar is controlled by CSS styles. Ancillary information can also be displayed besides the page number. For example, the above picture displays the price of the first piece of real-estate displayed on a page. A demonstration of its use is the "Search" button on this site built for a large real-estate company.
NScroller (javascript) (demo)
A number scroller that can also be used to navigate multiple pages of a search. As a variation of the PScroller above, this search This example is a variation of the above MLS search. The "Next" and "Previous" buttons, when held down, scroll the page numbers until let up, at which time the proper page can be displayed.
Calendar (javascript) (popup demo) (full demo)
The calendar.js scripts can be used to create small calendars which can be useful for filling in dates like on this example form. When coupled with a server side program and calendar_report.js these routines can be used to make a full fledged calendar application. The calendar's content is filled in after the calendar is rendered making it easy to interface to database queries. Both demos require you to sign in as demo with a password of demo to ward off robots accessing the site.
resizeCol (javascript) (demo)
This script defines a function make_table_columns_resizable() that makes the columns of any HTML table resizable much like the columns of a spreadsheet. This report demonstrates a table with resizable columns.
TearOffMenu (javascript) (demo)
TearOffMenu puts together AcmeMenu, moveMe, and a resize_me object to produce menus that can be "torn" off the menu tree and positioned anywhere on the screen. Not only that, but once positioned the menus can be resized by clicking and dragging their lower right corner. Look under this icon Menu icon. on this report to find menus that can be torn off.
moveMe (javascript)
moveMe makes any <DIV> tag into a panel that the user can drag around the screen.
selectList (javascript) (demo)
Move items from one <SELECT> list to another. Multiple items can be moved at once, double clicking an item moves it, and selected items can be re-ordered before submitting. Here is an example.
selectScroll (javascript)
The selectScroll.js script defines a function make_select_scroll(select_field_id) that puts buttons at the top and bottom of a <SELECT> list which scrolls the list up or down. It works best with Firefox and it degrades nicely for other browsers. Here is an example illustrating a scrolling list of years in a drop down list.
dom_info (javascript)
The dom_info utility library is referenced by the above scripts to obtain information of the document objects such as an element's width, height, and its style settings. It can read settings in CSS files.
browser_version (javascript)
The browser_version library discovers which browser is being used and sets its flags accordingly. A twist on this browser sniffer is that the main function prints out which flags are set — useful for debugging code. Browser sniffing has pretty much been universally deprecated. Object detection has become the preferred method of discovering browser capabilities.
Top of page.