Javascript Resize_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-13 17:09 出处：网络

I have very little javascript knowledge, so it seems a very basic question, but could not find a way to do that.

I have a 1024*768 fixed area like this:

alt text http://img260.imageshack.us/img260/4618/myimage.png

There will be a javascript button on the right side of the "Section A". When I click that button, Section A will be automatically resized and it will be something like this:

alt text http://img705.imageshack.us/img705/92/myimage1.png

So, Section A will overlap with Section B, and it will be same size with Section C (And i know the size of Section C). How can I automatically resize that area with overlap function? I am looking a plugin for Jquery, but could not find that. There is a resizable function in Jquery, but it does not help me. Could you help me ou开发者_如何学JAVAt? (If you just give me a link that is related with this feature, that would be enough too)

edit: For extra note, Section A is a flash object, so it will enlarge and overlap with Section B when I click to that button.

Thanks,

The jQuery hide() effect would be useful here. If both Section A & Section B have a float: left Section A should expand to fill the area when Section B is hidden.

http://docs.jquery.com/Effects/hide

Have you tried the animate function? http://docs.jquery.com/Effects/animate

Could have Section B hide with a slide or have Section A overlap it like you mentioned just need to set the positioning, z-index, etc. properly.

something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Terminal</title>
        <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#but').click(function (e) {
                    $('#a').removeClass('big').addClass('normal');
                    $('#b').hide();
                    e.preventDefault();
                });
            });
        </script>
        <style type="text/css">
            .height {
                height: 100px;
                border: 1px solid black;
            }

            .big {
                width: 198px;
                float: left;
            }

            .small {
                width: 100px;
                float: left;
            }

            .normal {
                width: 300px;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div><a href="#" id="but">button</a></div>
        <div id="a" class="height big">a</div>
        <div id="b" class="height small">b</div>
        <div class="height normal">c</div>
    </body>
</html>

Javascript Resize

精彩评论

关注公众号

热门标签

图文推荐

Javascript Resize

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：