After a while thinking about this, I think I could use more brain power.
Imagine the following UI (courtesy of StackOverflow):
Note that the red lines are 'guides'. Imagine that they are <div/> boundaries.
What I want is that when a lot of text is added to the input box, enough to overflow, the input box should 'pop out' and overlay/autosize to the left, like the image below:
This is somewhat similar to how Stackoverflow's works, except that it resizes according to content. Also, similarly to stackoverflow, it need to retract when the input box looses focus.
Usually, I'd come to SO prepared with some code, but this time, it's a bit difficult.
What exactly should I use to 'fix' the input box to the right?
How do I find the internal/content width of the input box?
Note that I'm using a monospaced font, so this might be easier...
Well, I've found the answer....or uhm...created the solution.
It can be found here.
In short, it is mainly a lot of events and a 'fake' input box with absolute positioning.
Related
I came across a website that used styling on the caret for an input text field. I've never seen this before but it looks really nice. I've done a ton of research but there doesn't seem to be a lot of information on how to do it. Please see gif below:
How do you change the colour and height of a caret?
For reference the website is betterment.com.
Isn't it the same style as the input itself (color, font-size, etc..) ?
Here it is green.
I'm currently making a web app editor and I have already implemented the suggestions box. Right now, this suggestions box is fixed to the top of the page, but I would like to have a suggestions box that pops up underneath the text that I'm currently typing. Sublime's suggestions box is exactly what I'm looking for:
I've tried searching for tips on how to implement this kind of feature, but all I'm getting from my searches are for static fields (like search boxes that don't move) or drop down menus. I would like the suggestions box to pop up right under the current word I'm typing, meaning that it can't be fixed to a particular location.
Any tips on where to start with this? Thanks!
jQuery has a caret plugin that you can get the caret's position in. Then you could go $(textarea).caret();, then call the box's position a few pixels lower.
Interesting idea, my thoughts so far (not tried in combination) are listed below. Sorry for not providing many links, but I think every part is small enough to look up on demand.
Box itself
It's possible to build such a suggestion box by an unorder list,ul. Just format it for a maximum size, and it's ready to use.
Positioning
You want to place it under the cursor, I guess you're using a textarea. From a quick search, there's a plugin on GitHub, which gives you the window coordinates of the text cursor. So we have a position now which can be used to position the box, great. Hint: It's a fixed positioning, just update it for each new character.
Interaction
So far we hopefully have a styled and positioned suggestion box. I would grab the textarea value and trim it down to the last word in front of the cursor. This string can bee looked up via AJAX, local or whatever you like to use.
Once you have a set of suggestions and filled the suggestions box, at least I would like to have keyboard support. To do this, just add keyboard listeners for up/down arrow, enter and tab key. For all four you also need to prevent the textarea to react by default on this keys.
A click listener on suggestion elements could be useful as well. After click or tab/enter you just want to modify the textarea value at the cursor position.
I'm trying to create a editable textbox with HTML/CSS/Javascript that looks and functions like a printed textbox with lines appearing every row.
It must look like this because the form may be printed on paper for people to write in.
I see three approaches to this method:
Table row with 'border-bottom' on each row and using javascript to determine when the text-overflows and move the cursor to the input box on the next row when it does.
This method is probably not very accurate.
Drawing absolute-positioned lines beneath the div/textarea that contains the text.
Using CSS3 repeating gradients to draw the lines behind the div/textarea. Like so: http://net.tutsplus.com/tutorials/html-css-techniques/lets-create-paper-with-css/
. This method is only compatible with modern browsers though.
Which method is the best and why?
Here’s one option. You need a div to draw each line, that could be done beforehand or with JavaScript.
In short, set an explicit line height on your textarea, then absolutely position a container element behind it. Inside that container put a set of elements with a height equal to the line height of the textarea, a one-pixel bottom border, and a negative-one-pixel bottom margin.
It’s most similar to your #2 but a little simpler.
The CSS3 method is best I think. As a fallback for browser that don't support it, you could put a background image of a line there, repeat it both horizontally and vertically, and use CSS to set the font size and line height so the typing aligns with the background image lines.
Well, the CSS3 method would at least let you use relative sizing like ems so people who've resized their fonts will still be ok. If it's not available in older browsers, I don't think that's hugely important, as it's an enhancement to make things easier if people print, rather than something that is essential to people interacting with the textarea.
Absolutely positioned lines might get un-aligned if the user resizes their browser/fonts/etc, although I haven't tested this to confirm. The Javascript seems like overkill for what is just a decorative effect unless the page is printed. And I'm not sure if you can even put tables inside a text-area, although again I haven't tested that.
For example, i'd like to have a grid of boxes all floating left. I have the design here: atbskate.com/trusktr.
The boxes on my site are all float:left. However, when i expand a box by adding content into it (ajax) it shifts the other boxes and leaves an ugly empty space. I'd like for the boxes to fill up this empty space.
The idea would be similar to http://www.robclarke.com/. when you click on a box, it expans, and all the other boxes are shifted and there is no empty space. How can I avoid this empty space?
The code on robclarke.com is very complex so i ahven't had time to disect it...
Any ideas?
Have a look at the jQuery masonry plugin which provides for a lot of flexibility in handling content in boxes.
How to determine on which row of textarea is the cursor with javascript?
I think it will involve fiddly calculations with font sizes, padding, borders, margins, and line breaks. I expect it'll be hard to get it right in the general case. You could take a look at the source code of the following, which displays an autocomplete dialog as you type in a textarea. It was posted on Ajaxian recently and does what you need to do: http://media.chikuyonok.ru/content-assist/