Gradiend transparency on input font when text extends over the input - javascript

I am facing a problem: I am creating some inputs with different states; one of this states is when the text of the input is longer that the input itself: in this case the text that is hidden at the left of the input should fade out with a gradient transparency:
My code for now is this:
.Input {
position: relative;
width: 100%;
border: none;
width: 200px;
}
.Input:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
transition: border-bottom 0.5s ease;
border-bottom: 1px solid gainsboro;
}
.Input input {
margin-top: 20px;
height: 40px;
width: 100%;
padding-left: 0;
font-size: 16px;
font-weight: 300;
background-color: transparent;
background-image: linear-gradient(to bottom, gainsboro 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 0 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
box-shadow: none;
}
.Input h1 {
font-size: 16px;
color: gainsboro;
font-weight: 400;
position: absolute;
pointer-events: none;
left: 0;
bottom: 0;
transition: 0.5s ease all;
width: 100%;
line-height: unset;
}
.Input:hover:before {
transition: border-bottom 0.5s ease;
border-bottom: 1px solid dimgray;
}
input:focus {
background-color: transparent;
background-image: linear-gradient(to bottom, transparent 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 100% 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
}
input:focus,
input:not(:focus):valid {
border: none;
outline: none;
}
input:focus ~ h1, input:not(:focus):valid ~ h1 {
color: tomato;
transition: all 0.5s ease;
transform: translateY(-25px);
}
<div class="Input">
<input type="text" class="Input" name="testInput" value="" data-id="" required>
<h1>
MyInput
</h1>
</div>
<br>
Any help will be welcome…
Thanks in advance!

The idea to check if the text reach a particular length, if yes you show a hidden element.
In the example below I simplified to the test but what you need to do is to calculate the width that the text should take and then compare with the input width. You can check this link for some idea
Calculating text width
$('.Input input').on('keypress change keyup', function() {
if ($(this).val().length > 10) {
$(this).parent().find('.grad').css('opacity', '1');
} else {
$(this).parent().find('.grad').css('opacity', '0');
}
})
$('.Input .grad').click(function() {
$(this).parent().find('input').focus();
})
.Input {
position: relative;
width: 100%;
border: none;
width: 200px;
}
.grad {
position: absolute;
cursor: text;
top: 25px;
bottom: 2px;
left: 0;
right: 90%;
opacity: 0;
transition: 0.5s;
z-index: 1;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent);
}
.Input:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
transition: border-bottom 0.5s ease;
border-bottom: 1px solid gainsboro;
}
.Input input {
margin-top: 20px;
height: 40px;
width: 100%;
padding-left: 0;
font-size: 16px;
font-weight: 300;
background-color: transparent;
background-image: linear-gradient(to bottom, gainsboro 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 0 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
box-shadow: none;
}
.Input h1 {
font-size: 16px;
color: gainsboro;
font-weight: 400;
position: absolute;
pointer-events: none;
left: 0;
bottom: 0;
transition: 0.5s ease all;
width: 100%;
line-height: unset;
}
.Input:hover:before {
transition: border-bottom 0.5s ease;
border-bottom: 1px solid dimgray;
}
input:focus {
background-color: transparent;
background-image: linear-gradient(to bottom, transparent 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 100% 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
}
input:focus,
input:not(:focus):valid {
border: none;
outline: none;
}
input:focus~h1,
input:not(:focus):valid~h1 {
color: tomato;
transition: all 0.5s ease;
transform: translateY(-25px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Input">
<span class="grad"></span>
<input type="text" class="Input" name="testInput" value="" data-id="" required>
<h1>
MyInput
</h1>
</div>
<br>

Related

How Do I Close The Hamburger Menu When Navigating Back And Forth Between Web Pages?

I've got some Javascript running on my website (the works really well) that enables my menu to close the hamburger menu after a link in it has been clicked.
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
 for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', closeHamp, false);
}
I'd like to set up the hamburger menu so that it will also close automatically when navigating back and forth (using the back and forward buttons). Would this involve using this if(performance.getEntriesByType("navigation")[0].type == "back_forward") script? Any knowledge that you could share with me on how to achieve this would be very much appreciated.
The code for my menu:
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
The CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}

Keyframes animation in styled-components

I am trying to write keyframe, animation in my code but I can't figure it out even after reading the documentation. Please help
```const ButtonStyle = styled.div`
.btn_rainbow {
text-decoration: none;
background-color: #c53ab4;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 16px;
&:hover {
background-image: linear-gradient(90deg,
#00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
}
}
`;
export default function Button() {
return (
<ButtonStyle>
<a class="btn_rainbow" href="#">Click Me!</a>
</ButtonStyle>
);
}```
The CSS Keyframe I wanted to add:
```#keyframes slidebg {
to {
background-position:20vw;
}
}
.btn_rainbow:hover{
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF
100%);
animation:slidebg 5s linear infinite;
}```
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<ButtonStyle>
<button class="glow-on-hover" href="#">Click Me!</button>
</ButtonStyle>

Hide div by clicking another div jQuery

I have a div which when clicked, height changes so that the rest of the content becomes visible.
But I have a button inside this div which I would like to use as a "close-button", to change the height back to it's original value so the content is hidden again, but it's not working.
Here is the code:
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function() {
$('.scrollClick').css("height", "27px");
});
.scrollClick{
font-family:inherit;
background-color: #000E52;
color: #fff;
text-align: center;
display: inline-block;
position: fixed;
z-index: 9999;
cursor: pointer;
right: 20px;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
transition: all 0.5s ease;
font-size: 16px;
max-width: 240px;
box-sizing: border-box;
text-align: center;
height: 27px;
overflow: hidden;
}
.dropContentBox{
display: inline-block;
color: #fff;
transition: all 0.5s ease;
text-align: center;
}
.acceptCta{
display: inline-block;
position: relative;
background-color: #7CBD2B;
color: #333;
font-size: 14px;
font-weight: 600;
padding: 10px 25px;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.15);
transition: all 0.5s ease;
z-index:10;
}
.acceptCta:hover{
background-color: #88D41B;
}
.acceptCta:hover .arrow{
opacity: 1.0;
}
.arrow {
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
opacity: 0;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: all 0.5s ease;
}
.bouncer {
position: relative;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: border-color 0.5s ease;
animation: bouncer 2s infinite;
}
#keyframes bouncer {
0% {
bottom: 0px;
}
20% {
bottom: 7px;
}
40% {
bottom: 0px;
}
60% {
bottom: 7px;
}
80% {
bottom: 0px;
}
100% {
bottom: 0px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollClick">
Viktig informasjon! Les her <i class="bouncer"></i>
<div class="dropContentBox"><img src="/content/cnm/137449/600x600-banner-include-info-dishwasher-2019-no.png?$banner$">
<div class="acceptCta">Jeg har lest og forstått <i class="arrow"></i></div>
</div>
</div>
</div>
So as you see in my jQuery code, I want the .scrollClick class to go back to it' original height, when clicking the .acceptCta div.
What am I doing wrong? Ty
The problem is that the click on your second button also triggers a click on your first button as the second button is within the first button. you can restructure your html or can stop propagation.
$('.scrollClick').click(function() {
$(this).css("height", "350px");
});
$('.acceptCta').click(function(e) {
e.stopPropagation();
$('.scrollClick').css("height", "27px");
});

I've added a Lightbox jquery for my website, but I want to remove a blue border that appears everytime

I've added a LightBox correctly, but there's something wrong when I click a photo, because there's like a blue border in Google chrome and then another type of border in Internet Explorer that I don't want to see:
https://imgur.com/9dQngUM
How can I remove this?
I've used this lightbox https://lokeshdhakar.com/projects/lightbox2/
Thank you! :D
.lb-loader, .lightbox {
text-align: center;
line-height: 0;
position: absolute;
left: 0
}
body.lb-disable-scrolling {
overflow: hidden
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
filter: alpha(Opacity=80);
opacity: .8;
display: none
}
.lightbox {
width: 100%;
z-index: 10000;
font-weight: 400;
outline: 0
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
border: 4px solid #fff
}
.lightbox a img {
border: none
}
.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
background-color: #fff
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both
}
.lb-loader {
top: 43%;
height: 25%;
width: 100%
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10
}
.lb-container > .nav {
left: 0
}
.lb-nav a {
outline: 0;
background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}
.lb-next, .lb-prev {
height: 100%;
cursor: pointer;
display: block
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-prev:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-next:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both
}
.lb-data {
padding: 0 4px;
color: #ccc
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: 700;
line-height: 1em
}
.lb-data .lb-caption a {
color: #4ae
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: 0;
filter: alpha(Opacity=70);
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: alpha(Opacity=100);
opacity: 1
}
Without seeing "the full picture" i.e. your code; you could try this:
.lightbox * { border: none !important; }
This assumes it really is a border problem and not some background image or something of that nature.

Multicolor progress bar using CSS

I want to create a multicolor progress bar please help me to code. when progress less than 50 it will show red when progress is >50 and <90 it will show green and from 90 to 100 it show blue, how to do it??
You need to create one div for the progressbar and then you just add divs inside the progressbar div.
`
<div class="bar">
<div class="fifty">
<p>50%</p>
</div>
<div class="twentyfive">
<p>25%</p>
</div>
<div class="ten">
<p>10%</p>
</div>
</div>
`
The CSS could be something like this:
`
.bar {
width: 100%;
height: 30px;
border-radius: 10px;
background-color: #b3b3b3;
color: white;
text-align: center;
}
.fifty {
width: 50%;
height: 100%;
background-color: green;
float: left;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.twentyfive {
width: 25%;
height: 100%;
background-color: orange;
float: left;
}
.ten {
width: 10%;
height: 100%;
background-color: red;
float: left;
}
`
I created a multicolor progress bar.
Check it on my codepen here: https://codepen.io/onlintool24/pen/dyVJrww
Just need to change the var progressval value and you can see the multicolor progress bar.
var progressval = 50;
var elm = document.getElementsByClassName('progressab')[0];
elm.style.width = progressval+"%";
elm.innerText = "You're "+progressval+"% There!";
if(progressval>90 && progressval<=100 ){ elm.style.backgroundColor = 'blue';
}else if(progressval>50 && progressval<90 ){ elm.style.backgroundColor = 'green';
}else if(progressval<=50){ elm.style.backgroundColor = 'red';
}
.progressa {
border-radius: 50px !important;
height: 35px;
line-height: 36px;
font-size: 14px;
overflow: hidden;
height: 35px;
margin-bottom: 20px;
background-color: rgba(0,0,0,0.5);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
line-height: 36px;
height: 35px;
font-size: 14px;
border: 3px solid transparent;
}
.progressab {
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
-webkit-transition: width .25s ease,height .25s ease,font-size .25s ease;
-moz-transition: width .25s ease,height .25s ease,font-size .25s ease;
-ms-transition: width .25s ease,height .25s ease,font-size .25s ease;
-o-transition: width .25s ease,height .25s ease,font-size .25s ease;
transition: width .25s ease,height .25s ease,font-size .25s ease;
width: 0;
color: #fff;
text-align: center;
font-family: 'Open Sans',sans-serif !important;
animation: progress-bar-stripes 2s linear infinite reverse;
}
#keyframes progress-bar-stripes{
0% {
background-position: 40px 0;
}
100% {
background-position: 0 0;
}
}
<div class="progressa">
<div class="progressab" style=" background-color: rgb(178, 222, 75);"></div>
</div>

Categories