Anomalous padding/margin during slideToggle() jquery - javascript

Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>


For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.


I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.

Related

Submit Pre Typed Text in table from PHP form to email

I have a request form in which I have a table with pre-typed text (which belongs to other field in form in HR) which is in hide/show select option. I need some help in which when the user selects the selected it shows a table with pre-typed text and when the user submits in PHP form, the recipient so gets the exact data in the email.
I have the hide/show part working but the I'm having problems sending the table with text.
i have $usersGMGroup = nl2br($_POST["acc_GMGroup"]); so i can have the text can go to next line.
Currently, I didn't have any way in which I could submit the table so I have the same table text written in textarea, which works but when I submit the form with data and the recipient gets textarea text with the other request. For example, if I sent a request for an IT service the form also sends the textarea pre type text.
Is there any way i can make the textarea with pre type text only submit when its select is selected
$(function() {
$("#groups").change(function() {
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
}
});
});
$('#groups').trigger('change');
//---------------------Hide Functions When Program Loads--------------------------------//
$(document).ready(function() {
$("#acc_GMGroup").hide();
});
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
color: #666;
line-height: 19px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h1 {
position: absolute;
margin: 0;
font-size: 36px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 75%;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 50px 0 #095484;
}
.banner {
position: relative;
height: 300px;
background-image: url("");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
input {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 17px;
font-weight: bold;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 3px 0;
background: transparent;
font-size: 17px;
font-weight: bold;
}
.hiddenField {
display: none;
}
table.tb {
border-collapse: collapse;
width: 650px;
}
.tb th,
.tb td {
padding: 6px;
border: solid 1px #262626;
}
.tb th,
.tb td {
color: #262626;
}
.tb th {
background-color: lightblue;
}
textarea {
white-space: pre;
text-align: left;
width: 650px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3">
<div class="form-group">
<h2>Requestor's Information          Employee's Information</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userReqEmp">Requestor Name</label>
<input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userNameEmp">Full Name</label>
<input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userComEmp">Comments (Optional)</label>
<textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12" for="userEIDEmp">Employee ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userOIDEmp">One ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userDateEmp">Start Date</label>
</div>
<div class="row">
<div class="col-12">
<input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12">Select Department</label>
</div>
<div class="row">
<div class="col-12">
<select id="groups" name="groups" class="form-control w-100">
<option value="">Select an option</option>
<option value="GM">GM</option>
<option value="AGM">AGM</option>
</select>
</div>
</div>
<br>
<!-- GM -->
<div class="row">
<div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
<h2>DC GM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
<!-- Title -->
</tr>
<tr>
<td>PUBLIC<br>FunctionManagers<br>Managers</td>
<!-- Content -->
</tr>
<tr>
<th>Distribution List</th>
<!-- Title -->
</tr>
<tr>
<td>Woodland Mgmt<br>DCManager<br>InboundManagers<br>SrManager</td>
<!-- Content -->
</tr>
<tr>
<th>Additional Access</th>
<!-- Title -->
</tr>
<tr>
<td>DCNet<br>AS400<br>VPN Non-Standard</td>
<!-- Content -->
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup">
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
</div>
</div>
</div>
<!-- End of Right Side -->
</div>
</div>
</form>

you can have it disabled by default by adding disabled attribute to it which will prevent the field from being submitted with the rest of the form
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup" disabled>
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
and re-enable it when option selected
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
$("#acc_GMGroup").prop('disabled','');
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
$("#acc_GMGroup").prop('disabled','disabled');
}

Responsive form with different background

h2{
font-weight: 700;
}
h4{
color:#F13F6C
}
.signup-section{
padding-top: 2rem;
}
form{
padding-top:10rem;
}
#media (min-width: 1200px){/*Mac*/
.background-form{
height: 60em;
width: auto;
background: url("https://www.apple.com/v/macbook-air/k/images/specs/mba_router__c00eqnbbyuy6_large_2x.png") center center;
background-size: contain;
background-position: center 0px;
background-repeat: no-repeat;
margin-bottom: -12rem;
}
}
#media (max-width: 1200px){
.contatti{
display: none !important;
}
}
#media (max-width: 1200px) and (min-width: 500px){/*Ipad*/
.background-form{
height: 60em;
width: auto;
background: url("https://miopc.it/90275-large_default/apple-ipad-pro-129-con-chip-m1-quinta-gen-wi-fi-256gb-grigio-siderale.jpg") center center;
background-size: contain;
background-position: center 0px;
background-repeat: no-repeat;
margin-bottom: -12rem;
}
}
#media (max-width: 500px){/*Iphone*/
.background-form{
height: 70em;
width: auto;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/IPhone_11_Pro_Midnight_Green.svg/1200px-IPhone_11_Pro_Midnight_Green.svg.png") center center;
background-size: contain;
background-position: center 0px;
background-repeat: no-repeat;
margin-bottom: -35rem;
}
}
.contatti{
padding-top: 10rem;
}
#contacts .form-control{
background-color: transparent;
border: none;
border-bottom:1px solid rgb(255, 255, 255);
border-radius: 0;
}
#contacts .form-control::-webkit-input-placeholder{
color: white
}
#contacts .form-control:focus::-webkit-input-placeholder{
color: rgba(147, 147, 147, 1.00);
}
#contacts .form-control:focus{
background-color: transparent;
box-shadow: 0 3px 0 0 rgb(249,249,249);
transition: 0.3s ease-in-out;
}
textarea{
resize: none;
}
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<body><div id="contacts">
<!-- SINGUP -->
<section id="signup" class="signup-section">
<div class="background-form">
<div class="row">
<div class="contatti col-4 d-flex flex-column text-center offset-2 text-white mt-5">
<h3>Contacts</h3>
<h5 style="color: #0000c5; font-weight: 400;">Info</h5>
<p>email#gmail.com<br>123456789<br><br></p>
<h5 style="color: #0000c5; font-weight: 400;">Address</h5>
<p>abcdefghijklm0<br>
abababababababab<br> Mexico
</p>
</div>
<div class="col-4 d-flex flex-column mt-5 col-xl-5">
<form class="invia text-white text-left">
<fieldset>
<div class="row">
<div class="col-lg-6 col-xl-4">
<div class="form-floating">
<label for="nome">Name</label>
<input type="text" name="nome" class="form-control text-white" id="nome" placeholder="" required>
</div>
</div>
<div class="col-lg-6 col-xl-4">
<div class="form-floating">
<label for="cognome">Surname</label>
<input type="text" name="cognome" class="form-control text-white" id="cognome" placeholder="" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xl-8">
<div class="form-floating">
<label for="nome">mail</label>
<input type="email" name="mail" class="form-control text-white" id="email" placeholder="" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xl-8">
<div class="form-fluid">
<label for="nome">Text</label>
<textarea class="form-control text-white" name="messaggio" placeholder="" id="floatingTextarea2" style="height: 80px" required></textarea>
<div class="mx-auto mt-4 col-xl-7">
<button class="fill btn-block " type="submit">Send</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Hi everyone, I have a problem on a form that has to adapt to the different responsive modes (the background will change according to the device in which the form will be viewed). I want to use only one form, without having to create several, I'm using Bootstrap, but when I can adapt it to the responsive version on ipad or iphone, then it no longer works on Mac. Can you help me solve it? (PS. Only on the Mac appears the writing on the sides with the info, on the responsive it disappears and it works, on CodePen I don't understand why it doesn't read it, you can not even consider it that)

#ella I cannot find any issue with your CSS.
According to the HTML you have posted it does not contain your custom CSS file. can you check it by adding
<link rel="stylesheet" href="style.css">
to your head tag.

Script for toggling accordion tabs with a button click

I reused some of the code from a site and made a shopping cart accordion module. I have the whole code as a pen on codepen.
Here is the link for the pen: http://codepen.io/applecool/pen/YXaJLa
<div class="summary">
<button class="expand btn btn-lg">Collapse All for Summary</button>
</div>
HTML for button above : I added a button at the bottom called as "Collapse All for Summary". The purpose of this button: When a user clicks on the button, it should open all the accordion tabs and when clicked on it again, should close the accordion tabs. [i.e., a typical toggle functionality].
I wrote a small javascript function to make the accordion tabs toggle but it is very buggy. It does the job perfectly but the problem is, once I click on the button, the general click on the tab doesn't work. i.e., when you open up the codepen and click on the accordion tab, it smoothly opens up and closes. But after adding the toggle button functionality, you fire up the page, click on the "Collapse All for Summary" button, the accordion tabs work fine. Now, when you try to click on any of the closed or opened accordion tabs, the tab neither opens nor closes. I think the problem is definitely with the changing of classes which I am doing in the javascript with the CSS.
Script:
$('.expand').click(function(){
if($('.accordionItem.is-collapsed').css('max-height')== '0px'){
$('.accordionItem.is-collapsed').css({
'max-height': '900px'
});
}else if($('.accordionItem.is-collapsed').css('max-height')== '900px'){
$('.accordionItem.is-collapsed').css({
'max-height': '0px'
});
}
});
CSS specific to the above script and the button div:
.accordionItem.is-collapsed{
max-height: 0px;
}
Any help on this would be hugely appreciated. If there is any work around, I can gladly follow that too. Please let me know what idiotic mistake I am doing here. :)
Thank you.
Cheers,
.SH

I edited your code a bit to include the expand/collapse all functionality. I think it's sloppy and you should clean it up before implementing, but it gets the job done.
The additions utilize arrays to loop over either one item or all items based on whether you click an individual item or the expand/collapse all button. The good thing about this is that it's the same as the original code, but can handle toggling the classes on multiple items.
I put some comments in the JavaScript that explains more.
//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(function() {
var d = document,
accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
setAria,
setAccordionAria,
switchAccordion,
touchSupported = ('ontouchstart' in window),
pointerSupported = ('pointerdown' in window);
skipClickDelay = function(e) {
e.preventDefault();
e.target.click();
}
setAriaAttr = function(el, ariaType, newProperty) {
el.setAttribute(ariaType, newProperty);
};
setAccordionAria = function(el1, el2, expanded) {
switch (expanded) {
case "true":
setAriaAttr(el1, 'aria-expanded', 'true');
setAriaAttr(el2, 'aria-hidden', 'false');
break;
case "false":
setAriaAttr(el1, 'aria-expanded', 'false');
setAriaAttr(el2, 'aria-hidden', 'true');
break;
default:
break;
}
};
//function
switchAccordion = function(e) {
e.preventDefault();
var questions = [],
answers = [];
//if expand-all button is clicked, then push all questions and answers into respective arrays
if($(e.target).hasClass('expand')) {
$('.accordion-title').each( function(index) {
questions.push(this);
answers.push(this.parentNode.nextElementSibling);
});
}
//else if an individual item is clicked, then push its question and answer into respective arrays
else {
questions.push(e.target);
answers.push(e.target.parentNode.nextElementSibling);
}
//original code wrapped in "for" loop to handle single item or all items
for (var i = 0, len = questions.length; i < len; i++) {
var thisQuestion = questions[i];
var thisAnswer = answers[i];
if (thisAnswer.classList.contains('is-collapsed')) {
setAccordionAria(thisQuestion, thisAnswer, 'true');
} else {
setAccordionAria(thisQuestion, thisAnswer, 'false');
}
thisQuestion.classList.toggle('is-collapsed');
thisQuestion.classList.toggle('is-expanded');
thisAnswer.classList.toggle('is-collapsed');
thisAnswer.classList.toggle('is-expanded');
thisAnswer.classList.toggle('animateIn');
}
};
for (var i = 0, len = accordionToggles.length; i < len; i++) {
if (touchSupported) {
accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
}
if (pointerSupported) {
accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
}
accordionToggles[i].addEventListener('click', switchAccordion, false);
}
//add listener for the expand-all button
$('.expand').on('click', switchAccordion);
})();
#import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);
* {
box-sizing: border-box;
border-radius: 5px;
}
body {
font-family: 'Libre Baskerville';
}
.heading-primary {
font-size: 2em;
padding: 2em;
text-align: center;
}
.accordion dl,
.accordion-list {
border: 1px solid #ddd;
}
.accordion dl:after,
.accordion-list:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #099DF6;
}
.accordion dd,
.accordion__panel {
background-color: #eee;
font-size: 1em;
line-height: 1.5em;
}
.accordion p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: #eee;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle,
.accordion__Heading {
background-color: #099DF6;
/*text-align: center; */
text-indent: 3px;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
border-bottom: 1px solid #30bb64;
}
.accordionTitle:before,
.accordion__Heading:before {
content: "+";
font-size: 1.5em;
line-height: 0.9em;
float: left;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover,
.accordion__Heading:hover {
background-color: #38CC70;
}
.accordionTitleActive,
.accordionTitle.is-expanded {
background-color: #38CC70;
}
.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
-webkit-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: auto;
max-height: 900px;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
#media screen and (min-width: 48em) {
.accordionItem {
max-height: 900px;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItem.is-collapsed {
max-height: 0;
}
.no-js .accordionItem.is-collapsed {
max-height: 900px;
}
.animateIn {
-webkit-animation: accordionIn 0.65s normal ease-in-out both 1;
animation: accordionIn 0.65s normal ease-in-out both 1;
}
.animateOut {
-webkit-animation: accordionOut 0.75s alternate ease-in-out both 1;
animation: accordionOut 0.75s alternate ease-in-out both 1;
}
#-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
#keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
/*label styles */
.label-style {
float: left;
margin-right: 15px;
padding-top: 5px;
padding-left: 100px;
}
/* form headings */
.headings {
text-align: center;
font-weight: bold;
}
/* button styles */
.button-container {
text-align: center;
margin-bottom: 5px;
}
/* position of the hint */
.hint {
display: inline-block;
position: relative;
margin-left: 0.5em;
margin-top: 0.3em;
}
/* background style for 'i' */
.hint-icon {
background: #099DF6;
border-radius: 10px;
cursor: pointer;
display: inline-block;
font-style: normal;
font-family: 'Libre Baskerville';
height: 20px;
line-height: 1.3em;
text-align: center;
width: 20px;
}
/* hint icon hover style */
.hint-icon:hover {
background: #1f8ac9;
}
/* Displays the hint. important! Do not remove. */
.hint:hover .hint-description,
.hint:focus .hint-description {
display: inline-block;
}
/* position of the hint */
.hint-description {
display: none;
background: #3b3b3b;
border: 1px solid #099DF6;
border-radius: 3px;
font-size: 0.8em;
color: #ffffff;
font-weight: bold;
/*padding: 1em; */
position: absolute;
left: 30px;
top: -15px;
width: 180px;
height: auto;
}
/* styling for the arrow */
.hint-description:before,
.hint-description:after {
content: "";
position: absolute;
left: -11px;
top: 15px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #099DF6;
}
/* overlay styling */
.hint-description:after {
left: -10px;
border-right-color: #3b3b3b;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Used some part of the code from Chris Wright (http://codepen.io/chriswrightdesign/)'s Pen -->
<div class="container">
<h1 class="heading-primary">Accordion Checkout Form Version 0.1 </h1>
<div class="accordion">
<dl>
<!-- description list -->
<dt>
<!-- accordion tab 1 - Delivery and Pickup Options -->
Delivery and Pickup Options
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
<p>One can insert a div here and add the product image and the description of the product. Quantity, Cost.</p>
</dd>
<!--end accordion tab 1 -->
<dt>
<!-- accordion tab 2 - Shipping Info -->
Shipping Information
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
<div class="container-fluid" style="padding-top: 20px;">
<p class="headings">Shipping Address</p>
<form class="main-container">
<div class="row">
<div class="col-xs-4">
<label for="fullname" class="label-style">Full Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="fullname" class="form-control" placeholder="Enter your full name" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your full name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="companyname" class="label-style">Company Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="companyname" class="form-control" placeholder="Enter Company Name (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your Company name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="phonenumber" class="label-style">Phone Number</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="phonenumber" class="form-control" placeholder="Enter Phone Number" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">In (555)5555-555 Format</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line1" class="label-style">Address Line 1</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line1" class="form-control" placeholder="Enter Address" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 1</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line2" class="label-style">Line 2</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Apt, Suite, Bldg (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 2</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="city" class="label-style">City</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="city" class="form-control" placeholder="Enter City" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your City</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="state" class="label-style">State</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="state" class="form-control" placeholder="Enter State" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Ex: Indiana as IN</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="country" class="label-style">Country</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="country" class="form-control" placeholder="Enter Country" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your country</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="zipcode" class="label-style">Zip Code</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="zipcode" class="form-control" placeholder="Enter Zip Code" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter ZipCode.</p>
</div>
</div>
<div class="button-container">
<button class="btn btn-success" type="submit">Submit</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>
</form>
</div>
</dd>
<!-- end accordion tab 2 -->
<dt>
<!-- accordion tab 3 - Payment Info -->
Payment Information
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true">
<div class="container-fluid" style="padding-top: 20px;">
<p class="headings">Billing Information</p>
<form class="main-container">
<div class="row">
<div class="col-xs-4">
<label for="fullname" class="label-style">Full Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="fullname" class="form-control" placeholder="Enter your full name" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your full name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="companyname" class="label-style">Company Name</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="companyname" class="form-control" placeholder="Enter Company Name (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your Company name</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="phonenumber" class="label-style">Phone Number</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="phonenumber" class="form-control" placeholder="Enter Phone Number" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">In (555)5555-555 Format</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line1" class="label-style">Address Line 1</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line1" class="form-control" placeholder="Enter Address" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 1</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="address-line2" class="label-style">Line 2</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Apt, Suite, Bldg (optional)" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Address Line 2</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="city" class="label-style">City</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="city" class="form-control" placeholder="Enter City" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your City</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="state" class="label-style">State</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="state" class="form-control" placeholder="Enter State" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Ex: Indiana as IN</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="country" class="label-style">Country</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="country" class="form-control" placeholder="Enter Country" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter your country</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="zipcode" class="label-style">Zip Code</label>
</div>
<div class="form-group col-lg-4">
<input type="text" id="address-line2" class="form-control" placeholder="Enter Zip Code" required>
</div>
<div class="hint">
<i class="hint-icon">i</i>
<p class="hint-description">Enter ZipCode.</p>
</div>
</div>
<div class="button-container">
<button class="btn btn-success" type="submit">Submit</button>
<button class="btn btn-warning" type="reset">Reset</button>
</div>
</form>
</div>
</dd>
<!-- end accordion tab 3 -->
</dl>
<!-- end description list -->
</div>
<!-- end accordion -->
</div>
<!-- end container -->
<div class="summary">
<button class="expand btn btn-lg">Expand/Collapse All for Summary</button>
</div>

You should change the elements css class using javascript (.toggleClass is my favorite way to do so), and put the relevant max-height value on your css like so:
** JS **
$('.expand').click(function(){
$('.accordionItem').toggleClass('is-collapsed');
});
** CSS **
.accordionItem {max-height: 900px;}
.accordionItem.is-collapsed {max-height: 0px;}

Javascript Popup Form

I have an image where if you click the image, it acts as a button and opens up an overlay window with a form. A user can submit a username and password and submit and it closes out the form. Here is what I have:
Form:
<div class="formbk" id="contact_form">
<section class="panel">
<header class="panel-heading">
Bank of America Account
</header>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 col-sm-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email or Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-danger">Link Account</button>
</div>
</div>
</form>
</div>
</section>
</div>
Button:
<li>
<a href="#Contact">
<INPUT type=image src="http://i.imgur.com/UhxJY84.png" style="height:auto;width:100%" />
</a>
</li>
JS:
$(function() {
$('select.styled').customSelect();
});
//form script open and close
$("a[href='#Contact']").click(function() {
strtBlackout();
    return false;
});
$("a[href='#exit']").click(function() {
endBlackout();
    return false;
});
//fade in and out the form
function strtBlackout() {
$(".formbk").css("display", "inline-block");
$('.formbk').animate({top: '20%', opacity:1}, 800);
$(".blackout").css("display", "block");
}
function endBlackout() {
$('.formbk').animate({top: '-70%', opacity:0}, 800);
$(".blackout").css("display", "none");
}
CSS:
.formbk {
background: #333;
color: #000;
opacity: 0;
position: fixed;
z-index: 5;
top: -50%;
margin-left: 30%;
display: block;
text-align: center;
}
.blackout {
background-color: #000;
opacity: .7;
filter: alpha(opacity=70);
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4;
display: none;
cursor: pointer;
}
Ok! Sorry for all the code but I'm stumped. How do I center this form popup properly in the middle of the page, and make it a nice width and height so that it really looks seamless on the website.
Thanks for the help!

HTML:
<li>
<a href="#Contact">
<img src="http://i.imgur.com/UhxJY84.png" style="height:auto;width:100%">
</a>
</li>
<div class="formbk" id="contact_form">
<section class="panel">
<header class="panel-heading">
Bank of America Account
</header>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 col-sm-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email or Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-danger">Link Account</button>
</div>
</div>
</form>
</div>
</section>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.backout {
background-color:#000;
opacity:.7;
filter:alpha(opacity=70);
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:4;
display:none;
cursor:pointer;
}
.formbk {
margin: 0 auto;
left: 50%;
transform: translate(-50%, 0);
position: fixed;
background: #333;
color:#000;
opacity:0;
z-index:9999;
top:-50%;
display:block;
}
.panel {
margin-left: auto;
margin-right: auto;
position: relative;
width: 200px;
text-align: center;
}

Bootstrap Form Not Working

I'm not sure where I went wrong but my bootstrap form won't work as is because I can't type anything into the form boxes. If I move the form boxes above the third div from the top the email box works and if I move them above the second div from the top both boxes work. Can anyone explain what's going on and how to fix this?
<div class ="container" style= "height:150px;">
<div id="Logo" class="col-xs-12 col-md-11">
<img id="CashPass" src="assets/images/CashPassLogo (2).png"/>
</div>
</div>
<div class="container" style= "height:500px;" id="intro">
<div id="HomeTopContainer" class="col-xs-12 col-md-8">
<h3>
Something <i>Something</i>
</h3>
<img id="Something" src="https://abc123.jpg"/>
</div>
<div id="signup"> <!--style="height:500px; padding-right: 10%;"-->
<div class="col-xs-6 col-md-4">
<h1 class="hit">
Something
</h1>
<form class="form" name="form" ng-submit="signUp()" novalidate>
<div class="form-group"
ng-class="{ 'has-success': form.email.$valid && submitted, 'has-error': form.email.$invalid && submitted }">
<!--<label>Email</label>-->
<input type="email" name="email" class="form-control" placeholder = "Email" ng-model="user.email" required/>
</div>
<div class="form-group"
ng-class="{ 'has-success': form.password.$valid && submitted, 'has-error': form.password.$invalid && submitted }">
<!--<label>Password</label>-->
<input type="password" name="password" class="form-control" placeholder = "Password" ng-model="user.password"
ng-minlength="3"
required/>
<p class="help-block"
ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
Password must be at least 3 characters.
</p>
</div>
</form>
</div>
</div>
<div class= "hit">
<button class="btn btn-inverse btn-lg btn-login" id = "Join" type="submit">
Join
</button>
<a class="btn btn-default btn-lg btn-register" id = "login" href="/stuff">
Login
</a>
</div>
The SCSS is as follows:
.hit {
position: relative;
padding: 30px 15px;
/*color: #F5F5F5;*/
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
/*background: #4393B9;*/
.center-block{};
}
.center-block {
font-size: 5em;
width: 150px;
height: 150px;
text-align: center;
};
/*id*/
#intro {
background-color: #add8e6;
}
#glyphicon{
text-align: right;
font-size: 5em;
}
#HomeTopContainer {
text-align: center;
}
#signup{
margin-left: auto;
margin-right: auto;
}
#bottomborder{
height: 75px;
background-color: #19469D;
margin-top: -7px;
text-align: center;
font-size: 20px;
}

You basically have elements overlapping each other. Your class .hit is stacked on top of your other containers (you can see it if you allow that aqua background color to show) To get around this add this CSS:
#signup {
position: relative;
z-index: 10;
}

crazymatt, thanks again for your response, though it wasn't right it got me on the right track. I actually added the following code to fix it:
.form-group{
position: relative;
z-index: 10;
}

Categories

Resources