Sliding panel button problem
i have a html page and it has a SEARCH button so when i click on button the panel slides down along with the button also but its not working this way. The button stays there which is not what i want. I want the button comes down with the panel and goes up with the panel also.
Following is the site where i got the code from and want to do exactly the same.
http://csscody.com/demo/demo-slide-panel-in-jquery/here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
#panel
{
position: absolute;
background-color: #F0FEDC;
height: 200px;
display:none;
border: 1px solid #000;
z-index: 2;
}
#panel h2, p{
margin:0px; padding:0px; padding-top:20px; padding-left:20px; color:#666
}
.slide
{
position:relative;
margin: 0;
padding: 0;
border-top: solid 4px #2b5386;
background: url(../images/btnslider.png) no-repeat center top;
z-index:2;
}
.btn-slide {
/*(background: url(white-arrow.gif) no-repeat right -50px;*/
text-align: center;
width: 144px;
height: 31px;
padding: 3px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 60%/60% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
z-index:2;
}
.active {
background-position: right 12px;
}
</style>
</head>
<body>
<div id="outside" style="border: 1px solid #dcdada; width: 929px; height:483px; position:absolute; top:128px; margin-left:1px">
<div id="panel">
<h2>Slide Panel Heading</h2>
<p>This is Jquery Example of Slide Panel. sample text(One of the most significant elements of a good user interface is visibility of the system’s status. Users must notice immediately what’s going on behind the scenes and whether their actions have actually led to the expected results. To achieve a more sophisticated level of system visibility, Web applications these days use AJAX (of course),)</p>
<p><strong>Visit more Examples:</strong> <a href="http://www.csscody.com" style="color:#4C6E1E">www.csscody.com</a></p>
<p class="slide"> <a href="#" class="btn-slide">Search</a></p></div>
<div id="wrapper" style="width: 900px; height:473px; position: relative; top: -10px; left:4px">
<div style="position:relative; z-index:1">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ull开发者_JS百科amcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum </p>
</div>
<div>
</div>
</div>
<script type="text/javascript" language="javascript">
var $ = jQuery.noConflict();
$(document).ready(function () {
$(".btn-slide").click(function () {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
</body>
</html>
1) close the div with id outside in the end before the script tag with </div>
2)take out the <p class="slide"> <a href="#" class="btn-slide">Search</a></p>
from the div panel, because you have display:none on it, so the the <p> doesn't appear also because it's child of this div.
Put the <p> after the div with id outside and test it.
well its done...i had to change the panel position to "relative" and set the panel and slide div top position to -500 and finally the whole PANEL div outside the wrapper div :) had to concentrate on my css for the solution. thanks for all your support. – u
加载中,请稍侯......
精彩评论