djneo92nl/arrowkeytest.html

## arrowkeytest.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>Title</title>
    <style>

        body{
            background-color: #fff;
            overflow: hidden;

        }


        .buttonHolder{

        }

        .button {
            background-color: #d4d4d4;

            padding-bottom: 25%; /* = width for a square aspect ratio */
            -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
            -moz-animation: fadein 2s; /* Firefox < 16 */
            -ms-animation: fadein 2s; /* Internet Explorer */
            -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
        }

        .buttonActive {
            background-color: #1e1e1e;
            color: #fff;
        }


        @keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Firefox < 16 */
        @-moz-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Safari, Chrome and Opera > 12.1 */
        @-webkit-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Internet Explorer */
        @-ms-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* Opera < 12.1 */
        @-o-keyframes fadein {
            from { opacity: 0; }
            to   { opacity: 1; }
        }


    </style>


</head>
<body>

    <div class="container">
        <div class="row">
            <div class="buttonHolder col-md-16">
                <div class="col-md-3  button"><p>Button 1</p></div>

                <div class="col-md-3 button buttonActive"><p>Button 2</p></div>

                <div class="col-md-3 button"><p>Button 3</p></div>

                <div class="col-md-3 button"><p>Button 4</p></div>
            </div>

            <div class="row">
                <div class="col-md-1"><button onclick="gofull()">X</button> </div>
            </div>
        </div>
    </div>


    <script>
        $('div.button').on('click', function() {
            $(this).parent().children().not($(this)).removeClass('buttonActive');
            $(this).addClass('buttonActive');
        });


        $(document).keypress(function(e) {
            var button = $("div.buttonActive");

            if(e.which == 100) {
                // d pressed

                button.removeClass('buttonActive');
                console.debug(button.next('.button'));
                if (button.next('.button').length ){
                    button.next('.button').addClass('buttonActive');
                }
                else {
                    button.parent().children().filter('.button').first().addClass('buttonActive');
                }
            }
            if(e.which == 97) {
                // a pressed

                button.removeClass('buttonActive');
                if (button.prev('.button').length ){
                    button.prev('.button').addClass('buttonActive');
                }
                else {
                    button.parent().children().filter('.button').last().addClass('buttonActive');
                }
            }
        });

        function requestFullScreen(element) {
            // Supports most browsers and their versions.
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function gofull() {
            var elem = document; // Make the body go full screen.
            requestFullScreen(elem);
        }

    </script>
<!--https://codepen.io/lichin-lin/pen/WwMWby-->
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<title>Title</title>
	<style>

	body{
	background-color: #fff;
	overflow: hidden;

	}


	.buttonHolder{

	}

	.button {
	background-color: #d4d4d4;

	padding-bottom: 25%; /* = width for a square aspect ratio */
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 2s; /* Firefox < 16 */
	-ms-animation: fadein 2s; /* Internet Explorer */
	-o-animation: fadein 2s; /* Opera < 12.1 */
	animation: fadein 2s;
	}

	.buttonActive {
	background-color: #1e1e1e;
	color: #fff;
	}





	@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	/* Firefox < 16 */
	@-moz-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	/* Safari, Chrome and Opera > 12.1 */
	@-webkit-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	/* Internet Explorer */
	@-ms-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	/* Opera < 12.1 */
	@-o-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
	}


	</style>


	</head>
	<body>

	<div class="container">
	<div class="row">
	<div class="buttonHolder col-md-16">
	<div class="col-md-3 button"><p>Button 1</p></div>

	<div class="col-md-3 button buttonActive"><p>Button 2</p></div>

	<div class="col-md-3 button"><p>Button 3</p></div>

	<div class="col-md-3 button"><p>Button 4</p></div>
	</div>

	<div class="row">
	<div class="col-md-1"><button onclick="gofull()">X</button> </div>
	</div>
	</div>
	</div>



	<script>
	$('div.button').on('click', function() {
	$(this).parent().children().not($(this)).removeClass('buttonActive');
	$(this).addClass('buttonActive');
	});


	$(document).keypress(function(e) {
	var button = $("div.buttonActive");

	if(e.which == 100) {
	// d pressed

	button.removeClass('buttonActive');
	console.debug(button.next('.button'));
	if (button.next('.button').length ){
	button.next('.button').addClass('buttonActive');
	}
	else {
	button.parent().children().filter('.button').first().addClass('buttonActive');
	}
	}
	if(e.which == 97) {
	// a pressed

	button.removeClass('buttonActive');
	if (button.prev('.button').length ){
	button.prev('.button').addClass('buttonActive');
	}
	else {
	button.parent().children().filter('.button').last().addClass('buttonActive');
	}
	}
	});

	function requestFullScreen(element) {
	// Supports most browsers and their versions.
	var requestMethod = element.requestFullScreen \|\| element.webkitRequestFullScreen \|\| element.mozRequestFullScreen \|\| element.msRequestFullScreen;

	if (requestMethod) { // Native full screen.
	requestMethod.call(element);
	} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
	var wscript = new ActiveXObject("WScript.Shell");
	if (wscript !== null) {
	wscript.SendKeys("{F11}");
	}
	}
	}

	function gofull() {
	var elem = document; // Make the body go full screen.
	requestFullScreen(elem);
	}

	</script>
	<!--https://codepen.io/lichin-lin/pen/WwMWby-->
	</body>
	</html>