passing array of hyperlinks in jquery

Question

I am creating a flowchart using jquery and html which has nodes(circles) and arrows which connect these circles.. two actions need to be done, one is a tooltip action, which will show a particular text when u hover your cursor on particular circle. And the other function is that whenever we click those circles another html page pops up AKA hyperlinks. I have 18 circles and i hav created desired 18 HTML pages. BUt m stuck at hyperlinking. I dont know how to pass these hyperlinks to my Jquery plugin. Below is an attached code for tooltip function

    function oncanvasmousemove(evt) {
    clearTimeout(timer);

    lastTimeMouseMoved = new Date().getTime();

    timer = setTimeout(function () {
        var currentTime = new Date().getTime();

        if (currentTime - lastTimeMouseMoved > 300) {
            var mousePos = getMousePos(canvas, evt);
            var tC, isMatched = false;

            for (c = 0; c < circles.length; c++) {
                tC = circles[c];
                if (mousePos.DistanceTo(tC.centerX, tC.centerY) < tC.Radius + 5) {
                    isMatched = true;
                    break;
                }
            }

            if (isMatched === true) {
                $("#tooltip").html(tC.Text).css({
                    'top': mousePos.Y + canvasoffset.top - 40,
                    'left': mousePos.X + canvasoffset.left - $("#tooltip").width() / 2
                }).show();
            } else {
                $("#tooltip").hide();
            }
        }
    }, 300);
}

i am attaching a image of the page enter image description here

Where you want to pass hyperlinks ? Have you made any function to for this? — abhsss96
– abhsss96, Commented Jul 4, 2014 at 6:57
A better question might be where are you getting the array from? How to pass an array is easy though. var toPass ["url1","url2"]; function passInto(arr) {console.log(arr);} passInto(toPass); — Jegsar
– Jegsar, Commented Jul 5, 2014 at 3:03
If you have lots of interactions (clicks, hovers) why not use SVG instead of canvas? — Yury Tarabanko
– Yury Tarabanko, Commented Jul 5, 2014 at 11:01

ConnectedSystems · Accepted Answer · 2014-07-06 10:43:04Z

1

You need to give each circle a CSS ID.

For my example, I will just use "#circle-1", "#circle-2" ... "#circle-18".

Also add a CSS class to every circle. For my example I will use ".circle-link".

//On clicking anything with the circle-link class...
$('.circle-link').click(function() {

    var link_id = $(this).attr("id"); //Get ID of circle that was clicked

    //Get ID number
    link_id = link_id.split("-"); //Split the string on the dash/hyphen (returns array)
    link_id = link_id[2]; //Get second array element (should be the number)

    //Use the above number to determine which link to call

});

answered Jul 6, 2014 at 10:43

ConnectedSystems

93210 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

passing array of hyperlinks in jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related