RE Start Fitness Website

RE Start Fitness LLC websiteMy brother wanted a website to both promote his personal training business, and accept credit card/PayPal payments for training packages. Given the limitations of the web service and online building tools he purchased his domain from, I was able to repurpose one of the services’ base templates, totally rearranging some content areas while still providing him a contact form, PayPal buttons and a clean visual feel.

Future ideas for the site will involve moving to a WordPress or built-from-scratch environment, which would allow for additional dynamic elements, training plan library, login/logout, a change in the color-scheme of the rollover menu, and better responsive/mobile layout.

Advertisements

Unfolding boxes

As an exercise in using JavaScript to generate a dynamic number of divs with dynamic style properties, I wrote this:

<form>
Box Width: <input id="boxw" name="boxw" type="text" size="3" maxlength="3" /><br />
Box Border: <input id="boxborder" name="boxborder" type="text" size="3" maxlength="3" /><br />
How many boxes? <input id="boxes" name="boxes" type="text" size="3" maxlength="3" /><br />
<input type="hidden" id="genmethod" name="genmethod" value="Shell">
Speed: <input id="speed" name="speed" type="text" size="3" maxlength="4" value="200" /> milliseconds between unfolds<br />
<input name="Generate Boxes" type="button" onMouseUp="generateBoxes('floatingbox',document.getElementById('boxw').value,document.getElementById('boxborder').value,document.getElementById('boxes').value,document.getElementById('genmethod').value,document.getElementById('speed').value);" value="Generate Boxes" />
<input type="button" value="Stop Unfolding" onclick="stopBoxes()" />
<input type="button" value="Continue Unfolding" onclick="continueBoxes()" /><br />
Status: <span id="status"></span>
</form>
<div id="floatingbox" style="position:relative; top:0px; left:0px">
</div>
<script type="text/javascript">
numboxes = 1;
var boxnum = 1;
var boxwidth = 30;
var border = 1;
var speed = 200;
var n=1;
var t;
var direction = new Array();
//var direction = new Array("S","R","D","L","L","U","U","R","R"); //Circle Method
//var direction = new Array("S","R","D","L","D","R","R","U","U"); //Shell Method
//var direction = new Array("S","R","R","D","L","L","D","R","R"); //Snake Method

function generateBoxes(where, bwid, brdrwid, b, method, bspeed) {
if (parseInt(bwid)) {
bwid = parseInt(bwid);
boxwidth = bwid;
}
else {
alert("You did not enter a valid interger for the box width. Box width defaulted to " + boxwidth);
bwid = boxwidth;
}

if (parseInt(brdrwid)) {
brdrwid = parseInt(brdrwid);
border = brdrwid;
}
else {
alert("You did not enter a valid interger for the border width. Border width defaulted to " + border);
brdrwid = border;
}

if (parseInt(bspeed)) {
speed = parseInt(bspeed);
}
else {
alert("You did not enter a valid interger for the speed. Speed defaulted to " + speed);
}

direction = ["N"];
numboxes = parseInt(b);
if (method == "Shell"){
var y = Math.ceil(Math.sqrt(b));
//alert(y);
ring = 2;
x = 1;
while (ring <= y){
if (ring%2 == 0) {
direction.push("R");
while(x<=(ring-1)) { direction.push("D"); x++;}
x=1;
while(x<=(ring-1)) { direction.push("L"); x++;}
}
else if (ring%2 != 0) {
direction.push("D");
while(x<=(ring-1)) { direction.push("R"); x++;}
x=1
while(x<=(ring-1)) { direction.push("U"); x++;}
}
x=1;
ring++;
}
//alert(direction);
}

var genbox = "";
n = 0;
while (b>0){
genbox += "<div id=\"box" + n + "\" style=\"background-color: #666; border-style: solid; border-color: #333; position: absolute; left:0px; top:0px; width:" + bwid + "px; height:" + bwid + "px; border-width:" + brdrwid + "px; z-index:" + b + ";\"></div>";
n++;
b--;
}
document.getElementById(where).innerHTML = genbox;
n=1;
Unfold();
}

function Unfold(){
document.getElementById('status').innerHTML = "Unfolding";
if (n < numboxes){
boxnum = n;
boxname = "box" + boxnum;
lastbox = "box" + (boxnum - 1);
document.getElementById(lastbox).style.backgroundColor = "#CCC";
document.getElementById(lastbox).style.borderColor = "#999";
switch (direction[boxnum]){
case "D":
while (boxnum < numboxes){
boxname = "box" + boxnum;
document.getElementById(boxname).style.top = (parseInt(document.getElementById(boxname).style.top) + boxwidth + border) + "px";
boxnum++;
}
break;
case "U":
while (boxnum < numboxes){
boxname = "box" + boxnum;
document.getElementById(boxname).style.top = (parseInt(document.getElementById(boxname).style.top) - boxwidth - border) + "px";
boxnum++;
}
if (parseInt(document.getElementById(boxname).style.top) < 0) document.getElementById('floatingbox').style.top = (parseInt(document.getElementById('floatingbox').style.top) + boxwidth) + "px";
break;
case "R":
while (boxnum < numboxes){
boxname = "box" + boxnum;
document.getElementById(boxname).style.left = (parseInt(document.getElementById(boxname).style.left) + boxwidth + border) + "px";
boxnum++;
}
break;
case "L":
while (boxnum < numboxes){
boxname = "box" + boxnum;
document.getElementById(boxname).style.left = (parseInt(document.getElementById(boxname).style.left) - boxwidth - border) + "px";
boxnum++;
}
if (parseInt(document.getElementById(boxname).style.left) < 0) document.getElementById('floatingbox').style.left = (parseInt(document.getElementById('floatingbox').style.left) + boxwidth + border) + "px";
break;
}
n++;
t = setTimeout('Unfold()',speed);
}
else {
boxnum = n;
lastbox = "box" + (boxnum - 1);
document.getElementById(lastbox).style.backgroundColor = "#CCC";
document.getElementById(lastbox).style.borderColor = "#999";
document.getElementById('status').innerHTML = "Complete";
}
}

function stopBoxes() {
clearTimeout(t);
document.getElementById('status').innerHTML = "Paused";
}
function continueBoxes() { t = setTimeout('Unfold()',speed); }
</script>

You can check it out live here. The next step in building out this code would be to incorporate some jQuery animations to the movement of the the boxes as they “unfold” instead of just appearing/moving into place.

UMBC Cheerleading website

Cheerleading

When I was a coach of the UMBC Cheerleading team, I wanted to build us a website to display pictures and videos of our team and our performances, and provide details about tryouts. I did not have access to build this out from the main UMBC Athletics website and was unsatisfied with how Facebook delivered photos and videos separately, so I build this site which includes a data driven photo and video system. This system allows you to jump to a page, go to next page or next picture, select content type(s), loops back to the first picture/video from the end, and pulls in photos stored on the website and videos stored on both Facebook and YouTube. You can see the current site at www.umbc.edu/cheerleading.