This afternoon I was perusing the web and ended up mining Yelp for something to do in this new and foreign city. I noticed a slick effect that was used to keep the map in the view port as you scrolled. I had done this before with the position:fixed css directive, but it's rather limited especially in a centered layout. You also can't choose your easing equation or delay the effect... Thanks Moo, let's do it.

I added a set of links which link to targets on this page in my sidebar entitled "On this page...". I want the links to scroll the page to the targeted element, and I also want the links to follow me there so I can click on another one if I need to. 8 lines of javascript with the aid of Mootools gets her done.

var slideEffect = new Fx.Style('sidenav', 'margin-top', {wait:false, duration:800, transition:Fx.Transitions.circOut});
  window.addEvent('load', function() {
    var top = $('sidenav').getPosition().y - 10;
    window.addEvent('scroll', function(){
      slideEffect.start.delay(600, slideEffect, Math.max(0, document.documentElement.scrollTop - top));
    });
    new SmoothScroll({duration:700, transition:Fx.Transitions.circOut});
  });

Let's analyze the crap out of this code. I first create a new Fx.Style specifying wait:false (so If I start scrolling down the page and than suddenly switch direction, the effect will simply start over in that new direction). I'm modifying the margin-top property of the sidenav element. I also specify a custom transition circOut which starts fast and than slows to a stop. Using window.addEvent('load', I wait for the document to load because the position of my div is relative to the image of my face. You could use the domready event if the position of the div you will be scrolling is not relative to an image... Next I get the position of the top of my div and subtract 10 from it to give it some padding.

Now for the magic. I listen for the scroll event and when it happens I fire the recently created slideEffect. However, because the delay is cool and if I don't delay the effect will look really jumpy, I delay the start of the effect. Moo provides a delay method which can be called on any function. You have to call it on the function, not on the thing the function returns: e.g. myFunction.delay(100) or function(){return 'rad'}.delay(300) instead of myFunction('awesome').delay(30). The second attribute to delay is an object that will become this in the function delay is being called on. In this case we want this to be the effect itself. The third attribute is the attribute(s) that will be passed into the function. For us, this is an integer representing the new margin. We calculate this as the maximum of either 0 or the difference of the current viewport offset and the original offset of the image.

The last thing to do is make a call to SmoothScroll, making all links that point to a target scroll to the element with that targets id (this was detailed in my last post). So there it is, a detailed description of how my sidebar and mootools did it.

As I continue to customize my new mephisto installation, I wanted a tag cloud for the Folksonomy section at the bottom of the page. At first I thought I would use a mephisto plugin… after further consideration I decided that was a little overkill. JavaScript kicks ass, especially with the recent release of mootools version 1.0, so I decided to let it do the work. I created a small class called Overcast which makes tag clouds easy peasy japaneasy. So, just how easy is it to get a tag cloud in mephisto? Here’s a snipet from my layout.liquid

{{ 'mootools' | javascript }}
{{ 'overcast' | javascript }}
</head>

<div id="overcast">
  {% for tag in site.tags %}
    <a href="/tags/{{ tag }}" class="_{{tag | tagged_articles | size}}" rel="tag">{{ tag }}</a>
  {% endfor %}
</div>
<script type="text/javascript">
  over = new Overcast({min: 1, fuzz: 2, overlay: "/images/gloss.png"});
</script>

A couple sexy things to note are the cool transparent overlays ontop of each tag, and the ability to fuzz tags when your weights aren’t very diverse. Also, if you’ve got Firebug you can type over.update(“amazing”,4) in the console to add a new tag to the cloud with that weight, or over.update(“javascript”, 3) to change the weight of an existing tag. All of the functionality is documented in the source.

Grab the source from the include in this page. I’ll put it under version control soon.

Recently my health insurance changed from a high deductible plan to a more reasonable PPO. Anyway I still have an HSA from my previous plan. I thought it might be a good idea to transfer my HSA money into my IRA… wow more acronyms than the w3c. After finding the website of my HSA provider, I decide to sign up for an account. This is what I got:

First off, the logo and the layout are simply stunning. Secondly, if you haven’t already, take a closer look at the requirements for both the user id and the password. Why the H are they requiring such a random user id? It’s requirements are way higher than that of the passords. Why only 4 characters of headway? How are you supposed to create anything even remotely meaningful? After 3 - 5 minutes of deep thought I was able to come up with something amusing, but I’m a power user, I doubt there demographic is even capable of figuring out how to make a user id… If they really need this crap to be that random, why not just hand out a random id?

As if this weren’t enough, I was prompted to use there advanced forgotten password system before I could continue. Take a look:

Boy, they were right on the money with this one. For starters, they opened up a new window for me, thanks Leesport, can’t get enough windows. And the questions… “my favorite president?”, who has a favorite president? You’ve gotta love the assumption that all of Leesport’s customers have pets and love sports, why wouldn’t they?

Finally after getting into this valuable service that Leesport is offering it’s customers, I found it to be utterly worthless. There was a transfers tab, but of course this did nothing. How can such a high profile site blow so hardcore? The friggin thing looks like a highschool project.

I can honestly say that Leesport’s service is by far the worst experience I have had with online banking. HSBC comes in at a close second. Fortunately, I found someone that cares about design and functionality in Bank of America.