Can some one suggest me an inline edit were when I click on the edit button my label content should be replaced with an input text and I would be able to update it in my mysql db.
My code:
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;">myinput</input>
<button>edit</button>
Any help would be appreciated Thanks!!
I would probably just use contentEditable, if possible.
document.addEventListener('DOMContentLoaded', function(){
var btn = document.getElementById("editButton");
btn.addEventListener("click", function(){
var editLabel = document.getElementById("editLabel");
editLabel.contentEditable = true;
editLabel.className = "editActive";
});
});
#editLabel{
margin-bottom: 25px;
display: inline-block;
padding: 5px;
box-sizing: border-box;
}
#editButton{
display: block;
}
.editActive{
border: 1px inset #e3e3e3;
cursor: text;
}
<label id="editLabel">Hello World</label>
<button id="editButton">Edit Label</button>
I wouldn't recommend doing it inline. As you can see the result will not be clean. This will work though.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;" value="myInput">
<button onclick="$('label').text($('input').val())">edit</button>
Related
I have a form (which I am incidentally generating in PHP from a database) that is using CSS to replace checkboxes. When a checkbox is checked, the containing <li> should have an outline added, and when unchecked, the outline should be removed. Using onchange events works to change these at a click, but the outlines remain when the form is reset. I added onreset events, to try to force the removal, but that doesn't seem to change anything.
I've recreated this behavior in the snippet. (I have not hidden the checkboxes, as the snippet system apparently does not duplicate the normal browser behavior of clicking on the <label> to set or clear the checkbox. [EDIT: This was my mistake; I set the wrong for on the labels, and now that behavior works. The rest stands.])
How do I make this work? I could have a function that manually sets each outline in a reset function, but, as I said, the checkboxes are created from a database, so I'd have to write the PHP to write the js function, which seems like the wrong way to go.
function doCheckboxes(clicked_id) {
if (document.getElementById(clicked_id).checked) {
document.getElementById(clicked_id).parentNode.style.outline = "2px solid black";
} else {
document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
}
}
function clearCheckboxes(clicked_id) {
document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
}
li {
display: inline-block;
margin: 10px;
text-align: center;
font-weight: 600;
}
.imageholder {
display: block;
height: 60px;
width: 60px;
background-repeat: no-repeat;
background-clip: content-box;
background-size: cover;
margin: auto;
}
.has-thing1 .imageholder {
background-image: url(path/to/image.png);
}
.has-thing2 .imageholder {
background-image: url(path/to/image.png);
}
.has-thing3 .imageholder {
background-image: url(path/to/image.png);
}
<form action="." method="get">
<fieldset class="subcategory">
<ul>
<li class="has-x has-thing1">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing1" name="has[]" value="thing1">
<label for="x_thing1">
<div class="imageholder"> </div>
Thing1
</label>
</li>
<li class="has-x has-thing2">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing2" name="has[]" value="thing2">
<label for="x_thing2">
<div class="imageholder"> </div>
Thing2
</label>
</li>
<li class="has-x has-thing3">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing3" name="has[]" value="thing3">
<label for="x_thing3">
<div class="imageholder"> </div>
Thing3
</label>
</li>
</ul>
</fieldset>
<div>
<button type="submit">Submit</button></div>
<button type="reset">Clear Selection</button>
</form>
Create function clearAllCheckboxes
function clearAllCheckboxes(evt) {
const formEl = evt.closest('form')
const allCheckbox = formEl.querySelectorAll('[type=checkbox]')
allCheckbox.forEach(checkbox => {
checkbox.parentNode.style.outline = "0 none black"
})
}
Add an onClick handler to the button "Clear Selection"
<button type="reset" onClick="clearAllCheckboxes(this)">Clear Selection</button>
I have seen many similar problems but when I try them they end up failing. It has gotten to the point where my code is totally messed up and I need some help both cleaning it up and fixing my issue. (using chrome)
So far I have tried selecting the value of the form and putting that into a div,
I have tried to use the button as just a link to start the script so that the page doesn't reset and also many other answers found on-line, none of them are helping so I am asking for a personalised help.
function on_comment_add() {
var main = document.getElementById("div1");
var add_user_name = document.createElement("div");
var add_user_comment = document.createElement("div");
add_user_name.setAttribute("id", "add_user_name");
add_user_comment.setAttribute("id", "add_user_comment");
<!-- var node = document.createTextNode("This is new."); -->
var node_1 = document.getElementById("user_name").value;
var node_2 = document.getElementById("user_comment").value;
add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);
var element = document.createElement("div");
element.setAttribute("id", "display_comment_div");
element.appendChild(add_user_name);
element.appendChild(add_user_comment);
main.appendChild(element);
main.innerHTML = element;
return false;
}
body {
background-color: lightGreen;
}
div.middle {
width: 80%;
margin-left: 10%;
background-color: #47e077;
height: 940px;
font-size: 10pt;
font-family: aubrey;
border: 3px solid gold;
}
.comments-form {
text-align: center;
}
#display_comment_div {
background: rgba(200, 54, 54, 0.1);
width: 80%;
margin-left: 9%;
border: 0.1px solid lightGreen;
border-radius: 25px;
}
#add_user_name {
width: 45%;
float: left;
}
#add_user_comment {
width: 45%;
display: inline-block;
float: right;
}
<div class="middle">
<div class="comments-form">
<form>
<label for="name" style="width:100px; display:inline-block;">Name</label>
<input id="user_name" type="text" placeholder="name goes here" style="width:300px; margin-left:5px;" />
<br><br>
<label for="comment" style="width:100px; display:inline-block;">Comment</label>
<textarea id="user_comment" placeholder="comment goes here" maxlength="150" style="width:300px;max-width:300px;"></textarea><br>
<button style="margin-left:310px;" onmousedown="return on_comment_add">Submit</button>
</form>
<div id="div1">
</div>
</div>
</div>
I guess what I am asking is if anyone can help me display the username and comment below the form but it seems tricky for me because I have gone through so many answers that don't work for me that I cannot think of any other ways to do it.
For clarification this code is not meant to keep the comments from the form nor is it meant to be a fully functioning site. I am just making slight modifications to some code so that I can hand it in as a college assignment.
Using onclick and pass the event inside:
<button style="margin-left:310px;" onclick="on_comment_add(event)">Submit</button>
And disable the default form submit action:
function on_comment_add(e) {
e.preventDefault()
var main = document.getElementById("div1");
var add_user_name = document.createElement("div");
var add_user_comment = document.createElement("div");
add_user_name.setAttribute("id", "add_user_name");
add_user_comment.setAttribute("id", "add_user_comment");
var node_1 = document.createElement("div");
node_1.innerHTML= document.getElementById("user_name").value;
var node_2 = document.createElement("div");
node_2.innerHTML = document.getElementById("user_comment").value;
add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);
var element = document.createElement("div");
element.setAttribute("id", "display_comment_div");
element.appendChild(add_user_name);
element.appendChild(add_user_comment);
main.appendChild(element);
return false;
}
Workable example: https://jsfiddle.net/kingychiu/z6gnqswn/
Change type to "button" to prevent automatical form sending and add parentheses to onmousedown expression:
<button type="button" style="margin-left:310px;" onmousedown="return on_comment_add()">Submit</button>
Then change this
add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);
to this (since node_1, node_2 are values, not elements):
add_user_name.innerHTML = node_1;
add_user_comment.innerHTML = node_2;
And remove that line
main.innerHTML = element;
above
return false;
That should work.
I hide the default checkbox and use a div with custom checkbox image instead:
<aui:form>
<c:if
test="<%=company.isAutoLogin() && !PropsValues.SESSION_DISABLED%>">
<div class="rememberImage ftr" id="rememberImg">
<aui:input checked="<%=rememberMe%>" name="rememberMe" id="rememberMe"
type="checkbox" cssClass="remember"/>
</div>
</c:if>
</form>
//omiited
<aui:script use="aui-base">
function changeBG() {
if (this.checked) {
document.getElementById('rememberImg').style.backgroundImage = 'url(../img/chk_none.png)';
} else {
document.getElementById('rememberImg').style.backgroundImage = 'url(../img/chk_check.png)';
}
}
document.getElementById('_58_rememberMe').addEventListener('change', changeBG);
var password = A.one('#<portlet:namespace />password');
if (password) {
password.on(
'keypress',
function(event) {
Liferay.Util.showCapsLock(event, '<portlet:namespace />passwordCapsLockSpan');
}
);
}
</aui:script>
This does not work at all. Any suggestions?? Much appreciated!
UPDATE: add more lines of code that I think maybe have problems
I saw a proper answer already above, but to avoid intruding HTML tags with JS listeners, what considered as not the best practice, I will offer you this solution...
function changeBG() {
if (this.checked) {
document.getElementById('myElement').style.backgroundImage = 'url(.....)';
} else {
document.getElementById('myElement').style.backgroundImage = 'url(.....)';
}
}
document.getElementById('myInput').addEventListener('change', changeBG);
Hope it will help you :)
You can do it like this: Add an onclick attribute to the checkbox that triggers a toggle function. As I cant test it with your code (missing the rest) I can only provide you an enxample where the body background gets changed
<input id="check" type="checkbox" onclick="toggle();"> Click me
<script>
function toggle() {
if( document.getElementById("check").checked ) {
document.getElementsByTagName("body")[0].style.backgroundColor="red";
}
}
</script>
div{
margin: 20px 0;
}
input[type=checkbox] {
display: none
}
input[type=checkbox]+label {
background: url(http://s17.postimg.org/phsoii5vf/check.png) no-repeat;
padding-left: 30px;
padding-bottom: 5px;
padding-top: 2.5px;
height: 18px;
}
input[type=checkbox]:checked+label {
background: url(http://s2.postimg.org/zbjg138np/check_tick.jpg) no-repeat;
}
<div>
<input type="checkbox" id="chk1">
<label for="chk1">Custom Checkbox1</label>
</div>
<div>
<input type="checkbox" id="chk2">
<label for="chk2">Custom Checkbox2</label>
</div>
<div>
<input type="checkbox" id="chk3">
<label for="chk3">Custom Checkbox3</label>
</div>
<div>
<input type="checkbox" id="chk4">
<label for="chk4">Custom Checkbox4</label>
</div>
not required javascript.you can do it from css.
<div>
<input type="checkbox" id="chk">
<label for="chk">Custom Checkbox1</label>
</div>
input[type=checkbox] {
display: none
}
input[type=checkbox]+label {
background: url(../images/check.png) no-repeat;
padding-left: 30px;
padding-bottom: 5px;
padding-top: 2.5px;
height: 18px;
}
input[type=checkbox]:checked+label {
background: url(../images/check_tick.png) no-repeat;
}
you can try this one:
document.getElementById('rememberImage').style.background = 'url(../img/chk_check.png)';
function SetBackground(elm){
if($(elm).is(":checked"))
{
$("#rememberImage").css({"background-color":"gray"});
}
else
{
$("#rememberImage").css({"background-color":"white"});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rememberImage ftr" id="rememberImage">
<input checked="<%=rememberMe%>" name="rememberMe" id="rememberMe" type="checkbox" onchange="SetBackground(this)"/>
</div>
I don't know how your custom checkbox works but, you can add onchange event and check if checkbox is checked then change the background of div.
Best regards
My Classic ASP cart page uses divs for a quantity selector within a form:
<form action="/update-cart/" method="post">
<div class="quantity-selector detail-info-entry">
<div class="detail-info-entry-title">Quantity</div>
<div class="entry number-minus"> </div>
<div class="entry number">1</div>
<div class="entry number-plus"> </div>
</div>
</div>
</form>
when - or + is clicked the 1 will update as expected. the code to do this is this:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
});
What is the easiest way to post the content of the div with class "number" above when a form is submitted. Do i use:
<input type="hidden" id="Num" name="Num" value="" />
Or another way. Either way, how can this be done easily as I cannot get the variable "newVal" to populate the hidden field.
Thanks
This demo has 2 features of note.
The following are done with HTML and inline JS (e.g. onchange='...)
<input>s .number-minus and number-plus
<output> .number displays the sum of .number-minus and .number-plus
As requested, the sum of .number-minus and .number-plus is stored in a <input [hidden]> named .secret. This value was derived from <output> value by using jQuery (overkill IMO). `
$(function() {
$('#pos, #neg').on('change', function(event) {
var cnt = $('#counter').val();
$('#secret').val(cnt);
console.log('Secret: ' + secret.value);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript/jquery onChange function for div.text to update form hidden field value</title>
<meta name="description" content="SO33312004">
<style>
.detail-info-entry-title,
#pos,
#neg {
font-variant: small-caps;
}
.entry {
padding: 3px;
margin: 0 5px;
width: 48px;
line-height: 1.6;
border: 2px solid #00E;
border-radius: 8px;
display: table-cell;
}
#counter {
font-weight: 900;
margin: auto;
display: table-cell;
height: 24px;
}
#form33312004 {
color: #0CF;
background: hsla(180, 100%, 10%, 1);
width: 33%;
height: 30%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.field {
width: 50px;
display: table-cell;
}
footer {
font-size: .75em;
text-align: center;
}
</style>
</head>
<!--http://stackoverflow.com/questions/33312004/javascript-jquery-onchange-function-for-div-text-to-update-form-hidden-field-val-->
<body>
<form id="form33312004" submit="return false" oninput="counter.value = parseInt(pos.value, 10) - parseInt(neg.value, 10)">
<fieldset class="quantity-selector detail-info-entry">
<legend class="detail-info-entry-title">Quantity</legend>
<div class="field">
<input type="number" id="pos" min="0" max="999" step="any" value="0" class="entry number-plus">
<label for="pos">Positive</label>
</div>
<output for='pos neg' id="counter" name="counter" class="entry number">0</output>
<div class="field">
<input type="number" id="neg" min="0" max="999" step="any" value="0" class="entry number-minus">
<label for="neg">Negative</label>
</div>
</fieldset>
<input id="secret" type="hidden">
</form>
<div class="field">
<footer>Observe the hidden input's value thru
<br/>the console. (<b>F12</b> then the <b>Console</b> tab).</footer>
<script sr="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</body>
</html>
With pure JS:
document.getElementById("Num").value = < variable name >
With jQuery(not 100% sure)
$("Num").value(< variable name>)
So I solved the problem myself.
I added the following line:
$("#Num").val(newVal);
To both the jquery functions for the + and - divs as follows:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
$("#Num").val(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
$("#Num").val(newVal);
});
I am sure I had tried this but after thought I may have omitted the $ at the beginning. Always something simple in the end
Hello guys this is a horrid question to word in one phase so please excuse the above.
I am making a "tag search" the user selects three tags, one at a time from a list of tags have a look at this demo quickly (as it's easier to understand) http://codepen.io/naniio/pen/pJNexm
once all 3 tags are selected the user hits search and it searches my database for the related tagged content.
the problem I have is with the jQuery:
$('.term-1').on('change', function() {
// Gets radio value and adds into tagbox 1
$('#tagbox-1').html(this.checked ? this.value : '');
// Add class to draw users attention to new tag box (2)
$( "#tagbox-2" ).addClass( "highlight" );
// hides tags for tagbox 1
$( ".term-1-tags" ).addClass( "hide-tags" );
// Shows Tags for tagbox 2
$(".term-2-tags").removeClass("state");
});
$('.term-2').on('change', function() {
// gets radio value and adds into tagbox 2
$('#tagbox-2').html(this.checked ? this.value : '');
// Add class to draw users attention to new tag box (3)
$("#tagbox-3" ).addClass( "highlight");
// hides tags for tagbox 2
$(".term-2-tags").addClass( "hide-tags");
// Shows Tags for tagbox 3
$(".term-3-tags").removeClass("state");
});
$('.term-3').on('change', function() {
// gets radio value and adds into tagbox 3
$('#tagbox-3').html(this.checked ? this.value : '');
// hides tags for tagbox 3
$(".term-3-tags").addClass("hide-tags");
});
$('#reset').click(function() {
// reset to default
});
The way i've done it (the hiding and showing divs) seems bloated and I believe there must be a better way? I also have no idea how the reset button is going to work (return the tag search to it's page load state and I do not want to refresh the page to do it)
Any help would be great!
Just one common event is enough in this case.
We can use the index of the Item from the class itself and a short logic to remove the redundancy of code.
note : Here in stackoverflow's fiddle, Reset button won't work as the fiddle is embedded in iframe. But it will work in normal forms.
$('.term-1,.term-2,.term-3').on('change', function() {
var index = $(this).attr('class').split('-')[1];
var nextIndex =parseInt(index)+1;
// Gets radio value and adds into tagbox 1
$('#tagbox-'+index).html(this.checked ? this.value : '');
// hides tags for tagbox 1
$( ".term-"+index+"-tags" ).addClass( "hide-tags" );
if($(".term-"+index)){
// Add class to draw users attention to new tag box (2)
$( "#tagbox-"+nextIndex ).addClass( "highlight" );
// Shows Tags for tagbox 2
$(".term-"+nextIndex+"-tags").removeClass("state");
}
});
$('#reset').click(function() {
$('form')[0].reset();
});
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
body {
font-size: 18px;
line-height: 20px;
font-family: 'Open Sans', sans-serif;
}
p {
line-height: 22px;
color: #111111;
}
.container {
width: 500px;
padding: 15px;
margin: 50px auto;
}
.tagbox {
border: 1px solid #F2F2F2;
display: inline-block;
padding: 15px;
cursor: pointer;
margin:15px 15px 15px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.select_box {
box-sizing: border-box;
margin: 30px 0;
}
ul.options {
list-style-type: none;
font-size: 0px;
border-style: solid;
border-width: 1px 1px 1px 4px;
margin: 0;
padding: 15px;
}
ul.options li{
display: inline;
}
ul.options li label {
font-size: 18px;
padding: 5px;
background: #FFFFFF;
}
ul.options li label:hover {
/*background: #0000EE;*/
}
label {
cursor: pointer;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.highlight{
display:inline-block;
border:1px solid #F2F2F2;
border-left-style: solid;
border-left-width: 3px;
}
.ta{border-left-color: #E13632;}
.tb{border-left-color: #4CB849;}
.tc{border-left-color: #E89A02;}
.hide-tags, .state{
display:none;
}
button{
margin:15px 0;
border:0;
padding:10px 30px;
border-radius:5px;
font-size:16px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form action="">
<span id="tagbox-1" class="tagbox ta noselect highlight">Select 1</span>
<span id="tagbox-2" class="tagbox tb noselect">Select 1a</span>
<span id="tagbox-3" class="tagbox tc noselect">Select 1b</span>
<ul id="" class="options term-1-tags ta">
<li><label for="item-1" class="">tag 1</label></li>
<li><label for="item-2" class="">tag 2</label></li>
<li><label for="item-3" class="">tag 3</label></li>
<li><label for="item-4" class="">tag 4</label></li>
</ul>
<input type="radio" id="item-1" class="term-1" name="item-1" value="tag1" hidden>
<input type="radio" id="item-2" class="term-1" name="item-1" value="tag2" hidden>
<input type="radio" id="item-3" class="term-1" name="item-1" value="tag3" hidden>
<input type="radio" id="item-4" class="term-1" name="item-1" value="tag4" hidden>
<!-- end -->
<ul id="" class="options term-2-tags state tb">
<li><label for="tag1a" class="">tag 1a</label></li>
<li><label for="tag2a" class="">tag 2a</label></li>
<li><label for="tag3a" class="">tag 3a</label></li>
<li><label for="tag4a" class="">tag 4a</label></li>
</ul>
<input type="radio" id="tag1a" class="term-2" name="item-2" value="tag1a" hidden>
<input type="radio" id="tag2a" class="term-2" name="item-2" value="tag2a" hidden>
<input type="radio" id="tag3a" class="term-2" name="item-2" value="tag3a" hidden>
<input type="radio" id="tag4a" class="term-2" name="item-2" value="tag4a" hidden>
<!-- end -->
<ul id="" class="options term-3-tags state tc">
<li><label for="tag1b" class="">tag1b</label></li>
<li><label for="tag2b" class="">tag2b</label></li>
<li><label for="tag3b" class="">tag3b</label></li>
<li><label for="tag4b" class="">tag4b</label></li>
</ul>
<input type="radio" id="tag1b" class="term-3" name="item-3" value="tag1b" hidden>
<input type="radio" id="tag2b" class="term-3" name="item-3" value="tag2b" hidden>
<input type="radio" id="tag3b" class="term-3" name="item-3" value="tag3b" hidden>
<input type="radio" id="tag4b" class="term-3" name="item-3" value="tag4b" hidden>
<!-- end -->
<br>
<button id="search" type="submit">Search</button>
<button id="reset">Reset</button>
</form>
</div>
Using custom data-* attributes, you can reduce your three change event handlers to one change event handler
<input data-current="1" id="item-1" class="term-1" name="item-1" value="tag1>
$('[data-current]').on('change', function() {
var currentId = parseInt($(this).attr('data-current'));
var siblingId = currentId + 1;
// Gets radio value and adds into tagbox 1
$("#tagbox-" + currentId).html(this.checked ? this.value : '');
// hides tags for tagbox 1
$(".term-" + currentId + "-tags").addClass("hide-tags");
if (currentId != 3) {
// Add class to draw users attention to new tag box (2)
$("#tagbox-" + siblingId).addClass("highlight");
// Shows Tags for tagbox 2
$(".term-" + siblingId + "-tags").removeClass("state");
}
});
Regarding from reset, simply do
$('#reset').click(function() {
$('form')[0].reset();
});
http://codepen.io/anon/pen/YXpoEm