jabranr/javascript-bootstrap-example.html

## javascript-bootstrap-example.html
<!--

 This is code for working example of vanilla JavaScript Bootstrap
 script at: https://gist.github.com/jabranr/254f6b47dd765ac50654

 Copy this all code and save as an HTML file to see the demo.

-->

<!doctype HTML>
<html>
<head>
	<title>Example Use</title>
	<script>
        !(function(root, doc, factory)	{

        	/**
        	 * Global object to reside inside Window object
        	 *
        	 * Replace JR with any other prefixes and then
        	 * use it accordingly for calling methods from it.
        	 * Prefixes are mostly relevant to the current project.
        	 */

        	window.JR = window.JR || factory(root, doc);

        })(this, document, function(window, document)	{

        	var jr = {

        		/**
        		 * Multipurpose function to attach event handlers
        		 */
        		on: function(event, element, callback) {
        			if (document.addEventListener)
        				element.addEventListener(event, callback, false);
        			else
        				element.attachEvent('on' + event, callback);
        		},


        		/**
        		 * Method to check if DOM is ready
        		 */
        		domReady: function(callback) {
        			if (document.addEventListener)
        				document.addEventListener('DOMContentLoaded', callback);
        			else {
        				document.attachEvent('onreadystatechange', function() {
        					if (document.readyState === 'interactive')
        						callback();
        					});
        			}
        		},


        		/**
        		 * Method to check if DOM is loaded
        		 */
        		domLoaded: function(callback) {
        			return jr.on('load', window, callback);
        		}
        	}

        	return jr;
        });

	</script>
</head>
<body>

	<button type="button" id="myButton">Click Me!</button>

	<script>

		function domReadyFunction() {
			alert ('This alert is to confirm that DOM is now ready.');
		}

		function domLoadedFunction() {
			alert ('This alert is to confirm that DOM is now loaded.');
		}

		JR.domReady(domReadyFunction);

		JR.domLoaded(domLoadedFunction);

		JR.on('click', document.getElementById('myButton'), function() {
			alert('Button is clicked!');
		});

	</script>

</body>
</html>
	<!--

	This is code for working example of vanilla JavaScript Bootstrap
	script at: https://gist.github.com/jabranr/254f6b47dd765ac50654

	Copy this all code and save as an HTML file to see the demo.

	-->

	<!doctype HTML>
	<html>
	<head>
	<title>Example Use</title>
	<script>
	!(function(root, doc, factory) {

	/**
	* Global object to reside inside Window object
	*
	* Replace JR with any other prefixes and then
	* use it accordingly for calling methods from it.
	* Prefixes are mostly relevant to the current project.
	*/

	window.JR = window.JR \|\| factory(root, doc);

	})(this, document, function(window, document) {

	var jr = {

	/**
	* Multipurpose function to attach event handlers
	*/
	on: function(event, element, callback) {
	if (document.addEventListener)
	element.addEventListener(event, callback, false);
	else
	element.attachEvent('on' + event, callback);
	},


	/**
	* Method to check if DOM is ready
	*/
	domReady: function(callback) {
	if (document.addEventListener)
	document.addEventListener('DOMContentLoaded', callback);
	else {
	document.attachEvent('onreadystatechange', function() {
	if (document.readyState === 'interactive')
	callback();
	});
	}
	},


	/**
	* Method to check if DOM is loaded
	*/
	domLoaded: function(callback) {
	return jr.on('load', window, callback);
	}
	}

	return jr;
	});

	</script>
	</head>
	<body>

	<button type="button" id="myButton">Click Me!</button>

	<script>

	function domReadyFunction() {
	alert ('This alert is to confirm that DOM is now ready.');
	}

	function domLoadedFunction() {
	alert ('This alert is to confirm that DOM is now loaded.');
	}

	JR.domReady(domReadyFunction);

	JR.domLoaded(domLoadedFunction);

	JR.on('click', document.getElementById('myButton'), function() {
	alert('Button is clicked!');
	});

	</script>

	</body>
	</html>