2

tl;dr: When an image takes up 100% width and height and the user resizes their browser down, the width and the height of the document don't change because the image keeps it from shrinking.

I have a dynamically drawn SVG image (created by RaphaelJS) that takes up 100% of the screen width and height. The space it takes up includes space that is not visible but can be seen by scrolling (so it's not just viewport width and height, it is possible for it to go beyond that). I need to resize the SVG canvas to the size of the document so that scrollbars won't appear just for the image when the user resizes his browser smaller and so that the image won't appear to be cut-off when the user resizes the browser to be bigger.

The resizing up works fine, but there is a glitch in resizing down. When the user resizes from small to big, this works fine and the SVG expands to fit the window, but when the user resizes from big to small, the actual image keeps the document from becoming smaller because it is part of the document. The effect is that the image will grow but never shrink, causing scrollbars just for the image, even though the actual content all fits inside the screen.

Here is how I currently calculate the size of the SVG canvas:

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

function getDocWidth() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}

So how can I get the image not to keep the document from getting smaller? Basically the getDocWidth and -Height needs to ignore the dimensions of the image when it calculates the width and height of the document.

Tom Sykes
  • 135
  • 4
  • possible duplicate of [How to scale SVG image to fill browser window?](http://stackoverflow.com/questions/5643254/how-to-scale-svg-image-to-fill-browser-window) – Phrogz Apr 24 '11 at 20:31
  • No, I have no problems scaling mine to 100%. The only problem is that when the browser window is resized to be smaller, the document.body width and height doesn't change. – Tom Sykes Apr 24 '11 at 22:03
  • @Phrogz also, if you just specify width: 100%; height: 100%; the svg will not be drawn past the bottom of the viewport if the content of the page goes past the bottom edge of the viewport and the user scrolls down, so the image will appear to be cut off. – Tom Sykes Apr 24 '11 at 22:11

1 Answers1

0

If it's the window you want the width of rather than the current width of the document (with your image in it, making it wider), why not just use that?

robertc
  • 74,533
  • 18
  • 193
  • 177
  • Not quite. I _do_ want the width of the document. But I don't want the image to make the size of the document behave differently than if the image wasn't present. – Tom Sykes Apr 25 '11 at 01:13
  • @ChrisFetch But the width of the document will always be the width *with your image in it* so, as you've discovered, it'll never get any smaller. The only other way to get the size of the document without the image in it is to take the image out of it (eg. `display: none` or something). – robertc Apr 25 '11 at 09:38
  • @robertc Yep, that's the problem. I need: 1. The width of the viewport or if the content fits inside it or 2. The width of the content if the content goes outside the viewport. But in any case, the width and height need to be as if the image weren't present. – Tom Sykes Apr 25 '11 at 12:39
  • @ChrisFetch Then, as I suggested, remove the image before measuring. – robertc Apr 25 '11 at 14:38
  • @robertc The document does not render quickly enough after removing it for the screen to adjust. – Tom Sykes Apr 25 '11 at 22:36
  • @ChrisFetch What do you mean? What other rendering is going on if you set your `svg` element to `display: none`? – robertc Apr 26 '11 at 00:50
  • @robertc The document doesn't adjust itself quickly enough is what I mean. If done in Javascript, the code after `.css('display', 'none')` executes before the image actually disappears, so it gets the size of the document when the image is still there, before it has time to disappear. – Tom Sykes Apr 26 '11 at 02:11