Response title
This is preview!
sliding panels problem
in Using jQuery UI
•
11 years ago
Hy, i have two sliding panels, one vertically(on the top) and the other horizontally(on the left). the problem i have is that when the left one is visible the other one doesn't work properly
here is my code and thanks for helping.
<!doctype html><head><title></title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
$(".btn-edit").click(function(){
$("#divButton").animate({
"width": "toggle", "opacity": 1
}, { duration: "slow" });
});
});
</script>
<style type="text/css">
body {
background-color:#999;
margin: 0;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
/*position:relative;
z-index:1;*/
background: #754c24;
height: 100px;
display: none;
margin-left: 400px;
width: 500px;
}
.slide {
/* position:relative;
z-index:1;*/
padding: 0;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 400px;
background-image: url(images/btn-slide.gif);
background-repeat: no-repeat;
background-position: center top;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #422410;
width: 500px;
right: 400px;
}
.btn-slide {
/*position:relative;
z-index:1;*/
background: url(images/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 164px;
height: 31px;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0;
}
#divButton
{
/*position:relative;
z-index:2;*/
float:left;
padding: 20px;
background-color:#1C1C1C;
height: 530px;
width:177px;
display: none;
margin-top: 200;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
position: relative;
top: 120px;
}
.slide_edit {
/*position:relative;
z-index:2;*/
/*position:absolute;*/
background-image: url(images/btn-slide-edit.gif);
background-repeat: no-repeat;
float:left;
margin: 0 0;
/*padding: 0;*/
border-left: solid 4px #422410;
background-position: center; /*border-top: solid 4px #422410;*/
position: relative;
top: 120px; /*background: url(images/2.gif) no-repeat center top;*/
}
.btn-edit {
/*text-align: center;*/
/*position:absolute;*/
width: 40px;
height: 570px;
padding: 0 0 0 0;
margin: 0 0;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
background-image: url(images/white-arrow-edit.gif);
background-repeat: no-repeat;
background-position: -50px 220px;
}
.active {
background-position: right 12px;
}
#divTop
{
position: absolute;
}
#divImg
{
position: absolute;
}
</style>
</head>
<body>
<div id="divButton">
</div>
<p class="slide_edit"><a href="#" class="btn-edit">
</a></p>
<div id="panel">
</div>
<p class="slide"><a href="#" class="btn-slide">slide</a></p>
</body>
</html>
1