How to animate CSS resize?


Tags: javascript,jquery,html,css

Problem :

I have the following CSS:

<style type="text/css">
    #list { overflow:auto; }
    #list li { float:left; margin-right:10px; }

    div { width:500px; height:500px; border:1px solid gray; position:relative; }
    iframe { border:0 none; width:100%; height:100%; display:block; }
    span.togglebutton { position:absolute; left:0; top:0; background-color:black; padding:3px; color:white; }

    div.maximized { position:fixed; top:0; left:0; width:100%; height:100%; border:0 none; z-index:9; }
  </style>

This is being called:

$("span.togglebutton").click(function() {
        var $this = $(this);
        $this.closest("li").children("div").toggleClass("maximized");
});

Essentially it maximizes/minimizes my iFrame to be fullscreen. I want to animate the maximize and minimize. How can I go about doing this?

UPDATE Here is my code using adeno's code:

$("span.togglebutton").click(function() {
        var $this = $(this);
        var currentText = $this.text();
        var theFrame = $(this).closest("li").children("div");

        if (currentText === "Maximize") {
            $this.text("Minimize");
            theFrame.animate({height: "100%", width: "100%"});
        }
        else {
            $this.text("Maximize");
            theFrame.animate({height: "50%", width: "50%"});
        }
    });

This works well, except I would like the maximize to take over the FULL screen. How can I do this?



Solution :

This is a little tricky to be quite honest... to make it behave correctly there is quite a lot that needs to be done.

Here is a working demo using jQuery

I hope you like it. I made it from scratch to ensure it would work. I added a (tool)bar on the top so it could hold my controls, with some tweaking you could make that an image and make the controls be right aligned to the container div.

Theres really no 'smarter' way to do this I think. The resize event bind / unbind is critical, without it this would break on a resize.

PS.; It's google that is making it a little wonky in the animation (it has resize events of it's own which are triggered constantly in the animation), I just couldn't think of a better website to use that also works in an iframe (stackoverflow doesn't).

Edit:

As per request in comments; here is a version for multiple frames on a page. Not thoroughly tested and could use some optimization but I am very tired so that is not going to happen today ;)

http://jsfiddle.net/sg3s/BT4hU/35/


    CSS Howto..

    How to generate code for cross browser compatibility css in sublime or atom

    How do I hide text that is not wrapped in

    or ?

    How to make a different flip animation using CSS?

    How to Use CSS transitions

    css, how to stop an element being squashed by container

    Bootstrap: Background image z-index to show it above bg color

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    CSS How to keep page centered, but still put stuff where I want

    How To Get Color of WebElement From Complicated css case using Webdriver?

    CSS triangle over a div using :before and :after - weird offset, how to fix?

    How to use @RenderPage to include CSS content inline - MVC Razor

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    How can I make this menu's “clear:both” work in Google Chrome?

    how to select the 2nd child Div of a div using CSS

    How to create a header that changes as you scroll down the page? [duplicate]

    How to make the height of the div take all the space?

    how to select :after element using jquery

    how to fit an image inside a box and vertical align it

    Using javascript to show html on every page except one page

    How to position a css radial gradient to the top left responsively?

    How to retain CSS transform scale on checked state

    How to make a circular image in css

      list only showing contents of first
    • , ignoring second

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    How to paste a style sheet into a new document window in a Rally app

    How to set Bootstrap's hero unit height to 100%?

    how to remove table border line?

    How to use pure CSS to control other elements under same parent?

    How to select children in CSS

    How to create double, dotted underline for text in css