We Keep Coding

Adjusting Field Height Dynamically With CSS

I have a textarea field, which I would like to automatically adjust according to number of lines used (i.e., if the user enters one line, the field height will show that line only, but if the user enters a long text, the field will show all the lines of text).
I would like it to happen dynamically, without using scroll (overflow).
I would appreciate help with this.
thanks

There are lots of ideas given in the answers pointed to in the comments so if you absolutely have to stick with textarea perhaps some of them will solve your problem but they require Javascript and I notice you have tagged CSS not JS.
So, have you considered using a contenteditable div instead? This will automatically resize depending on content without needing Javascript:
.input {
overflow: auto;
border: 1px solid black;
}
<div class="input" contenteditable></div>

Finding the text that has been hidden due to overflow:hidden?

I have a <div> block that contains an unknown amount of text.
The css for the block is:
.synopsis { width:600px; height:32px; line-height:16px; overflow:hidden; }
In essence the block allows for two lines of text, once the text reaches the block's limits, the rest is hidden from view.
What is the cleanest method to find out what text has been hidden from view? Any jQuery/Javascript functionality that does this?

You can remove the height from the css, or if you want to do this with jQuery you can use in something like this:
$('.synopsis').css('height','auto');

If i've understood you correctly, then a simple way to find the text that's overflowed would be to add a visible background colour and comment out the overflow:hidden on your synopsis class, something along the lines of:
.synopsis {
background: #FF0000;
height: 32px;
line-height: 16px;
/*overflow: hidden;*/
width: 600px;
}
Here a JSFiddle with what I mean: http://jsfiddle.net/UeaBA/4/

I dont think there is any easy way to obtain that in any script. The only way I can think as of now is to get the height and width of each character present in that div. You have to do certain calculations on these metrics to derive which characters fall in the visible area. This would be the most complex to do.

how scrollable text line inside a div without showing scroll bars

plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance

You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.

If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.

Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.

JavaScript/HTML to alternate row colors for input type textarea?

Is there an easy way to have an HTML <textarea> alternate its row colors
to improve editing?
I don't mind if the solution is pure CSS or if it requires JavaScript.

textarea {
background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
background-size: 100% 4rem;
border: 1px solid #CCC;
width: 100%;
height: 400px;
line-height: 2rem;
margin: 0 auto;
padding: 4px 8px;
}
Found this on codepen. Working for me.

If I understand correctly that you want the colors alternating WITHIN the textarea (as in each line)?
I would suggest the easiest method is to use a background image in your textarea's and have the rows of the alternate colors the same height as the font-size/line-height to create the illusion of alternate rows, then just repeat the background image.
Additional Solution
However, it seems that using that method, the background doesn't scroll along with each line.
The best technique I can come up with is to use a jQuery plugin called 'autoResize' by James Padolsey. What this does is removes the scrollbars and as your text nears the bottom of the textarea, the textarea height is increased accordingly.
Now, that can cause problems since you could potentially have VERY long textareas depending on how much text the user writes but I've created a fix for this.
What we can do is wrap the textarea in a div and set the overflow-y (vertical) to scroll and the overflow-x (horizontal) to hidden. What this does is now give us a "fake" scrollbar on our textarea, creating the illusion that it's scrollable so our background now appears as if it scrolls up and down with the text too.
You will have to adjust the width/height/margins/borders/paddings etc accordingly and maybe check for cross browser compatibility, but this should help set you on the right track and get you going.
Here is a link to an example I have created using the above method:
http://jsfiddle.net/HelloJoe/DmPLH/

CSS supports an nth child syntax now. Check out the MDN docs for an example of changing the background-color of only every other list item inside an unordered list:
HTML:
<p>NBA players with most championships:</p>
<ul>
<li>Bill Russell</li>
<li>Sam Jones</li>
<li>Tom Heinsohn</li>
<li>K. C. Jones</li>
<li>Satch Sanders</li>
<li>John Havlicek</li>
<li>Jim Loscutoff</li>
<li>Frank Ramsey</li>
<li>Robert Horry</li>
</ul>
CSS:
li:nth-child(even) {
background-color: lightyellow;
}
RESULT:
An example of making every other line in a textarea a different color by using CSS' nth-child syntax
SOURCE:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image

For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.

you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/