Live Website Projects
joggoon.com is my own "flagship" project. When I worked for an online publishing company, I began experimenting with creating my own version of an online reading experience. joggoon is the result of that effort. I currently have over 100 FREE eBooks from the public domain. When I get time, I continue my effort to convert public domain books to my reader format (tagged HTML).
joggoon 2 is a revamp of the original. It was a smaller project that bloomed into a new implementation strategy. Read about what makes it different. Other than design changes and the code behind it, joggoon 2 offers the same, well, different, shorter book content as it's predecessor.
Creating an HTML5/CSS3 template for use as a project "jump-start" or for rapid prototyping has always seemed to be a work in progress. This is the latest version.
The page has some description of the work, plus I have made some of the core files available for easy viewing.
Responsive UI Development Helper
This is a simple script I wrote to make it easy to develop a responsive UI. All you need to do is add the script at the bottom of the page and it does the rest. There is a dependency on jQuery.
Responsive Animated Ad Banners
I began this project attempting to use only CSS3's animation but quickly ran into problems creating a persisting end state of the animation. With a bit of effort, I did come up with a quirky solution that was less than optimal and I could see that I would have to spend a fair amount of time with each different animation sequence.
After confirming this to be a known issue with CSS3 animation, I chose to depend on jQuery Transit for the heavy lifting in my animations. This plugin is fantastic and easy to use, allowing me to focus more on the Ad itself rather than overcoming limitations with CSS3 animations. It began to feel much like the CSS hacks of old days CSS.
The "Header Color Key" on the demo maps the changing bg color of the header to the relative window width. Try resizing the browser or view this page on a tablet or mobile device.
A responsive banner component with embedded YouTube videos. The banner responds to changes in the window size e.g. when viewing on tablets. Responsiveness of the image and thumbnails is achieved using media queries with a bit of jQuery help.
Two particular requirements of the implementation was preserving the size of the controls (the dots) so on smaller devices they were still large enough to click, and the overall component had to be responsive in any browser.
One particular challenge of the banner were the corners. CSS corners won't work because the image used spans the total width of the two views before and after sliding. And because we need to click on the video thumbnails, using a layer to mask the corners won't work either. Fortunately all that is required are 4 small images to position in each corner with a high z-index. The only downside is that if you change the page background color, these have to be changed to match.
jQuery is used for two things - sliding the banner and handling the videos. You can read comments in the js file. Chrome and Safari were not cooperative in the case where we might select the video not currently in the popup. In these browsers, the previous video would continue to play (audio) in the background as the newly loaded video played. So we simply use jQuery to change the URL on the iframe source.
Styling Checkboxes and Radio Buttons
These form elements lack CSS 'stylability', which makes for a not-so-user-friendly UX on mobile devices. Leveraging the same strategy used on my homepage slides, we can achieve styleable elements using only CSS. View the source of the demo page for documentation and notes.
Responsive Modal Windows
One of the challenges when using modal windows in mobile development is the lack of support for interior scrolling. If you have modal content that may tend to be larger in height than you wish, the modal height must be defined by the content. On the flipside, in a desktop environment, having a fixed height modal window with scrollable content is desireable.
The solution offered here is very lightweight and highly configurable. You can set a threshold width that matches your CSS media queries so the width and height of the modal container can be initially fixed, then become fluid once that threshold is reached. The .js file is fully annotated and easy to understand.
The modal container and overlay are dynamic and are added to the DOM only when requested, then removed when they are closed.
Content for each instance of the modal is loaded with jQuery Ajax API. The setup is simple: simply class the link 'MODWIN' and point the HREF to the content file.
Infinite (Circular) Autoscroll Carousel
A stab at creating a circular carousel.
My requirements were  showing multiple elements at a time e.g. 3,  revealing the overflow on either side just slightly (along with the visual shadowing effect you see here),  a full set of controls,  indicator dots to show where in the carousel we are,  changing text captions for the centered item, and  I wanted it to perpetually loop.
The carousel is not responsive, which, with the above set of requirements, I found near impossible. There are ways to make the carousel responsive, but that was not a top priority at the time and I have no interest at this point in doing any retrofitting to make it so. I'll save that for another time, another project.
A Quirk RE 2d Transformations
I find CSS 2d transformations especially helpful in creating engaging user experiences, such as creative hover states etc. One transformation, scaling, is particularly interesting.
When you scale an element in the DOM using this transformation, the original real estate filled by the element does not change. This is logical. If you want to scale an image, let's say, on the page, you wouldn't want it necessarily to affect the rest of the content e.g. move things around. This is especially true if the scaling is temporary, such as on a hover state.
One very advantageous use of scaling is for responsiveness. While I would not recommend using scaling for any and all responsive UIs, it is very valuable when having to deal with certain more complex UI components - such as some of the complex animated components on this site.
However, when scaling for responsiveness, you have to take into consideration that the DOM does not change and therefore you have to adjust for it. This is rather simple using negative margins. See the example to see it work.
This is a simple contact form illustrating a few of the better supported HTML5 features.
I added some simple validation code to supplement the HTML5 features, as well as a simple (but effective) spam preventative.
This was the prototype for the animation on my Lab page.
The initial animation sequence is powered by jQuery i.e. the dropping of the icons into each beaker. Using jQuery's delay() method allows for a pseudo-random feel to the animation. In the final version on my Lab page, I used a random generated value to make the starting sequence truly random.
The bubbles are pure CSS animation. Once the icon has completed its animated drop into the beaker, a class is added to the container that includes as children each of the bubble elements. This sets off the infinite linear CSS animation.
As you can see in the final version at the top of this page, I added quite a bit more complexity to the animation.
CSS Only Slides
The order of the HTML elements is important, since the :checked pseudo class used to activate the animation depends on those relationships.
This was the prototype for the slides on my homepage. Unfortunately, this strategy does not function on mobile devices. The alternative, of course, is a simple jQuery fall back, which I have yet to address, so in the meantime mobile devices get a nested list (the structure underlying the slides).
A prototype of the final product on my projects page.
Once I had those two pieces in place (the gears and the clock) as shown here, I was not satisfied with the two as a cohesive unit. So I reworked things a bit - rewriting the JS for the clock, then adding an audio mpg file in the background (using flowplayer) and making the whole show user-controlled. This is the version you see on my projects page.
Unfortunately, the final version proved very buggy on mobile devices.