I'm trying to use jQuery UI to animate a transition on a form and while the code works correctly in Firefox and Chrome, a Javascript error occures in IE8.
I'm using jquery-ui-1.8.2.custom.min.js and the error given is:
Message: 'end.0' is null or not an object - Line: 819 - Char: 6
My CSS:
.formfield {
background-color: White;
border: none;
padding: 5px;
width: 90%;
overflow: hidden;
margin: 0px;
}
.formfieldselected {
background-color: MintCream;
border: none;
padding: 5px;
margin: 0px;
overflow: hidden;
}
Javascript:
$(document).ready(function()
{
$(":input").each(function()
{
var myInput = $(this);
if (this.type == 'submit')
{
return;
}
myInput.bind('focusin', function()
{
$('#' + this.id + 'field').removeAttr('style'); // Reset Style if broken
$('#' + this.id + 'field').switchClass('formfield', 'formfieldselected', 300);
$('#' + this.id + 'helpbox').removeClass('helpboxhidden').addClass('helpboxvisible');
});
myInput.bind('focusout', function()
{
$('#' + this.id + 'field').switchClass('formfieldselected', 'formfield', 300);
$('#' + this.id + 'helpbox').removeClass('helpboxvisible').addClass('helpboxhidden');
});
});
...
}
And finally one of the elements this code is supposed to be working on:
<DIV id="eventnamefield" class="formfield">
<DIV id="eventnamehelpbox" class="helpboxhidden">
This name is used throughout the system to refer to this event and is shown to Attendees
</DIV>
<label for="eventname" class="adminformlabel">Event Name:</label>
<br />
<input type="text" name="eventname" value="" id="eventname" maxlength="50" class="adminforminput" />
</DIV>
Found the answer.
Turns out jQuery UI under IE can not handle colours referenced by name. Changing the colours to their hex codes in the CSS fixed the problem.
Related
I'm trying to make a page where you can create "documents" that are divs with specific properties.
For now I thought about name & color.
First, when you click in the body, you can create a document that is called "something+i" (i is its ID) then, when you click a specific document you can access a menu to edit its color and its name.
finally when you close the menu by clicking OK the specific document is updated.
Do you have any idea on how to do that?
Thanks a lot for the help.
var i = 1;
$(function(){
$(document.body).click(function(e){
var div = $("<div />", { "class":"document", id:"document"+i })
.css({
"left": e.pageX + 'px',
"top": e.pageY + 'px'
})
.append($( "<p>document</p>")+i )
.appendTo(document.body);
$('.document').click(function(event){
event.stopPropagation();
});
$('.menu').click(function(event){
event.stopPropagation();
});
document.querySelector(".document").addEventListener("click", function(){
document.querySelector(".menu").style.display = "block";
});
document.querySelector(".validate").addEventListener("click", function(){
document.querySelector(".menu").style.display = "none";
});
i++;
});
});
body{
width: 100vw;
height: 100vh;
background: grey;
}
.document {
position: absolute;
transform: translate(-50%, -50%);
opacity: 1;
background-color: red;
resize:both;
overflow: auto;
filter: drop-shadow(0 0 0.2rem black);
}
.menu{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="menu">
<li><input type="text" id="name" name="name" size="10" placeholder="name"></li>
<li><input type="text" id="color" name="color" size="10" placeholder="color"></li>
<button class ="validate">OK</button>
</div>
</body>
When you click on document first check if there is any menu exist with the id which is clicked if there is show that menu else create new menu .You can use clone to create new menu and then add data-id to it and append them under some divs .
Then , when ok button is clicked simply use $(this).closest(".menu_copy").hide(); to hide the menu .
Demo Code :
var i = 1;
$(function() {
$(document.body).click(function(e) {
var subject = $(".menu_copy")
//check if target click doesn't have class document && not inside menu_copy
if ((!$(event.target).hasClass('document')) && (!subject.has(e.target).length)) {
var div = $("<div />", {
"class": "document",
id: "document" + i
})
.css({
"left": e.pageX + 'px',
"top": e.pageY + 'px'
})
.append($("<p>document</p>") + i)
.appendTo(document.body);
i++;
}
});
//onclick of document
$(document).on('click', '.document', function(event) {
event.stopPropagation();
var id = $(this).attr("id"); //get id
//check if there is any div with data-id
if ($("[data-id =" + id + " ]").length > 0) {
$("[data-id =" + id + " ]").show() //show it
} else {
//create new menu
var clone_menu = $(".menu_copy:first").clone();
$(clone_menu).attr("data-id", $(this).attr("id"))
$(clone_menu).css("display", "block")
$(clone_menu).appendTo(".docs"); //append inside docs
}
});
//if ok is clicked
$(document).on('click', '.validate', function(event) {
//get color and name
var name = $(this).closest(".menu_copy").find("input[name='name']").val();
var color = $(this).closest(".menu_copy").find("input[name='color']").val();
var data_id = $(this).closest(".menu_copy").attr("data-id")
$("#" + data_id).text(name);//add name
$("#" + data_id).css("color", color);//apply color
$(this).closest(".menu_copy").hide(); //hide the menu
})
});
body {
width: 100vw;
height: 100vh;
background: grey;
}
.document {
position: absolute;
transform: translate(-50%, -50%);
opacity: 1;
background-color: red;
resize: both;
overflow: auto;
filter: drop-shadow(0 0 0.2rem black);
}
.menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="menu_copy" style="display:none">
<li><input type="text" id="name" name="name" size="10" placeholder="name"></li>
<li><input type="text" id="color" name="color" size="10" placeholder="color"></li>
<button class="validate">OK</button>
</div>
<!--added this divs new menus will go inside this -->
<div class="docs"></div>
</body>
I ran to this problem where I am unable to expand this simple select tag on my chrome.
<select id="filterCategory" class="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Steps to reproduce:
Run code snippet above (on Chrome),
Go for Developers Mode (F12),
Toggle mobile device mode (By default is Ctrl + Shift + M)
I am currently using Chrome Version 53.0.2785.116 (64-bit) on Ubuntu
This works fine in any other browser or mobile native browsers, it's just for Chrome.
Question: Any temporary workaround for this?
Edit:
This behavior is worsen if I use position fixed as its container and form-control class from bootstrap. The option is out of the chrome window with invisible options.
You don't have to worry about mobile-device, the select-menu will look something like this,
and for debugging you can use down and up arrow key to select menu options until chrome fix this issue.
crude long winded workaround, but on the upside allows you to style customised menus:
$('select').each(function() {
// set up the list
var $this = $(this),
$class = $this.attr('class') + ' sel',
$id = $this.attr('id'),
list = '',
opts = '',
start = '';
$this.hide();
$('option', this).each(function(i) {
var content = $(this).text();
if (i === 0) {
start = '<div >' + content + '</div>';
}
opts += '<li data-id="' + $id + '">' + content + '</li>';
});
list = '<ul >' + opts + '</ul>';
$this.after('<div class="' + $class + '" >' + start + list + '</div>');
});
// adds the clicks
$('.sel').on('click', function(e) {
$('ul', this).fadeIn('fast');
$('ul', this).on('mouseleave', function() {
$(this).fadeOut('slow');
});
});
// registers the input to the original selector
$('.sel ul li').on('click', function(e) {
e.preventDefault();
$('.sel ul').fadeOut('fast');
var $this = $(this),
target = $this.data('id'),
num = $this.text();
$('select#' + target).val(num).change(); // triggers the hidden selector
$this.parent().siblings().text($this.text());
return false;
});
// test only
$('select').on('change', function() {
$("#monitor").text(this.value); // or $(this).val()
});
.sel {
width: 3em;
background: #fff;
cursor: pointer;
text-align: center;
border: 1px solid #09f;
}
.sel ul {
display: none;
position: relative;
left: 0em;
top: -1em;
width: 3em;
margin: 0em;
padding: 0em;
cursor: pointer;
background: #fff;
text-align: center;
list-style-type: none;
}
.sel ul li:hover {
background: #bbb;
}
#monitor {
position: fixed;
left: 3em;
width: 3em;
height: 1em;
bottom: 4em;
background: #09f;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="filterCategory" class="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id='monitor'>test</div>
Issue exist with chromeor chromium version.
Even if issue exist in developer mode, it select option will fine in #mobileDevice
Affects anything that renders a dropDown, data-picker, select-option
Try Reinstalling the Chrome Version.
Issue with developer mode will be resolved.
add a div for chrome and chromium browser with data-tap-disabled attribute like this :
<div data-tap-disabled="true">
<select>
</select>
</div>
I'm pretty new with Javascript and jQuery, and can't seem to indentify the reason why my code acts like it does.
I have created two seemingly identical functions to change the background color of an input field.
Their goal is to turn the background color of the given input field to the color #00FF7F if anything is typed in the field. And if not, the field should be transparent.
Code JS:
$(document).ready(function () {
var $input1 = $("#logindata1");
var $input2 = $("#logindata2");
function onChangeInput1() {
$input1.css("background-color", "#00FF7F");
var value = $.trim($(".form-control").val());
if (value.length === 0) {
$input1.css("background-color", "transparent");
}
}
function onChangeInput2() {
$input2.css("background-color", "#00FF7F");
var value = $.trim($(".form-control").val());
if (value.length === 0) {
$input2.css("#background-color", "transparent");
}
}
$input1.on("keyup", onChangeInput1);
$input2.on("keyup", onChangeInput2);
});
css:
#loginbox {
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 25%;
}
.logindata {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
height: 60px;
width: 290px;
transition: 0.25s ease;
}
.form-control {
margin-left: auto;
margin-right: auto;
height: 55px;
width: 288px;
border-style: none;
background-color: transparent;
text-align: center;
border: solid 2px #00FF7F;
transition: 0.25s ease;
font-size: 25px;
font-family: "Trebuchet MS";
}
.form-control:hover {
box-shadow: 0px 0px 30px #2E8B57;
}
::-webkit-input-placeholder {
color: #00FF7F;
}
Simple HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<!-- Stylesheet link -->
<link rel="stylesheet" type="text/css" href="assets/style.css">
<!-- jQuery link -->
<script type="text/javascript" src="assets/vendor/jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="loginbox">
<div class="logindata" id="logindata1">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="logindata" id="logindata2">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<!-- Javascript link-->
<script type="text/javascript" src="assets/js/javascript.js"></script>
</body>
On the jsbin above, try typing in both the Username and Password field to see how they react differently.
Images of what happens. Didn't want to include all images here:
http://imgur.com/a/qgubP
I realize there probably is a way to compromise my js/jquery into 1 function that each input field calls instead of have a function for each.
If both of these fields are required, here's a much simpler solution using CSS only.
Add the attribute required to your <input> tags and then use the pseudo-class :valid.
.form-control:valid {
background-color: #00FF7F;
}
Code snippet:
#loginbox {
width: 400px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 25%;
}
.logindata {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
height: 60px;
width: 290px;
transition: 0.25s ease;
}
.form-control {
margin-left: auto;
margin-right: auto;
height: 55px;
width: 288px;
border-style: none;
background-color: transparent;
text-align: center;
border: solid 2px #00FF7F;
transition: 0.25s ease;
font-size: 25px;
font-family: "Trebuchet MS";
}
.form-control:hover {
box-shadow: 0px 0px 30px #2E8B57;
}
::-webkit-input-placeholder {
color: #00FF7F;
}
.form-control:valid {
background-color: #00FF7F;
}
<div id="loginbox">
<div class="logindata" id="logindata1">
<input type="text" class="form-control" placeholder="Username" required>
</div>
<div class="logindata" id="logindata2">
<input type="password" class="form-control" placeholder="Password" required>
</div>
</div>
jsFiddle : https://jsfiddle.net/7vzjz2u5/3/
jQuery
$(document).ready(function() {
$('.change-background').on('change', function() {
var $this = $(this);
var value = $.trim($this.val());
// toggleClass can be provided a bool value,
// If we provide true we add class, if false we remove class
$this.toggleClass('filled-background', value.length !== 0);
}).change();
// We also want to call a 'change' event on
// all inputs with the change-background class just incase the page has
// pre-filled in values
});
Instead of listening for the keyup event and then running a function, just create a listener on the change event, also if we just apply one class to all inputs we want the background colour to change on, we can just create one listener which will do it for any input with the class change-background.
Html
<div id="loginbox">
<div class="logindata" id="logindata1">
<input type="text" class="change-background form-control" placeholder="Username">
</div>
<div class="logindata" id="logindata2">
<input type="password" class="change-background form-control" placeholder="Password">
</div>
</div>
Css (the extra class for background color)
.filled-background {
background-color: #00FF7F;
}
Also side note
listening for keyup is back, someone may want to copy and paste their username and password and if they do this it won't trigger an keyup event if they use right click and paste.
Your code clears the background color when the length is 0. The way it checks the length is with this snippet of code:
var value = $.trim($(".form-control").val());
The selector $(".form-control") will select all elements with the CSS class of .form-control. This is a problem because there is more than one of them; in this case, it will always return the value from the first element found.
You should change the code to check for the specific control by searching by ID, like so:
var value = $.trim($("#logindata1 input").val()); //get user ID
var value = $.trim($("#logindata2 input").val()); //get password
You have some minor mistakes, but no worry. We can fix it.
First Problem
Other answers are pointing something important: you are trying to get the value selecting all elements with form-control class.
var value = $.trim($(".form-control").val());
You can do it, replacing your selector by your already declared variables $input1 and $input2. This way:
var value = $.trim($input1.val());
var value = $.trim($input2.val());
Second
Ok. First problem solved. The second problem is in your second function. You trying to set an invalid css: $input2.css("#background-color", "transparent");
When should be: $input2.css("background-color", "transparent"); (without #).
Next One
Nice. Next one. The id's you are setting logindata1 and logindata2 are on your divs. So, you are wrongly trying to get the value of the div instead the value of the input. you can fix your selector by appending input, this way:
var $input1 = $("#logindata1 input");
var $input2 = $("#logindata2 input");
Finally
So, finally, it should work:
$(document).ready(function () {
var $input1 = $("#logindata1 input");
var $input2 = $("#logindata2 input");
function onChangeInput1() {
$input1.css("background-color", "#00007F");
var value = $.trim($input1.val());
if (value.length === 0) {
$input1.css("background-color", "transparent");
}
}
function onChangeInput2() {
$input2.css("background-color", "#00007F");
var value = $.trim($input2.val());
if (value.length === 0) {
$input2.css("background-color", "transparent");
}
}
$input1.on("keyup", onChangeInput1);
$input2.on("keyup", onChangeInput2);
});
Your value check is not right. With your jQuery, you are checking the value of both inputs every time.
Try checking the single inputs that you are interested in instead.
$(document).ready(function () {
var $input1 = $("#logindata1");
var $input2 = $("#logindata2");
function onChangeInput1() {
$input1.css("background-color", "#00FF7F");
var value = $.trim($input1.val());
if (value.length === 0) {
$input1.css("background-color", "transparent");
}
}
function onChangeInput2() {
$input2.css("background-color", "#00FF7F");
var value = $.trim($input2.val());
if (value.length === 0) {
$input2.css("#background-color", "transparent");
}
}
$input1.on("keyup", onChangeInput1);
$input2.on("keyup", onChangeInput2);
});
I have a fairly simple CSS question. I have an input text field, and on page load i would like it to be 150px in width.
However, as the user enters some text, if the text is greater than 150px in width, then the width should auto adjust.
Here's a plunker:
http://plnkr.co/edit/ig0BQrJDiEtXKV8zJ2w2?p=preview
HTML:
<input class="input-class" type="text" placeholder="Placeholder">
CSS:
.input-class-2 {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #ef8e80;
border-image: none;
border-style: none none dashed;
border-width: 0 0 1px;
color: #ef8e80;
cursor: pointer;
font-family: Gotham-Book;
font-size: 18px;
min-width: 150px;
}
I assumed min-width would do this.
There currently is no way to achieve this with pure CSS, perhaps once calc and attr can be used in combination, but not currently. So we have to fall back to JavaScript.
There isn't any real reason to use jQuery for this. You can argue that your "concerns should be separated" i.e. code should be separate from mark-up, but that is easy to do using addEventListener. However, if I'm dealing with one off small bits of JavaScript it tends to be faster — in terms of implementation, page render and even for those trying to track down what is making the input behave strangely — to use inline event listeners.
<input type="text"
style="min-width: 150px;"
onkeyup="this.size = Math.max(this.value.length, 1)"
/>
or:
<input type="text"
style="width: 150px;"
onkeyup="
this.style.width = '1px';
this.style.width = (
this.scrollWidth > 140
? this.scrollWidth + 10
: 150
)+'px';
"
/>
Disclaimer: Obviously if you are implementing many of these inputs it is far better to code a generalised function to handle them. Plus it is always far better to avoid inline style by using a stylesheet.
/**
* Directly setting the size attribute, with minWidth
*/
function autosize(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
var v = Math.max(t.value.length, 1);
t.setAttribute
? t.setAttribute('size', v)
: (t['size'] = v)
;
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
The size attribute is by far the most obvious choice, although you can directly set the width — if you prefer — using scrollWidth.
/**
* Directly setting width, with minWidth
*/
function autosize(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
t.style.width = '1px';
t.style.width = t.scrollWidth + 'px';
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
You can trigger either of these functions by passing your target element in as the first argument. There are a number of ways of finding your element, the easiest and most universal being getElementById. Although you will only be able to find your element if it has been parsed by the browser, so the script tag you use — to run the following code — will either have to be placed below the element in the mark-up i.e. bottom of <body> (preferable), or after waiting for window load, or DOM readiness.
autosize( document.getElementById('myinput'), 150 );
/**
* Directly setting width, with minWidth
*/
function autosize1(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
t.style.width = '1px';
t.style.width = t.scrollWidth + 'px';
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
/**
* Directly setting the size attribute, with minWidth
*/
function autosize2(elm, minWidth){
var keyup = function(e){
var t = e.target || e.srcElement;
var v = Math.max(t.value.length, 1);
t.setAttribute
? t.setAttribute('size', v)
: (t['size'] = v)
;
};
elm.style.minWidth = minWidth+'px';
elm.addEventListener
? elm.addEventListener('keyup', keyup)
: elm.attachEvent('onkeyup', keyup)
;
};
autosize1( document.getElementById('a'), 150 );
autosize2( document.getElementById('b'), 150 );
<p>Each input is using a different implementation:</p>
<input type="text"
style="min-width: 150px;"
onkeyup="this.size = Math.max(this.value.length, 1)"
/><br />
<input type="text"
style="width: 150px;"
onkeyup="
this.style.width = '1px';
this.style.width = (
this.scrollWidth > 140
? this.scrollWidth + 10
: 150
)+'px';
"
/><br />
<input type="text" id="a" /><br />
<input type="text" id="b" /><br />
You can try like this:
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]')
.keyup(resizeInput)
.each(resizeInput);
JSFIDDLE DEMO
There is one more alternative of using the
<span contenteditable="true">Some Text</span>
instead of using Input tags.
JSFIDDLE DEMO
You can try something like this
$('.input-class').keyup(function(){
var textlength=$('.input-class').val().length
$(this).width(textlength * 8)
})
.input-class{
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #ef8e80;
border-image: none;
border-style: none none dashed;
border-width: 0 0 1px;
color: #ef8e80;
cursor: pointer;
font-family: Gotham-Book;
font-size: 18px;
min-width: 150px;
width:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class="input-class" type="text" placeholder="Placeholder">
Tried to use pure JavaScript.
I hide a span element that's not shown (visibility:hidden;) to the user.
Then I calculate the span elements rendered width, and setting that to the container of the input.
And setting the input to be width:100%; makes it grow to the size of its parent.
var field = document.getElementById("grow");
field.oninput = function() {
var ruler = document.getElementById("ruler");
ruler.innerHTML = field.value.replace(/ /g," ");
var outer = document.getElementById("outer");
if (ruler.offsetWidth > 100) {
outer.setAttribute('style', "width:" + (ruler.offsetWidth + 5) + "px;");
} else {
outer.setAttribute('style', "");
}
};
#grow {
height: 100%;
width: 100%;
font-size: inherit;
font-family: inherit;
}
#outer {
width: 100px;
font-size: 1rem;
font-family: Serif, "Times New Roman", Georgia;
}
.hidden {
position: absolute;
display: inline;
visibility: hidden;
padding: 0;
font-size: inherit;
font-family: inherit;
white-space: nowrap;
}
<div id="outer">
<span id="ruler" class="hidden"></span>
<input id="grow" type="text/plain"/>
</div>
<p>+ Expands</p>
<p>+ shrinks</p>
<p>+ whitespace handling</p>
Am creating an HTML page with some buttons to create the input boxes. The buttons should behave like toggle one. ie, on first click input box should appear and if the same button in clicked again that particular input box need to disappear. Button toggle i have managed. But div is not creating
This is my toggle button
<button class="btn" id="button_rd" onclick="setColor('button_rd', '#101010')";>one</button>
Following is the javascript
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#f4543c"//red
property.style.borderColor = "#f4543c"
count = 1;
}
else {
property.style.backgroundColor = "#00a65a"//green
property.style.borderColor = "#008d4c"
count = 0;
var newdiv = '<div class="form-group"><label for="exampleInputEmail1">email</label>'
+'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div>'
document.getElementById("create").append(newdiv);
}
}
And below is the place where I need the input box to display(inside this div)
<div class="box-body" id="create">
</div>
If you're happy to use Jquery, Something like this may be what you're looking for.
it's not so much as 'creating' an element, more actually 'toggling' its visibility
$(document).ready(function() {
$('[id^=bool]').click(function() {
var id = $(this).attr("id").substr($(this).attr("id").length - 1);
$('[id^=bool' + id + '] .switcher').toggleClass("switched");
var x = $('[id=input' + id + ']').length;
if (x > 0) //there is one there
{
$('[id=input' + id + ']').remove();
} else {
$('body').append('<input type="text" id="input' + id + '" placeholder="input ' + id + '" />');
}
});
});
.bool {
height: 40px;
width: 100px;
background: darkgray;
position: relative;
border-radius: 5px;
overflow: hidden;
box-shadow: inset 5px 0 6px gray;
border: 1px solid black;
}
.bool:before {
content: "On";
left: 10%;
position: absolute;
top: 25%;
}
.bool:after {
content: "Off";
right: 10%;
position: absolute;
top: 25%;
}
.switcher {
height: 100%;
width: 50%;
position: absolute;
background: lightgray;
top: 0;
left: 0;
z-index: 5;
transform: translateX(0px);
transition: all 0.5s;
border-radius: 5px;
box-shadow: inset 0 0 6px black;
}
.switched {
transform: translateX(50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bool" id="bool1">
<div class="switcher"></div>
</div>
<div class="bool" id="bool2">
<div class="switcher"></div>
</div>
Edit History
Altered snippet to include 2 toggles, as per comments
refactored jquery method with help from Tambo
altered markup to 'append' and 'remove' instead
OnClick write following code to hide:
document.getElementById('create').style.display = 'none';
And following code to show:
document.getElementById('create').style.display = 'block';
Like:
JavaScript:
<script type="text/javascript">
var count = 1;
function hidShow()
{
if(count == 1)
{
document.getElementById('create').style.display = 'none';
count = 0;
}
else
{
document.getElementById('create').style.display = 'block';
count = 1;
}
}
</script>
HTML:
<button id="button_rd" onClick="hidShow()">one</button>
<div class="box-body" id="create">
<input type="text" id="txt"/>
</div>
instead of
document.getElementById("create").append(newdiv);
'innerHTML' works for me, like below:
document.getElementById("create").innerHTML = '<div class="form-group"><label for="exampleInputEmail1">email</label>'
+'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div>'
to remove the div on toggle i used
$('div_id').remove();