Children’s Museum of Oswego Gets A Website

cmoo

I’m happy to share with you a new website I did for the Children’s Museum of Oswego. It was a pleasure working with Jon and Jill Shaver on this and they are truly doing a wonderful thing for the Oswego community. While I don’t currently live in Oswego, I was born and raised there and know there needs to be more things like this there. If you’d like to find out more information about CMOO, check out their website at www.cmoo.org.

Goodbye for now, Oswego

Solstice Sunset 2013

I’m all moved into a new town and its time to say goodbye to a place I lived 26 of the past 28 years of my life. It’s a beautiful little city and I’ll miss the people there and my family. Being 2 hours away is a good distance to see some new things but still be close to family. There are new horizons and opportunities for me in the southern tier of New York. So far I’m really enjoying the change of scenery. There are rolling hills every direction you look, I just need to find some good hiking trails near Binghamton to really see the beauty of the area.

On another note, I love being closer to Wegmans! The Wegmans in Johnson City, NY is far superior to the one I’m used to in Clay, NY. Β The Market Cafe is amazing and the amount of healthy, organic foods is very exciting. Here’s to a new chapter of my life!

Excuse me while I go unpack. πŸ™‚

Simple Sticky Footer Using jQuery

I was recently working on a project that required a sticky footer. I needed the footer to always be aligned flush with the bottom of the screen. This was no problem when there was enough content to push the footer against the bottom edge. But what happens when there isn’t enough content? You end up with a floating footer and that’s no fun.

I immediately Googled the problem and found a bunch of various jQuery and CSS solutions. When I tried them though, none of them seemed to do exactly what I wanted them to do. Plus my code was structured a little differently than the examples. I decided to just try to come up with my own solution using jQuery. I’ve had enough of dealing with IE’s quirks, IE understands JQuery so it seemed like the easiest solution.

In order for this to work, the footer can’t be in a wrapper class. The code would have to be structured like this example:

<div id="page"></div>
<footer id="colophon"></footer>

Also, it is required that you set margin and padding for body to 0. These are the only requirements as far as I know of that have to do with CSS.

body {
    margin: 0;
    padding: 0;
    }

The idea behind the jQuery was pretty simple. Check the height of the element, then check the height of the viewport. If the viewport height is greater than #page’s height, then we need to set some CSS on the footer. That CSS will just absolutely position it at the bottom of the frame. It’s a good idea to make sure your footer’s width is 100% so it looks right.

I brought in jQuery and inserted the code.

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script><script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer#colophon").css("position","absolute").css("bottom",0);
  }
});
</script>

In order to make this work with older versions of IE (< IE9), include Google's HTML5 shiv. [html] <!-- Add conditional for IE7 + 8 support --> <!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> [/html]

See the demo

Worked like a charm for my purposes. Feel free to modify it for your own use. If you have any questions or comments, feel free to leave a comment! πŸ™‚