I have an HTML file and I am opening it with Webkit.
I want to develop an app such that after opening it, I should be able to select some text and make it noted (say by pressing a 'Note Text' button).
When I press the button, a note image should appear on the right, but I cannot figure out the selected text position and I also have no idea about how to add a floating image on the right (maybe a div element)?
Can anyone give me a fragment of sample code about adding annotations/notes in Javascript?
I recently used this article on Quirksmode.org to get started with identifying a user selection in Javascript. Essentially, IE differs from other browsers in what information you get about the selection: Mozilla and other browsers provide the relatively powerful Selection, while IE provides a TextRange.
If you're able to stick to Webkit-based browsers, you have significant ability to identify selected text with the Selection returned by window.getSelection().
As for adding a floating image near your selected text, you can use the anchorNode property of the Selection to find the element near to which you'll want to add your image. To do the actual positioning of the image - yes, probably in a div, I recommend learning about positioning in CSS.
Related
My web page (with vanilla Javascript) accepts files dropped on to it from the native desktop. I want to change the cursor's appearance while dragging, to give users feedback about the progress of their drag (when they're on the drop zone, etc). This is easy if you're dragging an HTML element from within the same page, but I haven't found how to do it when dragging a file or image from elsewhere on the desktop.
I have tried setting a class on the body element and all its descendants (and there are no other cursor styles anywhere) but as you can see (from the attached edited screenshot)
it has no effect - the class and style are applied correctly (see debug tools view in the lower half of the image) but the cursor nevertheless takes its default appearance.
Relevant snippet of CSS:
.no-drop-cursor, .no-drop-cursor * {
cursor: no-drop;
}
and Javascript applies the class to the body element whenever the cursor is on my web page but outside the drop zone.
Is this in fact impossible - or is there some neat way to make it happen?
A couple of things to avoid unnecessary suggestions:
All relevant drag/drop event handlers already do preventDefault();
The actual drag/drop code works just fine, exactly as intended;
I already give visual feedback to users by highlighting the drop zone appropriately as the cursor moves into and out of it, but I would also like the cursor's appearance to change.
Any ideas appreciated, even if it's only a clear explanation of why I can't do that!
Edit 2022-08-16: This earlier question seems to be a duplicate, but received no useful responses.
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.
There are a lot of plugins dedicated to implementing HTML5's placeholder attribute in older browsers. This is the one we're using.
While it does't use the placeholder attribute like some of the others options, it does (after our tweaks) preserve the text on focus - focusing onto an input field doesn't erase its contents.
We have one annoyance with it though - when you hit TAB and move into an input field with the default (/ empty) text, the default text first gets selected, until we fix this and position the caret at position 0 ourselves, causing a noticable flickering effect.
To reproduce, just check out the fiddle I linked to above (here it is again). Is there an easy solution to this problem (needs to work on IE9+/Firefox/Chrome)?
Here is an alternative solution. Position a element over top that holds the default text. If the input gets focus hide the default text and on blur check to see whether you need to hide the text or not. I realize it doesn't answer the question directly, but it seems like the method now is getting a lot more complicated than necessary. One other thing about the method now is if someone tried to select any part of the default text it has a very unexpected behavior.
http://msdn.microsoft.com/en-us/vcsharp/aa336760#WhereSimple1
On this page, when the code part being highlight and release mouse, the popup with code will appeared, is it javascript. how to code this ?
Probably attach an event listener to onmouseup and check to see if the currently selected text is within the element, and if so, show the popup, populating it with the selected text. Most of that is pretty straightforward, but the part where you check to see if the text selection is fully contained within your target element will be a bit complex - mostly because you'll be different code for different browsers. For older versions of IE, look at document.selection and document.selection.createRange(). For others (including IE9) look at window.getSelection().
Generally if we provide a title tag it shows as a tool tip. So on mouse hover we can see this tool tip. My question is if I traverse the elements through keyboard, Is it possible to generate a tool tip at that time?
This could be helpful – http://www.w3.org/WAI/GL/WCAG20-TECHS/H33.html.
Some graphical user agents will display a tool tip when the mouse hovers
above an anchor element containing a title attribute. However, current user
agents do not provide access to title attribute content via the keyboard.
As Gedrox mentions, the HTML standard attribute "title" is only used for mouse over effects. However, you can do this via JavaScript using the onfocus event, see Display a fixed "ToolTip" when an input receives focus, using jQuery
if you are looking for a javascript tooltip:
you can use onfocus (and onblur) to get when the keyboard is going over (and out) an element.
you can get the position of the element with position. so you can display a tool tip.
I know onfocus and blur work for input fields and links, not shure if it is cross browser for other elements
not the default one. you can draw your own using a floating div that shows like the tooltip and fill it up with text it gets from the title attribute.