Solved

How to make the example JQuery Slidedown Panel slide over page content

Posted on 2008-10-17
2
17,392 Views
Last Modified: 2012-06-27
Hi All,

I am wanting to implement similar the following JQuery slide down panel but at the moment I can't work out how to make it slide over the top of my content rather than pushing the content down:

http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

.. I think its to do with CSS layers but no success as yet.

Code attached for convenience too.

Many thanks,

Rit


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Simple Slide Panel</title> 
 
<script type="text/javascript" src="jquery.js"></script> 
 
<script type="text/javascript"> 
$(document).ready(function(){
 
	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
	
	 
});
</script> 
 
<style type="text/css"> 
body {
	margin: 0 auto;
	padding: 0;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#panel {
	background: #754c24;
	height: 200px;
	display: none;
}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #422410;
	background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
	background: url(images/white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}
</style> 
</head> 
 
<body> 
 
<div id="panel"> 
	<!-- you can put content here --> 
</div> 
 
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 
 
</body> 
</html>

Open in new window

0
Comment
Question by:rito1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22740464

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Simple Slide Panel</title> 
 
<script type="text/javascript" src="jquery.js"></script> 
 
<script type="text/javascript"> 
$(document).ready(function(){
 
        $(".btn-slide").click(function(){
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });
        
         
});
</script> 
 
<style type="text/css"> 
body {
        margin: 0 auto;
        padding: 0;
        width: 570px;
        font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
        outline: none;
}
#panel {
        background: #754c24;
        height: 200px;
		width: 570px;
        display: none;
}
.slide {
        margin: 0;
        padding: 0;
        border-top: solid 4px #422410;
        background: url(images/btn-slide.gif) no-repeat center top;
		width: 570px;
}
.btn-slide {
        background: url(images/white-arrow.gif) no-repeat right -50px;
        text-align: center;
        width: 144px;
        height: 31px;
        padding: 10px 10px 0 0;
        margin: 0 auto;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
		width: 570px;
}
.active {
        background-position: right 12px;
}
</style> 
</head> 
 
<body> 
 
<div style="position:absolute">
<div id="panel"> 
        <!-- you can put content here --> 
</div> 
 
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 
</div>
 
</body> 
</html>

Open in new window

0
 
LVL 1

Author Comment

by:rito1
ID: 22741061
Ah I see. It was actually a DIV that I was nesting this panel in that was causing the problem.

Thanks anyway.

Rit
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Building JSON/JQuery Results Display 11 51
sort Multi-dimensional array 6 42
Time Picker 3 21
How to strip HTML from this JS code using regex 29 40
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question