pamelafox · August 8, 2012 04:51
diff --git a/header.html b/header.html
 <html>
 <head>
  <style>
    .w100percent {
    }
    .w1280px {
    }
    .w900px {
    }
    .w768px {
    }
    .w480px {
    }
 </head>
 <body>

       <script id="course-template" type="text/x-handlebars-template">
 <div class="banner" style="height: auto;padding-bottom: 15px;">
  <div class="title">
  	{{#each unis}}
 	<div class="uni_name">{{ this }}</div>
 	{{/each}}
 	<div class="course_title">{{ title }}</div>
  <div class="course_prof">
  	{{#each professors}}
 	<span style="font-family:'Enriqueta Bold'; font-size: 16px; color: #323232;">{{ name }}</span><br />
 	<span style="font-size: 14px; ">{{ title }}</span>
 	{{/each}}
  </div>
 </div>
 </div>
 	</script>

 	<script src="handlebars-1.0.0.beta.6.js"></script>
 	<script>
 	var stanfordCourse = {
 		'unis': ['Stanford University'],
 		'title': 'Quantum Mechanics and Quantum Computation',
 		'professors': [
 			{'name': 'David Michael Meisenholder', 'title': 'Professor of Vaccinology and Pediatrics and Marketing and Business'}
 		]
 	}

 	var courseTemplate = Handlebars.compile(document.getElementById("course-template").innerHTML);

 	function addCourse(course) {
 		var courseHtml    = courseTemplate(course);
 		var widths = ['100%', '1280px', '900px', '768px', '480px'];
 		for (var i = 0; i < widths.length; i++) {
 			var widthDiv = document.createElement('div');
 			widthDiv.className = 'w' + widths[i].replace('%', 'percent');
 			widthDiv.style.width = widths[i];
 			widthDiv.innerHTML = courseHtml;
 			document.body.appendChild(widthDiv);
 			var breakDiv = document.createElement('div');
 			breakDiv.className = 'break';
 			document.body.appendChild(breakDiv);
 		}
 	}

 	addCourse(stanfordCourse);
 	</script>

 </body>
 </html>