Confusion in Code Communication
The following IDs lack proper communication:
- #html-button
- #css-button
- #js-button
- #result-button
To address this, I introduced a new class called .selected. The code functions well with the current setup. However, removing selected from any of these IDs necessitates adding additional CSS and setting "display: none" for corresponding viewport containers:
- #html-container
- #css-container
- #js-container
- #result-container.
I acknowledge that using if statements is one approach, but I also seek alternative methods or functions to streamline this process. I value clear, efficient, and minimalistic code over unnecessary checks and loops.
My current method involving toggle() and toggleClass() does not seamlessly handle manual removal of the .selected class without simultaneously adding display: none to my ID container divs.
Sometimes, I may want to change the default open ID containers upon app launch, which necessitates manually removing the .selected class.
I would appreciate fresh perspectives on different approaches to tackle this issue.
Access My Code on CSSDeck
Javascript Section
$('.code-container').css('height', $(window).innerHeight() - 39 + "px");
$(window).resize(function () {
$('.code-container').css('height', $(window).innerHeight() - 39 + "px");
});
$("[id$=button]").click(function () {
$(this).toggleClass('selected');
var viewID = "#" + $(this).html() + "-container";
$(viewID).toggle();
var viewSize = $(window).innerWidth()/$('.selected').length;
$(".code-container").css("width", viewSize);
}
);
$('#run').click( function() {
var html = $('#htmlCode').val();
var css = $('#cssCode').val();
var js = $('#jsCode').val();
$('#iframe').contents().find("html").html("<style>" + css + "</style>" + html);
});
HTML Section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<title>Interactive Code Editor</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p id="logo">CodeEditor</p>
<nav>
<ul>
<li id="html-button" class="toggle selected no-highlight">html</li>
<li id="css-button" class="toggle selected no-highlight">css</li>
<li id="js-button" class="toggle selected no-highlight">js</li>
<li id="result-button" class="toggle selected no-highlight">result</li>
</ul>
</nav>
<div id="run" class="no-select">Run</div>
</div>
[…]CSS Section
/* Global Settings */
* { padding: 0; margin: 0;}
body {
font-size: 14px;
font-family: sans-serif;
}
.no-highlight {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Header Logo Toggles and Buttons */
#header {
width: 100%; height: 28px;
background-color: #222;
padding: 4px;
}
#header #logo {
color: #fff;
font-weight: 500;
position: absolute;
left: 10px; top: 4px;
font-size: 1.5em;
line-height: 28px
}
[…]