Jump to content

Div inside Div moves when Resized


jscooper
 Share

Recommended Posts

Hi,

 

I have a page on which I have a div inside a div.

 

<div name="divWrapper" id = "divWrapper" style="overflow:auto;height:90vh;width:98vw" > <div style="-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin: 0 0;overflow:visible;" name="divMap" id="divMap">

<img and ... imagemap tags>

 

The result I'm looking for is an image is in the window, with scollbars around it. I have a script that's run when the user clicks a button and zooms the inner div to make the image bigger or smaller. I have an imagemap for the image, and I found that just resizing the image didn't resize the map, so the coordinates would be off. But if I put the whole thing in a div and resized THAT, it would work.

 

Here's the script that "zooms" the inner div (curScale is set to 1 earlier in the *.js page):

 

function zoomDiv(elementID,change) { var d = document.getElementById(elementID); var newScale; if (change == 0) { newScale = 1; } else { newScale = curScale * change; } var s = "scale(" + newScale + "," + newScale + ")"; d.style.transform = s; d.style.webkitTransform = s; d.style.MozTransform = s; d.style.msTransform = s; curScale = newScale; d.style.width = d.style.width * curScale; d.style.height = d.style.height * curScale;}

 

I'm sure there are better ways to do what I'm trying to do with a lot of this, but it's kind of a slapped togethr page and I'm really interesting in fixing this...

 

Without the transform-origin tags, if I resize the div by making it smaller (zooming "out"), the left side of the div moves to the right, almost as if it's trying to right-justify itself on the page (or in the outer div). If I increase the size back to the original, it doesn't move back to the left. WITH the transform-origin tags, it sticks to the top-left, but is ugly when I make it really small; I'd rather it be centered.

 

So, how can I have a div that when I use transform to shrink or grow its contents, stays at a fixed % of the visible window, and is centered. I cannot use jquery because this is run locally on a workstation (a mac, with web sharing enabled) which may or may not have internet access and from what I have read, all that jquery code links to their site somehow.

 

Thanks,

 

Jeff

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...