Campus Dining Website

Campus Dining

This is a project that I worked on for the Office of Campus Dining at Vanderbilt University. The purpose is to display live capacity data for the many dining facilities across campus. The live data comes from an API developed by a company called Occuspace that provided the sensor technology installed in each facility.

View the Demo

Decision Tree
Vertical Pagination Demo

Vertical Pagination

This is a light weight plugin that I developed which allows for multiple stacked content panels on a single page. A sticky navigation control will adjust automatically based on the number of panels used. Arrows in the control advance the current panel up and down and a block in between them will expose a full menu so that the user can choose a panel anywhere in the stack. I also developed a version of this — xyPanels — that includes an optional line of horizontal panels along each point in the vertical stack. In addition to the demo, I also have a working example of this for the Vanderbilt Nursing Report.

View the Demo

Nursing Report
Summit Webpage
Parallax Scrolling

Parallax Containers

For those unfamiliar with the parallax effect in web design, Wikipedia has a good definition:

Parallax scrolling, also known as “asymmetrical scrolling,” is a technique in computer graphics and web design where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.

I built a plugin that supports a background container with multiple foreground containers — all with unique scrolling speeds and directions for a WordPress theme at Vanderbilt University. The effect can, sometimes, be a little choppy due to the continuous burden placed on the browser during scrolling but I am hoping to make improvements in the future.

View the Demo

xyPanles

xyPanels

This is a plugin that I developed as a twist to single page website designs and a variation on one of my other projects — Vertical Pagination. Most of the heavy lifting is done by jQuery but I am planning to replace certain functions with modern CSS (such as the Flexbox) in the future. xyPanels also operates “outside” the layout and can be used with “inside” front end frameworks such as Bootstrap.

View the Demo

Fruit

Page Content Filtering Using CSS and jQuery

This is something that I first created for a project at Vanderbilt University when this type of filtering was less common than it is now. The basic idea is to have a keyword match input field on a page that filters page content for the user without making a server request and reloading the page.

View the Demo

Some thoughts on what to do with this:

  • Use to filter list items (as in my example), images, table rows or any type of container.
  • The text that gets targeted by the filter can be hidden (as in my example) or exposed.
  • What happens to matches (or non-matches) can vary according to the added (or removed) class and what it triggers (a style change or a jQuery effect for example).
Accordion

Accordion Menus

When they first came into use, accordion menus took a lot of coding but now they are quite simple to create. This very simple and super light plugin will close open accordions when another one is opened and does not rely on CSS hover classes since they can be problematic on mobile devices.

View the Demo