OMM Staff

by Puddster

HTML

<span id="text">
   ...

CSS

.staffCard {
				text-align: left;
				border-radius: 5px;
				border: #666666 solid 1px;
				height: 75px;
				width: 175px;
				padding: 0px;
				margin: 10px;
				display: inline-block;
				background-color: #EEEEEE;
			}

            a.staffCard {
                -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.5);
                -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5);
                box-shadow:5px 5px 5px rgba(0,0,0,0.5);
            }
			
			.staffImage > img {
				border: #666666 solid 1px;
				background-color: white;
			}
			
			.staffImage, .staffImage > img {
				border-radius: 5px;
				padding: 2px;
				display: inline-block;
                width: 64px;
                height: 64px;
			}
			
			.staffText {
				width: 98px;
				height: 75px;
				color: #000000;
				padding-left: 3px;
				vertical-align: top;
				display: inline-block;
				overflow: hidden;
				background: url('http://static.8dg.io/img/omm_logo2_small.png');
				background-size: 100px;
				background-repeat: no-repeat;
				background-position: right bottom;
			}

			.staffGroup {
				margin: 10px;
				text-align: center;
				vertical-align: top;
				padding: 15px;
				border-radius: 50px;
				border: #666666 solid 1px;
			}

			.staffTitle {
				border-radius: 25px;
				border: #666666 solid 1px;
				height: 25px;
				cursor: pointer;
				padding: 10px;
				margin: 10px;
				background-color: #FFFFFF;
				font-weight: 900;
				white-space: nowrap;
			}

            #staff {
                background-color: #DADADA;
            }

			#Creator {
				background-color: #E9967A;
			}

			#StaffLead {
				background-color: #00008B;
			}
			
			#DevGroup {
				background-color: #90EE90;
			}

            #LDev, #Dev, #TrDev {
                background-color: #A0EEA0;
            }
			
			#ModGroup {
				background-color: #E6E6FA;
			}

            #LMod, #Mod, #TrMod {
                background-color: #FFF0F5;
            }
			
			#ArchitectGroup {
				background-color: #ADD8E6;
			}

 ...

JavaScript

var el = $("#text"),
					staffString = $(el).html(),
					structure = { "id": "staff", "name": "Staff", "children": [ {"id": "Creator", "name": "Creators"}, { "id": "StaffLead", "name": "Staff Leads" }, { "id": "DevGroup", "name": "Developers", "children": [ { "id": "LDev", "name": "Lead Developers" }, { "id": "Dev", "name": "Developers" }, { "id": "TrDev", "name": "Trial Developers" } ] }, { "id": "ModGroup", "name": "Moderators", "children": [ { "id": "LMod", "name": "Lead Moderators" }, { "id": "Mod", "name": "Moderators" }, { "id": "TrMod", "name": "Trial Moderators" } ] }, { "id": "GuideGroup", "name": "Guides", "children": [ { "id": "LGuide", "name": "Lead Guides" }, { "id": "Guide", "name": "Guides" }, { "id": "TrGuide", "name": "Trial Guides" } ] }, { "id": "PromoterGroup", "name": "Promoters", "children": [ { "id": "LPromoter", "name": "Lead Promoters" }, { "id": "Promoter", "name": "Promoters" }, { "id": "TrPromoter", "name": "Trial Promoters" } ] }, { "id": "ArchitectGroup", "name": "Architects", "children": [ { "id": "LArchitect", "name": "Lead Architects" }, { "id": "Architect", "name": "Architects" }, { "id": "TrArchitect", "name": "Trial Architect" } ] } ] };

				function addStaffRank(el, obj, siblings, callback) {
                    
                    var staffGroup = $('<div></div>', {
                        id: obj.id,
                        class: 'staffGroup'
                    });
                    $(staffGroup).append( $('<div></div>', {
                        class: 'staffTitle',
                        html: obj.name
                    }) ).append( $('<div></div>', {
                        class: 'staffCards'
                    }) );
                    
					$(el).append(staffGroup);
                    
					if (obj.children === undefined) { return false; }
                    
					for (var index in obj.children) {
                        el = $('#' + obj.id);
                    	addStaffRank(el, obj.children[index],...