error in changing title property of nodes in vector graphics using jquery

Question

I have a graph in SVG format, and I wanted to implement a functionality that changes the title property of any node when the mouse pointer hovers over it, and back to the old title when the pointer moves away. To implement this, I'm trying to use the jQuery library and my code looks like this:

var oldTitle;
$(document).ready(function() {
    $("g[class=node]").hover(funciton() {
        oldTitle = $(this).prop("title");
        $(this).prop("title", "New Title!");
    }, function() {
        $(this).prop("title", oldTitle);
        }
    );
});

However, for some reason the code is not functioning and I cannot see the expected effect. Any ideas as to what is going wrong here?

EDIT: I think I have an idea of what the problem is, but am still looking for a solution to it. So, in the vector graphics html code, a node is represented as:

<g id="node2" class="node"><title>SomeTitle</title>
        <ellipse fill="forestgreen" stroke="forestgreen" cx="243.017" cy="-678" rx="27" ry="18"/>
        <text text-anchor="middle" x="243.017" y="-674.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
</g>

Now, I want the hover action to change the text between <title> ... </title> and change it back when the mouse pointer moves away.

Any help on how this can be acheived?

PS: $(this).prop("title") returns undefined, so title out here is not a property of the node element.... then, what is it? And how can it be changed?

Thanks a lot!

NITPICK: having `$(this)` all over is bad for performance. Store it into a variable one time and reference that variable. Each time you use `$()` it is creating a new jQuery object which is expensive. — epascarello, Sep 28 '12 at 12:27

StaticVariable · Accepted Answer · 2012-09-28T13:00:03.060

1

this may work

var oldTitle;
    $(document).ready(function() {
        $("g[class=node]").hover(function() {
            oldTitle = $(this).attr("title");
            $(this).attr("title", "New Title!");
        }, function() {
            $(this).attr("title", oldTitle);
            }
        );
    });

This code will work In the case that when you have something like that

 <g id="node2" class="node" title="SomeTitle" >
            <ellipse fill="forestgreen" stroke="forestgreen" cx="243.017" cy="-678" rx="27" ry="18"/>
            <text text-anchor="middle" x="243.017" y="-674.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
    </g>

But you are using <title></title> than use

var oldTitle;
        $(document).ready(function() {
            $("g[class=node]").hover(function() {
                oldTitle = $(this).find("title").text();
                $(this).find("title").html("New Title!");
            }, function() {
                $(this).find("title").html(oldTitle);
                }
            );
        });

edited Sep 28 '12 at 13:00

answered Sep 28 '12 at 12:28

StaticVariable

5,253
4
23
45

no, it doesn't :( same problem here too... the effect is not being implemented. – assassin Sep 28 '12 at 12:37
@assassin what is `$("g[class=node]")` I think there should be a . or `#` before g – StaticVariable Sep 28 '12 at 12:39
I pasted an example of a node element in my edit to the question. You'll get why "g[class=node]" should work fine. But, as @Shushl pointed out, it's better to do "g.node" – assassin Sep 28 '12 at 12:52
Thanks for that! I tried your code, and I can see that $(this).find("title").text() retrieves the text of the title correctly. But, I still don't get the title change effect on the hover action. Are you sure that the text can be changed with the html() function? – assassin Sep 28 '12 at 13:08
@assassin I am sure that `$("div").html("Hello")` changed the content of that div and this will work Let me find out the problem. – StaticVariable Sep 28 '12 at 13:14
@assassin `$("html").find("title").html("some value")` is working.I think You should check for a syxtax error or if you have only one title on the page than use `$("title").html("new title")` – StaticVariable Sep 28 '12 at 13:23
@assassin have you got the solution? – StaticVariable Sep 29 '12 at 07:52

score 1 · Answer 2 · answered Sep 28 '12 at 12:29

1

If that is the actual code, you need a spellcheck

$("g[class=node]").hover(funciton() {  <--spelling error here

You spelled function wrong, notice the i and t.

answered Sep 28 '12 at 12:29

epascarello

204,599
20
195
236

sorry for the typo here. it does not work with function spelt correctly too. – assassin Sep 28 '12 at 12:35

Anoop · Answer 3 · 2012-09-28T12:58:49.283

1

Instead of using g[class=node] use g.node as a selector. Your code may fail if g contain more classes.

var oldTitle;

$(document).ready(function() {
    $("g.node").hover(function() {
        oldTitle = $(this).find("title").text();

        $(this).find("title").text( "New Title!");
    }, function() {
        $(this).find("title").text(oldTitle);
        }
    );
});

edited Sep 28 '12 at 12:58

answered Sep 28 '12 at 12:45

Anoop

23,044
10
62
76

thanks for the suggestion... yes, g.node is better. However, in my case g has only one class. I've pasted an example of a node element in SVG format in my edit to the question. Thanks! – assassin Sep 28 '12 at 12:54
@assassin title is not a property of g it is separate tag itself. I make the changes in my code also you can check it on jsfiddle http://jsfiddle.net/fP57H/ – Anoop Sep 28 '12 at 13:00

error in changing title property of nodes in vector graphics using jquery

3 Answers3