How do I move a symbol from code?

Question

I'm actually trying to centre and scale a symbol, while maintaining aspect ratio, such that the width fills the stage, but that only seems to be possible for background images (width:100%, height:auto).
I created a symbol (with about 6 divs (rectangles and text) in it) on the stage and names it 'content'. The stage is 100% wide and 100% high. On window.resize, I set content scale thus -
var stageWidth = $(window).width();
var contentWidth = sym.getSymbol("content").getSymbolElement().width();
var m = stageWidth / contentWidth;
sym.getSymbol("content").getSymbolElement().css("-webkit-transform", "scale(" + m + ", " + m + ")");
It scales fine, but it scales about a weird point making the symbol appear to move as the window resizes. I want it to remain at the left hand side (filling the viewport). I couldn't work out how to make it do that in the interface, so I started to attack it with code
console.log("before: " + sym.getSymbol("content").getSymbolElement().position().left);
sym.getSymbol("content").getSymbolElement().css("position", "relative");
sym.getSymbol("content").getSymbolElement().css("top", "0px");//actually needs to be -(half of (content height - stage height))
sym.getSymbol("content").getSymbolElement().css("left", "0px");
console.log("after: " + sym.getSymbol("content").getSymbolElement().position().left);
But that isn't having any effect at all (other than filling my javascript console). How can I move this thing to the correct position?

Answer 1

Thanks Tim, but changing the width and the height of my_symbol just doesn't reproduce what I'm trying to acheive, or the problems I'm having as a result of that. I need to scale the symbol, not resize it.
I just tried you code anyway. my_symbol does stay top left, but actually it stays left if I use your code without the bottom two lines. You need
sym.getSymbol("content").getSymbolElement().css("-webkit-transform", "scale(" + m + ", " + m + ")");
to cause the wierd positioning issue.
Here's a result you might find interesting. I tried this code -
var stageWidth = $(window).width();
var contentWidth = sym.getSymbol("content").getSymbolElement().width();
var m = stageWidth / contentWidth;
sym.getSymbol("content").getSymbolElement().css("-webkit-transform", "scale(" + m + ", " + m + ")");
sym.$("content").css('left', 0);
sym.$("content").css('top', 0);
console.log("left: " + sym.getSymbol("content").getSymbolElement().position().left);
Then I resized the browser a bit and got this trace
left: 45
left: 45
left: 37
left: 37
left: 27
left: 27
left: 20
left: 20
left: 8
left: 8
left: 4
left: 4
left: -2
left: -2
left: -8
left: -8
left: -9
left: -9
So it looks like content's left isn't getting set to 0 at all. Oh dear. -ve numbers are from browser widths greater than 720, which is the width of 'content' before I've filddled with it.
I can't even work which point it's scaling about! If I could make that the middle left then I wouldn't have a problem.