Question

I have a web application that uses fixed css width. (1280px).

With jquery, I added something like

$("html").css("zoom",window["zoomRatio"], "important");

as well as -webkit-transform and the one for mozilla.

Everything works fine, except I realized that one of my chart with the jquery flot plugin doesn’t work (tooltip remained to be triggered at the original position before zoom)

Looking into it, I realized that it is the jquery.bind() that caused the problem. Is there anyway I can alter the mouseover position?

Basically I am looking for a way to pretend the mouse is at a different position. I looked for this information online, but I cant find much useful info.

Thanks

Edit (my code for the tooltip)

   function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}

var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if ($("#enableTooltip:checked").length > 0) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    }
});

Answer 1

Because your tooltip has incoming x and y values provided for that function, you need to test if a zoom condition is currently true.

Edit: This is done by creating a new if statement with two new variables of zoomActivated and zoomOnset to work with your existing markup. This if statement will be invoked whenever a zoom condition is true.

Fragment code example:

function showTooltip(x, y, contents) {

    if(zoomActivated){

        x = x + zoomOnset;
        y = y + zoomOnset;

    }

    $('<div id="tooltip">' + contents + '</div>').css( { ....

The above will check to see if zoomActivated is Boolean true and if so will adjust both x and y to compensate for the objects position that’s affected by the zoom method. That variable is set true when you are calling your jQuery zoom method, and reset to false when that zoom method has completed/returned to original state.

The global variable zoomOnset is based on the current zoom magnitude, assuming that the zoom is for both x and y. The actual value is a fixed value reflective of the fixed zoom value.