Disable Autocomplete in Asp.Net Textbox

In this article i will tell you how you can disable autocomplete in asp net textbox.This will help you to understand disable auto suggest in textbox.

There are two ways by which you can disable autosuggest first by adding autocomplete="off" on form tag and secnd by adding autocomplete="off" attribute on control.

First Way:

In above code auto suggest for all controls will get disables present in yout form.

Second Way:

In above code only auto suggest for the control present on the page will get disables.

Tags: Asp.Net , HTML , HTML5 , MVC

Css For Styling Input Button

In this article i will explain you how you can easily provide style to your input button just by applying style sheet.

Here is the code.

 

Css For Styling Input Button

.

Here is the style sheet which make your button fancy.

.buttonstyle {  border: 1px solid black;

    background-color: white;

    background-repeat: no-repeat;

    background-position: 1px center;

    padding: 1px 10px 1px 25px;

    height: 25px;

    cursor: pointer;

    font-family: Arial;

    background-image: url(add.jpg);

}

    

 

In above code i have taken two input button one with style sheet andanother without style sheet.

Now run the page

Tags: CSS/CSS3 , HTML , HTML5

How to Center a Div In a Div using Css stye sheet

In this article i will show how you can display a div inside the center of a div using simple css style sheet.

Here is the code

 

  

 

     This is demo

 

In above code i have just used simple style sheet for displaying the div at the  center of the another div

Now save it and open the file.

 

Tags: CSS/CSS3 , HTML

How to show horizontal and vertical scroll bar of a div using css

In this article i will show you how you can put scroll to your div control. In this will show you how you can show both horizontal and vertical scroll bar of a div using css.
So here is the css style.
Horizontal and vertical scroll bar

Eg:

How to show horizontal and vertical
scroll bar of a div using css

Horizontal and vertical scroll bar

How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css



Show only vertical scroll bar

Here is the example

How to show horizontal and vertical
scroll bar of a div using css

Show only vertical scroll bar

How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css





Show only Horizontal  scroll bar

Here is the example

How to show horizontal and vertical
scroll bar of a div using css

Show only Horizontal  scroll bar

 to show horizontal and vertical scroll bar of a div using cssHow
 to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css
How to show horizontal and vertical scroll bar of a div using css

Tags: CSS/CSS3

Accordion Menu Example Using jquery In Asp.Net

In this article i will show you how you can create a accordion menu using jquery. In this show accordion jquery examples  ,accordion jquery plugin.

so For this article here is the code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication1.WebForm10" %>




   
   
   
   
   

   

   

       

           Menu Item 1

       

           
                Menu Item 1  Menu Item 1  Menu Item 1  Menu Item 1
           

       

       

            Menu Item 2

       

           
                Menu Item 2  Menu Item 2  Menu Item 2  Menu Item 2  Menu Item 2  Menu Item 2
           

       

       

            Menu Item 3

       

           
               Menu Item 3  Menu Item 3  Menu Item 3  Menu Item 3  Menu Item 3  Menu Item 3  Menu Item 3
           

          
       

       

             Menu Item  4

       

            Menu Item  4 Menu Item  4  Menu Item  4 Menu Item  4 Menu Item  4 Menu Item  4 Menu Item  4 Menu Item  4 
       

   

   

Now run the code

Tags: Asp.Net , CSS/CSS3 , Javascript , jQuery

Change Textbox Background And Border Color on Focus,on Blur using jQuery In Asp.net

In this article i will show you how you can change the background color of a textbox in asp.net using jquery.
For  this you needed to create a css style. Just check the below style sheet. Add this style sheet at the header of your page.

<style type="text/css">

.focus {

border: 1px solid green;

background-color: yellow;

}

</style>

Now on your add the jquery reference .

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

Now add as aspx textbox 

<asp:TextBox ID="txtcountry" runat="server"/>

Now copy the below jquery code at the header of your page.

<script type="text/javascript">

$(document).ready(function() {

$(`INPUT[type="text"]`).focus(function() {

$(this).addClass("focus");

});

$(`INPUT[type="text"]`).blur(function() {

$(this).removeClass("focus");

});

});

</script>

in above code we have applied the style sheet to textbox on focus of the mouse and remove the css on blur event the moue from textbox.

Now after combing the code you page will look as shown below.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Change textbox background color on focus in jquery</title>

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

</script>

<script type="text/javascript">

$(document).ready(function() {

$(`INPUT[type="text"]`).focus(function() {

$(this).addClass("focus");

});

$(`INPUT[type="text"]`).blur(function() {

$(this).removeClass("focus");

});

});

</script>

<style type="text/css">

.focus {

border: 1px solid green;

background-color: yellow;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:TextBox ID="txtcountry" runat="server"/>

</div>

</form>

</body>

</html>

Now nun the page. Initially Your textbox will look as shown below.



And as you put your mouse inside the textbox you box will look as shown below.

Tags: Asp.Net , CSS/CSS3 , jQuery

LightBox Effect In ASP.NET Using CSS & Javascript

In this article i will show you how you can create a login form with lightbox effect by using css and javascript. So for this first yo needed to create a asp.net application. In this i have added css style for adding light box effect and javascript to show and hide the div, which is used for showing the effect.


Now add the below style sheet in header of your page.

<style type="text/css">
.black_overlay
{display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}.white_content
{display: none;
position: absolute;
top: 25%;
left: 35%;
width: 35%;
padding: 0px;
border: 0px solid #a6c25c;
background-color: white;
z-index: 1002;
overflow: auto;
}.headertext
{font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #f19a19;
font-weight: bold;
}.textfield
{border: 1px solid black;
width: 135px;
}.buttonclass
{background-color: blue;
color: White;
font-size: 11px;
font-weight: bold;
border: 1px solid #7f9db9;
width: 68px;
}</style>

In this style sheet black over lay and white content is the style is the css which will put the light box effect.

Now Add the controls on your page to prepare the login form.

<a href="javascript:void(0)" onclick="javascript:DisplayBox();">Click here to display lightbox effect</a>
<div id="boxdiv" class="white_content">
<table cellpadding="0" cellspacing="0" border="0" style="background-color: Yellow;"
width="100%">
<tr>
<td height="16px">

</td>
</tr>
<tr>
<td style="padding-left: 16px; padding-right: 16px; padding-bottom: 16px">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #fff"
<div id="Div1" class="white_content">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: Yellow;"
width="100%">
<tr>
<td height="16px">
</td>
</tr>
<tr>
<td style="padding-left: 16px; padding-right: 16px; padding-bottom: 16px">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #fff"
width="100%">
<tr>
<td align="center" class="headertext" colspan="2">
Login Form</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
<td align="center">
<table>
<tr>
<td align="right">
Username:</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" CssClass="textfield"></asp:TextBox>
<%----%>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
<tr>
<td align="right">
Password:</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" CssClass="textfield"></asp:TextBox><%----%>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1" runat="server" class="buttonclass" Text="Login" />
<input class="buttonclass" onclick="javascript:CloseBox();" type="button"value="Close" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
</table>
</td>
</tr>
</table>
<div align="center" class=" headertext">
<asp:Label ID="Label1" runat="server"></asp:Label></div>
</div>
<div id="Div2" class="black_overlay">
</div> width="100%">
<tr>
<td align="center" colspan="2" class="headertext">
Login Form</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
<td align="center">
<table>
<tr>
<td align="right">
Username:</td>
<td>
<asp:TextBox ID="txtUser" runat="server" CssClass="textfield"></asp:TextBox>
<%----%>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
<tr>
<td align="right">
Password:</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" CssClass="textfield"></asp:TextBox><%----%>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnlogin" runat="server" Text="Login" class="buttonclass" />
<input type="button" value="Close" onclick="javascript:CloseBox();"class="buttonclass" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10px">
</td>
</tr>
</table>
</td>
</tr>
</table>
<div align="center" class=" headertext">
<asp:Label ID="lblmessage" runat="server"></asp:Label></div>
</div>
<div id="outerdiv" class="black_overlay">
</div>

Now add the below javascript in the header of your page.

<script language="javascript">
function DisplayBox() {
document.getElementById(`boxdiv`).style.display = `block`;
document.getElementById(`outerdiv`).style.display = `block`;
}function CloseBox() {
document.getElementById(`boxdiv`).style.display = `none`;
document.getElementById(`outerdiv`).style.display = `none`;
}</script>

In above javascript code display box is used for displaying the box and close box is used for hiding the box.

Now run the page and you will get the output.




Now click on link



As you click on close button box will get disappear.

Tags: Asp.Net , CSS/CSS3 , Javascript