How can I fix the textarea border bottom css effect? - javascript

I have a simple border bottom animation with another element and it works fine on simple input element but it's not work properly on a textarea. (If I should use javaScript then please advise a solution)
How can I fix the height of textarea?
*{
box-sizing: border-box;
}
.container {
position: relative;
}
textarea,
input {
border: none;
border-bottom: 3px solid #e6e6e6;
width: 100%;
height: 50px;
resize: none;
}
.anim-bar {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 0%;
background-color: blue;
-webkit-transition: width .3s;
transition: width .3s;
}
textarea:focus + .anim-bar,
input:focus + .anim-bar {
width: 100%;
}
<h1>Works fine on input :)</h1>
<div class="container">
<input type="text">
<span class="anim-bar"></span>
</div>
<h1>Cross the container box- textarea :( </h1>
<div class="container">
<textarea></textarea>
<span class="anim-bar"></span>
</div>

this issue not show on all browsers. in my browsers chrome(window) is obvious.
the line is under textarea.
======================================================
I think is baseline is different.
Baseline inconsistency
The HTML specification doesn't define where the baseline of a is, so different browsers set it to different positions. For Gecko, the baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the box. Don't use vertical-align: baseline on it; the behavior is unpredictable.
reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
* {
box-sizing: border-box;
}
.container {
position: relative;
}
textarea,
input {
border: none;
border-bottom: 3px solid #e6e6e6;
width: 100%;
height: 50px;
resize: vertical;
/* see this */
vertical-align: middle;
}
.anim-bar {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 0%;
background-color: blue;
-webkit-transition: width .3s;
transition: width .3s;
}
textarea:focus+.anim-bar,
input:focus+.anim-bar {
width: 100%;
}
<h1>Works fine on input :)</h1>
<div class="container">
<input type="text">
<span class="anim-bar"></span>
</div>
<h1>Error on textarea :( </h1>
<div class="container">
<textarea></textarea>
<span class="anim-bar"></span>
</div>
==================================================

Adding CSS styling to the textarea resize: none; will stop the textarea from being adjustable.
I added the styling to the CSS area and inline the HTML to show both ways it can be done.
* {
box-sizing: border-box;
}
.container {
position: relative;
}
textarea {
resize:none; //adding styling in css file
}
textarea,
input {
border: none;
border-bottom: 3px solid #e6e6e6;
width: 100%;
height: 50px;
resize: vertical;
}
.anim-bar {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 0%;
background-color: blue;
-webkit-transition: width .3s;
transition: width .3s;
}
textarea:focus+.anim-bar,
input:focus+.anim-bar {
width: 100%;
}
<h1>Works fine on input :)</h1>
<div class="container">
<input type="text">
<span class="anim-bar"></span>
</div>
<h1>Error on textarea :( </h1>
<div class="container">
<textarea style="resize:none;"></textarea> <!--Adding CSS styling inline-->
<span class="anim-bar"></span>
</div>

Related

Using button HTML element for implementing custom checkbox

Is it viable to use <button> element instead of <input type="checkbox" />? Can it break accessibility or in any way affect the user experience? From what I noticed, we lose the element's value and onChange callback, but that's something easily fixed in React.
If anyone wonders, the reason for using would be much easier customization (styling).
To respect accessibility (a11y), if you wish to customize a checkbox, you can use anything, but you will have to map to your change event using an hidden but real <input type="checkbox" /> behind it.
Here is an example taken from the source below.
html {
box-sizing: border-box;
background: #f2f2f2;
padding: 20px 50px
}
/* Inherit box-sizing to make it easier to change the property
* for components that leverage other behavior.*/
*,
*::before,
*::after {
box-sizing: inherit;
}
/*style form to limit width and highlight the long label*/
form {
margin: 1rem auto;
max-width: 750px;
}
/*style wrapper to give some space*/
.wrapper {
position: relative;
margin-bottom: 1rem;
margin-top: 1rem;
}
/*style label to give some more space*/
.wrapper label {
display: block;
padding: 12px 0 12px 48px;
}
/*style and hide original checkbox*/
.wrapper input {
height: 40px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 40px;
}
/*position new box*/
.wrapper input + label::before {
border: 2px solid;
content: "";
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px;
border-radius: 50%;
}
/*radio pseudo element styles*/
.wrapper input + label::after {
content: "";
opacity: 0;
border: 10px solid;
border-radius: 50%;
position: absolute;
left: 10px;
top: 10px;
transition: opacity 0.2s ease-in-out;
}
/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
opacity: 1;
}
/*focus styles*/
.wrapper input:focus + label::before {
box-shadow: 0 0 0 3px #ffbf47;
outline: 3px solid transparent; /* For Windows high contrast mode. */
}
<form>
<fieldset>
<legend>
<h3>What type of accessibilty issues do you see most often?</h3>
</legend>
<div class="wrapper">
<input id="a11y-issue-1" name="a11y-issues" type="radio" value="no-issues">
<label for="a11y-issue-1">There are no issues</label>
</div>
<div class="wrapper">
<input id="a11y-issue-2" name="a11y-issues" type="radio" value="no-focus-styles">
<label for="a11y-issue-2">Focus styles are not present</label>
</div>
<div class="wrapper">
<input id="a11y-issue-3" name="a11y-issues" type="radio" value="html-markup">
<label for="a11y-issue-3">HTML markup is used in bizarre way. Also, what happens if the label text is very looooooooong, like this one?</label>
</div>
</fieldset>
</form>
Source: https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074

How can I make an HTML box slide on hover and reveal the text underneath it using JS or CSS

I have been for long trying to make an HTML box slide on hover and reveal the text beneath it using CSS or JS. I am new to JavaScript so it would be great if you provide a bit of explanation with the answer if its to be achieved by JS.
I have searched many sites and asked a lot of people but I haven't been able to achieve it.
I have made two DIVs, one being underneath the other
I tried writing some example text, but it appears before the box
.trigger{
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box{
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
}
.trigger:hover .box{
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="box"></div>
</div>
All you need to do is add a z-index:
.trigger {
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd;
position: relative;
}
.box {
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
z-index: 2;
}
.content {
position: absolute;
z-index: 1;
}
.trigger:hover .box {
transform: translate(100px, 75px) rotate(40deg) ;
}
<div class="trigger">
<div class="content">Content</div>
<div class="box"></div>
</div>

Change (and fade in/out) images when hovering over links using a data attribute

I'm trying to recreate a slideshow/carousel effect I've seen on this website (scroll down past the hero banner): https://www.ktm.com
I think the background of the carousel changing once an item is hovered over looks great. This is how far I've gotten:
https://codepen.io/moy/pen/QVvMxo
Looking at the KTM example it seems overly complicated to me, maybe part of some framework? So I've tried to simplify it where I can.
I don't think my example is a million miles away but it needs some refinement. The main issue I'm having is when the 3 items are hovered over, making sure the images fade in/out rather than instantly change. Is that going to be possible with the method I'm using, updating the img src="" using a data-* attribute?
I tried adding in .fadeIn and .delay but it didn't seem to do anything.
Another issue I'm having is when you remove the mouse from the carousel after hovering over the items the text seems to flicker. It looks like it's to do with the img opacity changing as when I remove that it doesn't happen - but I haven't gotten to the bottom of that yet, so any pointers will be greatly appreciated.
Thanks!
$(".carousel__item").hover(function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
var value = $(this).attr('data-src');
$(".carousel__bg img").attr("src", value);
});
.carousel {
background: #222;
border: 1px solid white;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel__bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg img {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: 100%;
}
.carousel__item {
border: 1px solid white;
box-sizing: border-box;
float: left;
position: relative;
width: 33.33333%;
}
.carousel__content {
box-sizing: border-box;
color: #fff;
height: 100%;
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel__title {
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__subtitle {
display: none;
-webkit-backface-visibility: hidden;
}
.carousel__btn {
background: #fff;
color: #222;
display: block;
opacity: 0;
position: absolute;
padding: 15px 30px;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
text-decoration: none;
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__image {
display: block;
opacity: 1;
transition: all .25s;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel:hover .carousel__title {
opacity: .25;
}
.carousel:hover .carousel__image {
opacity: 0;
}
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
.carousel:hover .carousel__item:hover .carousel__flag {
display: none;
}
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="https://fillmurray.com/800/300">
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/500">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #1</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/400">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #2</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/300">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #3</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
</div>
Create those images with style="display: none" instead of replacing the image source. Then you can use jquery $(".carousel__item").hover( showImage, hideImage ) to achieve your goal.
$(image).show() and $(image).hide() should be enough for what you want

How to hide nested element when parents width is 0?

Im trying to hide a nested p tag when its parents width is 0. essentially I want the nested p tag to follow the parent as its width approaches 0, as well as when it expands. I'm sure its something simple, thanks for any help in advance.
Fiddle
HTML:
<div class="container">
<div class="floater1">
<p id="icon">X</p>
</div>
<div class="floater2">
<p>This is a test</p>
</div>
</div>
<button>click</button>
CSS:
.container {
width: 100%;
height: 35px;
border: 1px solid #000;
}
.floater1 {
float: left;
width: 0px;
height: inherit;
background: red;
text-align: center;
transition: width 200ms ease-in-out;
}
.show {
width: 30px;
}
.floater2 {
height: inherit;
background: yellow;
overflow: hidden;
padding-left: 15px;
}
p {
margin: 0;
line-height: 35px;
}
JS:
var trigger = $('button');
var deleteBtn = $('.floater1');
trigger.click(function(){
console.log("hello")
deleteBtn.toggleClass('show');
})
You have to set the overflow:hidden; property to ".floater1" class. So that the p tag will be hidden when the parent width is 0.
var trigger = $('button');
var deleteBtn = $('.floater1');
trigger.click(function(){
console.log("hello")
deleteBtn.toggleClass('show');
})
.container {
width: 100%;
height: 35px;
border: 1px solid #000;
}
.floater1 {
float: left;
width: 0px;
height: inherit;
background: red;
text-align: center;
transition: width 200ms ease-in-out;
overflow:hidden;
}
.show {
width: 30px;
}
.floater2 {
height: inherit;
background: yellow;
overflow: hidden;
padding-left: 15px;
}
p {
margin: 0;
line-height: 35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="floater1">
<p>X</p>
</div>
<div class="floater2">
<p>This is a test</p>
</div>
</div>
<button>click</button>
See the working fiddle here
https://jsfiddle.net/davidsekar/7uk9n0ev/
Add the overflow hidden to .floater1
.floater1 {
overflow: hidden;
}
https://jsfiddle.net/murtoza/7jusow54/1/
just add these to your css:
.floater1 p {
opacity: 0;
transition: opacity 250ms ease;
}
.floater1.show {
width: 30px;
}
.show p {
opacity: 1;
}
hope this can help!

How to keep the position of second div fixed even when the height of first div is increased

Kindly check this fiddle and tell me how I can keep the second <div> at the same position even when the height of first <div> is increased. If the first <div> overlaps the second it's fine. I just don't want the second div to move at all.
https://jsfiddle.net/7v9dud8u/
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- page content -->
<div id="main-div" style="background-color: #ae2477; width:300px; height: 100px;" onclick="expandHeight();">
Main
</div>
<br/>
<div id="sub-div" style="background-color: #FF0000; width:300px; height: 100px;" onclick="reduceHeight();">
Sub
</div>
<script>
function expandHeight(){
$("#main-div").animate({height:"200px"},400);
}
function reduceHeight(){
$("#main-div").animate({height:"100px"},400);
}
</script>
Thanks.
Using CSS, you can use position: absolute;
<style>
#main-div {
position: absolute;
}
</style>
Doing this will allow the two divs to move freely around the browser window without affecting one another.
If all you want is to keep the second div from moving, then some simple css will do. Just add this to the second div's style attribute:
position:absolute; top:130px;
Try similar answer:
http://fiddle.jshell.net/MvzFC/24/
CSS:
.userWrap {
position: relative;
display: inline-block;
width: 300px;
height: 50px;
overflow: visible;
z-index: 1;
}
.userWrap:hover {
z-index: 2;
}
.user {
position: absolute;
display: inline-block;
width: 300px;
height: 50px;
margin-bottom: 5px;
background: #fff;
transition: width 0.3s, height 0.3s;
}
.user:hover {
width: 350px;
height: 200px;
background: #eee;
transition: width 0.3s ease 0.5s, height 0.3s ease 0.5s;
}
.user img {
float: left;
}
.user .name, .skills {
margin-left: 5px;
}
.user .name {
font-size: 21px;
font-weight: bold;
}

Categories