0

i have a resizable svg element in my html body tag. However, when I resize it, no function is called.

Here's my jQuery code:

$(document).ready(function () {
    $('body').on('resize', 'svg', function() {
        console.log('svg is resizing');
    });
});

When the svg element's size changes, this function should be called. However, I don't see any "svg is resizing" output in my console. Please explain why this code isn't being called.

cf-
  • 8,598
  • 9
  • 36
  • 58
mathlearner
  • 7,509
  • 31
  • 126
  • 189
  • 2
    I think `resize` handler is for `window` element. Have you tried it with `$(window).on('resize'......);` or `$(window).resize()` ? – Vedant Terkar May 05 '14 at 15:40
  • You're using the `resize` event incorrectly. You're supposed to bind it to the `window` or bind it to an element and trigger it manually e.g. `$('svg').trigger('resize');`. If you tell us what you want to do when the SVG is resizing then there might be another solution. – Joe May 05 '14 at 15:41
  • What makes your SVG size change? – A. Wolff May 05 '14 at 15:48

2 Answers2

1

In normal usage, the resize event is only sent to the window object when the window is resized -- that's the only time it's triggered by the browser. You could trigger that event programatically on any element using the .trigger() function, but there's no resize event normally triggered when the size of an element changes, and if you knew when to trigger that event, you could just run the code in your event handler anyway.

That said, you aren't out of luck -- it'll just require a bit more code than that. Here is a link to a previous question which may be of use to you in accomplishing your goal: Determining if a div changes height.

Community
  • 1
  • 1
Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
  • Is there event triggered when size of an element changes ??i have to call a function when size of svg element changes. Thanks – mathlearner May 05 '14 at 15:45
  • There's no event normally triggered, but I added a link to a question which may help in figuring out how to track that change. EDIT: Actually, there MAY be an event called "SVGResize"... I'm not familiar enough with working with SVGs to know whether that's relevant or not. Here's the documentation though: http://www.w3.org/TR/SVG11/interact.html#ResizeEvent – Sam Hanley May 05 '14 at 15:46
0

Add this to your SVG element:

<svg ....  onresize="console.log('resized');">
   <g>...</g>
</svg>
Orwellophile
  • 13,235
  • 3
  • 69
  • 45