Creating multiple mouseovers at once - html

I want to post an old book on my wordpress website but since the book is so old there are a lot of words that readers may find unfamiliar. So I was thinking of adding a mouseover with the definition when they hover over a certain unfamiliar word. The problem is that the text is huge and a certain word "x" appears many times in different places in the text. Is is possible to somehow write a single program which creates a mouseover to every single "x" in the text? Or do I need to do each of them separately?

You could write some JavaScript that evaluates the text on pageload and wraps each desired word with a specific CSS class. On this CSS class you could define your mouse hover and the function to be executed.

Related

Highlight user selected text in TextField with user selected color

I wish to provide simple highlighting feature where a user selects some range of text in a TextField and selects a color and that text's background is highlighted with that color like a marker, its a standard feature on most text editors and word processors. How to achieve this in AS3 (not flex) esp without using html/css in TextField.
Here is a good example of what you want to do: http://blog.formatlos.de/2009/06/22/as3-texthighlighter/
Solution here:
http://tom-lee.blogspot.in/2007/01/textfield-highlighter-class-for-flex.html
Also while hunting for solutions I came accross a generally useful class from Greensock called TextMetrics.

html5 canvas draw text with mutiple font

How can i fill text in the canvas with mutiple font.
I can be able to fill in canvas this:
This is an example of what I want to do
this is another example of what I want to do
I know that i can slpit the sting and do first fill the normal text, second the bold text, and third the rest of the text. but i want to be able to drag and drop the text, so i cant do in that way.
Sorry, you're out of luck. There's no easy way out here.
You have to call drawtext at least three times if you want text with a bolded word in the center.
There may be a time in the future where you are allowed to draw arbitrary html, the spec mentions this is a real possibility, but that won't be for some time. To quote the spec:
Note: A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas. This would be provided in preference to a dedicated way of doing multiline layout.
From the end of this section.
You can of course still drag and drop, you just have to have a list of elements and their locations that make up a "node". Much more complicated objects have been done in the canvas no doubt.

Toggling Highlights In JTextArea

I have a JTextArea where lines are highlighted upon right-click. While I could achieve this (using some great help from my previous post), however I would also want some kind of a toggle functionality i.e. if a line is not highlighted, right-click would highlight it and vice-versa.
With reference to this, is it possible to check whether the selected line is already highlighted or not? Comments/Suggestions?
I understand one way of doing this is to keep a track of all the highlights (maybe using a HashMap as shown in the example here) but this would slightly add to the complexity because I'm writing this method in a helper class that serves to multiple tabs containing these text areas. Any other alternative solution would be very helpful (as in toggling the highlights)
I think you have your answer right there in the link you provided.
Just write your own class extending the JTextArea where each instance will be responsible for storing its highlights then use your own class instead.
BTW #nIcE cOw great answer (+1 there).
SWT has a StyledText class.
You could write a styled text class for Swing, implementing the Document interface, that keeps track of the highlights and whatever other text decorations you want to keep track of. This class would encapsulate the methods that determine the decorations at a given character position in the styled text.

How to select text in columns in a table

Is there anyway to get the text on an HTML table to be selectable like the tables in MS Word? In a normal html table, when the user selects text using the mouse, the text is selected in ROWS. In MS Word, it is selected in COLUMNS. I am using IE8 in standard mode. I don't mind if the solution uses script or css.
Any help would be appreciated.
If you're willing to use script and css, then you could:
Define a CSS rule, associated with a class, which looks like (e.g. is colored like) the text is selected
Track mouse events (using the DOM event API)
Using script attached to mouse events, dynamically set the class attribute of table cells (to make it seem selected, using the CSS rule)
I haven't tested this! It's just an idea (not necessarily a good idea; but an answer to your question as stated).

Clickable lines and circles with HTML Canvas

I'm thinking of making an application where at some points a graph is displayed that maps people over time and space. The vertical access is location, the horizontal access is time, and each person is identified by a line. At any point where the person did something of significance, there is a bigger dot on their line. Conceptually, clicking the dot brings up data about that particular dot, but clicking anywhere else on the line brings you to a detail on that person. Hypothetically, when you hover over the line the line should change color, and when you hover over a dot, just the dot should change color.
I know that I could do this pretty easily with flash, but I was wondering if these days there is any way to do this using only html and javascript. Is it possible? (Compatibility is not an issue, the only machine I am targeting is my own.)
Thanks!
You can do this with canvas, but it might be simpler to use SVG.
Since SVG uses DOM, you get builtin methods for handling events like clicking etc., instead of having to write your own handling code like you would need with canvas.
There are a few libraries that make working with SVG simpler and cross-browser compatible, such as Raphael and Dojo's dojox.gfx library.
You could create the dots as overlaid divs, so you can easily handle clicks etc. You'd have to sort out positioning quite neatly, of course.
However, highlighting the line will involve calculating the point-to-line distance manually and redrawing.