Is there any way to make textarea display lines in colors? What I am trying to achieve is every second line colored, i.e. white,grey,white,grey,white,grey... for better readability. Users are supposed to write in lots of stuff, as in "enter names, each one from new line".
I do use jQuery anyway so if they made some simpler solution for this it would be perfect.
What you are looking for is called Zebra striping, maybe that will help with some google searching. However, I don't think there is a way to currently do this to text within a textarea (besides using the background image hack).
CSS3 has a lot of powerful features such as the nth-child psuedo class. There might be a way to do it using that, but again, it probably has no way to do that within a text area.
Perhaps another solution would be to do something like SO does -- where you enter text into a textarea and then next to it or below it it shows a nicely formatted version. You would use jquery to parse the text in real time and display it zebra striped.
Edit: I had another idea that might work, but would take some experimenting. There is probably a way using jquery to get the absolute position of each line of text in the text area. I would think you could at least get the absolute position of the top left of the textarea, get the line height of the text, multiply by the number of rows down (number of linebreaks in the text), test and tweak a little, and you should be able to get the position of each line in the text area. Then, use jquery to draw a colored div behind the text area for each line of text that is as wide as the textarea and as tall as the line of text. The textarea should be transparent as well.
With a little more work, you can probably even have the zebra striping logic be smart enough to detect if the line of text has wrapped, so that zebra stripe can be 2 or more lines tall.
Might work. Good luck!
One way to accomplish this would be to just use a background in the textarea.
<style type="text/css">
textarea { background-image: url(bg.png); }
</style>
That being said, you'd have to have to play around with the tiling and the line-height to get it just right, but it should be able to accomplish what you're looking for without the use of scripting.
If you wanted to make the actual text different colors, there's no way to do this using a pure <textarea>. You could use a rich text editor such as TinyMCE, but that would be way too overkill in my opinion.
Related
I'm trying to have a block of text in a div fill a downward triangle shape. Is there any way to achieve this with either CSS or Javascript?
This is for a site in which users can dynamically insert text. I'm trying to avoid the alternative method, which is to have them insert text line by line with a limit on each line.
I don't know of any simple way to do what you are asking for. The best thing I can think of would be to use something like the CSS text wrapper, which can fit your text to any shape. I haven't used it myself so I don't know what problems you will run into.
Your question is very similar to this one.
I know of no CSS way, but you can do it with JavaScript. The idea is to find where each line of text breaks and wrap the remaining text in a new child div. You have to use text ranges to accomplish it.
See this demo: http://jsfiddle.net/gilly3/CmguZ/7/
You could wrap each line of your text with a <span> and use margins to recieve the wanted affect and if you want the shape to have a color use photoshop to create a triangle with the desired color and put it on the background.
you can try playing with CSS border slopes, but I don't think it fits your needs entirely, because it's a bit complicated and you have to wrap the text manually. there are some good examples of this method here, but it is for simple shapes basically, not for text containers.
I'm creating a page where there's a textbox that displays a text string from the database, and its length varies. Because of this, some strings happen to be long enough to run onto two lines, but that second line is short, and this doesn't look good:
Here the blue box shows the div that contains the content. It's got a fixed width (80% of the container), and text-align:center.
So my question is: how can I get the text to flow into lines where the line widths are closer to each other? I'm willing to do some math and dynamically adjust the width or font size, but I'm not sure how to do this reliably.
You need JavaScript to do this. CSS alone cannot fix this issue if you are using dynamic text.
Once you've detected that the height of the box goes beyond the limit of one line you can either shrink the font, expand the box or calculate the mid-point to add a break and have two balanced lines.
Here are various jQuery plugins that an do this for you. There are many if you look.
http://fittextjs.com/
https://github.com/jquery-textfill/jquery-textfill
personally I don't like use javascript to "simple things"
you use the following properties
overflow
white-space
http://jsfiddle.net/ALWqd/
I have a little website where I would like to obfuscate some text to protected spoiling of users that accidentally read it untimely.
Much like the keywords on imdb were, where you have to rollover to reveal them.
I thought it would be a nice and interactive way to reveal the text if its marked.
Example:
How does a programmer express
h(is)|(er) love? Zl srryvatf sbe lbh
ner uneqpbqrq.
Now you would drag mark the obfuscated text much like you would get ready to copy it to your clipboard, and it should reveal.
Is there a way to do this? My current problem is a way to determine the current selection in javascript.
There is one tricky way I can think of with only CSS:
Use the same color text as the background color! Then when users highlight, the text is revealed. You would need to outline or draw attention to the part that they need to highlight to make it obvious.
Another way:
Stuff the rot13 into a readonly text input, and attach a select event with an AJAX call that decodes it. Will only work for smaller bits of spoiler text that fit in the input. You could try this with a textarea but it doesn't accept the readonly attribute (maybe doesn't matter).
There are many many other ways to do this (hide/show divs for example), but these are the closest/simplest ways I could think that match your requirement of selecting text to trigger the spoiler.
EDIT: With the background color solution, you would not want to encode the text, just make it "invisible" until it's highlighted. It's actually a pretty cheesy solution, and there are many others that are better, but the good part is that it is css only. Honestly I think forcing a complete highlight will be a pain for your users, just store the rot13 value in one place, the real value in another (hidden span maybe), and use js to swap them out on click or something. No need to actually process the decoding separately. You could probably do this with CSS alone and some smart :hover or :focus selectors.
EDIT2: For some reason it didn't occur to me that you can do rot13 decoding with javascript alone, I'm coming from the php world so now I feel pretty foolish. Sorry I didn't answer your question better, but hopefully some of this is useful. GL!
jCarat (jQuery Caret Plugin) should cover your needs.
I have a fixed-size div with generated text inside it.
Is there some simple way to cut the text before div's end and add "..." at the end using DOJO or plain Javascript? Is there a way to do it regardless of what size of font i use?
The only way that comes to my mind is to calculate how many characters with actual font fits into my div and than cut the text to be that long, but this looks pretty lame :-) any suggestions?
May be it helps dojo.html.ellipsis
I am evaluating technology options for an upcoming project, and one of the requirements is to draw a rectangle around certain groups of words in a text field.
Each time the text is evaluated and parsed, certain recognized parts of it must be boxed with a rectangle, which should also respond to mouse clicks. There is even a requirement to place a little triangle to one of the corners of this rectangle.
I have no control over the requirements, and clearly this requirement points out to getting pixel positions of text in a text field (or a div container), and using some sort of overlay mechanism to draw the rectangle.
Unless I am using the wrong keywords, google searches return no helpful results, and I'd really appreciate your input about this topic.
Best Regards
Seref Arikan
Ps: any books/resources about advanced browser dom based graphics with javascript be appreciated also.
I would recommend looking at this plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
It's not exactly what you want, but you might be able to adapt it. The work of finding text in running content and then manipulating it is a little messy.
edit note that that plugin is for text in the HTML document, not text in input text fields or in <textarea> blocks. That would be pretty hard to do, but possibly somebody's done it.
I suggest you use multiple, borderless text fields, each containing a single part of the text(words or letters) and wrap groups as needed in span styled with a border and the triangle as a positioned background image.