Im working on a small project which has a textarea and i need help in making the text area expand on mouse click like that of twitter and facebook. the textarea should look like a textfield at first then when clicked on should expand.
This can be done without the use of JavaScript/jQuery, using CSS transitions.
textarea {
height: 1em;
width: 50%;
padding: 3px;
transition: all 0.5s ease;
}
textarea:focus {
height: 4em;
}
<textarea rows="1" cols="10"></textarea>
Something like this would work...
Demo: http://jsfiddle.net/Y3rMM/
CSS...
.expand {
height: 1em;
width: 50%;
padding: 3px;
}
HTML...
<textarea class="expand" rows="1" cols="10"></textarea>
jQuery...
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
This will work for you:
<textarea rows="1" cols="40" onfocus="this.rows=10;" style="resize: none;">Tweet Tweet....</textarea>
I used onfocus instead of onclick because onclick isn't fired if the user uses the tab key to move to the textarea. You'll also want to make sure the user can't resize it themselves - hence the style attribute.
You could also add onblur="this.rows=1;" to shrink it back down once the user moves out of your textarea.
$("textarea").focus(function(){
$("textarea").animate({ height: "70px" }, 500);
});
default css
textarea{ height: 50px;}
on focus textarea height will increase :) simple jquery
use this plugin > http://plugins.jquery.com/project/elastic
very simple and effective !
Based in doog abides comment using jQuery, I enhanced the code to autoadjust approximately the number of rows acording to the length of the content, and return to 1 when focus is lost.
HTML:
<textarea class="expand" rows="1" cols="10"></textarea>
jQuery:
$('textarea.expand').focus(function () {
$(this).animate({rows: Math.max(1,Math.ceil($(this).val().length/this.cols))}, 500);
});
$('textarea.expand').blur(function () {
$(this).animate({rows: 1}, 500);
//Resize back to one row if the textarea is manually resized via the handle
$(this).css({height: ''});
$(this).css({width: ''});
});
You can do this with CSS only using position: absolute, which will make it float over other elements, and the :focus selector, which will be applied only when the element have the focus. First you need to reserve the textarea size enclosing it in an element:
<div class="textarea"><textarea></textarea></div>
div.textarea {
height: 50px;
width: 400px;
}
Then style the unfocused textarea
textarea {
position: absolute;
height: 50px;
width: 400px;
transition: all 200ms;
}
And finally the focused one
textarea:focus {
z-index: 1001;
min-height:250px;
}
Fiddle: http://jsfiddle.net/7v60su9e/
<textarea style="width:200px; height:50px;" id="ta"></textarea>
var ta = document.getElementById('ta');
ta.onclick = function(){
this.style.height = "400px";
}
A quick fiddle: http://jsfiddle.net/n6sgT/
You can do something like below:
<textarea name="textBox" rows="1" cols="20" id="textBox" onfocus="document.getElementById('textBox').rows = 5;" >
Related
If I have a textarea with some text on it, and the text has some line breaks on it, if I set my style to:
textarea {
height: auto;
overflow: hidden;
resize: none;
}
When I load the page, then the text area will only automatically set the height of the textarea until it finds the first line break, example:
For a textarea with this text:
This is an
example text
When the page is loaded, the textarea will be shown as:
This is an
Browser thinks line breaks are the end of the whole text. How do I fix it?
The text is still there if you use the arrow keys to move down, it's just that the textarea by default isn't tall enough to show all the text. You can use the rows attribute to define now many rows of text the textarea should have by default.
Alternatively, if you want more control you can use a div with the attribute contenteditable="true".
textarea {
height: auto;
overflow: hidden;
resize: none;
}
/*
* CSS for div with contenteditable="true"
*/
.textarea {
display: inline-block;
white-space: pre-wrap;
overflow-wrap: break-word;
border: 1px solid;
padding: 2px;
}
<textarea rows="3">This is an
example text
</textarea>
<div class="textarea" contenteditable="true">This is an
example text
</div>
To any one reading this, the solution I came up with is simple. With JQuery, on document ready:
$( document ).ready(function() {
var trueHeight = $( '#your_textarea' ).prop( 'scrollHeight' );
$( '#your_textarea' ).height( trueHeight );
});
Works like a charm.
.textarea {
height: auto;
overflow: hidden;
resize: none;
background-color: #000000;
color: #ffffff;
padding-left: 20px;
}
<div class="textarea"><p>This is an</p><p>example text</p></div>
Please check the above code.
You can use the rows attribute to set the height of your textarea.
<textarea rows='100'>this is an
example text</textarea>
Fiddle: https://jsfiddle.net/jvw7s1rz/2/
Ok I have a button and a hidden text area. On click, I want to expand the button to the width of the textarea and grow the text area from the top (as if it were expanding from a height of nothing to its full height).
I need to animate this grow smoothly, so it looks good. So far, Ive achieved all this except for the smooth textarea grow:
$(document).ready(function() {
console.log("Testing blurb..");
$('.blurbEdit').hide();
$('.blurbEdit').height(0);
$('.changeBlurb').on('click', function(e){
console.log("blurb clicked");
var neww = $(".blurbEdit").css("width");
$(this).animate({
width: neww
}, 200, function() {
//$('.blurbEdit').animate ({height: 200;});
$('.blurbEdit').animate({
height: 200
}, "normal");
$(".blurbEdit").fadeIn(300, function() {
$('.changeBlurb').hide();
}).focus();
});
//$(".blurbEdit").show();
});
Right now, the text area just shoots to its full height. There is no smooth animation no matter what I set the time parameter to and I am animating. How can I fix this?
Have a look at the code below, a simple example - run the snippet
$('#button').click(function(){
$('.large-compact').css('width', '500px').css('height', '120px')
})
/* compress textareas until button clicked*/
textarea.large-compact {
height: 30px;
width: 60px;
transition: all 1s ease-out;
}
/* reset */
body,
textarea {
font: 100%/1.3 Verdana, sans-serif;
}
body {
background: #fafafa;
color: #333;
}
label,
textarea {
display: block;
}
label {
margin: 1em 0 .3em;
}
textarea {
width: 30em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="id2">textarea</label>
<textarea class="large-compact" name="text2" id="id2" cols="30" rows="10"></textarea>
<button id="button">
Click me
</button>
I've created an expanding search bar: You click on the magnifying glass the input extends out and to the right, click it again and it closes. (See Fiddle Below).
I'm new to the world of JS and I thought this would be a great opportunity to implement some logic. Here's what I;m trying to do:
If the search bar is open and the inner.html is empty, if you click the "search" magnifying glass, I want to prevent the default submission of the form and simply close the search bar
If there is text, I want the form to be submitted.
Right now I've got the elements layered in such a way as to when you click the "search" button for the first time, the bar extends and the z-index of the button drops to one where the actual submit button is higher, but I want to control the functionality a little more.
What I've tried:
I tried creating a function that added an event listener that said, basically, if the bar has a width of 700px (the extended length) and the inner html is empty, bring the z-index of the extend button up back higher than the submit simply close the form. But I can't seem to work the logic out properly.
I'm wondering how in JS you can control the z-index.
Here is the code I tried and did not work. I tried something simply like just alerting when the task I wanted to watch for was done first but it doesn't seem to be working.
Any help would be wonderful.
Code:
HTML:
<div id="wrap">
<form id="myForm">
<input id="search" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type="submit">
</form>
</div>
CSS:
#wrap
{
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
}
input[type="text"]
{
height: 40px;
font-size: 35px;
border: none;
outline: none;
color: #555;
padding-right: 60px;
position: absolute;
width: 0px;
top: 0;
right: 0;
background: none;
z-index: 4;
cursor: pointer;
transition: width .4s ease-in-out;
}
input[type="text"]:focus
{
width: 700px;
z-index: 1;
border-bottom: 1px solid #bbb;
cursor: text;
}
input[type="submit"]
{
position: absolute;
height: 60px;
width: 60px;
display: inline-block;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
border: none;
outline:none;
top: -15px;
right: 0;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
}
JS
var search = document.getElementById("myForm").search;
var search_submit = document.getElementById("myForm").search_submit;
function showOpen()
{
if(search.style.width=="700px")
{
alert("OPEN!");
}
};
search.addEventListener("click", showOpen);
showOpen();
HERE IS THE FIDDLE: https://jsfiddle.net/theodore_steiner/7begmkf3/37/
Your issue can be solved using a few basic JavaScript elements (if you're looking to get into basic logic, these are important to know). The JS uses onsubmit, onclick, and some basic form logic. Basically, when you try to submit the form it checks if the form is empty, and if it is, the program refuses to submit the code. I added the new JavaScript to the HTML file:
<script>
function check(){
value = document.forms["myForm"]["search"].value;
if(value == "" || value == null){
alert("please enter a search term");
return false;
}else{
document.getElementById("myForm").submit();
}
}
</script>
<div id="wrap">
<form id="myForm" onsubmit="return check()">
<input id="searchBar" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type = "submit">
</form>
</div>
fiddle: https://jsfiddle.net/q1L3Lstx/1/
It might also help in the future to look at the required element: http://www.w3schools.com/tags/att_input_required.asp
I saw a couple of issues with the code.
search and search_submit are pointing to the wrong items they can be like this:
var search = document.getElementById("search");
var search_submit = document.getElementById("search_submit");
You could call a function on submit. like this:
<form id="myForm" onsubmit="myFunction(event)">
finally you can work your code inside that function:
function myFunction(e){
if(search.value.length <= 0){
e.preventDefault();
alert('empty');
}
}
I want to change blink cursor color, when someone click sing up form's input box such: name, username, password etc.
'Caret' is the word you are looking for. I do believe though, that it is part of the browsers design, and not within the grasp of css.
However, here is an interesting write up on simulating a carat change using Javascript and CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 It seems a bit hacky to me, but probably the only way to accomplish the task. The main point of the article is:
We will have a plain textarea somewhere in the screen out of the view
of the viewer and when the user clicks on our "fake terminal" we will
focus into the textarea and when the user starts typing we will simply
append the data typed into the textarea to our "terminal" and that's
that.
HERE is a demo in action
(source: Michael Jasper's post)
Another solution
I've changed how it works, and it seems to solve a few issues :)
Accepts any text a normal input can
Backspace works
Theoretically can support pasting text
Usual caveats apply still, most notably the inability to visually see where the caret is.
I'd think long and hard whether this solution is worth implementing, based on its drawbacks and usability issues.
HTML
<div id="cmd">
<span></span>
<div id="cursor"></div>
</div>
<input type="text" name="command" value="">
CSS
#cmd {
font-family: courier;
font-size: 14px;
background: black;
color: #21f838;
padding: 5px;
overflow: hidden;
}
#cmd span {
float: left;
padding-left: 3px;
white-space: pre;
}
#cursor {
float: left;
width: 5px;
height: 14px;
background: #21f838;
}
input {
width: 0;
height: 0;
opacity: 0;
}
jQuery
$(function () {
var cursor;
$('#cmd').click(function () {
$('input').focus();
cursor = window.setInterval(function () {
if ($('#cursor').css('visibility') === 'visible') {
$('#cursor').css({
visibility: 'hidden'
});
} else {
$('#cursor').css({
visibility: 'visible'
});
}
}, 500);
});
$('input').keyup(function () {
$('#cmd span').text($(this).val());
});
$('input').blur(function () {
clearInterval(cursor);
$('#cursor').css({
visibility: 'visible'
});
});
});
Use modern CSS!
input {
caret-color : red;
}
Browser Support - 95% as of Oct '21
I know it seems trivial, but I'm having some trouble wrapping my head around this.
<div id="divA" style="width: 400px; height: 400px; background-color: #FF0000;">
<div id="divB" style="float: left; width: 200px; height: 200px; background-color: #FFFF00;">
<div id="divC" style="float: left; width: 100px; height: 100px; background-color: #FF00FF;">
</div>
</div>
</div>
What I need is a rule that applies to all divs, like div:hover { background-color: #000000 !important; }, that only affects the first parent div of the event (when I hover divC, I want the background color of divC to change to black, but not the background colors of divB or divA)... like the inspector does in Google Chrome.
Any ideas?
I don’t believe it is possible to do this with just CSS, but you can with JavaScript.
The key is to use event.stopPropagation() on the mouseover event.
Here is an example using jQuery: http://jsfiddle.net/K96DS/2/
$('div').on('mouseover', function(){
$(this).addClass('hovered')
// this is the key, this stops te mouover event
// from bubbling up to the parent elements
event.stopPropagation();
}).on('mouseout', function(){
$(this).removeClass('hovered')
})
Are you thinking using something like .this because of an odd behavior in :hover?
.mouseover(function(){
$(this).addClass('selected');
});
Are you looking for something like this ?
jQuery Solution:
$('div').each(function(){
$(this).on({
mouseover:function(){
$(this).css('background-color','black');
},
mouseout:function(){
$(this).css('background-color','');
}
});
});
http://jsfiddle.net/j8ebE/2/
#divC:hover #divA { background-color: #FF0000 !important; }
#divC:hover #divB { background-color: #FFFF00 !important; }
Maybe hacks... :)