Javascript Resize
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>
加载中,请稍侯......
精彩评论