I'm having an issue: I need to create inputs with different states, including when the text is longer than the input itself. In this case, the extra text should fade out with a gradient transparency effect:
https://i.sstatic.net/r5qQu.jpg
Here is my current code snippet:
.Input {
position: relative;
width: 100%;
border: none;
width: 200px;
}
// Rest of the CSS code...
Any assistance on this matter would be greatly appreciated.
Thank you in advance!
One approach is to determine the length of a text and reveal a concealed element if it exceeds a certain threshold.
In this simplified example, the focus is on testing, but the key task involves calculating the width required for the text and comparing it with the specified input width. You may find more insights by referring to the following link: 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>I am attempting to send an array of files in my ajax request. Here is the code I have: $(document).on('click', '#submit_edit_discussion', function (event) { event.preventDefault(); var channel_id = $('#channel_id').va ...
I am utilizing this function to be invoked within another Promise.all. However, I consistently encounter a warning message: Caution: a promise was generated in a handler but was not returned from it. Additionally, the function deleteFutureAppointments() ap ...
I am looking to optimize the execution of a specific PHP script on my server by making multiple calls concurrently. Each call takes approximately 0.5 seconds and is independent of one another. Currently, my implementation looks like this: $(document).read ...
I am seeking advice on how to automatically select the checkbox linked to a student identified through my jQuery search function. To provide context, here is an example of my "Ajax" request. Currently, it showcases the search result in an HTML 'span&a ...
Having some difficulty understanding how to detect a scroll event with a Select component using Material-UI. The Select has MenuProps={...}, and I want to listen for the scroll event inside it. I've tried putting onScroll within MenuProps={...}, but ...
Currently, I am utilizing the kahoot-api NPM module (GitHub, NPM) that requires JavaScript import. (edit: this is a Node.js package. At the time of writing this, I was unaware of the distinction between JS and Node.js, hence the creation of this question). ...
Can someone assist me in changing the button color to red after it has been clicked? I am looking for guidance on how to achieve this. The current code snippet is as follows: <td> <button mat-icon-button color="primary"> <m ...
Having some issues with the "on" function in jQuery 2.0.2 when working with dynamically added elements. Below is an example where the second part seems to be failing to work: <button class="btn btn-danger btn-lg" id="hi">Danger</button> ...
I've created a React popup window component that accepts templates via props. Check out this example of how the popup is used: popup = ( <div> <Popup text='This is a popup' popupEl={ popupEl } /> < ...
As I work on developing a flask application, I have successfully created a form using WTForms. This form consists of two SelectFields (dropdowns) and a submit button. My goal is to make the dropdowns dynamic - meaning that when the user selects an option f ...
I have the following JavaScript function that creates a button element with a click event attached to it. function Button(id, url, blockMsg){ var id = id; var url = url; var blockMsg = blockMsg; var message; this.getId = function(){ return id; }; th ...
Encountering an Error message while attempting to run Intern tests from the test files directory. The structure of the directory is as follows: test resources rest pickup.js cashManagement.js gitignore intern.js packages.js ...
Is there a similar function to promise.then(onNextCallback,onErrorCallback) in rxjs that I can use? I've already tried alternatives like pipe(concatMap(),catchError) but they are not what I am looking for. ...
Greetings! I'm in the process of creating a live search feature similar to what's demonstrated at this link. However, I've encountered a minor issue with this snippet of code: jQuery("#result").on("click",function(e){ var $clicked = $(e.ta ...
Below is the code I have composed: jwt.verify(token.split(':')[1], 'testTest') I am attempting to verify this code in order for it to return true and proceed. The jwt being mentioned here serves as an example payload. Any suggestions ...
I am having trouble selecting data from my database using PHP and an ajax call function. In the select function, I am using $_POST to retrieve data from a textbox. Even though I have set up a PHP and ajax call function on my page, something seems to be goi ...
I am currently developing a PHP cart timer script that utilizes PHP along with jQuery and JavaScript. By using the set-interval function, I am able to continuously retrieve the current time-stamp in PHP. Once the first product is added to the cart, the t ...
Here is my current configuration: "@vue/test-utils": "^1.0.0-beta.25" Can anyone recommend a way to exclude a particular version of this package while still using the caret ^ notation? I specifically need to exclude version 1.0.0-beta.31 as it has cause ...
I currently have 2 tables set up on my page. In the first table, there is a textbox (txt1) that includes a date picker. The second table contains 5 similar textboxes (txt2, txt3, txt4, txt5, txt6) also with date pickers. My requirement is as follows: Ini ...
I am having trouble getting my storybook app to start. It is stuck in a loading state with no errors showing in the console. Can anyone help me figure out what I am doing wrong? Check out the screenshot here storybook/main.js const path = require(' ...