Yasserzaid’s Weblog

May 20, 2009

Change Textbox Border on focus

Filed under: ASP.Net, CSS, Javascript — yasserzaid @ 7:56 am

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

May 1, 2009

AJAX Update Progress with CSS

Filed under: AJAX, CSS — yasserzaid @ 11:12 pm

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

April 21, 2009

Create Popup Panel

Filed under: ASP.Net, CSS, Javascript — yasserzaid @ 9:43 pm

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

April 4, 2009

Create Collepse and Expand Menu

Filed under: ASP.Net, CSS, Javascript — yasserzaid @ 1:05 pm

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

March 27, 2009

Style for Button Control

Filed under: CSS — yasserzaid @ 11:26 am

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

February 27, 2009

Border for Image with CSS

Filed under: CSS — yasserzaid @ 12:24 pm

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

February 23, 2009

Image with LinkButton Control using CSS

Filed under: ASP.Net, CSS — yasserzaid @ 5:22 pm

Hi

try this example:-

<div class="button">
   <asp:LinkButton ID="btnSave" runat="Server" CssClass="bSave" Text="Save User" OnClick="btnSave_Click" 

ValidationGroup="userDetails"  UseSubmitBehavior="false" />
</div>

<div class="button">
    <asp:LinkButton ID="btnCancel" runat="Server" CssClass="bCancel" Text="Cancel" OnClick="btnCancel_Click"

CausesValidation="False"   UseSubmitBehavior="false" />
</div>

<div class="button">
    <asp:LinkButton ID="btnDeleteUser" runat="Server" CssClass="bDelete" Text="Delete" UseSubmitBehavior="false" />
</div>
<div class="clear"></div>

//–and CSS

.button
{

    background-color:#84A1D6;
    border:solid 2px #415D9B;
    margin:5px;
    min-width:70px;
    height:20px;
    float:left;
    padding-left:3px;
}

.button a
{
    display:block;
    padding:2px 5px 2px 20px;
    min-width:70px;
}

.button:hover
{
    background-color: #a0bdf2;
}

.button a:active
{
    border-top:solid 1px black;
}

/* Button Style */

.button a.bLogin
{
    background-image: url(Images/Login.png);
    background-position:left;
    background-repeat:no-repeat;   
}

.button a.bSave
{
    background-image: url(Images/Save.png);
    background-position:left;
    background-repeat:no-repeat;   
}

.button a.bCancel
{
    background-image: url(Images/Cancel.png);
    background-position:left;
    background-repeat:no-repeat;   
}

Hope this helps

Good Luck

February 20, 2009

LinkButton with Image

Filed under: ASP.Net, CSS — yasserzaid @ 4:09 pm

Hi

try this example:-

<style type="text/css">
    .icon-cancel {
    background: url(images/error.gif) no-repeat left top;
    display:inline;
    padding-left:18px;
    margin-left: 18px;
    padding-right:10px;
    text-decoration:none;
    }
</style>

<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
            CommandName="Cancel" CssClass="icon-cancel" Text="Cancel"></asp:LinkButton>

Hope this helps

Good Luck

January 29, 2009

Remooving a scrolbar from a Textbox

Filed under: ASP.Net, CSS — yasserzaid @ 7:57 pm

Hi

try this example:

<asp:TextBox ID="BigTextBox"  runat="server" Style="white-space: pre; overflow: hidden;" Height="401px" TextMode="MultiLine" Width="484px" />

//——or this

<style>.text{overflow: hidden;}</style>

<asp:TextBox ID="BigTextBox" runat="server" Style="white-space: pre;" Height="401px" TextMode="MultiLine" Width="484px"  CssClass="text"/>

Good Luck

January 9, 2009

Apply CSS in Code

Filed under: ASP.Net, CSS — yasserzaid @ 12:22 pm

Try this example to apply css reference to header from code behind (C#)

protected void Page_Load(object sender, EventArgs e)
    {
        HtmlLink css = new HtmlLink();
        css.Href = ResolveClientUrl(“~/style/StyleSheet.css”);
        css.Attributes["rel"] = “stylesheet”;
        css.Attributes["type"] = “text/css”;
        css.Attributes["media"] = “all”;
        Page.Header.Controls.Add(css);
    }

protected void Button1_Click(object sender, EventArgs e)
    {
        HtmlLink css = new HtmlLink();
        css.Href = ResolveClientUrl(“~/style/StyleSheet2.css”);
        css.Attributes["rel"] = “stylesheet”;
        css.Attributes["type"] = “text/css”;
        css.Attributes["media"] = “all”;
        Page.Header.Controls.Add(css);
    }

Hope this helps

Good Luck

Older Posts »

Blog at WordPress.com.