Posts Tagged ‘Google’

Blitzaroo signups

Thursday, March 4th, 2010

Dum da dum!

So, I spent most of last night working on event signups in Blitzaroo and I ran into a situation where I’m trying to decide what features I want to implement. This blog is my attempt to get the community involved so I’m going to throw up a little poll and see what you have to say. Let me elaborate on the options.

1. phpRaider

Signups should work exactly like phpRaider. There are three levels (accepted, queued, declined) and the freeze time determines when users can signup. If it’s past the freeze time all signups are disabled but users can still edit their note. The administrator can also automatically queue everyone.

2. Blitzaroo

I was tinkering around with with a combination of phpRaider features and new features. Levels will still exist (primary, alternate, declined) and I will keep the freeze time. I was planning on adding additional automatic signups such as:

  1. Let Blitzaroo handle signups automatically. This option would use an algorithm (currently unknown) to assign attendees based on various factors such as attendance, label (or role), and/or a roll of the dice. (Disables 2, 3, and 4)
  2. Allow users to choose their signup type. Gives users the ability to choose primary, alternate, or declined.
  3. Allow users to choose their own label. Gives users the ability to choose their role.
  4. Let the event coordinator handle signups. The event coordinator is required to assign signups types as well as labels. (Disables 1)

These are all checkable options and some can be used together.

Custom

If you choose this option please specify in the comments below what you think is the best way to handle signups.

[poll id="3"]

Tags: Algorithm, Blitzaroo,
Posted in Blitzaroo, Projects | 5 Comments »

Creating a fadeOut loader with Dojo

Wednesday, March 3rd, 2010
Dojo Toolkit

Image via Wikipedia

Intro

If you’re building a large site and utilizing Dojo you can get pages that are crammed full of widgets, layout containers, dialogs and more. All these useful features give your site a clean and very user-friendly experience. One side-effect, however, is that the HTML/CSS is loaded and then Dojo begins parsing which can cause your page to jump around while each element is rendered. I found this highly annoying so I scoured the web (<3 !) and managed to find a solution. I utilize a #loader div which covers the entire screen and then fade it out using dojo.addOnLoad(). This is extremely simple to implement and should only take a few minutes.

Live Demonstration

Take a peak at the live demonstration of the basic loader (or the fancy loader) to see where we’re headed. If you’re interested in how I got there keep on reading!

The HTML

The HTML consists of a single div located directly under the tag of your page and another for content that will be parsed by Dojo.



I AM SOME CONTENT!

The CSS

CSS stretches the div to the full viewport of the page. I color the #loader the same color as the background of the page I’m loading to give it a nice and smooth transition.

The Script

Even the Dojo code is easy! We tell dojo to manually parse the content div and then we add a fadeOut animation to the #loader div and onComplete set the loader display to none.

Pump it up!

So, we created a loader, and it’s pretty nifty but let’s pump it up a bit by adding a “Loading…” message a la Google’s GMail. First, we need to modify the #loader div to include a #loaderInner which will house our loading message like so:

Loading...


I AM SOME CONTENT!

Next, we tweak the CSS a bit to colorize the loading message, throw in some padding, and give it a bit of flare.

        body {
                background: #fff;
        }

        #content {
                text-align: center;
                width: 100%;
        }

        #loader {
                background: #fff;
                height: 100%;
                left: 0;
                margin: 0;
                padding: 0;
                position: absolute;
                top: 0;
                vertical-align: middle;
                width: 100%;
                z-index: 999;
        }

        #loaderInner {
                -webkit-box-shadow: -1px 1px 5px #888;
                background-color: #FFFFCB;
                color: #c99800;
                display: table;
                font-size: 16px;
                padding: 5px 13px;
                text-align: center;
        }

That’s one sexy loader if I do say so myself – enjoy it!

Tags: , , , , , , ,
Posted in Dojo, Random, Technologies | 4 Comments »