Форум

slim · #1 (**permalink**) 23.07.2009, 06:48

Коллеги, подскажите...
Дано: 2 divа, один скрытый, при появлении сдвигает второй div.
Операция при сдвиге сверху вниз отрабатывает, снизу-вверх никак

<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&nbsp;</a>
		    <a id="close" style="display: none;" class="close" href="#">Close Panel</a>
		</td>
	    </tr>
	</table>
    </div>

</body>
<html>

#2 (**permalink**) 24.07.2009, 20:21

<!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&nbsp;</a>
					<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
				</p>
			</td>
		</tr>
	</table>
</div>
</body>
</html>

slim · #3 (**permalink**) 24.07.2009, 22:06

Спасибо за ответ!
Да вот задача как раз, что бы controlPanelOuter поднимал toolbar.

slim · #4 (**permalink**) 24.07.2009, 22:07

поднимал controlPanel

#5 (**permalink**) 26.07.2009, 12:38

так что ли?

<!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&nbsp;</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>

если не так, то прошу нарисовать "в картинках" что и где появляется и кого и куда смещает

slim · #6 (**permalink**) 26.07.2009, 17:21

Все так, спасибо!

Думал обрамить в outer, но не дошел сам.

Форум

Справочник

Discord чат

Курсы javascript