We Keep Coding

Get substring from url and copy to clip board?

Hey i am trying some thing for my school project, i hope you can help me in it.
I want to copy the substring from url, like
Url = https://www.example.com/blah/blah&code=12432
substring = 12432
Also i want to print the substring in Copy Box .
Please Help Me with this issue. It is required for my project to copy some text from string.
(function() {
var copyButton = document.querySelector('.copy button');
var copyInput = document.querySelector('.copy input');
copyButton.addEventListener('click', function(e) {
e.preventDefault();
var text = copyInput.select();
document.execCommand('copy');
});
copyInput.addEventListener('click', function() {
this.select();
});
})();
html, body {
height: 100%;
}
body {
font-size: 16px;
background: #FFD1DD;
display: flex;
align-items: center;
justify-content: center;
}
* {
box-sizing: border-box;
}
.wrapper {
padding: 0 5px;
}
h1 {
text-align: center;
font-size: 40px;
margin-bottom: 1.2em;
text-decoration: underline;
text-transform: uppercase;
}
p {
font-family: 'VT323', monospace;
font-size: 20px;
}
.container {
display: flex;
background: #FFA3BB;
border-radius: 7px;
padding: 10px;
margin: 0 auto;
}
h3 {
font-size: 28px;
text-transform: uppercase;
text-align: center;
span {
display: inline-block;
position: relative;
}
}
.copy, .paste {
flex-grow: 1;
width: 50%;
}
.copy {
border-right: 2px solid;
padding-right: 10px;
h3 {
span {
background: #76ECFF;
}
}
input {
padding-right: 90px;
}
}
.paste {
padding-left: 10px;
h3 {
span {
background: #FAE916;
}
}
}
form {
position: relative;
width: 100%;
input {
display: block;
width: 100%;
border: 3px solid;
outline: 0;
background: #FFF;
font-size: 25px;
padding: 5px 4px;
margin-bottom: 20px;
}
button {
display: block;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: 0;
outline: 0;
color: #FFF;
background: #000;
font-family: 'VT323', monospace;
font-size: 25px;
text-transform: uppercase;
padding: 0.08em 0.8em;
cursor: pointer;
}
}
<div class="wrapper">
<h1>Link Copy</h1>
<p>Select the link text by clicking within the input then copy yourself or just click the copy button. Paste into the paste side to see that it works!</p>
<div class="container">
<div class="copy">
<h3>Copy <span><i class="fa fa-hand-peace-o"></i></span></h3>
<form>
<input type="text" value="https://codepen.io/she_codes/pen/OgrJJe/">
<button type="button">Copy</button>
</form>
</div>
<div class="paste">
<h3>Paste <span><i class="fa fa-smile-o"></i></span></h3>
<form>
<input type="text">
</form>
</div>
</div><!-- end .container -->
</div><!-- end .wrapper -->

Use this it will work
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"

try this, assuming nothing is ever after "code="
var url = window.location.href;
var index = url.indexOf("code=");
var substring = url.substring(index + 5);
copyInput.setAttribute('value', substring);

How do I get different buttons to pop up separate pop up boxes?

// Get DOM Elements
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelector('#modal-btn');
const closeBtn = document.querySelector('.close');
const modal2 = document.querySelector('#my-modal2');
const modalBtn2 = document.querySelector('#modal-btn2');
const closeBtn2 = document.querySelector('.close');
// Events
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
modalBtn2.addEventListener('click', openModal);
closeBtn2.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
// Open
function openModal() {
modal.style.display = 'block';
}
// Close
function closeModal() {
modal.style.display = 'none';
}
// Close If Outside Click
function outsideClick(e) {
if (e.target == modal) {
modal.style.display = 'none';
}
}
/**
{
margin: 0;
padding: 0;
font-family: Verdana,Geneva,sans-serif;
}*/
.team-section
{
background: #f1f2f6;
text-align: center;
}
.inner-width
{
max-width: 1200px;
margin: auto;
padding: 40px;
color: #333;
overflow: hidden;
}
.team-section h1
{
font-size: 20px;
text-transform: uppercase;
display: inline-block;
border-bottom: 4px solid;
padding-bottom: 10px;
}
.pe
{
float: left;
width: calc(100% / 3);
overflow: hidden;
padding: 40px 0;
transition: 0.4s;
}
.pe:hover
{
background: #dfe4ea;
}
.pe img
{
width:250px;
height: 250px;
border-radius: 50%;
}
.p-name
{
margin: 5px;
text-transform: uppercase;
color: #70AD47;
}
.p-des
{
font-style: italic;
color: #006600;
}
.p-sm
{
margin-top: 16px;
}
.p-sm a
{
margin: 0 4px;
display: inline-block;
width: 30px;
height: 30px;
transition: 0.4s;
}
.p-sm a:hover
{
transform: scale(1.3);
}
.p-sm a i
{
color: #333;
line-height: 30px;
}
#media screen and (max-width: 960px) {
.pe{
width: 45%;
}
}
#media screen and (max-width: 768px) {
.pe{
width: 50%;
}
}
#media screen and (max-width: 600px) {
.pe{
width: 100%;
}
}
:root {
--modal-duration: 1s;
--modal-color: #70AD47;
}
.button {
background: #006600;
padding: 1em 2em;
color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
margin: 10% auto;
width: 60%;
box-shadow: 0 5px 8px 0 rgba(112, 173, 71), 0 7px 20px 0 rgba(112, 173, 71);
animation-name: modalopen;
animation-duration: var(--modal-duration);
}
.modal-header h2,
.modal-footer h3 {
margin: 0;
}
.modal-header {
background: var(--modal-color);
padding: 15px;
color: white;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-body {
padding: 10px 20px;
background: #fff;
}
.modal-footer {
background: var(--modal-color);
padding: 10px;
color: #fff;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.close {
color: #ccc;
float: right;
font-size: 30px;
color: #fff;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="team-section">
<div class="inner-width">
<div class="pers">
<div class="pe">
<img class="alignnone size-medium wp-image-763" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/David-full-colour-photo-2-253x300.jpg" alt="" width="253" height="300" />
<div class="p-name">David Small</div>
<div class="p-des">Director of Innovation and Strategy</div>
<p style="text-align: center;"><button id="modal-btn" class="button">Read More</button>
<div id="my-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>David Small</h2>
</div>
<div class="modal-body">
<p>David Small is the founder and Managing Director here at Patient Guard Group. David worked for the MHRA as a Higher Medical Device Specialist and with Industry in
QA, RA and Project Leader Roles, helping to develop Medical Devices and gain regulatory approval for them. In 2017 David spotted an opportunity in the market for a no nonsense approach to Medical Device consulting, reducing technical jargon and making QA and RA easy to understand to business owners and businesses who
manufacture, distribute or own label Medical Devices, and hence Patient Guard was born.</p>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
</div>
<div class="pe">
<img class="alignnone size-medium wp-image-757" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Paul-full-colour-photo-2-267x300.jpg" alt="" width="267" height="300" />
<div class="p-name">Paul Mccann</div>
<div class="p-des">Finance Director</div>
<p style="text-align: center;"><button id="modal-btn2" class="button">Read More</button>
<div id="my-modal2" class="modal2">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Paul Mccann</h2>
</div>
<div class="modal-body">
<p>Paul is the finance director of Patient Guard Ltd.</p>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
</div>
I am new to JavaScript and think my code is incorrect. So my issue is I have a Meet The Team page on my website and below I have added read more buttons. When the user clicks on the read more buttons underneath each team member, a popup box will appear with text about each team member. However all the buttons share the same text from the first team member and I am unable to change this.
HTML for first team member
HTML
HTML for new team member
JavaScript
JavaScript
JavaScript

How come the button doesnt work when clicked?

So I am trying to build this website but the button when pressed does not pop up the screen that will ask to fill with name and phone number and was wondering why this is not working. I am a complete noob when it comes to HTML and CSS, still learning most of the ways and needed help any advice and corrections will be greatly appreicated. Also, I am using JSFiddle I do not know if that makes a difference. Thank you in advance.
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* Full-width input fields */
input[type=text], input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: clear;
color: black;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 25px;
}
button:hover {
opacity: 0.8;
background-color: red;
}
/* this is for the box on the top of page */
.boxbar_top{
height:20%;
width: 100%;
position: static; /*assign on top when stroll */
right:0;
overflow:hidden;
background-color: red;
}
/*accessing the button layout */
.boxbar_top a {
float: left;
text-align: left;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* bottom layout of screen */
.boxbar_bttom{
height: 20%;
width: 100%;
position: static; /* assign on top when stroll */
right: 0;
overflow: hidden;
background-color: red;
}
/*accessing the bottom layput */
.box_bar_bttom a{
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* tabs layout */
.tabs{
background-color: inherit;
float: center;
border: 15px solid red;
padding: 14px 16px;
font-size: 17px;
border-radius: 25px;
padding: 20px;
width:200px;
height: 100%;
}
/*style of the tabs inside */
.tabs-button{
margin: 0;
position: absolute;
color: black;
padding: 22px 16px;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
cursor: pointer;
font-size: 20px;
}
.box{
margin: auto;
width: 60%;
padding: 10px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
/*show the text when hover through tab */
.hiddenText{
display: none;
}
.hoverDiv:hover + .hiddenText{
display: block;
color: green;
font-size: 22px;
font-weight: bold;
}
/* cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* the center of first-last-#...etc */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
padding-top: 60px;
}
/*model layput when clicked */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid red;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/*hover on layout */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
<!-- this is the layout of the first page for crete a cake -->
<!-- this is the problem of aligning the iteams on the right spots -->
<!-- problem the buttons are not shown -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="order cake">
<title>Create Cake</title>
</head>
<body>
<div class="boxbar_top">
<a class="active"> </a>
<form>
<select name="dropdown">
<option value="ENGLISH"></option>
<option value="SPANISH"></option>
</select>
</form>
<p class="boxbar_top; align: right;">
<h2 style="color: white; align-items: right;">
Order your cake online
</h2>
</p>
</div>
<div class="box">
<div class="tabs">
<!-- when clicked pop asked for user name and number -->
<div class="imgcontainer">
<span onclick="document.getElementById('info').style.display='none'" class="close" title="Close Modal"> </span>
<button onclick ="container"> ADD ORDER </button>
</div>
<div class="modal">
<div class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<!-- this is the area pops out when the user hits add order -->
<div class="container">
<!-- enter the first name -->
<label for="fname"><b>First Name</b></label>
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<!-- enter the last name -->
<label for="lname"><b>Last Name</b></label>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<!-- phone number -->
<label for="phone"><b>Phone Number</b></label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" placeholder="Phone Number" required>
<!-- submit number -->
<button type="submit" value="Submit">Submit</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('info').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
</div>
<div style="tabs-button">
<button onclick="document.getElementById('info').style.display='block'"> CHECK ORDER </button>
</div>
<div style="tabs-button">
<button onclick=" ">DELETE ORDER </button>
</div>
</div>
</div>
<div class="boxbar_top">
<a class="active"> </a>
</div>
</body>
</html>

you have not assigned id to your modal, but have done getElementById('id01')
<div class="modal" id="id01">
and your btn triggering modal should be sthng like this:
<button type="button" id="btn">Add order</button>
and your js:
var btn = document.getElementById("btn");
var modal = document.getElementById("id01");
btn.onclick = function() {
modal.style.display = "block";
}

Remove double-click on dropdown link

I'm not very knowledgeable in javascript. But I need a dropdown on a vertical menu that is pure javascript, so I copied/paste the script from W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
and modified it to fit the page style. This menu needs to be on multiple pages, so it's also an html include. I got it to somewhat work, but you have to double click the drop-drop down in order to close it and this needs to be a single-click. I've been searching for a solution for a couple weeks now and still not sure what I'm doing wrong. I can't use jquery, bootstrap or any outside library since it's not connected to the internet.
HTML:
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Codepen

The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.
You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:
(Run code snippet)
There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.
var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display= "block";
}
});
#content {
margin: 1.875em 0px 0.625em 0px;
width: auto;
background-color: #002f6c;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
display: inline-block;
overflow: hidden;
top: 9.375em;
}
.quick {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
font-family: sans-serif;
}
.quick a {
display: block;
height: auto;
padding-top: 0.625em;
padding-bottom: 0.625em;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
text-align: center;
text-decoration: none;
background-color: #888B8D;
}
.quick a:hover {
display: block;
width: auto;
height: auto;
color: #002F6C;
background-color: #FFD300;
}
.topvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmverthome {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.vertheader {
width: auto;
padding: 2%;
display: block;
text-align: center;
}
.vertbtn {
width: auto;
cursor: pointer;
display: block;
}
.vertbtn :hover {
background-color: #FFD300;
position: relative;
display: block;
}
a.backhome {
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
color: #fff;
text-align: center;
padding: 2%;
box-sizing: border-box;
}
a.backhome:hover {
color: #002f6c;
background-color: #FFD300;
position: relative;
display: block;
}
.quicklinks {
color: #fff;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
}
.drop-button {
padding-top: 0.625em;
padding-bottom: 0.625em;
text-decoration: none;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
color: #fff;
display: block;
border: none;
background-color: #888B8D;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.drop-button:hover {
color: #002f6c;
background-color: #FFD300;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.active {
background-color: #06a7e0;
color: white;
}
.dropdown-container {
display: none;
background-color: #b4e4f5;
border-bottom: solid 2px #06a7e0;
}
.dropdown-container > a {
background-color: #50c1e9;
border-bottom: solid 1px #06a7e0;
}
a {
display: block;
position: relative;
color: #f3f3f3;
text-decoration: none;
}
a:hover {
color: #fff;
position: relative;
}
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div>Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>

why #control{} in CSS but not in html or JS

I was going through this code for Codeplayer in Codepen (see link below), there is a #control{} listed in the CSS code but not mentioned in either HTML or JS code. Could anyone tell me why. Is this a mistake? I'm a newbie to web development so would really like to understand if this is standard or a trick... Thank you!
https://codepen.io/likezli/pen/dXPdJL
CSS code:
body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
li {
list-style: none;
float: left;
}
a {
color: black;
}
.clear {
clear: both;
}
#logo {
font-weight: bold;
padding: 10px 0 0 10px;
float: left;
}
#menuBar {
height: 40px;
width: 100%;
background-color: #EDEDED;
border-bottom: 1px solid #C8C8C8;
box-sizing: border-box;
}
#buttonDiv {
float: right;
padding: 5px 15px 0 0;
}
#runButton {
font-size: 110%
}
#control {}
#toggleDiv {
height: 40px;
margin: auto;
width: 20%;
box-sizing: border-box;
padding-top: 5px;
position: relative;
}
#toggles {
float: left;
margin: 0;
list-style: none;
padding-left: 0;
box-sizing: border-box;
border: 1px solid #D3D3D3;
border-radius: 5px;
}
#toggles li {
float: left;
border-right: 1px solid #D3D3D3;
box-sizing: border-box;
padding: 5px 8px 4px 7px;
}
.codeContainer {
height: 100%;
width: 50%;
float: left;
position: relative;
}
.codeContainer textarea {
width: 100%;
height: 100%;
border: none;
border-right: 1px solid #E5E5E5;
font-family: SourceCodeProRegular, Menlo, Monaco, consolas, monospace;
font-size: 90%;
box-sizing: border-box;
padding: 30px 0 5px 5px;
}
.codeLabel {
position: absolute;
right: 10px;
top: 10px;
}
#cssContainer,
#jsContainer {
display: none;
}
iframe {
height: 100%;
position: relative;
width: 100%;
border: none;
padding-top: 30px;
}
.selected {
background-color: #EAF3FF;
}
a {
text-decoration: none;
}
a:visited {
color: #000000;
}
**here is the html code:**
<div id="container">
<div id="menuBar">
<div id="logo">
CodePlayer
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
<div id="toggleDiv">
<ul id="toggles">
<a href="#">
<li class="toggle selected">HTML</li>
</a>
<a href="#">
<li class="toggle">CSS</li>
</a>
<a href="#">
<li class="toggle">JS</li>
</a>
<a href="#">
<li class="toggle selected" style="border:none">Result</li>
</a>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="codeContainer" id="htmlContainer">
<div class="codeLabel">HTML</div>
<textarea id="htmlCode"><div id="test"></div></textarea>
</div>
<div class="codeContainer" id="cssContainer">
<div class="codeLabel">CSS</div>
<textarea id="cssCode"></textarea>
</div>
<div class="codeContainer" id="jsContainer">
<div class="codeLabel">Javascript</div>
<textarea id="jsCode"></textarea>
</div>
<div class="codeContainer" id="resultContainer">
<div class="codeLabel">Output</div>
<iframe id="resultFrame"></iframe>
</div>
</div>
**JS Code:**
var windowHeight = $(window).height();
var menuBarHeight = $("#menuBar").height();
// code container height calculated
var codeContainerHeight = windowHeight - menuBarHeight;
$(".codeContainer").height(codeContainerHeight + "px");
// Toggling between HTML, CSS, JS and Output
$(".toggle").click(function(event) {
// toggle items in menuBar
$(this).toggleClass("selected");
// get html of list item (html, css, js or result) in lowercase
var activeDiv = $(this).html().toLowerCase();
// combine it to one of the cor container id's (htmlContainer, cssContainer, etc.)
// toggle show or hide
$("#" + activeDiv + "Container").toggle();
// count the container id's which are not hidden (display != none)
var showingDivs = $(".codeContainer").filter(function() {
return ($(this).css("display") != "none");
}).length;
// 100% width divided by active divs
var width = 100 / showingDivs;
// set the width
$(".codeContainer").width(width + "%");
});
$("#runButton").click(function(event) {
// find html tag in iframe and set this to html("text")
$("iframe").contents().find("html").html('<style>' + $("#cssCode").val() + '</style>' + $("#htmlCode").val());
// run javascript code in iframe
document.getElementById("resultFrame").contentWindow.eval($("#jsCode").val());
});

We can create styles whatever for id, or class in css,,,like you said #control{},,If there is any id or class assigned to tag / element, then only the styles gets reflected,,otherwise css wont applied.