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 have a form created using Bootstrap that contains several fields. By default, the first and second fields are required. Now, if the third field is filled out, the fourth field becomes mandatory. Similarly, if the fourth field is filled out, the third fi ...
Witness the mesmerizing shining effect crafted solely with CSS: html, body{ width: 100%; height: 100%; margin: 0px; display: table; background: #2f2f2f; } .body-inner{ display: table-cell; width: 100%; height: 100%; ...
I've been attempting to implement a loading animation using jQuery, but I'm encountering issues with loading the CSS file. I have tried various paths for the css file such as: <link href="css/animation.css" type="text/css" rel="stylesheet"> ...
Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...
Here is what I have: <div id="div-for-ajax-onclick"> <a href="http://www.google.com">Link to google</a> </div> $("#div-for-ajax-onclick").click(function() { // update database }); I am looking for a solution where if someone c ...
I'm a beginner in learning CSS, and since my technical skills are limited, I'll try to keep things simple. Currently, I have an image taking up half of the screen with the following CSS code that I found after reading some articles: <div class ...
I've been experimenting with aligning h2 and img (icon) elements and although I added display: inline-block, they ended up shifting to the left of the section. Is there a way I can center them instead? HTML: <h2>Coffee</h2> <img src=&q ...
<div class="section"> <label>Title: </label> <input type="text" /> </div> <div class="section"> <label>Text: </label> </div> My goal is to enclose the label + input within an additional div ...
I am currently working on a project where I have a div tag containing an image that is selected randomly from different arrays based on topics. However, I am facing some challenges in making the image change when the "go" button is clicked. I want the if ...
I am struggling to create an HTML popup within a React component due to some errors Here is the code snippet: <div> <button class="toggle">Button</button> <div id="link-box"> <ul> ...
Utilizing the popular JQuery plugin Cycle for a slideshow on this site: bybyweb.com/pbm An issue has arisen - everything functions as expected on windows (across all major browsers), BUT on MAC (running lion 10.7.5, tested on one machine so far; unsure of ...
I am facing a problem where the entire array is being passed as an argument when I call onchange after getting correct values in the dropdown. Instead of only receiving the selected value, e contains the whole array. Here is the code snippet that demonst ...
My jQuery code allows me to fetch attributes from the .item element, but I'm having trouble with my CSS transitions not working as intended. To see the desired transition effect, try replacing .item with .item-tile. How can I make my CSS transitions ...
I've been searching extensively, but I just can't seem to find a solution. I discovered a watermarked script, but what I really need is a script that allows me to select a specific region from an image and blur it. Currently, I am working with a ...
Do you think it is wise to utilize a jQuery function that replaces each character in a text with custom character images? For instance, when using the function, you need to specify which element you would like the characters replaced in, and jQuery will d ...
Having a web page with multiple subpages each having their own specific CSS can be quite challenging. Sometimes, when all the CSS files are applied globally, they tend to mix with each other causing a headache for developers. One common approach is to decl ...
Having trouble with theme options overriding default CSS settings in style.css. Here's what I have in my header.php: <link rel='stylesheet' type='text/css' media='all' href="<?php bloginfo( 'stylesheet_url&apo ...
I am facing an issue where jQuery selectors are not working on elements loaded from the server via Ajax requests, but they work fine in normal mode. $('#myid').change(function(){ alert('OK!'); }); <select id="myid"> <optio ...
I have a good grasp of using JavaScript to insert an anchor element into my webpage. For instance, var userName_a = document.createElement('a'); However, I am interested in adding a style name to that same element as well. I attempted the follo ...
I am attempting to showcase JSON data in an HTML table. Here is the code I have been using: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ ...