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.
Related
Okay so this is a unique scenario.
This is a web app that is not accessed anywhere but on a set top box. The peripheral for this application is a TV remote control.
i.e: NO keyboard, NO mouse.
Of course normally, when an input element is focused, a cursor appears and blinks at the current position. You type characters, they show up, and the cursor automagically advances. whoohoo!
But what we need to do is replicate that behavior when the input element is not focused.
This behavior is seen mostly in video games and other TV/large screen interfaces. You have an onscreen keyboard and you choose characters by navigating to a letter or number and hitting enter/select or whatever button is "select" for that platform (like maybe the 'X' button on a Playstation). The letter shows up in the input field, the cursor advances, but the actual element with focus is the current key on the onscreen keyboard.
We tried making the keyboard using <div> tags, but then we lose the behavior of the very convenient placeholder attr, and it is just a mess of logic recreating what a cursor and placeholder should do. I would love for the cursor to ALWAYS be on an input element, just after the last character, and NOT present when the input has no value, showing only placeholder="Search". Almost sounds like I need to be able to have two elements on a page with focus, which is not possible as far as I know.
But is it possible to have an input element not focused and still see a cursor? Or are we stuck using other tags and recreating that behavior from scratch?
Scouring the internet, I have found no solution. jQuery solutions are acceptable.
I don't know if I understand your question right but you could simulate a cursor with the | character. I put together a quick example that may help you.
example fiddle
html
<input id="cursor" type="text">
js
window.setInterval(function(){
input=$("#cursor")
if(!input.is(":focus") && (input.val()=='' || input.val()=='|')){
if(input.val()==''){input.val("|");}
else if(input.val()=='|'){input.val("");}
}
else{}
}, 500);
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
I've just been told to do this:
The user search string should be fully highlighted
The cursor should be active in the search box
Afaik - this is not possible without some serious hacking - correct?
Don't even think you can answer it unless you know what it's for. Highlight can mean 'call out' or it might mean 'select'. "The highlighted answer" vs "Highlight the text with your mouse". You can not have selected text and a cursor within the same input box.
That said, a div with a white background and a grey border can be made to look like an input if the text styles for that div match your input text CSS. Put the div and the input into a wrapper with position: relative; set. Position .fake-input-div over your actual input via position: absolute with a little left side breathing room. Select .fake-input-div's text via JS and focus the input. That left side breathing room should reveal the cursor in the input. onkeydown for the input, hide the fake div. Then deal with the other N possible interactions users will be expecting. :)
It's a similar technique a number of the the autocomplete libraries use so that it appears like your selected items are still in the input (say tags in wordpress or friends' names on that blue social network).
Best: explain to your boss why this is a bad idea. :)
I am trying to implement something like the "Change/Remove Link" in Gmail/Google Docs richtext WYSIWYG edtior, when you type a URL, a div shows underneath it says "Goto Link, Change, Remote"
How could I write something like that using jQuery?
How to get row and column of cursor?
how can I calculate font width and height (especially non-fixed width font with some Bold/Italic style)
How to make sure the DIV appears at the start of a word?
Thank you in advance!
Answer: http://jsfiddle.net/morrison/57BR3/
What it does:
Creates div positioned near hyperlink.
Looks like Google docs box.
Ability to change text and url.
Remove is implemented.
What it does not do:
Work on textarea. Textareas don't support html as they are plain text. This is a complex process to work-around. Find a library, then implement my answer.
Open when your cursor gets moved onto it by arrowkeys. Doesn't work because of above item.
You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a textarea? Textareas don't support HTML. To answer your later comment, the best way to get the (x, y) position of the caret in a text area is to use the textarea-caret-position plugin.
I have a real-time HTML editor, with a textarea on the left for code entry, and a 'preview' DIV on the right to contain the preview of the code entered. At the moment, when editing the code in the left pane, the preview just sits where it is, so often the part of the code you're editing is not in the visible area of the preview (especially when images are involved).
My question is how do I make the preview scroll to show the part of the code that's currently being edited?
Here is the page I have so far:
http://www.caerphoto.com/rtedit.html
You'll notice in the source I have a (currently unused) matchPreview() function that tries to match the scroll position of the preview based on the scroll position of the textarea, but obviously if images or large text are involved the two panes no longer match.
Instead of a div from the clone target try using a tag.
let me decompose your task into 2 subtasks:
get informed when the dom changes
you could listen on changes of the dom like onsubtreemodified.
see
en.wikipedia.org/wiki/DOM_events
scroll the element into view
the answer to this is the scrollintoview method:
see
www.quirksmode.org/dom/tests/scrollintoview.html
however, this might not help you too much, since you are updating the whole html document on every change of the textarea. since you cannot get the position of the cursor inside the textarea, this might be not that easy.
sorry mate, at the end I have no solution, but maybe my rumination helps in some way nevertheless.
good luck!
When I tried this in Firefox. no line-breaks were seen in the preview; is this correct? I may be able to help (done something similsr recently), but not if the line breaks are removed...