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.
Related
I am using tinyMCE editor, i need to make some contents radonly (nonEditable).
As per its documentation, if i use class "mceNonEditable" with some elements, it fulfill the requirement, but unfortunately if i select that specific element and press backspace / Enter / Delete button, it removes that content.
All i want is that, user shouldn't be able to make any contact with those elements.
Official example can be seen here.
Any how, I also tried to accomplish this with an overlay div, overlay div needs absolute position, and after applying this style, editor convert this div into drag able form.
Please help, if there is any other solution..
I've found that setting the contentEditable attribute to false on the element does the trick.
I have contenteditable span with a max-width setting that allows the user to enter text. What I'm looking to do is detect when the user reaches this width limit and a new line is displayed on the page. I am trying to create a WYSIWYG editor that creates text, (in SVG), exactly the way it looks in the contenteditable span when the user presses enter. I have successfully captured the enter event, so that is not an issue, I am looking for a way to either detect the word wrap, or calculate where it should occur. Any help is appreciated. (I can post sample code if needed)
When the height of the element changes, you know you have word-wrap occurring.
Monitor for a change event and see if the height changed. If it did, you have a word-wrap (or un-wrap). I threw together an example:
http://jsfiddle.net/eZDRD/
I was wondering if there is a way for me to open up a textbox for users to type in on an onclick event? How would i go about making this? I'm thinking now that there may be a way for me to grab what the user types on a canvas and use the methods i've read about to output the text. Is this a possibility? But how would i allow the user to type on the canvas in the first place?
I've done a lot of reading and all the examples i could find were about simply outputting text onto the canvas rather than creating a textbox.
Any ideas?
You have to literally make one, as in the onclick event fires and you do: var myInput = document.createElement("textarea");
You need to set the myInput.style.width, height, top, left, and of course the myInput.style.position to "absolute", then position it where the user would expect.
Then you need to assign events to it. Maybe on keydown it will look for the Enter key, and if the enter key is pressed it will disappear and commit the text however you want it committed.
Then add it to the page.
Maybe it will do the same thing on a blur event (if the user clicks away).
canvas is a bitmap image. You can't put an element "in it". You could put one hovering over it, though. What I think your looking for is the html5 contenteditable attribute.
A simple solution - use Javascript's alert box. This will enable us to grab the text which the user wants to place on the screen. Then write the text where ever you want on the canvas (lots of tutorials on how to write text on a canvas).
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.
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.