|
You might have seen floating content of web sites which is always visible 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 visible div on web page.
Step 1
Create a css class and name it "visibleDiv" (or the one you like). And add position as "fixed";
<style type="text/css">
<!--
.visibleDiv
{
position: fixed;
}
//-->
</style>
Step 2
Decide where you want to anchor the always visible floating div. 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*/
.visibleDiv
{
top: 10px;
left: 10px;
}
/*For top right*/
.visibleDiv
{
top: 10px;
right: 10px;
}
/*For bottom left*/
.visibleDiv
{
left: 10px;
bottom: 10px;
}
/*For bottom right*/
.visibleDiv
{
bottom: 10px;
right: 10px;
}
//-->
</style>
Step 3
Add a new div to the page and specify the class="visibleDiv".
<div class="visibleDiv">
</div>
You always visible div is ready. You can see that position of this div remain same even if you scroll the page. You can see this page has four always visible div. Below is a full sample code including html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Always Visible Div</title>
<style type="text/css">
<!--
.visibleDiv, #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 visible sample</p>
</div>
</body>
</html>
Top Left
Top Right
Bottom Left
Bottom Right
|