jQuery Forum

I have a large svg graphic loaded into a webpage with several groups in it. I am using  jquery.svg.js and
jquery.svganim.js .

Most of the groups move correctly without resizing, but one scales up as it moves. here is the code:

1. $('#2010-7group').animate({svgTransform: 'translate(-130,-45)',svgOpacity: 100}, 2000);

The graphics were made in Inkscape. I have a notion that I embedded a scale command in the svg somehow, but I don't know where to look. Any ideas on how to debug this?

Ajax- send data from php to javascript.

Using a php file to send a json formatted bit of data. Load works but get doesnt. I get the correct data says firebug.

data in PHP:
$mystring = '{ "name" : "John" , "time" : "20clocky"}';
echo $mystring:

client-side:
Firebug says I got- { "name" : "John" , "time" : "20clocky"}
which jsonlint says is OK

This code works:

1. $('#debugdiv').load('backend4.1.php');

This code returns an error:

1. $.get("backend4.1.php", {}, function(data){
2.    $('body').append( "time: " + data.time );  
3.     } );

error = prints

1. time: undefined

I've tried:
utf-8 encoding from php
json toolkit on both ends
Using Chrome instead of FF
without empty send braces "{}"

Goal:
Get snmp data like this

1. {"0":"down(2)","1":"up(1)","2":"down(2)"}

 into an array in javascript.

What the heck is wrong?

I have an svg object set with hover (or mouseover-out)  to animate the superfish menu. When the mouse enters the svg, the menu appears, on leaving it should disappear. (same problem with div so not an svg problem)

(testing with FF5.01)

Problem: mouseover, or hover work fine, but when I add a second function to remove the menu, I get a blinking menu. I assume its a conflict with the menu's own hover?

How can I workaround this? I want the menu to go away when the mouse leaves the svg and menu.

1.     ///////// works but menu never goes away ////////////
2.  $('#7300-3group').mouseover(function(){
3.        $("#floatMenu").animate({top:375,left:100},{duration:100,queue:false});
4.       $("#floatMenu").fadeIn( 400);
5.     });
6.     ///////// menu blinks ////////////
7.  $('#7300-3group').mouseover(function(){
8.           $("#floatMenu").animate({top:375,left:100},{duration:100,queue:false});
9.           $("#floatMenu").fadeIn( 400);     });
10.     $('#7300-3group').mouseout(function(){
11.           $("#floatMenu").fadeOut( 200);
12.     });

I have followed K Wood's suggestion and gotten my div to clone a single svg multiple times, but I am doing something fundamentally wrong when I try to add different svgs. I start with red.svg, then add green.svg, but when I add blue.svg, green disappears. ( using FF5.01)

Actual design problem:
I need to load a series of rectangles, either as groups from a single file or separate files, and make them resize and move and disappear individually. They have to appear to be exactly next to each other ( they are components in an animated rack server)

1. // prepare the dom and then load the svg
2. var svg;
   
3. $(document).ready(function(){
4.     getsvg(); 
5. });   
6. // load the svg
7. function getsvg(){
8.       $("#svgupper").svg({ 
9.             loadURL: 'red.svg', 
10.             onLoad: main, 
11.             settings: {} 
12.           } );
13.       svg = $("#svgupper").svg('get');
14. }
15. function main(){
16. // depends on svg definition in getsvg()
17. // at this point I have red //////////////////////////////////
18.           $.get('green.svg', null, function(data) {
19.    
20.              svg.add(data.documentElement);
21.      
22.         $('svg', svg.root()).each(function(i) {
23.              svg.change(this, {x: 200, y:  100});
24.         });
25.     }, 'xml');
26. // at this point I have red and green ///////////////////////
27.     $.get('blue.svg', null, function(data2) {
28.              svg.add(data2.documentElement);
29.         $('svg', svg.root()).each(function(i) {
30.              svg.change(this, {x: 100, y:  100});
31.         });
32.     }, 'xml');
33. // at this point I have red and blue //////////////////////
34. }
35. <div id="svgupper" class="svgstuff"></div>