Question

This is the situation…

HTML:

   <div id="cw">
        <div id="c"></div>        
   </div>
   <a href="#">click me</a>

CSS:

#cw {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px 200px 0 200px;     
    padding: 10px;
}

#c {
    background: blue;
    display: block;
    height: 200px;
    width: 200px;    
}

-> http://jsfiddle.net/F6FF2/4/

Now, what I’m trying to achieve is this. If the “click me” link is clicked, the inner container #c is supposed to expand to the full extent of the window from the location it has been rendered on the page.

I figured that this can only be achieved by assigning position: absolute to the element. But then I run into the problem that its parent is positioned relative.

So what I have come up with so far is cloning #c, removing it from the DOM and appending the clone to the body before animating its expansion delivers the desired result. The problem is, however, if #c contains for example a Google Map, the map has to be reinstantiated after the cloning event (rather than just refreshing the tiles).

Apart from the fact that this solution seems a rather messy. There must be a better, cleaner solution.

Any ideas?

Answer 1

You are overwriting the contents(the map) here:

c.text(c_width+" > "+c_height+" > "+c_left+" > "+c_top);

Don’t overwrite the contents, also don’t use a clone(move the original ), trigger the resize-event instead when finising the animation:

http://jsfiddle.net/F6FF2/10/