Creating always visible div using CSS in asp.net

Creating always visible div using CSS in asp.net

11:46:00 AM
Description:-

 You might have seen floating content of web sites which is always visible on the page even if you scroll it. This is easy achieving 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:

Default.aspx:-

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlwaysVisible.aspx.cs"
    Inherits="_23_05_2016.AlwaysVisible" %>
<!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 runat="server">
    <title></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>
    <form id="form1" runat="server">
    <div>
        <div class="visibleDiv">
        </div>
        <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 Example</p>
        </div>
    </div>
    </form>
</body>
</html>

Umesh Patel

Related Posts

Next
« Prev Post
Previous
Next Post »

1 comments:

comments

Thanks for comments.....