Creating always displaying panel using CSS
Published: 10/03/2009 by Vinoth Kannan S
You might have seen floating content of web sites which is always display on the page even if you scroll it. This is easy achieve thing by using just CSS. However there is also JavaScript alternative for this but the CSS one is smoother and faster as this doesn't includes any run time calculation. The below step by step process will guide to how to add a always display panel on any web page or website.
Step 1
Create a css class and name it "displayPanel" (or the one you like). And add position as "fixed";
<style type="text/css">
<!--
.displayPanel
{
position: fixed;
}
//-->
</style>
Step 2
Decide where you want to anchor the always display floating panel. There could be four option top left, top right, bottom left and bottom right. Based on the type of anchor you need specify the relative distance by using left, top, right, bottom in css.
<style type="text/css">
<!--
/*For top left*/
.displayPanel
{
top: 5px;
left: 5px;
}
/*For top right*/
.displayPanel
{
top: 5px;
right: 5px;
}
/*For bottom left*/
.displayPanel
{
left: 5px;
bottom: 5px;
}
/*For bottom right*/
.displayPanel
{
bottom: 5px;
right: 5px;
}
//-->
</style>
Step 3
Add a new div to the page and specify the class="displayPane".
<div class="displayPanel">
</div>
You always display panel is ready. You can see that position of this panel remain same even if you scroll the page. You can see this page has four always display panel. Below is a full sample code including html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Always Display Panel</title>
<style type="text/css">
<!--
.displayPanel, #topLeft, #topRight, #bottomLeft, #bottomRight
{
position: fixed;
width: 150px;
border: solid 1px #e1e1e1;
vertical-align: middle;
background: #ffdab9;
text-align: center;
}
#topLeft
{
top: 10px;
left: 10px;
}
#topRight
{
top: 10px;
right: 10px;
}
#bottomLeft
{
bottom: 10px;
left: 10px;
}
#bottomRight
{
bottom: 10px;
right: 10px;
}
//-->
</style>
</head>
<body bgcolor="">
<div id="topLeft">
Top Left
</div>
<div id="topRight">
Top Right
</div>
<div id="bottomLeft">
Bottom Left
</div>
<div id="bottomRight">
Bottom Right
</div>
<div style="height: 2000px; text-align: center; vertical-align: middle;">
<p>
Always display sample</p>
</div>
</body>
</html>
