manniru
5/13/2018 - 1:45 PM

tv2.html

tv2.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Material Design Box Shadows</title>



      <link rel="stylesheet" href="css/style.css">


<style>
body {
  background: #e2e1e0;
}

.card {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 200px;
  margin: 5px;
  position: static;
  width: 200px;
}

.card1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}

.card-active {
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>

<body>

<div id="ch1" class="card card1"><img src="images/cnn.png" width="200" height="200" /></div>
<div id="ch2" class="card card1"><img src="images/bbc.png" width="200" height="200" /></div>
<div id="ch3" class="card card1"></div>
<div id="ch4" class="card card1"></div>
<div id="ch5" class="card card1"></div>
<div id="ch6" class="card card1"></div>


<script>
$(document).ready(function() {

	$("div[id^='ch']").removeClass( "card-active" );
	$( "#ch1" ).addClass( "card-active" );
	console.log('ready');
});



$(document).keydown(function(event) {
	switch (event.keyCode) {
		case 37: //left
			var active_id = $(".card-active").attr('id');
			var id = parseInt(active_id.replace( /^\D+/g, ''))
			
			if (id<2) {
				id = 6;
			}
			
			else {
				id = id - 1;
			}

			$("div[id^='ch']").removeClass( "card-active" );
			$( "#ch"+id ).addClass( "card-active" );
			break;
		case 38:
			//$('#up').css('background-color', 'red');
			//$('#down').css('background-color', 'green');

			//$( "#up" ).addClass( "mdl-button--accent" );
			//$( "#up" ).removeClass( "mdl-button--colored" );

			$( "#tv1" ).addClass( "mdl-shadow--24dp" );
			$( "#tv4" ).removeClass( "mdl-shadow--24dp" );

			console.log('up');
			break;
		case 39: //right	
			var active_id = $(".card-active").attr('id');
			var id = parseInt(active_id.replace( /^\D+/g, ''));

      		if (id <= 6) {
				id = id + 1;
			}
			
			if (id > 6) {
				id = 1;
			}

			$("div[id^='ch']").removeClass( "card-active" );
			$( "#ch"+id ).addClass( "card-active" );
			break;
		case 40: //down

			break;

			default:
				var active_id = $(".card-active").attr('id');

			console.log('i am default id='+active_id);
	}
});


</script>


</body>

</html>