Archive

Archive for the ‘CSS’ Category

Create a GridView Paging Style with Code

March 14, 2010 Leave a comment

Hi all ,

try this example to Create a GridView Paging Style with Code

to apply this example you should allow paging with Gridview then add the following code:


protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.Pager)
  {
      TableRow tRow = e.Row.Controls[0].Controls[0].Controls[0] as TableRow;
      foreach (TableCell tCell in tRow.Cells)
      {
          Control ctrl = tCell.Controls[0];              
          if (ctrl is LinkButton)
          {
              LinkButton lb = (LinkButton)ctrl;
              lb.Width = Unit.Pixel(15);
              lb.BackColor = System.Drawing.Color.DarkGray;
              lb.ForeColor = System.Drawing.Color.White;
              lb.Attributes.Add("onmouseover","this.style.backgroundColor='#4f6b72';");
              lb.Attributes.Add("onmouseout","this.style.backgroundColor='darkgray';");
          }
      }
  }
}

Hope this helps

Good Luck.

Categories: ASP.Net, CSS

Change Textbox Border on focus

May 20, 2009 2 comments

Hi

try this example to Change Textbox Border on focus

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
   <script type ="text/javascript">
    function Change(obj, evt)
    {
        if(evt.type=="focus")
            obj.style.borderColor="red";
        else if(evt.type=="blur")
           obj.style.borderColor="black";
    }
   </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server" onfocus ="Change(this, event)"
        onblur ="Change(this, event)"></asp:TextBox>
    </form>
</body>
</html>

you can also try this example using CSS

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type ="text/css">
        .onfocus
        {
            border-color:red;
        }
        .onblur
        {
            border-color:;
        }
    </style>
   <script type ="text/javascript">
    function Change(obj, evt)
    {
        if(evt.type=="focus")
            obj.className ="onfocus";
        else if(evt.type=="blur")
           obj.className ="onblur";
    }
   </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"   onfocus ="Change(this, event)"
        onblur ="Change(this, event)"></asp:TextBox>
    </form>
</body>
</html>

Hope this helps

Good Luck

Categories: ASP.Net, CSS, Javascript

AJAX Update Progress with CSS

May 1, 2009 2 comments

Hi

try this example to use AJAX Update Progress with CSS

<asp:UpdateProgress ID="UpdateProgress1" runat="server">   
<ProgressTemplate>
        <div id="Progress">Please wait ......</div>
       <div id="bgDiv"></div>
</ProgressTemplate>
</asp:UpdateProgress>

and CSS

<style>       
#bgDiv
{         
position:absolute;         
top:0px;
bottom:0px;         
left:0px;         
right:0px;
overflow:hidden;
padding:0;
margin:0;
background-color:black;
filter:alpha(opacity=50);
opacity:0.5;
z-index:500;
}

#Progress
{
position: absolute;
background-color:Red;
width: 300px;
z-index: 600;
}
</style>

Good Luck

Categories: AJAX, CSS

Create Popup Panel

April 21, 2009 Leave a comment

Hi

try this example :-

<html>
<head>

<style>

Body
{
 font-family: Arial;
}

.PopupPanel
{
 border: solid 1px black;
 position: absolute;
 left: 50%;
 top: 50%;
 background-color: white;
 z-index: 100;
 height: 200px;
 margin-top: -100px;
 width: 400px;
 margin-left: -200px;
}

.PopupPanelModalArea
{
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 position: absolute;
 background-color:silver;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
 z-index: 99;
 border: 0;
 -moz-opacity: 0.60;
}

.PopupPanel .TitleBar
{
 margin: 0;
 display: block;
 background-color: #0058ee;
 line-height: 20px;
 color: white;
 font-weight: bold;
 padding: 0 0 0 5px;
}

.PopupPanel .ContentArea
{
 padding: 0 0 0 5px;
}

</style>

<script>
/**********************************
Simply displays or hides the panel
**********************************/
function TogglePopupPanel()
{
 var panelContainer = document.getElementById("PopupPanel");
 
 if (panelContainer.style.display == "none")
 {
  panelContainer.style.display = "";
  document.getElementById('PopupPanelModalArea').focus();
  document.body.onfocus = function() { document.getElementById('PopupPanelModalArea').focus(); };
 }
 else
 {
  panelContainer.style.display = "none";
  document.body.onfocus = function() { return true; };
 }
}

</script>

</head>
<body>

This is the Popup Panel test page.  The idea is that you will not be able<br/>
to alter or interact with the contents of the underlying page while the panel is displaying.<br/>

<br/>
<input type="Button" value="Display Popup Panel" onclick="TogglePopupPanel()" /><br/>
<br/>

<select>
 <option value="0">-- Select --</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
</select>

<input type="Button" value="Test Button"/><br/>

<!-- ****************************** -->
<!-- Start of the PopupPanel HTML   -->
<!-- ****************************** -->

<div id="PopupPanel" style="display:none">
 <iframe class="PopupPanelModalArea" frameborder="0" scrolling="0" id="PopupPanelModalArea"></iframe>
 
 <div class="PopupPanel">
  
  <p class="TitleBar">
   Popup Panel Title Bar
  </p>
  
  <p class="ContentArea">
   Even though the underlying page is disabled, you can however use the controls in this area
   <br/>
   <br/>
   <select>
    <option value="0">-- Select --</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
   </select>
   <br/>
   <br/>
   <input type="Button" value="Close Popup Panel" onclick="TogglePopupPanel()" />
  </p>
 </div>
</div>
<br/>
</body>
</html>

Hope this helps

Good Luck

Categories: ASP.Net, CSS, Javascript

Create Collepse and Expand Menu

April 4, 2009 Leave a comment

Hi

try this example to create collepsed and Expand Menu using CSS and Javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Menu_Cases_Cases_DHTML_Menu_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
    <title>Untitled Page</title>
    <script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();
var currentOpenItemName="";
function showHide(theid)
{
    if(currentOpenItemName!="" && theid!=currentOpenItemName) showHide(currentOpenItemName);
    if (document.getElementById)
    {
       var switch_id = document.getElementById(theid);
        if(menu_status[theid] != 'show')
        {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
           currentOpenItemName = theid;
        }
        else
        {
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
           currentOpenItemName = "";
        }
    }
}

//-->
</script>

    <style type="text/css">
        .menu1
        {
        background-color:Olive;
 margin-left:25px;
 padding-left:20px;
 padding-top:2px;
 padding-bottom: 2px;
 display:block;
 text-decoration: none;
 color: #000000;
 height: 20px;
        width: 67px;
        border: thin solid #FF0000
        }
 .submenu
 {
  background-color:Blue;
  margin-left:25px;
 display: block;
 height: 19px;
 padding-left:20px;
 padding-top: 2px;
 color:White;
  width: 67px;
 }
 .hide
 {
 display: none;
 }
 .show
 {
 display: block;
 }
 </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="menu1" onclick="showHide('mymenu1')" >Menu 1</a>
    <div id="mymenu1" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>
 <a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div id="mymenu2" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>
 <a class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>
 <a class="menu1" onclick="showHide('mymenu4')">Menu 4 </a>
    <div id="mymenu4" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>
 <a class="menu1" onclick="showHide('mymenu5')">Menu 5 </a>
    <div id="mymenu5" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>

    </div>
    </form>
</body>
</html>

Hope this helps

Good Luck

Categories: ASP.Net, CSS, Javascript

Style for Button Control

March 27, 2009 Leave a comment

Hi

try this Example to make CSS for Button Control :-

<style>
.buttonBlue
{
 cursor: hand;
 background-color: #3C5F84;
 color: #F9A464;
 text-align: center;
 vertical-align: text-top;
 font-Weight: bold;
 font-size: 11pt;
 border: 0px Outset Transparent;
}
</style>
<asp:Button ID="btnSubmit" ToolTip="Submit Query" runat="server" Text="Submit" CssClass="buttonBlue" Height="100%" Width="100%" onclick="btnSubmit_Click" />

Good Luck

Categories: CSS

Border for Image with CSS

February 27, 2009 Leave a comment

Hi

try this example to make Border for Image with CSS

//– CSS for Image Border

*
{
   margin: 0;
   padding: 0;
}

body
{
   background-color:#827575;
   color: #c6d3d5;
   font: 75%/1.5em Verdana, Helvetica, Geneva, &quot;Helvetica Neue&quot;, sans-serif;
}

.test
{
   margin-left: 300px;
   padding-top:50px;
   width: 156px;
}

.imageStyle
{
   padding: 3px;
   background-color: #525252;
   border: 1px solid #c3cfd3;
}

//—ASP.NET Image Control

<div class="test">
  ASP.NET Image Control:
  <asp:Image ID="Image1" ImageUrl="~/Images/fender.jpg"   
     CssClass="imageStyle" runat="server" />
  <div style="clear:both;">Incorrectly Rendered</div>
</div>

//—HTML Image Tag

<div class="test">
  HTML img tag:
  <img src="~/Images/fender.jpg" id="Image2" alt="Correctly Rendered"
     class="imageStyle" runat="server" />
  <div style="clear:both;">Correctly Rendered</div>
</div>

Hope this helps

Good Luck

Categories: CSS