While attempting to insert an image inside a textarea, I discovered that it seems impossible without using the contenteditable ="true" attribute of a textarea. However, upon visiting the diaspora site, I found out that this can indeed be achieved. I am unsure of how they did it. Is it really done through a textarea or is it some CSS trick involving a div? How can I replicate this functionality?
The image below demonstrates this feature:
To enhance user experience, consider replacing a textarea with an element for a more intricate display by utilizing .click() and .blur() events. Check out this example to experiment with.
Here is the HTML:
<div class="container">
<textarea class="text-area hidden"></textarea>
<div class="text-area icon-example"></div>
</div>
The CSS styling:
.container {
position: relative;
display:inline-block;
}
.text-area {
width: 200px;
height: 50px;
border:1px solid #ccc;
display:inline-block;
}
.icon-example:after {
content: url(http://www.stat.ncsu.edu/dept-icons/camera-icon.gif);
position:absolute;
z-index:9999;
right: 3px;
bottom: 6px;
}
.hidden {
display:none;
}
JQuery implementation:
$('.text-area').click(function() {
$(this).hide();
$(this).parent().find('textarea').show();
});
$('textarea').blur(function() {
$(this).parent().find('div').text($(this).val()).show();
$(this).hide();
});
Exploring further customization options like adjusting the appearance of div and textarea to match each other can greatly enhance the overall design. With proper tweaking, this approach can achieve cross-browser compatibility.
To enable the selection of images and submission of forms as multipart, you must utilize a div element that overlays the text area. CSS is the key player in this task. By utilizing an absolute div, you can position buttons or images precisely by calculating their positions relative to the text area. For further information on this topic, refer to a similar post on this link
I'm facing a challenge with a flex container that contains flex children. Within each flex child, there are two stacked divs, the first of which has an unknown height. My goal is to make the second div fill the remaining height available. I've be ...
I'm facing difficulties while working with Material UI components. Currently, I have a Material UI table and I want to center-align the text within it. The standard CSS of Material UI contains an element named MuiTableCell-root-60 which has a text-a ...
Hello, I'm new to web design and would greatly appreciate any assistance. I've been learning HTML and CSS through a live project but have run into trouble with positioning nested list items. This is how my web browser renders the page: Here&a ...
I'm currently working on implementing a dynamic style-sheet change for a single-page application using Angular. The concept is to offer users the ability to select from various themes through a dedicated menu. Although only two theme variants are show ...
My goal is to have the height of the children div .cell fill up 100% of the parent's height, but it doesn't seem to be working. This is the HTML code: <div class="header"> header </div> <div class="wrapper"> <di ...
Having some issues with IE8, specifically on the website . The website header is not displaying correctly in IE8, but it works fine in Chrome and Firefox. Another issue is that the white area of the site is not 960px width as intended... ...
After creating an email using markdown in Laravel, I noticed that the email content received was not displaying correctly. The HTML tags were not being rendered properly. You can view my email here. Any help on this issue would be greatly appreciated. I h ...
Hey there! I've been working on creating a Vue page, breaking it down into components, and populating it with content from json. It all seems pretty straightforward, but I've hit a snag. Why is the href parameter not showing up in the right place ...
I am working on a button/speech bubble design with a unique hover effect. Here is the current setup: https://i.stack.imgur.com/4OrpL.png Here is the code snippet for the button: <div value="GO" id="go-div" class="bubble"> <input type="submit ...
Is there a way to implement a notification number badge using Ajax, similar to what Facebook does? I can't provide an image here, but most people are probably familiar with the concept. It's like when you sign into Facebook and see a small number ...
I am using a fancybox-media box to display Vimeo and YouTube videos. I want to add a caption below the video with some content related to it. Is there a way to do this? Below is the JavaScript code I am using: Fancybox function: $("#clpbox").click(functi ...
After being a dedicated user of ASP, I have made the decision to switch to a Linux-based server for my website. However, as I begin to build my site, I am facing challenges that were once simple in ASP - such as loading a constant navigation bar. My objec ...
I am encountering an issue with my current ASP.Net Mobile Website design. It is rendering correctly on android phones pre 4, iPhones, and Blackberries. This problem requires a bit of setup to explain... CSS tr { color: #00ff00; } #MasterBackButton { ...
I recently found a helpful solution on Stack Overflow, but it's not exactly what I'm looking for due to two main reasons: I am unsure how to adjust the width of the lines to make them shorter. The solution uses H2, however, I have already d ...
My email design appears aligned to the left on iPhone 6 even though I have used align="center" on the tables and TD's. In my media queries, I have specified a width of 320px with the main table set to width="100%". @media only screen and (max-device- ...
I'm currently tackling a challenge with my NextJS Website project. It's the first time this issue has arisen for me. Typically, I set the body width to 100% or 100vw and everything works smoothly. However, upon switching to a mobile device, I not ...
I need to display a member with a higher rank, showing the user image along with their username. However, I am struggling to align the image and text properly due to varying username lengths causing them to appear in a zig-zag position. Here is what I hav ...
After studying various DOM events, I attempted to implement the 'blur' event on the HTML body. My first attempt was with onblur document.body.onblur = () => { dosomething(); } and I also tried using AddEventListener document.body.addEven ...
Here is the code snippet for creating a payment form: Everything seems to be working fine, but there is an issue with the supplier-ID dropdown. The dropdown is being created but it is not fetching data from the mysql table and no errors are being display ...
Below is a jQuery template I have: <div class="parent-class"> <div class="sub-class"> <div clas="sub-input-class"> <input type="text" /> </div> </div> </div> Recently, I ...