UPDATED: I include this codepen becuase I'm having issue with snippet
https://codepen.io/ddcreate/pen/RJqOxo
I made this layout using bootstrap 4
What I want to achieve is when click on the "add new item", a new empty row will insert below. Since the site needs to be responsive, it's not possible to put all labels in a row and the fields in another row, otherwise the page will be messed up on smaller screen.
I found some posts about how to clond and insert using jQuery, I tried them but my issue is still here.
I hard code some script, not elegant, and they are not doing exactly what I want. The layout is messed up.
here is the code:
//add empty item fields
let addRow = $('.add-item');
//when click add fields
addRow.on('click', function() {
let newRow = $('.need-to-dup').clone(),
target = $('.need-to-dup').parent();
target[0].append(newRow[0]);
target[1].append(newRow[1]);
target[2].append(newRow[2]);
target[3].append(newRow[3]);
//console.log(newRow, newRow[3])
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="item-form">
<div class="row">
<div class="col-lg-2 col-md-6">
<label for="quanty">Quanty</label>
<input class="need-to-dup" type="text" name="quanty" value="">
</div>
<div class="col-lg-4 col-md-6">
<label for="item">Item</label>
<input class="need-to-dup" type="text" name="item" value="">
</div>
<div class="col-lg-4 col-md-6">
<label for="comment">Comment</label>
<input class="need-to-dup" type="text" name="comment">
</div>
<div class="col-lg-2 col-md-6">
<label for="remove">Remove</label>
<button class="need-to-dup remove-item-button btn-block btn-outline-secondary" type="button" name="remove">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="add-item">
<p>Add Another Item</p>
</div>
</section>
Here is my solution:
Clone the .row element using .clone()
Use .find() to find any labels and remove them from the clone
.append() that clone into the .item-form element.
//add empty item fields
let addRow = $('.add-item');
//when click add fields
let original = $('.row');
addRow.on('click', function() {
let clone = $(original).clone();
$(clone).find('label').remove();
$('.item-form').append(clone);
})
body {
font-family: 'Quicksand', sans-serif;
}
nav {
background: #66a6ff;
background-image: linear-gradient(120deg, #66a6ff 0%, #89f7fe 100%);
line-height: 70px;
color: #fff;
font-size: 24px;
font-weight: 700;
box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05)
}
button, .add-item {
transition: all .2s ease-in-out;
}
/* ***
Customer & Delivery Info Styling
*** */
input, .select-driver {
width: 100%;
margin-bottom: .5rem;
height: 40px;
}
.form-control {
border-color: #a9a9a9;
}
fieldset {
background-color: white;
border: 1px solid #e9ecef;
border-radius: 10px;
padding: 5px 20px 18px;
margin: 20px auto;
box-shadow: 0 6px 15px rgba(36,37,38,0.08);
}
legend {
font-size: 18px;
width: auto;
padding: 0 15px;
text-align: center;
}
#recurring-checkbox {
position: relative;
top: -8px;
}
input[type=checkbox] {
display: inline-block;
margin-bottom: 0;
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-appearance: none;
outline: 0;
border: none;
}
input[type=checkbox]:checked {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="checkbox-3-icon" fill="#FD6585" d="M81,81v350h350V81H81z M227.383,345.013l-81.476-81.498l34.69-34.697l46.783,46.794l108.007-108.005 l34.706,34.684L227.383,345.013z"/></svg>');
}
input[type=checkbox]:not(:checked) {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="checkbox-9-icon" fill="#f68ba2" d="M391,121v270H121V121H391z M431,81H81v350h350V81z"></path> </svg>');
}
/* ***
Items Detail Styling
*** */
.add-item {
border: 3px dashed;
font-size: 16px;
color: #C3C3C3;
text-align: center;
margin: 20px 0;
}
.add-item p {
margin: 0 auto;
line-height: 40px;
}
.add-item:hover {
color: #989898;
background-color: rgba(215, 214, 214, 0.56);
cursor: pointer;
}
/* ***
Notes and Buttons Styling
*** */
textarea {
height: auto;
width: 100%;
margin-bottom: 0;
}
.save-button {
border: 1px solid;
border-radius: 5px;
font-size: 18px;
font-weight: 500;
line-height: 40px;
box-shadow: 0 6px 15px rgba(36,37,38,0.08);
margin: 20px auto;
}
.save-button:hover {
background-color: #66a6ff;
border-color: #66a6ff;
}
.remove-item-button {
color: #f68ba2;
border: 1px solid #a9a9a9;
border-radius: 5px;
height: 40px;
}
.remove-item-button:hover {
color: #eee;
background-color: #f68ba2;
border-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"/>
<section class="item-form">
<div class="row">
<div class="col-lg-2 col-md-6">
<label for="quanty">Quanty</label>
<input class="need-to-dup" type="text" name="quanty" value="">
</div>
<div class="col-lg-4 col-md-6">
<label for="item">Item</label>
<input class="need-to-dup" type="text" name="item" value="">
</div>
<div class="col-lg-4 col-md-6">
<label for="comment">Comment</label>
<input class="need-to-dup" type="text" name="comment">
</div>
<div class="col-lg-2 col-md-6">
<label for="remove">Remove</label>
<button class="need-to-dup remove-item-button btn-block btn-outline-secondary" type="button" name="remove">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</div>
</div>
</section>
<div class="add-item">
<p>Add Another Item</p>
</div>
It's hard to tell what you want to do. Your "messed up" display looks good to me, and is how I would make mine look. If you are trying to duplicate the entire row though (labels and all):
addRow.on('click', function() {
let newRow = $('.row')[0].clone();
newRow.appendTo($('.item-form')[0]);
});
Instead of duplicating each item, duplicate the whole row at once.
//add empty item fields
let addRow = $('.add-item');
//when click add fields
addRow.on('click', function() {
let lastRow = $('.row').last()
lastRow.after(lastRow.clone());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="item-form">
<div class="row">
<div class="col-lg-2 col-md-6">
<label for="quanty">Quanty</label>
<input class="need-to-dup" type="text" name="quanty" value="">
</div>
<div class="col-lg-4 col-md-6">
<label for="item">Item</label>
<input class="need-to-dup" type="text" name="item" value="">
</div>
<div class="col-lg-4 col-md-6">
<label for="comment">Comment</label>
<input class="need-to-dup" type="text" name="comment">
</div>
<div class="col-lg-2 col-md-6">
<label for="remove">Remove</label>
<button class="need-to-dup remove-item-button btn-block btn-outline-secondary" type="button" name="remove">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="add-item">
<p>Add Another Item</p>
</div>
</section>
I think the best solution for you is:
Clone div.row
Change name attribute with an index (it could be quite problematic)
Remove label from the clone's element
I did this easy example:
$(document).ready(function(){
$(".add-item").on("click", function() {
var rows = $(".row","section.item-form"),
first = rows.first(), last = rows.last(), clone = first.clone();
console.log(first);
clone.insertAfter(last).find("[name!=''][name]").each(function() {
var name = $(this).attr("name").split("-")[0];
$(this).siblings("label").remove();
$(this).attr("name", name + "-" + rows.length);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="item-form">
<div class="row">
<div class="col-lg-2 col-md-6">
<label for="quanty-0">Quanty</label>
<input class="need-to-dup" type="text" name="quanty-0" value="" >
</div>
<div class="col-lg-4 col-md-6">
<label for="item-0">Item</label>
<input class="need-to-dup" type="text" name="item-0" value="" >
</div>
<div class="col-lg-4 col-md-6">
<label for="comment-0">Comment</label>
<input class="need-to-dup" type="text" name="comment-0">
</div>
<div class="col-lg-2 col-md-6">
<label for="remove-0">Remove</label>
<button class="need-to-dup remove-item-button btn-block btn-outline-secondary" type="button" name="remove-0">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="add-item">
<p>Add Another Item</p>
</div>
</section>
Or you can watch it in this fiddle
**.find("[name!=''][name]")** : attr *name* must exist and has to have some value
.siblings : jquery description [here][2]
.clone : jquery description [here][2]
Hope it will help.
Related
I'm trying to establish a smooth transition when toggling a div. Right now the toggle is immediate.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
display: none;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
I've tried to add .animate() and .fadeIn() but neither are working. Is my syntax wrong? Is the way I'm calling them wrong? Transition is still immediate.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle()
$(".form-div-top").animate({
duration: 200
});
$(".form-div-top").fadeIn( "slow", function() {
// Animation complete
});
})
});
jQuery's toggle method accepts a duration in milliseconds as the first argument.
$(".form-div-top").toggle(300);
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle(300);
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
display: none;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
On my own I can suggest a solution using the toggleClass() method:
...
$(".form-div-top").toggleClass("form-div-top_show");
...
It is necessary to create an additional class for the block activity:
.form-div-top_show {
opacity: 1;
}
And also, you need to add a transition rule for the smooth appearance of the block, and replace display: none with opacity: 0:
.form-div-top {
opacity: 0;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
transition: .5s;
}
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggleClass("form-div-top_show");
})
});
.description-container {
font-family: "Proxima Nova Regular";
}
.form-div-outer {
margin: 10px 0;
}
.product-suggestion-form-container {
border: 1px solid #c6c6c6;
border-bottom: none;
padding: 5px 10px;
display: flex;
justify-content: space-between;
background-color: #f8f7f7;
cursor: pointer;
}
/*initial display*/
.form-div-top {
opacity: 0;
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
transition: .5s;
}
.form-div-top_show {
opacity: 1;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="description-container">
Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required> </input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
I'm having difficulty implementing localStorage on my site (https://www.reclaimdesign.org).
What I am trying to do is:
Newsletter subscription pop-up on each page - this works fine
Click X to close the subscription pop-up - this also works fine
Remember the closed state of the window so that all other pages visited on our site don't have the pop-up and irritate the user after they have closed the pop-up already - this is not working. Not even a little bit.
My thinking was to set a variable with localStorage and then refer to the variable to see if the windows should be displayed or not. It is highly likely that my logic and syntax are at best sketchy, so if anyone could please guide me in the correct method this would be much appreciated.
The code I have been tinkering with for the subscription pop-up looks like this:
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
$(window).on("load", function() {
if(localStorage.getItem("popState") == 'hide'){
//$(".signup").hide();
$(".signup").css("display", "none");
}
else if (localStorage.getItem("popState") != 'hide'){
$(".signup").css("display", "block");
}
});
}
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
Yes your getSignup is not called correctly.
Here you can see the alternative solution without jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
if (localStorage.getItem("popState") == 'hide') {
//$(".signup").hide();
document.querySelector('.signup').style.display = 'none';
} else if (localStorage.getItem("popState") != 'hide') {
document.querySelector('.signup').style.display = 'block';
}
}
window.addEventListener("load", getSignup);
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</body>
</html>
Thanks very much for your input guys. I got it working with the following (for anyone who might come up against the same issue)...
HTML:
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
CSS:
.signup {
bottom: 2%;
display: none;
margin-right: -15px !important;
max-width: 280px;
position: fixed;
right: 2%;
z-index: 9999;
}
.signup-header {
background: #539c22;
border-radius: 10px 10px 0 0;
color: #ffffff;
font-family: 'Carrois Gothic', sans-serif;
font-size: 20px;
padding: 25px 15px;
text-transform: uppercase;
}
.signup-container {
background-color: #6db240;
border-radius: 0 0 10px 10px;
color: #ffffff;
padding: 15px;
}
.closebtn {
color: #ffffff;
cursor: pointer;
font-size: 30px;
position: absolute;
right: 15px;
top: 5px;
}
.closebtn:hover {
color: #6db240;
}
.signup-container .button {
background-color: #539c22;
border: 0 none;
border-radius: 5px;
color: #ffffff !important;
cursor: pointer;
font-size: 15px;
height: 32px;
line-height: 32px;
margin: 0 15px 0 0 !important;
text-align: center;
transition: all 0.23s ease-in-out 0s;
width: 100% !important;
}
.signup-container .button:hover {
opacity: 0.7;
}
.signup-container .mc-field-group input {
display: block;
padding: 8px 0;
text-indent: 2%;
width: 100%;
}
.signup-container input {
border: 1px solid #d0d0d0;
border-radius: 5px;
cursor: auto;
font-family: 'Open sans', sans-serif;
font-size: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
JQuery:
$(document).ready(function() {
$('.signup').css('display', 'block');
$PopUp = $('.signup');
var hide = JSON.parse(localStorage.getItem('hide'));
if (hide) {
$PopUp.hide();
} else {
// initialize value in case it hasn't been set already
localStorage.setItem('hide', false);
}
$('.closebtn').click(function() {
$('.signup' ).hide();
// toggle the boolean by negating its value
var hide = JSON.parse(localStorage.getItem('hide'));
localStorage.setItem('hide', !hide);
});
});
I'm trying to make a simple button btnAdd that changes one of my new div class so that it makes it visible and at a later date i'll add a cancel button that makes the same div hidden again, however I wanted to do this using animation so I'm trying to use transition: height 1s. But for some reason I can't seem to be able to get it working. Does anyone know where I'm going wrong here?
Thanks in advance,
Matt.
function open_Add_Menu() {
document.getElementById("new").className = "open";
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<form>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</form>
You've done the right thing. The only problem is your button is placed within a form element. Once you click on that button, the form is being submitted.
To fix it, you can replace button by another tag. Or avoid submitting while click event happens.
You have to use classList.add to add a class in vanilla JS.
function open_Add_Menu() {
document.getElementById("new").classList.add('open');
}
p {
margin: 0;
}
body {
margin: 0;
background-color: #f6f4fb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #666;
}
.btnAdd {
width: 160px;
height: 30px;
float: right;
margin: 0px 30px 0px 0px;
background-color: #2f8fcb;
border: 2px solid #2f8fcb;
border-radius: 3px;
color: #fff;
font-weight: bold;
}
#new {
width: 50%;
height: 0;
margin: 30px 45% 10px 5%;
transition: height 1s;
overflow: hidden;
}
#new.open {
height: 400px;
}
<div>
<div id="btnAdd">
<button class="btnAdd" onclick="open_Add_Menu()">Add New</button>
</div>
<div id="new">
<div id="new_name">
<p>Name:</p>
<input type="text" id="name_tb" autocomplete="off">
</div>
<div id="new_add1">
<p>Address Line 1:</p>
<input type="text" id="add1_tb" autocomplete="off">
</div>
<div id="new_add2">
<p>Address Line 2:</p>
<input type="text" id="add2_tb" autocomplete="off">
</div>
<div id="new_add3">
<p>Address Line 3:</p>
<input type="text" id="add3_tb" autocomplete="off">
</div>
<div id="new_post">
<p>Postcode:</p>
<input type="text" id="post_tb" autocomplete="off">
</div>
<div id="new_number">
<p>Contact Number:</p>
<input type="text" id="number_tb" autocomplete="off">
</div>
</div>
</div>
Add the attribute type='button' to your button element. It should works for you.
<button type="button" class="btnAdd" onclick="open_Add_Menu()">Add New</button>
you can use the atribute visibility:
document.getElementById("myP").style.visibility = "hidden";
You can start the div with visibility hidden and remove that for showing the element.
Its works fine :)
i want to make tag like stack overflow tags but the problems are 1- when i click tab it doesn't work 2-when i click enter the effect of save client is clicked and 3- i want to send the tags as array of list
<div class="row">
<div class="form-group">
<div class="col-md-12 col-sm-12">
<label>Address *</label>
<div class="target" contenteditable="true"></div>
<input type="text" id="clientAdd" name="address" value="" class="form-control required">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-3d btn-teal btn-xlg btn-block margin-top-30">
Save Client
</button>
</div>
</div>
this is the jq code
$("#clientAdd").keypress(function (e) {
if (e.which === 9 || e.which === 32 ) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
var stringList = [];
stringList.push(this.value);
this.value = "";
}
});
this is the css code
.tag {
color: #3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #b3cee1;
border-right: 1px solid #b3cee1;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
.tag:hover {
background-color: #c4dae9;
border-bottom: 1px solid #c4dae9;
border-right: 1px solid #c4dae9;
}
Use vanilla.js it's available in all browsers, it's faster and no library required. Select your elements, add an event listener, create a new element and append that element and you are done!
var input = document.getElementById('clientAdd');
var target= document.getElementsByClassName('target')[0];
var button = document.querySelectorAll('button[type="submit"]')[0];
var stringList=[];
input.addEventListener('keypress', function(e){
if (e.which === 9 || e.which === 32 ){
let atag= document.createElement('a');
atag.setAttribute('class','tag');
atag.setAttribute('href','#');
atag.innerHTML=this.value;
stringList.push(this.value);
target.appendChild(atag);
console.log('your string has been added to the array', stringList);
}
});
button.addEventListener('click', clicked =>{
let atag= document.createElement('a');
atag.setAttribute('class','tag');
atag.setAttribute('href','#');
atag.innerHTML=input.value;
stringList.push(input.value);
target.appendChild(atag);
console.log('your string has been added to the array', stringList);
});
.tag {
color: #3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #b3cee1;
border-right: 1px solid #b3cee1;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
.tag:hover {
background-color: #c4dae9;
border-bottom: 1px solid #c4dae9;
border-right: 1px solid #c4dae9;
}
<div class="row">
<div class="form-group">
<div class="col-md-12 col-sm-12">
<label>Address *</label>
<div class="target" contenteditable="true"></div>
<input type="text" id="clientAdd" name="address" value="" class="form-control required">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-3d btn-teal btn-xlg btn-block margin-top-30">
Save Client
</button>
</div>
</div>
Have you ever seen someone's code and just laughed? Be ready to do so with my jQuery as it may not make any sense to you, but I'm trying :)
Anyway, what I need is simple and I've gotten some inspiration from other questions here such as Slide Panel up and down but they don't do exactly what I need. At least methinks.
I have a panel immediately below my header (BOOTSTRAP). This panel needs to be there but the user must have a choice to close it a little, not the whole way. Just enough to still have the fa-chevron icon available to click it and slide it back down as well as some information (I'll provide images below).
So in a nutshell, the requirements are:
Starts open, fa-chevron-up
On icon click, the panel slides up (sort of slowish), hides the photo and second row of information, and switches the icon to fa-chevron-down.
On click of fa-chevron down (collapsed view) everything returns to the initial full view.
Here is the HTML
<div id="header" class="header navbar navbar-fixed-top navbar-inverse" data-current-theme="navbar-inverse">
</div>
<div class="row">
<div class="col-xs-12">
<div class="banner clearfix">
<div class="collapser">
<i class="fa fa-chevron-up fa-fw collapse-icon"></i>
</div>
<div class="banner-info clearfix">
<div class="col-sm-12 col-md-2">
<div class="circle-container">
<img class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGjucaoN3fabOcumnr7RKTB3ICTJFLuLClnpiQUIR9oW4a11wb" alt="offender-img">
</div>
</div>
<div class="col-sm-12 col-md-10">
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Full Name</label>
<span>Floyd "Money" Mayweather</span>
</div>
<div class="form-group">
<label class="control-label">Some Label</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Offender ID#</label>
<span>123569863</span>
</div>
<div class="form-group">
<label class="control-label">Longer Label Example</label>
<span>Something Here with an ellipsis</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span href="#"><p>Something Here</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the CSS
.navbar {
border: none;
border-bottom: 2px solid #30373e;
font-size: 14px;
-webkit-box-shadow: 0 1px rgba(0,0,0,0.025);
box-shadow: 0 1px rgba(0,0,0,0.025);
z-index: 1040;
margin-bottom: 0;
height: 55px;
}
.banner {
border: none;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.07);
box-shadow: 0 2px 0 rgba(0,0,0,0.07);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
position: relative;
background: #101113;
padding: 20px;
display: block;
top: 55px;
}
.banner .collapser {
position: absolute;
bottom: 10px;
color: #bbb;
}
.banner .circle-container {
position: relative;
left: 35px;
text-align: center;
width: 110px;
height: 110px;
display: flex;
overflow: hidden;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
border: 3px solid #bbb;
}
.banner .banner-info label {
color: rgba(248,151,29,0.77);
}
.banner .banner-info span {
display: block;
color: #bbb;
white-space: nowrap;
width: 85%;
overflow: hidden;
text-overflow: ellipsis;
}
and the very vague and probably useless JS
$('.collapser').click(function () {
$collapser = $(this);
$banner = $collapser.parent().find('.banner');
$banner.slideToggle(500, function () {
$collapser.find('.collapse-icon').toggleClass('fa-chevron-up fa-chevron-down');
});
});
Here are both views for visual references
Initial view
collapsed view
And here is CODEPEN
No .banner elements appears as child of $collapser.parent() ?
Try changing .banner to .banner-info at $banner = $collapser.parent().find(".banner-info");
codepen http://codepen.io/anon/pen/WrXYGx
Is there a way to slide it up less than that? or would that be a whole
different deal? Because I can hide the photo and the second row if I
mess with it long enough, but I still need the first row to remain
visible.
Use selector $banner = $collapser.parent().find('.banner-info .circle-container, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)') as $banner collection
$('.collapser').click(function() {
$collapser = $(this);
$banner = $collapser.parent()
.find('.banner-info .circle-container\
, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)');
$banner.slideToggle(500, function() {
$collapser
.find('.collapse-icon')
.toggleClass('fa-chevron-up fa-chevron-down');
});
});
codepen http://codepen.io/anon/pen/WrXYGx