JSFiddle - React, Tailwind, and code Playground

by mark edwards

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
    <div style="width: 100%; height: 650px;" id="jqxWidget">
        <input type="button" value="Open" id="showWindowButton" />
        <input type="button" value="Close" id="hideWindowButton" />
        <div
            id="mainDemoContainer">
            <div id="customWindow">
                <div id="customWindowHeader">
                    <span id="captureContainer" style="float: left"></span>
                </div>
                <div id="customWindowContent" style="overflow: hidden">
                    <div style="margin: 1px">
		        <video id='marksVideo'	src='http://comptonpeslonline.com/comptonPractice//mediaFiles/american/video/ogv//headshotVideo/problem.ogv'>
			</video>
                        </div>
                </div>
            </div>
        </div>
    </div>

JavaScript

var customButtonsDemo = (function () {

            function _addEventListeners() {
                $('#showWindowButton').mousedown(function () {
                    $('#customWindow').jqxWindow('open');
                });
                $('#hideWindowButton').mousedown(function () {
                    $('#customWindow').jqxWindow('close');
                });
		       $('#customWindow').on('open', function (event) {
			        marksVideo.play();
		      });
            };

            function _createElements() {
                $('#showWindowButton').jqxButton({ width: '80px'});
                $('#hideWindowButton').jqxButton({ width: '80px' });
                $('#customWindow').jqxWindow(	
			{	width			:	165
			,	autoOpen		:	false
			,	height			:	243
			,	resizable		:	false
			,	showCloseButton		:	false
            }
		);
 };
            return {
                init: function () {
                    _createElements();
                    _addEventListeners();
                }
            };
        } ());

        $(document).ready(function () {
            customButtonsDemo.init();
            $('#marksVideo').bind('ended', function() {
                $('#customWindow').jqxWindow('close');
            });
        });