JS Bin Clone
This is basically a clone of JSbin that I tried to build from scratch. The Javascript took me a good 20 hours to figure out. I had way too much fun trying to figure out the logic behind the button hover mechanics. Still not sure if it is the optimal way to do it.
Note:
- You will need to download jquery and have it in the same folder as the html, css, and javascript file.
- Javascript needs to be saved as jquery-project.js
- CSS needs to be saved as jquery-project.css
HTML
<!DOCTYPE html>
<html>
<head>
<title> Code Player </title>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-project.css">
</head>
<body>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton activeButton" id="html">
HTML
</div>
<div class="toggleButton" id="css">
CSS
</div>
<div class="toggleButton" id="javascript">
JavaScript
</div>
<div class="toggleButton activeButton" id="output">
Output
</div>
</div>
</div>
<div id="clearFloat"></div>
<div id="bodyContainer">
<textarea id="htmlPanel" class="panel"> <p id="paragraph">Hello World!</p> </textarea>
<textarea id="cssPanel" class="panel hidden"> p { color:green; } </textarea>
<textarea id="javascriptPanel" class="panel hidden"> document.getElementById("paragraph").innerHTML = "hello Asaph"; </textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript" src = jquery-project.js></script>
</body>
</html>
CSS
html {
margin: 0;
}
body {
font-family: sans-serif;
}
#header {
width: 100%;
margin: 0;
padding: 0;
border-top: solid 1px #BFBFBF;
border-bottom: solid 1px #BFBFBF;
height: 37px;
background-color: #EEEEEE;
}
#logo {
font-weight: bold;
float: left;
padding: 6px;
position: relative;
top: 3px;
left: 3px;
}
.toggleButton {
position: relative;
top: 2px;
padding: 6px;
float: left;
border: solid 1px #D2D2D2;
border-right: none;
}
#html {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
#output {
border-right: solid 1px #D2D2D2;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
#buttonContainer {
width: 253px;
margin: 0 auto;
position: relative;
top: -1px;
}
#clearFloat {
clear: both;
}
.activeButton{
background-color: #E8F2FF;
}
.highlightButton {
background-color: #E5E5E5 !important;
}
.highlightActiveButton {
background-color: #F5F9FF !important;
}
.unactiveButton {
background-color: #EEEEEE;
position: relative;
top: 2px;
padding: 6px;
float: left;
border: solid 1px #D2D2D2;
border-right: none;
}
textarea {
width:50%;
resize: none;
border-top: none;
/*border-left: none;*/
}
.panel {
float: left;
border-left: none;
}
iframe {
border: none;
}
.hidden {
display: none;
}
Javascript
// Check if button has a certain class
function checkButton(button, className) {
var buttonBoolean = $(button).hasClass(className);
return buttonBoolean;
}
var toggleActive = checkButton(".toggleButton", "activeButton");
var toggleButtonMethod = toggleActive ? 'activeState' : 'defaultState';
//dynamically choose between 2 states of button
$.fn.buttonHoverState = function(method, hoverState){
var _this = this;
var buttonState = {
defaultState : {
"on" : function(){
_this.removeClass("highlightActiveButton");
_this.addClass("highlightButton");
// console.log("default hover on " + toggleButtonMethod);
},
"off" : function(){
_this.removeClass("highlightButton");
// console.log("default hover off " + toggleButtonMethod);
}
},
activeState : {
"on" : function(){
_this.removeClass("highlightButton");
_this.addClass("highlightActiveButton");
// console.log("active hover on " + toggleButtonMethod);
},
"off" : function(){
_this.removeClass("highlightActiveButton");
// console.log("active hover off " + toggleButtonMethod);
}
}
};
buttonState[method][hoverState]();
}
// Determine Hover states of user defined button
function buttonHover(buttonId) {
$(buttonId).hover(
function(){
toggleActive = checkButton( buttonId, "activeButton");
toggleButtonMethod = toggleActive ? 'activeState' : 'defaultState';
// console.log("Button is " + toggleButtonMethod);
$(this).buttonHoverState(toggleButtonMethod, "on");
// console.log(toggleActive);
}, function () {
toggleActive = checkButton( buttonId, "activeButton");
toggleButtonMethod = toggleActive ? 'activeState' : 'defaultState';
$(this).buttonHoverState(toggleButtonMethod, "off");
// console.log(toggleActive);
}
);
}
// Determine if button is active or not and change state accordingly
function buttonClick(buttonId) {
$(buttonId).click(
function(){
$(this).toggleClass("activeButton");
toggleActive = checkButton(buttonId, "activeButton");
toggleActive ? $(this).removeClass("highlightButton") : $(this).removeClass("highlightActiveButton");
var panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
// console.log(toggleActive);
currentPanelCount = $('.panel').length - $('.hidden').length;
$(".panel").width(($(window).width()/currentPanelCount) - 13);
console.log(currentPanelCount)
// console.log("has default highlight" + $(this).hasClass("highlightButton"));
}
);
}
function updateOutput(){
$("#outputPanel").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head><body>" + $("#htmlPanel").val() + "</body></html>");
document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val())
// eval($("#javascriptPanel").val());
}
buttonHover("#html");
buttonHover("#css");
buttonHover("#javascript");
buttonHover("#output");
buttonClick("#html");
buttonClick("#css");
buttonClick("#javascript");
buttonClick("#output");
//set size of text displays
var totalPanelCount = $('.panel').length;
$(".panel").height($(window).height() - $("#header").height() - 15);
//make iframe display html
$("#outputPanel").contents().find("html").html($("#htmlPanel").val());
updateOutput();
$("textarea").on("change keyup paste" , function() {
updateOutput();
})