Raphael Resize width

Question

To start off I'll just say I've been using Raphael for 2 days now, so don't shoot me in the face for asking this question.

I have a Raphael created drop down rendered like so:

When I expand the window the bottom border is based upon <div> width so it expands perfectly (the image below might be a little f'd up):

The dotted lines expand (like they should), the problem is how do I expand (redraw) the Raphael shape to match the given % ?

The drawing part:

    for (var i = 0; i < holder.length; i++) {
    var paper = Raphael(title[i], title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); //create new paper instance based on holder height and width
    paper.setViewBox(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height());
    var rect = paper.roundedRectangle(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height(), 20, 20, 20, 20).attr({ //draw on paper rounded rectangle
        fill: "#E6E7E8", //background color
        stroke: "#ddd" //border color (technically shape color)

    });
    var t = paper.text((title.slice(i, i + 1).width() - (title.slice(i, i + 1).width() - 20)), (title.slice(i, i + 1).height() / 2), title_content.slice(i, i + 1).text()).attr({ //add text
        "text-anchor": "start", //left-align
        "font-size": 16,
        "font-family": "Arial, Helvetica, sans-serif"
    });
    textWrap(t, title.slice(i, i + 1).width()); //wrap text                    
}

I currently have this for resizing, but it doesn't work. It does product an error in the status bar, but because I only have ie7 I can't pull up firebug and read the console. Where am I going wrong?

$(window).resize(function() {
     var i = 0;
          $(title).each(function() {
              paper.setSize($(this).width(), $(this).height());
              rect.SetSize($(this).width(), $(this).height());
              redraw_element();
              i++;
     });                
 });

update - setting to 100% results in short rendering even though container is wider.

var paper = Raphael(title[i], title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); //create new paper instance based on holder height and width

paper.setViewBox(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height());

var rect = paper.roundedRectangle(0, 0, '100%', '100%', 20, 20, 20, 20).attr({ //draw on paper rounded rectangle
    fill: "#E6E7E8", //background color
    stroke: "#ddd", //border color (technically shape color)
    width: '100%',
    height: '100%'
});

renders

only IE7?! [IETester](http://www.my-debugbar.com/wiki/IETester/HomePage) will come through for you in your battles. use it wisely. — Eliran Malka, Aug 30 '12 at 08:03

Qnan · Answer 1 · 2012-09-04T17:06:19.563

1

I think you should use rect.attr({width:..., height:...}) (see also Element.attr) instead of SetSize. The latter is not a method of Raphael and may or may not work in different browsers.

edited Sep 04 '12 at 17:06

answered Sep 03 '12 at 14:26

Qnan

3,714
18
15

the developer console was initially installed in ie8, not ie7 – atrueresistance Sep 04 '12 at 16:53
@atrueresistance edited. Still, there are ways of debugging without the console, one can always resort to `alert`s or something like http://stackoverflow.com/questions/361635/debugging-javascript-in-ie7. Have you tried `rect.attr()`? – Qnan Sep 04 '12 at 17:07
@atrueresistance would be much easier if you made a jsfiddle of it, btw. – Qnan Sep 04 '12 at 17:08
I tried getting it to run on jsfiddle, but it wouldn't run in my browser. – atrueresistance Sep 04 '12 at 17:47
@atrueresistance jsfiddle is compatible with IE7 in general, although I cannot say anything about your code. The point is that I doubt anyone here can help you without seeing the whole of your code. – Qnan Sep 04 '12 at 18:06

score 0 · Answer 2 · answered Aug 31 '12 at 10:33

Not sure if this will work for your given needs, but did you know that Raphael supports percentage-based widths? eg paper.rect(0, 0, '100%', '100%'). When resizing, you simply need to change the width of the element containing the <svg> element (which in turn contains the rectangle(s)), and the rectangles will scale accordingly.

Raphael Resize width

2 Answers2