Develop Reference

Kineticjs text padding interferes with mouseover events

I am trying to tween the color of a Kinetic.Rect when the mouse moves over it. I also have a piece of text defined at the same location. It seems that adding padding to a Kinetic.Text interferes with mouseover events.
I have created a fiddle at http://jsfiddle.net/d5pbK/
I have two padding statements one at line 40 and one at line 45.
The way the fiddle is right now when I move the mouse in the blue rectangle its changes color but if you move the mouse over the horizontal text extents then the rectangle does NOT change color.
Also if you activate any of the padding statements then only when I place the mouse over the orange border, only then does the rectangle change colors.
I would like the rectangle to change colors when the mouse is over it irrespectively of the text.

The Kinetic.Text element takes up the same space as the Kinetic.Rect element when padding is added to the text.
So instead of adding the events to the Kinetic.Rect, add them to the Kinetic.Text
Updated fiddle at: http://jsfiddle.net/MZ57d/

Ignore hover event completely for text on Raphael object

I am binding hover events to Raphael circles. This all works well and as expected.
When drawing a text string "over" the circle, using Raphael, the text character "steals" the hover and the circle hover exits. When exiting the text character, into the circle, the hover is restored.
The text is obviously a new, different object. Can I disable hover events completely for this text object?
I cannot draw the text behind the circle, as the circle has a solid color.
I am not specifically binding any hover events to the text object
Are there ways to solve this?
var paper = Raphael("myMap", 721, 1017);
paper.clear();
newcircle.attr({ fill: "#727272", "cursor": "pointer", stroke: "#A4A2A2"});
paper.text(x, y, "X");

Try adding pointer-events:none; for the object.
For you that'd look something like paper.node.setAttribute("pointer-events","none");
From comments: Actual fix: paper.text(x, y, "?").node.setAttribute("pointer-events", "none");
Edit For IE, the solution is more complex. You either have to use javascript like this or a plugin like this one. I got this answer from this SO post

Is it possible to have layered svg elements that interact with each other in d3?

I have a bar graph that is basically a navigational element, so I need easy predictable rollover behavior over the bars. Essentially I need to make sure that the small bars are as easily clicked on as the big ones, so I've made the entire column a clickable rollover.
Here is an example of the behavior I am referring to:
screenshot http://img6.imageshack.us/img6/6674/screengraph.png
I'd tried to do this with d3 and svg, but found that it was difficult to manage the z-indexes between svg elements and divs (or svg elements and other svg elements, honestly I forget the exact nature of where this was a sticking point). But I remember concluding that the only effective way to make what I was looking for happen was to have each column be 3 separate svg elements, essentially a top background, the bar, and then a bottom background, and to manually fire all 3 items to show the rollover change whenever one of them is hovered over.
I eventually just ditched svg and ended up using all divs just using d3 for the scale methods and drawing everything by hand using knockout.js templates. But now I'm looking at 200 lines of refactored javascript and I'm wondering if perhaps d3 would have given me a cleaner solution. Was I missing anything in d3 that could have accomplished what I am looking for easily?

Good on you for making the columns easily hoverable! The technique I would use for this is an invisible overlay with pointer-events: all, and optionally assigning the mouseover listener to a parent svg:g element rather than one of the rects.
The structure for each bar would look like this:
<g class="bar" transform="translate(0,…)">
<rect class="green"></rect>
<rect class="overlay"></rect>
</g>
(You probably have other things you might want to add, like the highlighted "14" in your screenshot, which you implement as another rect with rounded corners and a text element.)
The overlay rect is the full-height of the chart (70px, in your example). It has the following style:
.overlay {
fill: none;
pointer-events: all;
}
The green rect is just the height of the bar, and offset vertically so the bottom of the bar is at y=0. Same deal for the red negative rects.
In a nutshell, the invisible rect with pointer-events all receives all of the pointer-events for that bar. So you can use :hover styles on the parent g elements, say tweaking the bar color on hover:
.bar:hover .green {
fill: lightgreen;
}
Likewise, you can register "mouseover" and "mouseout" events on the parent g element, or the overlay rect.

Click on a Canvas - Get a list of options depending where clicked

I am not sure how to do this. Can it be done? How can it be done eligently? And hopefully can it be done without the need for another plugin library (jquery is ok) - I am trying to cut down the number of js files.
I have a canvas with a map in it. The user can click on the map. Then I want a white square to appear near to where the user clicked (rounded corners and a black border) with a few options on it for the user to select one. These can be text options, eg 'Country Summary', 'GDP', etc. Then the user selects one and the info appears in a area to the left, and the white option square automatically disappears.
Is this possible? Can it be done without the need for a window with a blue bar at the top and all the other window baggage?
Hope someone can help.
Jon

Yes, it can be done. You don't have to do it in the canvas, you can use regular HTML for that part.
Just add a new element to the page with the following CSS properties
position:absolute;
display:inline;
(as well as some CSS for rounded corners and black borders)
and then set its X and Y properties to the X and Y mouse coordinates of the event.
Then work with that element as you would with anything else.

How to stick one html element to other?

For example:
<div style="background-color:black;width:20px;height:20px;" > </div>
<div style="background-color:red;width:20px;height:20px; margin:50px;" > </div>
http://jsfiddle.net/TLLup/
Here is two bars red and black.
I want to stick black bar to red and black bar must follow to red if it changes coordinates and it doesn't matter what we are doing changes DOM or just using jquery function $(element).position().

Try adding float: left; to the black box, either by modifying the style="" attribute or via jQuery.

The easiest way to do this is using html5 canvas for any custom drawing.
Here is an example that shows you how to draw lines.
http://www.html5canvastutorials.com/advanced/html5-canvas-drag-and-drop-tutorial/
As long as the dots are on the canvas you should be able to listen for their mouse events and draw a line with the canvas.