JQuery и сдвиг DIVа
Коллеги, подскажите...
Дано: 2 divа, один скрытый, при появлении сдвигает второй div. Операция при сдвиге сверху вниз отрабатывает, снизу-вверх никак :cray: <html>
<head>
<style>
#controlPanel {
top: 0;
height: 200px;
width: 834;
font-color: #d3e0e7;
background: #004874;
overflow: hidden;
position: relative;
display: none;
z-index: 1;
}
#toolbar {
top: 0;
height: 56px;
width: 834;
overflow: hidden;
background: transparent url("top.png");
position: relative;
padding: 0;
z-index: 2;
}
a {
text-decoration: none;
color: #0083c1;
}
p {
color: #d3e0e7;
}
h1 {
color: #0083c1;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#open").click(function() {
$("div#controlPanel").slideDown("slow");
});
$("#close").click(function() {
$("div#controlPanel").slideUp("slow");
});
$("#toolbar a").click(function() {
$("#toolbar a").toggle();
});
});
</script>
</head>
<body topmargin="0" leftmargin="0" bgcolor="gray">
<center>
<div id="controlPanel">
</div>
<div id="toolbar">
<table border="0" width="100%" height="100%">
<tr valign="top">
<td align="right" width="72%"><p>Hello Guest!</p></td>
<td align="left">
<a id="open" class="open" href="#">Log In | Register </a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</td>
</tr>
</table>
</div>
</body>
<html>
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#controlPanelOuter{
position: relative;
height: 200px;
width: 834px;
}
#controlPanel{
position: absolute;
bottom: 0;
height: 200px;
width: 834px;
color: #d3e0e7;
background: #004874;
overflow: hidden;
display: none;
z-index: 1;
}
#toolbar{
top: 0;
height: 56px;
width: 834px;
overflow: hidden;
background: transparent url("top.png");
position: relative;
padding: 0;
z-index: 2;
}
a{
text-decoration: none;
color: #0083c1;
}
p{
color: #d3e0e7;
}
h1{
color: #0083c1;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#open").click(function(){
$("div#controlPanel").slideDown("slow");
});
$("#close").click(function(){
$("div#controlPanel").slideUp("slow");
});
$("#toolbar a").click(function(){
$("#toolbar a").toggle();
});
});
//-->
</script>
</head>
<body bgcolor="gray">
<div id="controlPanelOuter">
<div id="controlPanel"></div>
</div>
<div id="toolbar">
<table border="0" width="100%">
<tr valign="top">
<td align="right" width="72%">
<p>Hello Guest!</p>
</td>
<td align="left">
<p>
<a id="open" class="open" href="#">Log In | Register </a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</p>
</td>
</tr>
</table>
</div>
</body>
</html>
|
Спасибо за ответ!
Да вот задача как раз, что бы controlPanelOuter поднимал toolbar. |
поднимал controlPanel
|
так что ли?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#divOuter{
position: relative;
height: 250px;
width: 834px;
}
#divInner{
position: absolute;
bottom: 0;
}
#controlPanel{
height: 200px;
width: 834px;
color: #d3e0e7;
background: #004874;
overflow: hidden;
display: none;
z-index: 1;
}
#toolbar{
top: 0;
height: 56px;
width: 834px;
overflow: hidden;
background: transparent url("top.png");
position: relative;
padding: 0;
z-index: 2;
}
a{
text-decoration: none;
color: #0083c1;
}
p{
color: #d3e0e7;
}
h1{
color: #0083c1;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#open").click(function(){
$("div#controlPanel").slideDown("slow");
});
$("#close").click(function(){
$("div#controlPanel").slideUp("slow");
});
$("#toolbar a").click(function(){
$("#toolbar a").toggle();
});
});
//-->
</script>
</head>
<body bgcolor="gray">
<div id="divOuter">
<div id="divInner">
<div id="toolbar">
<table border="0" width="100%">
<tr valign="top">
<td align="right" width="72%">
<p>Hello Guest!</p>
</td>
<td align="left">
<p>
<a id="open" class="open" href="#">Log In | Register </a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</p>
</td>
</tr>
</table>
</div>
<div id="controlPanel"></div>
</div>
</div>
</body>
</html>
если не так, то прошу нарисовать "в картинках" что и где появляется и кого и куда смещает |
Все так, спасибо!
Думал обрамить в outer, но не дошел сам. |
| Часовой пояс GMT +3, время: 04:36. |