How to bring text on the top of raphael path? - javascript

I have raphael paths plotted and text on its top but when two path overlaps the longer text are broken or hidden by other element. I have jsfiddle . I tried :
r.toFront(); for path
AND
'fill-opacity' : 0 for object
but it is not working. I tried manually positioning the text but it's rather very hard when the path is around 50 :(. Is there any property like z-index in raphael. I tried that too but it doesn't work.

r.text()creates a new text element for you. You need to send that to the front. But if you add further paths afterwords, they are still stacked upon it.
To solve this, you may separate the text creation in a second loop or use Element.insertBefore() and Element.insertAfter() to send the country outlines to the back and the text-labels to front.
A quite simple fix is on jsfiddle.

Related

Raphael: Improving Range of Path Onclick

I have a project I'm working on that creates a graph that looks like this:
There is a functionality of the original app that I'm rewriting into web where you can click near the black paths and it will select that path, as indicated by the one path that is noticeably thicker.
I managed to get the onclick for the black paths working, but I'm finding the range to which you can select these lines is far too small (it's pixel perfect), and would make the feature worthless.
Is there a way I can expand the range at which you can click a path? Even 5 pixels on each side would help immensely.
My current line of thinking is to make significantly thicker white paths beneath the black paths and use their onclick, but while I'm testing that out I figured I'd ask if there's some other (hopefully easier) way that's not clear to me that someone else might know. I haven't seen anything within the Raphael documentation that does what I need, but of course if there is something I missed I'd love to see it. Any ideas are appreciated.
Thanks to Ian for confirming my suspicions, this is what I ended up doing:
this.line = canvas.path(this.lineString);
this.selectionLine = canvas.path(this.lineString);
this.selectionLine.attr('stroke-width', 15);
this.selectionLine.attr('stroke-linecap', 'round');
this.selectionLine.attr('opacity', 0);
this.selectionLine.toFront();
The attr('stroke-linecap', 'round') bit gives the path ends a curved portion so if you click just above a path it'll still count. Likely unnecessary, but I feel it important to account for possible user frustration.
It's important that you verify that the selection path is in fact drawing above the display path, otherwise if the user does manage to click the display path's area, the selection won't go through. Of course you could just stick the onclick onto the display line too, but I feel that drawing the selection path above the other is a cleaner solution.
It looks like this if you remove the opacity line, change the color, and change toFront() to `toBack()'

Dragging in HTML customization

In a program I am creating, I need to have dragging. I figured out this part through W3schools but I can't seem to figure out how to customize it... What I'm trying to achieve is dragging but no ghost effect, and making it so the original image is hidden so it looks like it is only one image. Another thing I'm trying to do is get rid of the symbols. I'm clueless as to how to get rid of the symbols, and I can't manage to change the opacity of the ghost image... I've looked at a few other answers but I can't seem to get it to work.
My JSFiddle
#pointer1{pointer-events:none} //This prevents selecting of the drag. Not what I wanted
#pointer1{/*How to change the ghost?*/}
I would use jQuery for this. It will let you set options for the things you're looking for.
jQuery UI Drag Documentstion

how to display text in a div like a triangle shape dynamically using jquery [duplicate]

I'm trying to have a block of text in a div fill a downward triangle shape. Is there any way to achieve this with either CSS or Javascript?
This is for a site in which users can dynamically insert text. I'm trying to avoid the alternative method, which is to have them insert text line by line with a limit on each line.
I don't know of any simple way to do what you are asking for. The best thing I can think of would be to use something like the CSS text wrapper, which can fit your text to any shape. I haven't used it myself so I don't know what problems you will run into.
Your question is very similar to this one.
I know of no CSS way, but you can do it with JavaScript. The idea is to find where each line of text breaks and wrap the remaining text in a new child div. You have to use text ranges to accomplish it.
See this demo: http://jsfiddle.net/gilly3/CmguZ/7/
You could wrap each line of your text with a <span> and use margins to recieve the wanted affect and if you want the shape to have a color use photoshop to create a triangle with the desired color and put it on the background.
you can try playing with CSS border slopes, but I don't think it fits your needs entirely, because it's a bit complicated and you have to wrap the text manually. there are some good examples of this method here, but it is for simple shapes basically, not for text containers.

looking for suggestions on how i can highlight areas on an image

i am building a workout website that tracks exercises. Each exercise has a mapping to a certain part of the body (bench press --> Chest)
I am trying to figure out a way to visualize this and i thought of the idea of putting an image of a person "highlighting" the affected muscles. Sort of like This:
(source: aquaviews.net)
Assuming i have found a good picture without any areas highlighted, is there anyway to dynamically "highlight" areas in a picture (the red section) with javascript (client side) or C# (server side) or do i need a seperate picture for every exercise?
You COULD overlay the the base image with SVG or a <canvas> element.
But then you have cross-browser issues, possible alignment problems, and probably a cheesy look.
I'd have an artistically inclined person do the highlights as a separate graphic for each exercise.
But rather than have these as separate images, keep/combine them in a single file -- as a CSS Sprite. Then you get a professional appearance, great cross-browser support and easy, minimal coding.
You can use css to position your links over said muscle group and use a rollover to show the highlighed part...
Edit:
Sorry I guess I should have elaborated. You can absolutely position the elements with CSS and use an image rollover to swap out that section of the image to the highlighted section of that image. You can either do this by putting each muscle group into it's own div and putting an image of the corresponding muscle group into the background image. Then swap it out on rollow over. or you can use z-index and absolutely position the rollover elements where they need to be and change the z-index when needed.
Interestingly enough, I used to be a personal trainer and I did this same thing but did it in flash. That's my recommendation.
However, if you want to do it with JS and CSS, Brock's suggestion of the sprites is likely the way to go.
What you could do, very simply, would be to have an image map that for certain areas called a js function to swap about the background image with the same version of that image with the highlighted sections. Rather than several small images, you have the same image but with one part highlighted.
One question though, will you be doing compound exercises that would require you to have two sections highlighted? For instance, an incline press would highlight part of the chest and part of the delts. This makes the whole proposition more complicated due to the specificity of your roll overs.
i think you seeking a way to do this without requiring separate images, and if so - the answer is No - you are going to need to create separate images for at least the highlighted areas. Short of perhaps using a CANVAS element which has cross-browser issues, I don't believe there is any way to impose a filter to an arbitrary region of an image element.
And even if you Could apply an alpha filter, you would still need the geometry of every shape, so the effort/work is perhaps the same...
Once you have the various images there are sundry ways to approach the problem after that...
This is a simple implementation as i have done this highlighting with a county map. Use an image map. Then find a highlighting script like (mapper.netzgesta.de) mapper.js. All you need to do is have a properly set up image map (image must be suuounded by a div) and a link to this script. The highlighting starts immediately. Please check the license. Ther are several other that scripts that use javascript css and jquery to achieve this same effect. Just research highlight image map in google. Sorry i cant give you a link to my implementation of this as it is on a secure site for work. Good Luck.

Is it possible to get pixel coordinates of text and draw a rectangular border around it using Javascript?

I am evaluating technology options for an upcoming project, and one of the requirements is to draw a rectangle around certain groups of words in a text field.
Each time the text is evaluated and parsed, certain recognized parts of it must be boxed with a rectangle, which should also respond to mouse clicks. There is even a requirement to place a little triangle to one of the corners of this rectangle.
I have no control over the requirements, and clearly this requirement points out to getting pixel positions of text in a text field (or a div container), and using some sort of overlay mechanism to draw the rectangle.
Unless I am using the wrong keywords, google searches return no helpful results, and I'd really appreciate your input about this topic.
Best Regards
Seref Arikan
Ps: any books/resources about advanced browser dom based graphics with javascript be appreciated also.
I would recommend looking at this plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
It's not exactly what you want, but you might be able to adapt it. The work of finding text in running content and then manipulating it is a little messy.
edit note that that plugin is for text in the HTML document, not text in input text fields or in <textarea> blocks. That would be pretty hard to do, but possibly somebody's done it.
I suggest you use multiple, borderless text fields, each containing a single part of the text(words or letters) and wrap groups as needed in span styled with a border and the triangle as a positioned background image.

Categories

Resources