We Keep Coding

Why is my hide() and show() not working even without error in JQuery? [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 1 year ago.
I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.
html:
$(function(){
$('.btn .button').on('click', function(){
$('.container').show()
$('.container-two').hide()
})
})
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue" class="button">
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.

First of all, change the first submit type input to a button.
Instead of <input type="submit" name="submit" value="Continue" class="button">
Should be <button class="button" type="button">Continue</button>
This will prevent the form submission, and add the missing "button" class to the button.
Then modify the jquery code like this:
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide()
$('.container-two').show()
})
})
My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide();
$('.container-two').show();
});
});
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information 1</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<button class="button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information 2</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.
prevent the default submit event and add hide() and show() on correct divs
$(function(){
$('.btn .button').on('click', function(e){
e.preventDefault();
$('.container').hide()
$('.container-two').show()
})
})

Read Barcode [Live] On Desktop Browser and get the value

<html>
<head>
<style>
#outer
{
height:100%;
margin:0px auto;
border: 1px solid;
background: url("https://preview.ibb.co/gYykLn/images.jpg");
height: auto;
width:auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#form
{
position: relative;
height: auto;
width: 250px;
left: 70%;
bottom: 10%;
background-color: rgba(0,0,0,0.6);
border-color: #ffa200;
border-width: 50px;
border-radius: 20px;
padding-bottom:10px;
}
.logo
{
height: 32px;
width: 32px;
position: relative;
top: 10px;
left:0px;
margin-left: 10px;
}
.lgo
{
position: absolute;
right: 215px;
top: 56px;
}
.first
{
height: 40px;
background-color: rgba(0,0,0,0.8);
color: white;
width: 180px;
border-radius:5px;
margin-top:40px;
}
.a
{
height: 40px;
background-color: rgba(0,0,0,0.8);
color: white;
width: 180px;
border-radius:5px;
margin-top:20px;
}
.a:hover
{
border-color: #ffa200;
}
.first:hover
{
border-color: #ffa200;
}
.b
{
font-size: 20px;
color: white;
height: 40px;
width: 180px;
border-radius:5px;
background-color: #ffa200;
border-radius: 5px;
margin-top:10px;
margin-left:30px;
}
.b:hover
{
background-color: #dd8c00;
}
</style>
</head>
<body>
<div id="outer">
<div id="form">
<form>
<img class="logo" src="https://image.ibb.co/bAvSi7/download.png" >
<input class="a first" type="text" name="regno" required/>
<img class="logo" src="https://image.ibb.co/jpgGRS/l1.png" >
<input class="a " type="text" name="name" placeholder="Enter your name" required/>
<img class="logo" src="https://image.ibb.co/cSWuD7/l3.png" >
<input class="a" type="email" name="email" placeholder="Enter your email" required/>
<img class="logo" src="https://image.ibb.co/eeGSY7/l2.png" >
<input class="a" type="password" name="pass" placeholder="Enter your password" required/>
<img class="logo" src="https://image.ibb.co/eeGSY7/l2.png" >
<input class="a" type="password" name="password" placeholder="Confirm your password" required/>
<img class="logo" src="https://image.ibb.co/bKqX0n/l4.jpg" >
<input class="a" type="tel" name="mobile" placeholder="Enter your mobile number" required/>
<input class="b" type="submit" value="Register"/>
</form>
</div>
</div>
</body>
</html>
I have a registration page designed that looks like ABOVE html
I want a pop-up window to be displayed as soon as we land up on page and it request to 'scan the barcode to continue' and
It will get the value from barcode using desktop/laptop webcam (The bar code is actually on our college ID card, which has the value that is OUR registration Number) and put the value on the ID textfield (which is disabled i.e. user cannot edit that textbox)

CSS Animation Creation

I am new to CSS animations and have very little knowledge with animations specifically. My intention is to have the grey box come down from the top line above the login / register section. At the moment I have only got it fading in. If anybody can help that would be great.
Please run the code in your own browser to see how it's supposed to run.
P.S. The animation runs when the button is clicked.
If anybody can help that would be great.
var regbutton = document.getElementById('Register_Button');
var regpopup = document.getElementById('cover_for_register');
regbutton.onclick = function () {
"use strict";
regpopup.style.display = "block";
}
body{
margin: 0px auto;
}
button, input, p, h1, h2, h3, h4, h5, a{ /* State that these particular elements be "fantasy" */
font-family: Tahoma;
}
#home_container{
margin: 0px auto;
}
#home_left_section{
float: left;
height: 100%;
width: 55%;
background:-webkit-linear-gradient(#2aefff, #ffffff);
}
#home_right_section{
float: right;
height: 100%!important;
width: 45%;
box-shadow: 0px 0px 14px #888;
z-index: 10000;
background-color:aliceblue;
}
#home_right_section h1{
padding-bottom: 25px;
padding-top: 25px;
font-size: 60px;
margin: 0px;
text-align: center;
}
#home_right_section h2{
margin: 0px;
}
#home_right_section hr {
margin: 0px;
}
#login_register_container{
display:inline-block;
width: 100%;
}
#login_container{
text-align: center; /* If border is created, width must be changed */
float: left;
padding-right:50px;
padding-left: 30px;
padding-top: 20px;
margin-right: 0px auto;
background-color: aqua;
}
.login_input_fields{
border-radius:5px;
width: 200px;
padding: 5px;
border: 1px solid #bfbfbf;
font-size: 15px;
}
.register_popup_foot{
}
#register_container{
width: 50%;
float: right;
margin: 0px auto;
text-align:left;
}
#cover_for_register{
display: none;
position:fixed;
height: 52%;
width: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: animateone;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes animateone {
from {min-height:200px; opacity:0}
}
#Register_Button{
z-index: 10000;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
width:100px;
height: 50px;
color: white;
text-align: center;
margin-top: 80px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
#Register_Button_Container{
width: 50%;
float: right;
margin: 0px auto;
text-align:center;
background-color: aqua;
height: 217px;
}
<html>
<body>
<head>
<title>Home</title>
<link rel="stylesheet" href="PTrainMeCSS.css">
<meta name="viewpoint" content="width=deive-width" />
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</head>
<div id="home_container">
<section id="home_left_section">
<h1></h1>
</section>
<section id="home_right_section">
<h1>GetFit</h1>
<hr />
<h3 id="welcome_text">Here you can find whatever service you may want throughout the fitness industry</h3>
<hr />
<div id="login_register_container">
<section id="login_container">
<h2>Login</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username / E-Mail" /><br /><br />
<input class="login_input_fields" type="password" name="Password" maxlength="20" placeholder="Password" />
<br />
<br />
<input type="submit" value="Login" />
</form>
<footer class="register_popup_foot">
<a class="register_loginform_foot_text" href="Forgot Password.html">Reset Password</a>
<br />
</footer>
</section>
<div id="Register_Button_Container">
<section>
<button id="Register_Button">Register</button>
</section>
</div>
<div id="cover_for_register">
<section id="register_container">
<h2>Register</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username"/>
<br /><br />
<input class="login_input_fields" type="text" name="E-Mail" placeholder="E-Mail"/>
<br /><br />
<input class="login_input_fields" type="password" name="Password" placeholder="Password"/>
<br /><br />
<label>Age:</label>
<br /> <select type="option" name="Age">
<option></option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select><br /><br />
Security Question: <br /><select type="select" name="Security Question">
<option>Please select one.</option>
<option>What was my school teachers first name?</option>
<option>Whats my favourite chip flavour?</option>
<option>What type was my first car?</option>
<option>What was the name of my first school?</option>
<option>What are my parents names?</option>
<option>How many siblings do i have?</option>
<option>What was the address of my first house?</option>
</select><br /> <br />
Answer: <br /> <input type="text" name="Answer">
Why<br /><br />
<input type="submit" value="Submit">
</form>
</section>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</body>
</html>

Here is the quick solution,
make #cover_for_register = z-index highest from others and change your animation to
#-webkit-keyframes animateone {
from { top:-52%;}
to {top: 5%;}//desired margin from top to cover your login page.
}
it will work fine.

Only thing you have to change is as
#-webkit-keyframes animateone {
from { height:0%;}
to {height: 100%;}
}
AND add below point in CSS...
add top:0; position:absolute; to #cover_for_register
add position:relative; #login_register_container
Look at this : https://jsfiddle.net/dkrvl2011/se93orog/10/show/

Why does my CSS stylesheet not reflect when I pass conditional radio buttons through jQuery/javascript?

I have been struggling with this for weeks now and I don't know how to get past it.
I have a pretty nice CSS style sheet to use with a form. The form has a conditional yes/no radio box that I finally got to work using javascript BUT the CSS styling is completely eliminated. Can someone please help me. I'm beyond confused at this point.
html, body { width: 100%; height: 100%; background: #D2D6DB }
form
{
display: block;
margin: 30px;
overflow: hidden;
background: #FFF;
border: 1px solid #E4E4E4;
border-radius: 5px;
font-size: 0;
}
#media(min-width:800px){
form > div {
display: inline-block;
}
form > div.col-submit {
display: block;
}
}
form > div > label
{
display: block;
padding: 10px 20px 10px;
vertical-align: top;
font-family: Source Sans Pro, Arial, sans-serif;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: #7f7f7f;
cursor: pointer;
}
form > div > info
{
display: block;
padding: 10px 20px 10px;
vertical-align: top;
font-family: Source Sans Pro, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
cursor: pointer;
}
/*form > div > checkLabel
{
display: block;
padding-left: 15px;
/*font-family: Source Sans Pro, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
cursor: pointer;
text-indent:-15px;
}
form > div > checkLabel> input
{
width:13px;
height: 13 px;
padding:0;
margin:0;
vertical align: bottom;
position:relative;
top:-1px;
*overflow:hidden;
}
*/
form > div.col-2, form > div.col-3, form > div.col-4,
form > div.col-5, form > div.col-6, form >div.col-7,
form > div.col-8,form > div.col-1, form > div.col-11{
border-bottom: 1px solid #E4E4E4;
}
#media(min-width: 800px){
form > div.col-2, form > div.col-3, form > div.col-4,
form > div.col-5,form > div.col-6, form >div.col-7, form > div.col-8,
form > div.col-1, form > div.col-11
{ box-shadow: 1px 1px #E4E4E4; border: none; }
}
#media(min-width:800px){
form > div.col-2 { width: 50% }
form > div.col-3 { width: 33.3333333333% }
form > div.col-4 { width: 25% }
form > div.col-1 {width: 100%}
form > div.col-5 {width: 20%}
form > div.col-6 {width: 16.6666666666%}
form > div.col-7 {width:30%}
form > div.col-8 {width:10%}
form > div.col-11 {width:100%}
}
form > div > label > input
{
display: inline-block;
position: relative;
width: 100%;
height: 27px;
line-height: 27px;
margin: 5px -5px 0;
padding: 7px 5px 3px;
border: none;
outline: none;
border-radius: 3px;
background: transparent;
font-size: 14px;
font-weight: 200;
opacity: .66;
transition: opacity .3s, box-shadow .3s;
}
form > div.col-submit {
text-align: center;
padding: 20px;
}
form > div.col-1 {
border: 1px solid #E4E4E4;
background: #051938 ;
font-size: 14px;
padding: 1px;
display: block;
width: 100%;
cursor: pointer;
border: 0;
border-radius: 5px;
text-transform: uppercase;
}
#media(min-width: 800px){
form > div.col-submit button {
width: 30%;
margin: 0 auto;
}
}
form > div.col-submit button:hover {
background: #7f7f7f;
}
form > div > label > select
{
display: block;
width: 100%;
margin: 16px 0 8px;
padding: 0;
background: transparent;
border: none;
outline: none;
font-size: 14px;
font-weight: 200;
opacity: .33;
}
form > div > label > input:focus, form > div > label > select:focus
{
opacity: 1;
box-shadow: 0 3px 4px rgba(0, 0, 0, .15);
}
/*input[type ="date"]{
display: block;
width: 100%;
margin: 16px 0 -3px;
padding: 0;
background: transparent;
border: none;
outline: none;
font-size: 14px;
font-weight: 200;
opacity: .33;
height: 27px;
line-height: 27px;
}*/
/*input[type ="date"]{
display: block;
width: 100%;
margin: 5px -5px 0;
padding: 7px 5px 2px;
background: transparent;
border: none;
outline: none;
font-size: 14px;
font-weight: 200;
opacity: .33;
}
input[type "radio"]{
display: block;
width: 100%;
margin: 5px -5px 0;
padding: 7px 5px 3px;
background: transparent;
border: none;
outline: none;
font-size: 14px;
font-weight: 200;
opacity: .33;
}*/
.sub-questions {
margin: 0 0 1.5em 1em;
padding: 0 0 0 1em;
border-left: 1px solid #cccccc;
}
li
{
list-style-type: none;
}
form > div > label > input[type="date"]
{
display: block;
width: 100%;
margin: 13px 0 3px;
padding: 0;
background: transparent;
border: none;
outline: none;
font-size: 14px;
font-weight: 200;
opacity: .33;
}
form > div > label > input[type="radio"]
{
display: block;
width: 100%;
margin: 16px 0 8px;
padding: 0;
background: transparent;
border: none;
outline: none;
font-size: 14px;
font-weight: 200;
opacity: .33;
}
fieldset,
legend {
border:none;
margin:0;
padding:0;
}
/*button {
background-color: #1d1d1d;
color: white;
font-weight: bold;
box-shadow: none;
text-transform: uppercase;
}*/
.control:checked ~ .conditional,
#yes:checked ~ .conditional,
#required-2:checked ~ .conditional
#option-2:checked ~ .conditional {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.control:not(:checked) ~ .conditional,
#yes:not(:checked) ~ .conditional,
#required-2:not(:checked) ~ .conditional,
#option-2:not(:checked) ~ .conditional {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
<?php
include("home.php");
?>
<!DOCTYPE html>
<html>
<head>
<title>Personal Health Questionnaire</title>
<meta name="description" content="Personal Health Questionnaire">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<header>
<h1>
<center>Employee Eligibility Statement</center>
</h1>
</header>
<main>
<form action="home.php" method = "POST">
<!--Question 1-->
<div class="col-1">
<label>
</label>
</div>
<div class ="col-11">
<label><b>1. </b></label>
<info>Answer this thing
<p></p>
<li> <input type ="radio" name = "yesno" value ="Yes" tabindex = "8" onclick="javascript:yesnoCheck();" id="yesCheck"/> Yes
<input type ="radio" name = "yesno" value ="No" tabindex = "8" onclick="javascript:yesnoCheck();" id ="noCheck"/> No
<b> yes or no </b></li>
<div id="ifYes" style="display:none">
<!-- conditional -->
<div class ="col-4">
<label>Person with the condition: <input type ="text" placeholder="First and last name"/></label>
</div>
<div class ="col-4">
<label>Exact diagnosis: <input type ="text" placeholder = "Diagnosis"/></label>
</div>
<div class ="col-4">
<label>Date diagnosed: <input type ="date" /></label>
</div>
<div class ="col-4">
<label>Date last treated: <input type ="date" /></label>
</div>
<div class ="col-11">
<info><b>List all medication(s) prescribed for this condition:</b></info>
</div>
<div class = "col-4">
<label><center>Name:</center>
<input type = "text" placeholder="First medication"/>
<input type = "text" placeholder="Second medication"/>
<input type = "text" placeholder="Third medication"/>
</label>
</div>
<div class = "col-4">
<label><center>Dosage:</center>
<input type = "text" placeholder="Dosage for first medication"/>
<input type = "text" placeholder="Dosage for second medication"/>
<input type = "text" placeholder="Dosage for third medication"/>
</label>
</div>
<div class = "col-4">
<label><center>Frequency:</center>
<input type = "text" placeholder="Frequency of first medication"/>
<input type = "text" placeholder="Frequency of second medication"/>
<input type = "text" placeholder="Frequency of third medication"/>
</label>
</div>
<div class = "col-4">
<label><center>Currently taking?</center>
<select name ="CT1" tabindex ="">
<option value = "Yes">Yes</option>
<option value = "No">No</option>
</select>
<select name ="CT2" tabindex ="">
<option value = "Yes">Yes</option>
<option value = "No">No</option>
</select>
<select name ="CT3" tabindex ="">
<option value = "Yes">Yes</option>
<option value = "No">No</option>
</select>
</label>
</div>
</div>
</info>
</div>
<!-- End CONDITIONAL -->
<!-- how i want it to look-->
<div class ="col-4">
<label>Person with the condition: <input type ="text" placeholder="First and last name"/></label>
</div>
<div class ="col-4">
<label>Exact diagnosis: <input type ="text" placeholder = "Diagnosis"/></label>
</div>
<div class ="col-4">
<label>Date diagnosed: <input type ="date" /></label>
</div>
<div class ="col-4">
<label>Date last treated: <input type ="date" /></label>
</div>
<div class ="col-11">
<info><b>List all medication(s) prescribed for this condition:</b></info>
</div>
<div class = "col-4">
<label><center>Name:</center>
<input type = "text" placeholder="First medication"/>
<input type = "text" placeholder="Second medication"/>
<input type = "text" placeholder="Third medication"/>
</label>
</div>
<div class = "col-4">
<label><center>Dosage:</center>
<input type = "text" placeholder="Dosage for first medication"/>
<input type = "text" placeholder="Dosage for second medication"/>
<input type = "text" placeholder="Dosage for third medication"/>
</label>
</div>
<div class = "col-4">
<label><center>Frequency:</center>
<input type = "text" placeholder="Frequency of first medication"/>
<input type = "text" placeholder="Frequency of second medication"/>
<input type = "text" placeholder="Frequency of third medication"/>
</label>
</div>
<div class = "col-4">
<label><center>Currently taking?</center>
<select name ="CT1" tabindex ="">
<option value = "Yes">Yes</option>
<option value = "No">No</option>
</select>
<select name ="CT2" tabindex ="">
<option value = "Yes">Yes</option>
<option value = "No">No</option>
</select>
<select name ="CT3" tabindex ="">
<option value = "Yes">Yes</option>
<option value = "No">No</option>
</select>
</label>
</div>
<!-- END how i want it to look-->
<div class = "col-submit">
<button type= "submit" name = "submit" value = "submit">Submit</button>
</div>
</form>
</main>
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';
cssLink.href="style.css";
cssLink.rel="stylesheet";
cssLink.type="text/css";
}
</script>
<!-- Your web-app is https, so your scripts need to be too -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
crossorigin="anonymous"></script>
<script src="/custom.js"></script>
</body>
</html>
Fiddle

Your fiddle is updated, before you click on the link, two things:
1. Your HTML was duplicated hence the "style break"
2. You use a lot the symbol > in your CSS I suggest to NOT use excesively, the > means "direct children of" example:
<form>
<div> <!-- The symbol > in css will affect this div only-->
<div> <!-- Here the symbol > is not taking effect as this is not direct children of form-->
</dv>
And finally the link to the fiddle
Hope this is helpful...

Your CSS selectors are different for both forms. Check the path from the <form> to the <label> for each. It's different.
For example, on the form that works the css selector is
form > div > label
But the path from the Yes form is:
form > info > div > div > label
Need to extend your CSS rules to account for that path.

Issues positioning a DIV in CSS

I am trying to move the "available-rooms-dialog" div to the right of the textarea and alright the words "Available Rooms at the top. I have tried making the textarea width smaller but it still will not place where I want it. Here is my code:
cshtml:
<h2>General Chat</h2>
<div id="wrapper">
<div id="upper-wrapper">
<div id="discussion-dialog">
<textarea rows="30" cols="50" id="discussion"></textarea>
</div>
<div id="available-rooms-dialog">
<h4>Available Rooms</h4>
<button type="button" id="createroom" value="Create Room"></button>
</div>
</div>
<div id="message-dialog">
<textarea rows="3" id="message">Type your message</textarea>
<br/>
<input type="button" id="sendmessage" value="Post" />
<input type="hidden" id="displayname" />
<input type="checkbox" id="enter-sends-message"/>
Enter sends message
</div>
</div>
here is my CSS:
div.container {
position: relative;
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
#wrapper
{
position: relative;
}
#discussion
{
width: 75%;
overflow-y: scroll;
}
#message
{
border: 3px solid #cccccc;
width: 75%;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
/* styles for validation helpers */
.field-validation-error {
color: #b94a48;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #b94a48;
}
.validation-summary-valid {
display: none;
}
#upper-wrapper {
position: relative;
width: 100%;
}
#discussion-dialog
{
/*border: 3px solid #cccccc;*/
font-family: Tahoma, sans-serif;
position: relative;
top: 5px;
}
#available-rooms-dialog
{
position: relative;
right: 0px;
top: 0px;
}
#message-line {
position: relative;
}
#message-dialog
{
position: relative;
top: 10px;
font-family: Tahoma, sans-serif;
}
Here is what it currently looks like:

One option would be to move the available-rooms-dialog above the discussion-dialog in your HTML, and float it to the right. I.e.:
<div id="upper-wrapper">
<div id="available-rooms-dialog">
<h4>Available Rooms</h4>
<button type="button" id="createroom" value="Create Room"></button>
</div>
<div id="discussion-dialog">
<textarea rows="30" cols="50" id="discussion"></textarea>
</div>
</div>
#available-rooms-dialog
{
float: right;
}
Example: http://jsfiddle.net/VxU5Y/

#message-dialog {
float: left;
}
#upper-wrapper {
float: left;
}

You can set your HTML and CSS as given below to arrange your div as required....
HTML -
<h2>General Chat</h2>
<div id="wrapper">
<div id="upper-wrapper">
<div id="discussion-dialog">
<textarea rows="10" cols="50" id="discussion"></textarea>
</div>
<div id="available-rooms-dialog">
<h4>Available Rooms</h4>
<button type="button" id="createroom" value="Create Room"></button>
</div>
<div class="clear"></div>
</div>
<div id="message-dialog">
<textarea rows="3" id="message">Type your message</textarea>
<br/>
<input type="button" id="sendmessage" value="Post" />
<input type="hidden" id="displayname" />
<input type="checkbox" id="enter-sends-message" />Enter sends message</div>
</div>
CSS -
div.container {
position: relative;
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
#wrapper {
position: relative;
}
#discussion {
width: 75%;
overflow-y: scroll;
}
#message {
border: 3px solid #cccccc;
width: 75%;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input, select,
/* styles for validation helpers */
.field-validation-error {
color: #b94a48;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #b94a48;
}
.validation-summary-valid {
display: none;
}
#upper-wrapper {
position: relative;
width: 100%;
float: left;
}
#discussion-dialog {
/*border: 3px solid #cccccc;*/
font-family: Tahoma, sans-serif;
position: relative;
float: left;
}
#available-rooms-dialog {
position: relative;
vertical-align: top;
float: left;
}
#message-line {
position: relative;
}
#message-dialog {
position: relative;
top: 10px;
font-family: Tahoma, sans-serif;
}
.clear {
clear: both;
}