I want to make a kind of form that has one big textarea but divided on smallers ones, to put it simple I would like to create something like this:
Section 1
Text text text
--------------
Section 2
text text text
--------------
Section 3
text text text
--------------
etc.
And make it all in one textarea BUT when I click in section 1 area file_1 would load (and I ofc could edit the text in that particular section) and when I click section 2 the file_2 would load (names are just examples).
If it's impossible or really complicated to make what would be best approach to this problem? Keep in mind that there would be at least 20--30 sections and they should be created dynamically.
I was thinking if it is possible to make it in HTML/CSS/Javascript.
You can do that, but I do not really see the point. The way to do it is to always use white space separators and not allow the user to add such separators or remove them. Then, you can get the different sections by split-ing the value of your textarea by the separator and initialize them by loading the file into an array and join-ing it.
But why would you want to overcomplicate your own life this way and to force yourself to implement slow and hacky algorithms? You could use several textarea tags and design them in such a way that they will look like they are a single textarea. The only thing to handle besides that would be to switch the textarea when the user presses down/up arrow for instance in the last/first row of a textarea.
Related
Note: this question is related to this one where I try to do this in pure HTML/JavaScript.
What I need is a very simple text area that allows me to place draggable items to it. Draggable in the sense that they can be moved inside the textual content - character wise. Here is an example
<div contenteditable="true"/>
This is text whereas <div draggable="true">this is draggable</div> because of reasons.
</div>
Now clicking on <div draggable="true">this is draggable</div> and moving/dragging it a few characters to the right would result in:
<div contenteditable="true"/>
This is text whereas beca<div draggable="true">this is draggable</div>use of reasons.
</div>
I found that the RichTextArea would basically serve my needs but it does not seem to be possible to add such draggables to the text area simply as that. I could hack something together I guess that would do what I want but since this is part of a key feature in my application I want something sane and reliable. I need references to those draggable objects but RichTextArea allows me only to set it's content via HTML Strings. Actually I need callback methods in order to determine when such a draggable element is for example detached from the DOM tree.
The biggest problem is actually me since I am not very experienced with GWT and/or web-development itself actually.
So the question is basically which Widget would be a good place to start with?
An example can be seen here. Just write some text and drag the logo into the text area. You'll be able to move it's position inside the text. But like I mentioned, it is using the RichTextArea widget which does not seem to want me to add such elements programmatically to the text area.
I want to create an online markdown editor that has limited wysiwyg formatting. If you're familiar with iA Writer, I'm trying to create an editor similar to their desktop version. For the most part it's just a simple text editor, but it does a few snazzy things that I'm trying to duplicate.
Automatically underline/bolds thing in *italics*, **bold**, ***bold italics***
Indents ">" blockquotes
Outdents "#" headers and "-" lists so that the text is left aligned, much like on the old three hole punched line paper you could align the text to the red line and put list numbers to the left of it.
I have a few thoughts about how to go about implementing this but I've run into some concerns with each of them.
Editable iFrame
How do I outdent text or apply a css class to it
The formatting happens automatically, so how would I change the selection of the text, reformat it and then go back to the original selection location
I hear that you can load another page into your editable iFrame to do more advanced features, but I'm not too familiar with that - any good resources?
Pure javavascript
How do I create a blinking cursor in an area because I don't think I'll be able to do this in a input or textarea...
Possibly make every line a div that converts into an input box when I click on it (similar to how the tags box works on the tags box when you ask a question (though doesn't work for inline formatting)
Any suggestions to how I might go about doing something like this?
A good start would be to look at Code Mirror (http://codemirror.net/) whom already provides Markdown Editor and a Strong API.
You should be able to add features and live rendering on top of it.
I was wondering if there are any JavaScript functions that I could use to change the font color of certain strings in a text box.
Suppose I created a text box and every time the string hello appeared the font color would change to blue.
Are there any easy ways to make a database of strings so that this event would occur?
thanks!
This is a non-trivial task, as text within a textarea can not be directly formatted. I would look into using a div or some other applicable tag, and use the Content Editable attribute. This way the user can edit the text and you can control the formatting. At the simplest level you can listen for a key press and use regular expressions or the replace method to highlight all the words in your dictionary.
Here's a start, you'll need to flesh it out to perhaps be case-insensitive if that's what you want, and to keep track of the caret position which is a more complicated task:
http://jsfiddle.net/VJQHD/
You can look at a similar issue here: Get caret (cursor) position in contentEditable area containing HTML content
How i can i have two text areas next to each other with the same number of lines; where when i scroll the first the second will move along as well and vice versa.
This will be used for the idea of having line numbers or any other string before the text area. Of course the only way around this is via javascripts.
Please try to use the approach described in the Synchronize Scrolling of Two TextArea or Multiline ASP.NET TextBoxes using jQuery article to accomplish this task.
Is there a JS/jQuery widget that would allow me to display a simple legend that contains for example a small colored rectanlge and a text label next to it?
In this specific case the legend would show meanings behind different color codes in an inline jQuery UI datepicker widget, which would be customized to enable multiple selections by a user and showing different colors for specific days.
In fact, the thing that I need would look exactly like the list of SO sites at the footer of this page (but ideally listed vertically next to the picker). So if there is no ready-made solution I guess I'll try and look at this page source.
You have to hand it to the StackOverflow crew. Their method for creating the legends is pretty clever. Basically, they use the character ■ (ASCII 254) in place of any image or div. They insert it in a span, which is styled with a font size and color property. Next to it is a styled anchor tag. Rinse and repeat.
What is particularly clever about it is that it all fits inline in a div and lines up on the baseline! Let me say that again: it lines up on the baseline! So there is no disparity in image offsets, etc. A tip of the hat to the UI engineer who made it that simple. Thanks for calling my attention to that, or I probably never would have looked and learned.
EDIT: ASCII 254 is incorrect. The actual value yielded by "■".charCodeAt(0) is 9632 and is probably some flavor of Unicode. Same look and shape, but different value.