Google Material Design Growing Textarea while typing - javascript

I'm trying to implement Google Material Design Guidelines in my forms and it's working great, until I bumped into the textarea. What I want is this:
When you focus on the textarea there is only one line, but when you reach the end of the line (while typing) it automatically adds another line and continues typing there.
I have found this on codepen, but this uses an inputfield, not a textarea. This just scrolls horizontally... Demo
<input type="text" required>
Anyone who has this code and is willing to share?
Thanks

You are creating all the Material Design CSS & Jquery by yourself?
Otherwise, I found Material Design textarea like you mentioned in here:
Source: https://materializecss.com/text-inputs.html#textarea
Check out their Textarea part.

Actually, to obtain this level of control, and work around the fact that a textarea, on most web browsers, can be resized by hand, you'll want to use a div with the contenteditable attribute.
See the HTML doctor entry on contenteditable for more.
Further, to calculate font sizes and overflow, you might want to use the canvas measureText method, for example using canvas as an offscreen substitute (where you input exactly the same text that is typed inside your contenteditable element).
Finally, while the css lineHeight attribute can somewhat facilitate those calculations, there are a few javascript libraries out there that are dedicated to the purpose. I found Font.js, haven't tested it at the time of this writing.

You can use <div contentEditable> instead of textarea and that will make a trick. Also you might not use additional libraries (Material-ui, jQuery, etc.).With your code it will look like this:
.inputBlock {
position: relative;
margin-top: 20px;
font-family: 'Roboto';
display: block;
width: 300px;
background: #FFF;
}
.input {
font-size: 15px;
padding: 0 0 6px;
display: block;
width: 100%;
height: auto;
border: none;
box-sizing: border-box;
resize: none
}
.input:focus {
outline: none;
}
/* LABEL */
label {
color: #777;
font-size: 15px;
font-weight: normal;
position: absolute;
pointer-events: none;
top: 0;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
.input:focus~label,
.input:not(:empty)~label {
top: -15px;
font-size: 11px;
color: #00968a;
}
/* BOTTOM BARS */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #00968a;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
.input:focus~.bar:before,
.input:focus~.bar:after {
width: 50%;
}
/* HIGHLIGHTER */
.highlight {
position: absolute;
height: 73%;
width: 100%;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
border-bottom: 1px solid #777;
}
/* active state */
.input:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
border: none;
}
/* ANIMATIONS */
#-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#-moz-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
#keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
[class='input textarea'] height: auto !important color: #000000 !important font-size: 15px !important div color: #000000 !important font-size: 15px !important~.highlight height: 77% !important
<div class="inputBlock">
<div contentEditable class="input" required></div>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>

Related

How to remove transition of a border without affecting the width

Whenever i toggle the class "dark_mode" the border color of the "width_animation" has a transition. Any ideas how could i remove the border transition without affecting the width transition? If i remove the transition of the class "width_animation" the width will go back to initial width after no hover and i don't want that, i want to be smooth.
function darkMode() {
var element = document.body;
element.classList.toggle("dark_mode");
}
.dark_mode {
background-color: #333;
}
.dark_mode .width_animation {
border-color: red;
}
.product_container {
width: 300px;
height: 400px;
background-color: grey;
position: relative;
}
.width_animation {
width: 100px;
height: auto;
color: white;
background-color: black;
border: 5px solid white;
font-size: 30px;
padding-left: 10px;
position: absolute;
right: 0px;
top: 150px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.width_animation:hover {
width: 200px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button onclick="darkMode()">DARK MODE</button>
<div class="product_container">
<div class="width_animation">
hover
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add width to the transition. This will apply transition to the width only. Make sure to add it to both sections. See below.
.width_animation {
width: 100px;
height: auto;
color: white;
background-color: black;
border: 5px solid white;
font-size: 30px;
padding-left: 10px;
position: absolute;
right: 0px;
top: 150px;
-webkit-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.width_animation:hover {
width: 200px;
-webkit-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
cursor: pointer;
}
I might be reading the question wrong, but as I understand it you only want the border of the "hover" square to be red when Dark Mode is enabled, right? Further, you only want the width transition to occur on-hover, and the two should be mutually exclusive. Is that right?
.width_animation {
width: 100px;
height: auto;
color: white;
background-color: black;
border: 5px solid white;
font-size: 30px;
padding-left: 10px;
position: absolute;
right: 0px;
top: 150px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.dark_mode {
background-color: #333;
}
/* The width_animation color transition will only apply when
the parent object has dark_mode enabled */
.dark_mode > .product_container > .width_animation {
border-color: red;
}
.product_container {
width: 300px;
height: 400px;
background-color: grey;
position: relative;
}
.width_animation:hover {
width: 200px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
cursor: pointer;
}
If you wanted to make it so that the "hover" square doesn't shrink after someone exits the hover animation (based on this part of your question "the width will go back to initial width after no hover and i don't want that"), you'll need to make .width_animation:hover a static style like below, and then use some javascript to add/remove the class on hover as desired.
.width_animation {
width: 100px;
height: auto;
color: white;
background-color: black;
border: 5px solid white;
font-size: 30px;
padding-left: 10px;
position: absolute;
right: 0px;
top: 150px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.dark_mode {
background-color: #333;
}
/* The width_animation color transition will only apply when
the parent object has dark_mode enabled */
.dark_mode > .product_container > .width_animation {
border-color: red;
}
.product_container {
width: 300px;
height: 400px;
background-color: grey;
position: relative;
}
.width_animation_hover {
width: 200px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
cursor: pointer;
}
function darkMode() {
var element = document.body;
element.classList.toggle("dark_mode");
}
var hover = document.getElementsByClassName("width_animation")[0];
hover.addEventListener("mouseenter", function( event ) {
if ( hover.classList.contains("width_animation_hover") ) {
event.target.classList.remove("width_animation_hover");
} else {
event.target.classList.add("width_animation_hover");
}
})
.width_animation {
-webkit-transition: width 1s ease-in-out, border 0.1s linear;
transition: width 1s ease-in-out, border 0.1s linear;
}
And You have not to write transition into scope of :hover{}. Because your going forward and backward transitions are the same.

Hover over parent div to affect pseudo after elements of child. Underline animation

Currently I can hover over h1 and it will be underlined, but I want to know if I hover over the parent div can I activate the pseudo after elements of h1?
I am trying to preserve the line width to h1 only. Other methods I've tried will take the full width of the div.
So when hovering over h2 or h3, the underline becomes active on h1.
Is this do-able in CSS only or do I need to use Javascript?
.nav-underline {
position: relative;
display: inline-block;
cursor: pointer;
}
.nav-underline:before, .nav-underline:after {
content: '';
position: absolute;
width: 0%;
height: 3px;
top: 45%;
margin-top: -0.5px;
background: #000;
}
.nav-underline:hover {
letter-spacing: 4px;
transition: .35s;
}
.nav-underline:before {
left: -2.5px;
}
.nav-underline:after {
right: 2.5px;
background: #000;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-underline:hover:before {
background: #000;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-underline:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
<div class="nav-underline"><h1>Test</h1></div>
<h2>Description</h2>
<h3>Detail</h3>
</a>
https://jsfiddle.net/jvo8wo65/
Since you want the hover state on the parent a.imagereveal to trigger the effect instead of depending on the hover state on .nav-underline itself, you can simply replace all instances of this selector:
.nav-underline:hover
...with this:
.imagereveal:hover .nav-underline
On a side note, you should be using double colons for pseudo-elements, i.e. ::after instead of :after... unless you really need backwards compatibility with IE8 and below.
See proof-of-concept below, or fixed JSfiddle:
.nav-underline {
position: relative;
display: inline-block;
cursor: pointer;
}
.nav-underline::before, .nav-underline::after {
content: '';
position: absolute;
width: 0%;
height: 3px;
top: 45%;
margin-top: -0.5px;
background: #000;
}
.imagereveal:hover .nav-underline {
letter-spacing: 4px;
transition: .35s;
}
.nav-underline::before {
left: -2.5px;
}
.nav-underline::after {
right: 2.5px;
background: #000;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::before {
background: #000;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::after {
background: transparent;
width: 100%;
transition: 0s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
<div class="nav-underline"><h1>Test</h1></div>
<h2>Description</h2>
<h3>Detail</h3>
</a>
yes, you just have to move the hover to the parent element
.imagereveal:hover .nav-underline::before{
background: #000;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::after{
right: 2.5px;
background: #000;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

Background Color of text field :focus

I am tryig to make nice text field, and I want when user click on it to change background color. But I want to background color slide from left to the right slowly.
It is contact form for wordpress, but I think it does not matter.
So i what I have in my CSS:
.brtel {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
width: 50px;
}
.brtel:focus {
border-radius: 0px;
border:none;
background:#797d7e;
color: #fff;
width: 200px;
}
Can I fix it in CSS or should I use JS?
You can do it in pure css but you need an image with the color you want as a background.
.brtel {
-webkit-transition: background-size 4s ease-in;
transition: background-size 4s ease-in;
width: 200px;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 0% 0%;
}
.brtel:focus {
border-radius: 0px;
border:none;
color: #fff;
background-size: 100% 100%;
}
see this fiddle: https://jsfiddle.net/ym7joe4L/
Edit: spelling
You can use a short code of jquery, like this
$('.animate').mouseenter(function() {
$(this).addClass('filled');
}).mouseout(function() {
$(this).removeClass('filled')
})
And manipulate the filled class by css
.animate{
display: inline-block;
height: auto!important;
width: 200px;
background: #bbb;
position: relative;
}
.animate:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
background: red;
width: 0;
transition: all .5s ease;
}
.animate.filled:before{
width: 100%;
}
input {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
}
HTML:
<form>
<div class="animate"><input value="Send" type="submit" class="brtel"></div>
</form>
Check this pen: http://codepen.io/todorutandrei/pen/MeKQze
I've added a transition element to your class, you can see it here https://jsfiddle.net/giuseppe_straziota/dngb5bz2/
transition: width 0.4s ease-in-out, background-color 1.5s ease;
background-color: white;
It make a background transition from white to grey, I hope it was what you desired.
You can achieve this with css only.
<form>
<button type="submit" class="brtel">Send</button>
</form>
.brtel {
position: relative;
}
.brtel:before {
position:absolute;
width: 0;
height: 50px; /* height if input field */
background-color: #666;
display: block;
transition: width .5s ease;
}
.brtel:hover:after {
width: 100%;
}
You can achieve it by CSS only.
Please check the below code.
.brtel {
width: 150px;
}
.brtel:focus {
border-radius: 0px;
border:none;
background:#797d7e;
color: #fff;
animation: equalize .4s 0s 1;
}
#keyframes equalize {
0% {
width: 10px;
}
10% {
width: 20px;
}
20% {
width: 30px;
}
30% {
width: 40px;
}
40% {
width: 50px;
}
50% {
width: 60px;
}
60% {
width: 70px;
}
70% {
width: 80px;
}
80% {
width: 90px;
}
90% {
width: 100px;;
}
100% {
width: 100px;
}
}
<form id="formoid" action="/" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" class="brtel">
</div>
</form>

Full page overlay appears behind

I am trying to create a simple full page overlay with bootstrap.
However the overlay is appearing 'behind' my main content (a blue box in the example).
I'm sure I am missing something very obvious however any help would be appreciated.
I need to overlay to disappear when the page is clicked anywhere, this is working.
I have included my current code and a jsfiddle. You can see that the overlay is behind the blue box, which seems to load first?
HTML
<div class="overlay overlay-data">
<p>click anywhere to close this overlay</p>
</div>
<div class="col-md-4">
<div class="menu-item blue">
<p>MY INFO BOX</p>
</div>
</div>
JS
$(document).ready(function () {
$(".overlay").addClass('overlay-open');
$("section").addClass('blur');
});
$(document).on('click', '.overlay', function () {
$(".overlay").removeClass('overlay-open');
$("section").removeClass('blur');
});
CSS
.blur {
-webkit-filter: blur(2px);
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
}
.overlay p {
text-align: center;
position: relative;
top: 20%;
height: 60%;
font-size: 80px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 0.5;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.blue {
background: #28ABE3;
}
.menu-item {
padding-top: 45px;
padding-bottom: 45px;
margin-bottom: 45px;
transition: all 0.3s;
border: 5px solid transparent;
}
Specify the z-index in your css to be greater than your main content.
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index: 1;
}
JSFiddle
Read more about it at MDN, z-index.
Use z-index to add overlay effect use this css
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index:99999
}

Is there a way to select each toggle when using Ratchet?

I am dynamically loading a list of classes from a database that the user is supposed to select if they have been completed. I am using Ratchet's toggle to choose the classes and am trying to use a JavaScript function to find which toggles have been toggled -- so far, no luck. I am not very proficient with JavaScript so I apologize if this seems trivial. The function that that I have been trying to use, how the classes are displayed to the webpage, and the contents of the CSS that deals with toggles are as follows:
<script type="text/javascript">
function checkClasses() {
var classes = new Array();
classes.push("COSC120");
alert(classes[0]);
$("input:checkbox[name=type]:checked").each(function()
{
classes.push($(this).val());
});
}
</script>
writing classes to page:
echo '<div class="toggle" id="' .$row['class_id']. '" name="type">';
echo '<div class="toggle-handle"></div>';
echo '</div>';
css:
.toggle {
position: relative;
display: block;
width: 74px;
height: 30px;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 20px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border;
transition-property: background-color, border;
}
.toggle .toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 100px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -moz-transform, border, width;
transition-property: transform, border, width;
}
.toggle:before {
position: absolute;
top: 3px;
right: 11px;
font-size: 13px;
color: #999;
text-transform: uppercase;
content: "no";
}
.toggle.active {
background-color: #ff7e00;
border: 2px solid #ff7e00;
}
.toggle.active .toggle-handle {
border-color: #ff7e00;
-webkit-transform: translate3d(44px, 0, 0);
-ms-transform: translate3d(44px, 0, 0);
transform: translate3d(44px, 0, 0);
}
.toggle.active:before {
right: auto;
left: 15px;
color: #fff;
content: "yes";
}
.toggle input[type="checkbox"] {
display: none;
}
I do not know if more is needed for any assistance, but if so, please ask! Thank you in advance!
Ratchet will add active to the class list of the element, so $('.toggle.active') will give you an array of the active toggle switches

Categories