Two weeks ago I promised a screenshot on event signups and I finally have something worth showing. Stay tuned for more shots!
GD Star Rating
loading...
loading...
Blitzaroo signups
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:
- 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)
- Allow users to choose their signup type. Gives users the ability to choose primary, alternate, or declined.
- Allow users to choose their own label. Gives users the ability to choose their role.
- 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.
Loading ...![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_c.png?x-id=57e1578a-532c-4dba-808b-048fa4b3bcd5)
GD Star Rating
loading...
loading...
Creating a fadeOut loader with Dojo
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 Google!) 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 <body> tag of your page and another for content that will be parsed by Dojo.
<div id="loader"></div> <div id="content">I AM SOME CONTENT!</div>
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.
<style type="text/css">
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;
}
</style>
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.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
//CDATA[
dojo.require("dojo.parser");
dojo.addOnLoad(_initLoader);
function _initLoader() {
var content = dojo.byId("content");
var loader = dojo.byId("loader");
// Parse the content manually
dojo.parser.parse(content);
// Fade the loader div out
dojo.fadeOut({
node: loader,
duration: 250,
onEnd: function() {
loader.style.display = "none";
}
}).play(250);
}
//]]>
</script>
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:
<div id="loader"><div id="loaderInner">Loading...</div></div> <div id="content">I AM SOME CONTENT!</div>
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;
}
</style>
That’s one sexy loader if I do say so myself – enjoy it!
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_c.png?x-id=e1cd0ce5-10ad-4d57-8aa4-761058fee161)
GD Star Rating
loading...
loading...