Is there a way to make the graph responsive? (> Responsive Webdesign)

456 views
Skip to first unread message

and...@nachhilfetv.org

unread,
Mar 8, 2013, 4:26:02 AM3/8/13
to jsxg...@googlegroups.com
Hello,

i am looking for an easy way to make the graph responsive.

I tried something like
http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/
...but it didn't work.

.graphbox {
    width: 100%;
    height: 0;
    padding-bottom: 100%; 
}

Does somebody know a workaround?

Best regards,
Andreas


michael

unread,
Mar 11, 2013, 5:01:09 AM3/11/13
to jsxg...@googlegroups.com, and...@nachhilfetv.org
Hi Andreas,


thanks for reporting this. I commited a fix which will be included in the next release. Here is an example that already uses the bugfix:




Michael

and...@nachhilfetv.org

unread,
Mar 11, 2013, 10:41:05 AM3/11/13
to jsxg...@googlegroups.com, and...@nachhilfetv.org
Hi Michael,

thank you for fixing this. I love this feature. When do you release the new version?


I'm sorry I got a bug on Firefox (19.0.2). (on Chrome there is no bug!)

If I open your website
http://jsxgraph.uni-bayreuth.de/~michael/jsxgui/Examples/groups/responsive-Sf2Q63-w9Y4.html

..it looks like this:

michael

unread,
Mar 11, 2013, 11:04:54 AM3/11/13
to jsxg...@googlegroups.com, and...@nachhilfetv.org
On Monday, 11 March 2013 15:41:05 UTC+1, and...@nachhilfetv.org wrote:
I'm sorry I got a bug on Firefox (19.0.2). (on Chrome there is no bug!)

If I open your website
http://jsxgraph.uni-bayreuth.de/~michael/jsxgui/Examples/groups/responsive-Sf2Q63-w9Y4.html

..it looks like this:
<snip>
Thanks. should be fixed, too. Apparently Firefox and Opera have problems calculating the size of an empty div with relative height/width.

The plan is to publish a release candidate this week or at the beginning of next week.

and...@nachhilfetv.org

unread,
Mar 21, 2013, 4:20:27 AM3/21/13
to jsxg...@googlegroups.com, and...@nachhilfetv.org
Hello Michael,

I used your function to make the graph responsive but i didn't get your result.

var resize = function () {
board.resizeContainer(board.containerObj.clientWidth, board.containerObj.clientHeight, true);
board.fullUpdate();
};
window.onresize = resize;


Where did you define your default height/width? Is it in pixels or percentages?

and...@nachhilfetv.org

unread,
Mar 21, 2013, 4:55:43 AM3/21/13
to jsxg...@googlegroups.com, and...@nachhilfetv.org
Sorry Michael,

it was my fault. I used the old version. The new release candidate works very well. Congratulations to this great work!

Best regards,
Andreas
Reply all
Reply to author
Forward
0 new messages