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.
Related
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.
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
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.
I have a 2 column table in a database 1,000 rows long(All integer data).
The display will allow for the user to delete a certain range of data from the table.
What I am looking for is a creative way to display all the data so the user can get to different parts of it really fast. Maybe displaying different chunks at once, represent with bar graphs or zooming the scope in/out would be really cool.
Any ideas,suggestions, examples at all are appreciated. Please just throw them out here for brainstorming.
Note: I am limited to JS, xml, html and C
Thanks!
By mouse scroll resize the text.
Add drag'n'drop for moving text block.
Example: user resizes it to a smaller chunk by mouse weal then moves it by using drag'n'drop.
It is possible to implement such thing with jQuery/JavaScript
Use a double slider with a min and max display range. Here is an example of one based on MooTools. Moving the slider controls will adjust which range of values are displayed in the table.
Could implement something that functions like google maps where you can easily zoom in and out and set points wherever you need that stay when you change elevation.
you can format the html with <h1>, <h2>, <h3> and <p> tags, and use jquery to collapse the paragraphs, leaving headings of major sections.
I did this with documentation i was working on and it worked out great.
I'm a fan of the JavaScript bookmarklet demoed in this video: http://www.youtube.com/watch?v=GPZ8YNgyl_I
The bookmarklet itself is available here: http://t_trace.wed.macserver.jp/overview.html
If you have used WinMerge, you could develop something like the location pane in the left that shows a full preview of the changes in files. It can be used to navigate very fast
Here's a screenshot. (Image too large to inline it here)
Assuming the integer data come in ranges, a common approach is to show how much data there is in each range as a horizontal bar. You click the range to zoom in, until you see the actual data, or click the X to delete.
ID Range
[X] 1-1000 xxxxxxxxxxxxxxxxxxxxx
[X] 1001-2000 xxxxxxxxx
[X] 2001-3000 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
A further refinement is to use colour on the horizontal bars to show data density. For instance red = lots of data, yellow = less
I'm working on a project that returns paged results with volumes potentially in the hundreds of pages. I've been playing around with more usable ways to perform paging than the standard fisrt/last/next/previous links and jump-to text box. One alternative I had was to have a scrolling list of pages. I'd display 5 to 7 links at a time, centered around the current page, but add onhover actions to buttons on either side to scroll through the numbered list. This allows users to jump way ahead in the page count if they like without the combersome "Jump to" textbox. Does anyone have any better ideas?
If not, I'm trying to decide on a way to implement the above functionality, but I'm not sure how to display only a section of a div (with the div being the full list of links.) Any ideas?
You might find Endless Pageless an interesting read.
Depending on the data you can categorize it different ways and display an index. Pages is one way. Calendar is another, etc..
basically Master/Detail view.
Another option is to use a slider control that displays the current page (and/or record range) numbers in a caption bubble.
You could use a dropdown list containing page numbers.