Codeplayer project using jQuery and jQuery UI

I found the project difficult to make work. I wanted to use external .css and .js files and I followed the code from the PDF (which was not exactly the same as in the video) and I wanted to annotate it so I knew what sections did but it just got stuck and didn’t work. The CSS section was OK although I modified some of the settings to get it looking correct. But the javascript file was just not working. I have gone round and round and I am not sure what the problem was, perhaps a misplaced closing round bracket.

The key lesson is to avoid bugs you need to build things up a bit at a time and check that it is still working and doing what you want it to do at that stage.

The code is below

HTML

<!doctype html>
<html>
<head>

<!-- This started out as example.com for basic top and tail ********** -->

    <title>Code Player Project</title>

<!-- basic meta data ************************************************* -->	
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- call jquery files ********************************************** -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	
<!-- call jquery ui files need it for selectable objects in menu***** -->		
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jqueryui.min.js"></script>

<!-- location for external CSS in same folder styles.css ************* -->

	<link rel="stylesheet" type="text/css" href="styles.css" />

<!-- location for external javascript ******************************* -->	
	<script type="text/javascript" src="codeplayer.js"></script>
      
</head>

<body>

<!-- container or wrapper id for whole of page - just allows extra overall formatting -->
	<div id="container">

	<!-- Titlebar ******************************************************************* -->
		<div id="titlebar">
			
			<!-- This title div could be a logo rather than words -->
			<div id="title">
				CodePlayer
			</div> <!-- end of title -->
	
			<div id="runButton">
			
				<button id="run">Run</button>
			
			</div> <!--end of runButton -->
			
			<div id="menu">
			
				<ul>
					<li class="selector selected" name="html">HTML</li>
					<li class="selector" name="css">CSS</li>
					<li class="selector" name="js">JS</li>
					<li class="selector selected" name="result" style="border-right:none">Result </li>
				</ul>
			
			</div> <!-- end of menu -->
	
		</div> <!-- end of id="titlebar" -->

		
	<!-- clear div float formatting for a new section -->

		<div class="break"></div>
		
	<!-- Main section ***************************************************************** -->
	
		<!-- Area to type in HTML ************************************************* -->
	
		<div class="codecontainer" id="htmlContainer">
		
			<!-- why span not div? -->
			<span class="containerTitle"> HTML</span>
			
			<textarea class="code" id="html">
		
<div id="test">sdf</div>
		
			</textarea>
			
		</div> <!-- end of htmlContainer -->

		<!-- Area to type in CSS ************************************************** -->
		
		<div class="codecontainer" id="cssContainer">
		
			<span class="containerTitle" id="cssTitle">CSS</span>
			
			<textarea class="code" id="css">
		
#test {

background-color:green;				
				
}
		
			</textarea>
			
		</div> <!-- end of cssContainer -->
		
		<!-- Area to type in javascript ********************************************* -->

		<div class="codecontainer" id="jsContainer">
		
			<span class="containerTitle" id="jsTitle">JS</span>
			
			<textarea class="code" id="js">
		
alert(7);
		
			</textarea>
			
		</div> <!-- end of jsContainer -->

		<!-- Area to output the result ********************************************* -->

		<div class="codecontainer" id="resultContainer">
		
			<span class="containerTitle" id="resultTitle">Result</span>
			
				<div class="resultContainer">
			
				<iframe id="resultFrame"><iframe>
			
				</div>
		</div> <!-- end of resultContainer -->
	
		
	</div> <!-- end of id="container" -->
</body>
</html>

CSS

/* This style sheet is for the code player project ****** */

/* To make sure there are no borders or margins set the overall style of the page */
/* font-family by searching for best helvetica */
	body {
                margin: 0;
                padding: 0;
                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	        font-weight: 300;
		
	}
	
	body, html {
		width:100%;
		height:100%;
	
	}
	
	#container {
		height:100%;
	
	}
	
	#titlebar {
		width:100%;
		background-color:#EEEEEE;
		border-bottom:1px solid grey;
		height:40px;	
	
	}
	
	#title {
		padding:10px 0 0 20px;
		font-weight:bold;
		float:left;
	
	}
	
	#runButton {
		float:right;
		margin:5px 20px 0 0;
	
	}
	
	#run {
		font-size:130%;
		border-radius:5px;
		padding:0 10px;
	
	}
	
/* This section relates to the elements of the 4 centre action buttons */

/* The margin auto is what centres it, some detail on the handout is incorrect */
	#menu {
		margin:0 auto;
		width:186px; /*changed from 220px */
		padding:5px; /* changed from 5px */
	
	}
	
	#menu ul {
		margin:0; /* added by me */
		padding:0; /* added by me */
		border:1px solid grey;
		border-radius:5px;
		height:25px; /*changed from 30px */
	
	}
	
	#menu li {
		float:left;
		list-style:none;
		border-right:1px solid grey;
		height:20px;
		padding:5px 5px 0px 5px; /* changed from 5px 10px */
	
	}
	
	#menu li:hover {
		background-color:grey;
		
	}

/* clears the floats */	
	.break {
		clear:both;
	
	}
	
/* Div formatting - where the code will be typed in */
	.codecontainer {
		width:50%;
		float:left;
		position:relative; /* why? */
		
	}
	
/* textarea which has class "code" formatting */	
	.code {
		width:100%;
		height:100%;
		border-left:1px solid grey;
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			box-sizing:border-box;
		padding:10px;
	
	}
	
/* Starting point only htmlContainer showing so others switched off */
	#cssContainer, #jsContainer {
		display:none;
	
	}
	
/* Formatting all of the container titles the same so a class */
	.containerTitle {
		position:absolute; /* why? */
			right:20px;
			top:10px;
		background-color:#FFF;
		padding:4px;
		border: 1px solid grey;
		border-radius:4px;
	
	}
	
/* To make button that has been selected a different color class because applies to several */
	.selected {
		background-color:grey !important; /*what is important bit? */
		
	}
	
/* Result section is where the result of running the code is displayed */
	#resultFrame {
		width:100%;
		height:100%;
		border:0;
		border-left:1px solid grey;
	
	}
	
	.resultContainer {
		height:100%;
	
	}
	
	textarea {
		border:none;
		resize:none;
		font-family:monotype;
		font-size:100%;
		
	}

javascript

$(function(){

	//setting a variable for the height which is the window minus the top menu (41px)
	var height=$( window ).height()-40; 
	//doesn't need px?
		
	//set the actual height of the code container
	$(".codecontainer").css("height", height+"px");

		$(".selector").click(function() {
	
			$(this).toggleClass("selected");
	
			//this is using the names attributes give in the menu li items
			var id=$(this).attr("name");
	
			//this relies on the naming structure of the section classes - remember case sensitive
			$("#"+id+"Container").toggle(); 
			// toggle defines what happens when click in sequence
		
				//not quite sure what this is doing
				var number=$('.codecontainer').filter(function(){
				
				return $(this).css('display') !=='none';
		
				}).length; 
				//end of codecontainer filter function
	
			var width=100/number;
			
			$(".codecontainer").css("width",width+"%");
	
		});
		//end of selector click function 

	//This is now what happens with the Run button is clicked
	$("#run").click(function(){
	
		$('#resultFrame').contents().find('html').html("<style>"+$('#css').val()+"</style>"+$("html").val());
	
		document.getElementById('resultFrame').contentWindow.eval($('#js').val());
	
	}); 
	//end of run function 	
	
 });
 // end of overall function
973 Total Views 1 Views Today

You may also like...

Leave a Reply