craigprotzel/JS_Example_04

## JS_Example_04
<html>
	<head>
		<title>JS Example 4</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				font-family: Helvetica;
			}

			/*BUTTON STYLING*/
			.buttonContainer{
				position: fixed;
				margin-left: 20px;
				z-index: 100px;
			}
			.button{
				color: black;
				border-style: solid;
				border-width: 4px;
				border-color: black;
				width: 60px;
				text-align: center;
				padding: 10px;
				margin: 10px;
			}
			.button:hover{
				background-color: rgb(195,135,0);
			}

			/*VIDEO STYLING*/
			.videoContainer{
				clear: left;
				margin-top: 40px;
				width: 100%;
			}
			#videoTitle{
				margin-top: 10px;
				margin-bottom: 10px;
				text-align: center;
				font-size: 24px;
			}
			#video{
				margin: auto;
				width: 640px;
			}
			#videoDescription{
				margin-top: 20px;
				text-align: center;
				font-size: 16px;
			}

		</style>

		<script type="text/javascript">

			var videos = [
				{
					title: "How To Make A Cappucino",
					iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/2Ao5b6uqI40?rel=0" frameborder="0" allowfullscreen></iframe>',
					description: "This is the first of 3 videos. It's teaches you how to make a cappucino!"
				},
				{
					title: "How To Make A Mocha",
					iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/aEHBmi1927g?rel=0" frameborder="0" allowfullscreen></iframe>',
					description: "This is the second of 3 videos. It's teaches you how to make a mocha!"
				},
				{
					title: "How To Make A Macchiato",
					iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/pPxWxY7kXG4?rel=0" frameborder="0" allowfullscreen></iframe>',
					description: "This is the last of 3 videos. It's teaches you how to make a macchiato!"
				}
			];

			$( document ).ready( function(){

				$('#buttonOne').click(function(){
					console.log("We clicked Button One!");
					$('#videoTitle').html(videos[0].title);
					$('#video').html(videos[0].iframe);
					$('#videoDescription').html(videos[0].description);
				});

				$('#buttonTwo').click(function(){
					console.log("We clicked Button Two!");
					$('#videoTitle').html(videos[1].title);
					$('#video').html(videos[1].iframe);
					$('#videoDescription').html(videos[1].description);
				});

				$('#buttonThree').click(function(){
					console.log("We clicked Button Three!");
					$('#videoTitle').html(videos[2].title);
					$('#video').html(videos[2].iframe);
					$('#videoDescription').html(videos[2].description);
				});

			});

		</script>
	</head>

	<body>
		<div class="buttonContainer">
			<div class="button" id="buttonOne">Video 1</div>
			<div class="button" id="buttonTwo">Video 2</div>
			<div class="button" id="buttonThree">Video 3</div>
		</div>

		<div class="videoContainer">
			<div id="videoTitle">Select A Video To Learn About Coffee...</div>
			<div id="video"></div>
			<div id="videoDescription"></div>
		<div>
	</body>
</html>
	<html>
	<head>
	<title>JS Example 4</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<style type="text/css">
	*{
	margin: 0px;
	padding: 0px;
	font-family: Helvetica;
	}

	/BUTTON STYLING/
	.buttonContainer{
	position: fixed;
	margin-left: 20px;
	z-index: 100px;
	}
	.button{
	color: black;
	border-style: solid;
	border-width: 4px;
	border-color: black;
	width: 60px;
	text-align: center;
	padding: 10px;
	margin: 10px;
	}
	.button:hover{
	background-color: rgb(195,135,0);
	}

	/VIDEO STYLING/
	.videoContainer{
	clear: left;
	margin-top: 40px;
	width: 100%;
	}
	#videoTitle{
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	font-size: 24px;
	}
	#video{
	margin: auto;
	width: 640px;
	}
	#videoDescription{
	margin-top: 20px;
	text-align: center;
	font-size: 16px;
	}

	</style>

	<script type="text/javascript">

	var videos = [
	{
	title: "How To Make A Cappucino",
	iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/2Ao5b6uqI40?rel=0" frameborder="0" allowfullscreen></iframe>',
	description: "This is the first of 3 videos. It's teaches you how to make a cappucino!"
	},
	{
	title: "How To Make A Mocha",
	iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/aEHBmi1927g?rel=0" frameborder="0" allowfullscreen></iframe>',
	description: "This is the second of 3 videos. It's teaches you how to make a mocha!"
	},
	{
	title: "How To Make A Macchiato",
	iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/pPxWxY7kXG4?rel=0" frameborder="0" allowfullscreen></iframe>',
	description: "This is the last of 3 videos. It's teaches you how to make a macchiato!"
	}
	];

	$( document ).ready( function(){

	$('#buttonOne').click(function(){
	console.log("We clicked Button One!");
	$('#videoTitle').html(videos[0].title);
	$('#video').html(videos[0].iframe);
	$('#videoDescription').html(videos[0].description);
	});

	$('#buttonTwo').click(function(){
	console.log("We clicked Button Two!");
	$('#videoTitle').html(videos[1].title);
	$('#video').html(videos[1].iframe);
	$('#videoDescription').html(videos[1].description);
	});

	$('#buttonThree').click(function(){
	console.log("We clicked Button Three!");
	$('#videoTitle').html(videos[2].title);
	$('#video').html(videos[2].iframe);
	$('#videoDescription').html(videos[2].description);
	});

	});

	</script>
	</head>

	<body>
	<div class="buttonContainer">
	<div class="button" id="buttonOne">Video 1</div>
	<div class="button" id="buttonTwo">Video 2</div>
	<div class="button" id="buttonThree">Video 3</div>
	</div>

	<div class="videoContainer">
	<div id="videoTitle">Select A Video To Learn About Coffee...</div>
	<div id="video"></div>
	<div id="videoDescription"></div>
	<div>
	</body>
	</html>