Sticky Menus with Waypoints.js

Sometimes navigation can be significantly improved by including context aware menus.  Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.  On the North Star website, I used waypoints.js to add a menu that allows you to filter the class schedule:

Class Schedule Menu

The content for each day’s classes is contained in togglable tabs using the Bootstrap javascript component.

Initializing the sticky behavior is as simple as this:

$('#classes').waypoint( 'sticky', {
offset: 64
});

which attaches the class ‘stuck’ to the #classes list element when scrolls to 64 pixels from the top of the browser window.  Some CSS such as this fixes the menu so it doesn’t continue to scroll:

.stuck {
position: fixed;
top: 64px;
}

I wanted the menu to be accessible on mobile devices as well and added some code to scroll to the top of the tabbed content when a menu item is selected:

$('#classes a').click(function(event) {
$('html, body').animate({scrollTop: $('.tab-content').offset().top - 115}, 300);
});

You can see it live here or another similar example on the HealthLoop website where patients and physicians can find out more about how HealthLoop can benefit them.

HealthLoop Waypoints

Front-End Frameworks

Front-End Frameworks are increasingly common in web development in the last few years.  They provide basic components for building a web presence in a standard way that can improve both the quality of experience of people’s interactions and the speed of development.  These are some projects that I’ve found useful.

Screen Shot 2013-11-21 at 10.38.32 AM

Foundation is probably the first front-end framework that supported building websites that were responsive to the device used to access them.  I used it in a project a few years ago and was very pleased with my experience.  Foundation 5 is planned for release imminently and continues to push the edge forward.  They offer, among other improvements, the ability to selectively include content based on media queries.

Screen Shot 2013-11-21 at 10.43.59 AMBootstrap is another great project that has really exploded in popularity.  Built by Twitter, this framework is ubiquitous across the web recently.  Bootstrap 3 offers an improved grid system and some semantic improvements.  I’ve built a number of projects using this framework and highly recommend it.

Screen Shot 2013-11-21 at 10.45.28 AMSemantic UI is another framework that has been gaining traction recently.  Semantic is structured around natural language conventions to make development more intuitive.  The code samples feel really intuitive and elegant.  This framework looks really promising and I’m excited to try it out in a project soon.

Plone for Social Networking

plone-logo-128-white-bg

I’ve been collaborating with Chronicle Technologies, a technology consulting firm, on a number of Plone projects recently.  Much of my work has focused on developing a social networking product written in python that provides the community with ability to share content, comment on each other’s posts, and maintain a profile.

In this site for the Fisk-Vanderbilt Bridge Program, you can see some of the highlights.  The directory allows you to browse through a list of community members.  When your mouse hovers over a member’s picture, a tooltip box appears with more information about the member.  The member profiles also take advantage of some cool jQuery tools, including overlays and tabs to present information in an easily accessible, aesthetically-pleasing way.

I also integrated an actionbar into the site to provide easy access to commonly used functions such as adding a new blog post and viewing and editing your profile.

Other interesting features of the site include a social networking addon to facilitate sharing content with other social networking sites and a lightbox photo gallery.

A Community Plone Site

seminar.groundshift

I worked on this Plone site for a seminar entitled “Diversity and Innovation” at the Center for Institutional and Social Change at Columbia Law School.

This site showcases many of the capabilities on Plone as a intranet portal and community networking platform.  Unfortunately, access to the bulk of the site is restricted to students, so I’ll just have to describe some of the things going on behind the scenes.

The design and layout of the site is done in vanilla HTML/CSS and integrated with Plone using deliverance, a python-based tool designed to facilitate theming and integration of web applications.  Theming Plone has historically been somewhat challenging, but deliverance is a game-changing tool that revolutionizes theme development.  It also provides to capability to integrate different platforms in a seamless way.

The site features a rotating carousel highlighting important content.  Superfish,  a jQuery-based dropdown menu system, makes it easy to navigate the content in the site.  A helpdesk system, Zendesk, is integrated into the theme, allowing the students easy access to support staff.   A number of other useful plugins are installed to facilitate the generation of forms and surveys as well as a discussion board.

The aspect that I spent the most time on, and has become a core product in several other sites as well, is a community social networking area.  Each student has a profile and can post content to their own blog/wall.  The students can tag their content in various ways that allows it to be aggregated in other areas of the site using Plone’s most powerful content type system.