Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Wednesday, 1 January 2014

Working with label Control and its Properties in Asp.net

01:33  , , , ,  No comments 

 





Description:- A Label is used to display the text on the Page.Using TextBox and Button we can display the text from textbox into Label control.The properties of labels are as follows


    

  • AccessKey,Attributes,BackColor ,BorderColor,BorderStyle,BorderWidth,CssClass,Enabled,Font,EnableTheming,ForeColor,Height, IsEnabled,SkinID,Style,TabIndex,ToolTip,Width,EnableViewState,Visible,
    • 

  • Now in this Example we need one Text Box,one Button and one Label to display the Text.
    • 








Demo:- 





















Design Code:-  
 Code Behind:- 
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void BtnlblText(object sender, EventArgs e)
    {
        lbltext.Text = TxTLabel.Text;
    }

}

Read More

Friday, 26 July 2013

Change Menu Hover Styling in Asp.net

02:57  , , ,  No comments

Description:- In Previous articles We have learned Range Validator Email and Phone Number , Web Url Address Validation. Now in this Article We Describe How to use Range Validator Between Two values.Now in this article we learn How to change Menu Style on hover.
Demo:- 


Coding:-  

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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">
   
        #mnuMyWeb
        {
            background:darkgreen;
            border:groove 3px darkblue;
        }
       
        #mnuMyWeb a
        {
            border-right:solid 1px lightyellow;
            color:lightyellow;
            padding:5px 8px 5px 8px;
            display:inline-block;
         }
       
        #mnuMyWeb a:hover
        {
            background:lightyellow;
            color:darkgreen;
            }
       
        #mnuMyWeb a.active
        {
            background:darkblue;
            color:Red;
            }
       
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Menu ID="mnuMyWeb" Orientation="Horizontal" runat="server">
            <Items>
                <asp:MenuItem Text="Home" Selected="true" NavigateUrl="~/Home.aspx" />
                <asp:MenuItem Text="About Us" NavigateUrl="~/AboutUs.aspx" />
                <asp:MenuItem Text="Services" NavigateUrl="#" />
                <asp:MenuItem Text="Contacts" NavigateUrl="#" />
            </Items>
        </asp:Menu>
    </div>
    </form>
</body>
</html>

Read More

Friday, 14 June 2013

Allow only Numbers in Textbox Using JavaScript.

09:56  ,  2 comments

 Description:- Dear Friends in My some previous article We Learned about Only Alphabets allow in textbox in javaScript, JQuery Javascript Some Tutorial Like as easeOut Effect in JQuery, How To make Slider in JavaScript,Wait for Downloading Counter,Highlight Searched Text in Gridview,Dropdown list atteched with Selection of another DropDown and many more Article on Asp.net,Css,JavaScript,Html,Jquery.Now In this Article We Learn That How to allow only Numbers in textbox Using JavaScript .

Demo:-
                           
                           

Coding:-

<html>
<head>
    <title>allwon only numbers in textbox using JavaScript</title>
    <script language="Javascript" type="text/javascript">

        function NumberOnly(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if (charCode > 31 && (charCode < 48 || charCode > 57)) {
                    return false;
                }
                return true;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>
</head>
<body>
    <table align="center">
        <tr>
            <td>
                <input type="text" onkeypress="return NumberOnly(event,this);" />
            </td>
        </tr>
    </table>
</body>
</html>

Read More

Thursday, 13 June 2013

Show Hide Image Programmatically in Asp.net.

10:32  , ,  No comments

Description:- Dear Friends in My some previous article We Learned about JQuery Javascript Some Tutorial Like as easeOut Effect in JQuery, How To make Slider in JavaScript,Wait for Downloading Counter,Highlight Searched Text in Gridview,Dropdown list atteched with Selection of another DropDown and many more Article on Asp.net,Css,JavaScript,Html,Jquery.Now In this Article We Learn That how to Show hide Image or any other control programmatically in Asp.net.


Demo:-



Coding:-

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
    protected void Button1_Click(object sender, System.EventArgs e)
    {
        Image1.Visible = false;
    }
    protected void Button2_Click(object sender, System.EventArgs e)
    {
        Image1.Visible = true;
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to show, hide, visible TextBox programmatically</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style=" background-color:orange; color :white; width: 321px; height: 27px;">Show Hide controls in Asp.net </h2>
         
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         
        <asp:Image ID="Image1" runat="server" ImageUrl="~/1.jpg" Height="281px"
            Width="274px" />
        <br /><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button  
             ID="Button1"  
             runat="server" BackColor="OrangeRed"  
             ForeColor="White"
             Text="Hide Love"
             OnClick="Button1_Click"
             Font-Bold="true"
             />
        <asp:Button  
             ID="Button2"  
             runat="server" BackColor="OrangeRed"  
             Font-Bold="true"
             ForeColor="White"
             Text="Show Love"
             OnClick="Button2_Click"
             />
    </div>
    </form>
</body>
</html>  

Read More

Tuesday, 11 June 2013

How to make A Calculator in JavaScript

10:16  ,  No comments

Description:- In My Previous Article I Explained About How To make Slider in JavaScript,Wait for Downloading Counter,Highlight Searched Text in Gridview,Dropdown list atteched with Selection of another DropDown and many more Article on Asp.net,Css,JavaScript,Html,Jquery.Now in this article i will Explain How to create a Calculater  using JavaScript,


Demo:-

Coding:-

<html>
<head>
<title>On Page Javascript</title>
<script type="text/javascript" language="javascript">
function calc()
{
var v1 = document.getElementById("txtV1").value;
var v2 = document.getElementById("txtV2").value;
var op = document.getElementById("selOperator");
op = op.options[op.selectedIndex].value;
if(chkNumeric(v1)&&chkNumeric(v2))
{
var lbl = document.getElementById("lblAnswer");
if(op == '+')
lbl.innerHTML = parseFloat(v1) + parseFloat(v2);
else if(op == '-')
lbl.innerHTML = parseFloat(v1) - parseFloat(v2);
else if(op == '*')
lbl.innerHTML = parseFloat(v1) * parseFloat(v2);
else if(op == '/')
lbl.innerHTML = parseFloat(v1) / parseFloat(v2);
}
else
{
if(!chkNumeric(v1) && !chkNumeric(v2)) alert("Please enter Numeric Values in both Boxes.");
else if (!chkNumeric(v1)) alert("Please enter a Numeric Value in First Box.");
else if(!chkNumeric(v2)) alert("Please enter a Numeric Value in Second Box.");
}
}
function chkNumeric(v)
{
var isvalid = true;
var validletters = "0123456789.";
for(i=0;i<v.length;i++)
{
if(validletters.indexOf(v.charAt(i),0)<0)
{
isvalid = false;
break;
}
}
return isvalid;
}
</script>
</head>
<body>
<input type="text" id="txtV1"/>&nbsp;
<select id="selOperator">
<option selected="selected" value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">/</option>
</select>&nbsp;
<input type="text" id="txtV2"/>&nbsp;
<input type="button" value="=" onclick="calc()"/>&nbsp;&nbsp;
<label id="lblAnswer"></label>
</body>
</html>

Read More

Sunday, 9 June 2013

How to make slider in JavaScript with equal time Difference.

00:32  ,  No comments

Demo:-
             



About:- In the previous Article We Learn how Wait time counter in JavaScript And Now in this Article We Learn How to make a simple slider using  JavaScript.You can increase or decrease the time to change the speed of Image in the code.Please just change the images and add your image to the coding.


Coding:-


<html>
<head>
<title>Slider</title>
<script type="text/javascript" language="javascript">
function startslider(imgindex)
{
var arrImages = new Array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');
var arrAlts = new Array('Alt1','Alt2','Alt3','Alt4','Alt5');
var imge = document.getElementById("imgSlider");
imge.src = 'images/' + arrImages[imgindex];
imge.alt = arrAlts[imgindex];
if(imgindex == 4) imgindex = 0;
else imgindex++;
setTimeout('startslider(' + imgindex +')',1000); }
</script>
</head>
<body onload="startslider(0)">
<img src="" alt="" id="imgSlider" style="width:480px;height:220px;border:solid 2px black;"/>
</body>
</html>

Read More

Saturday, 8 June 2013

Wait for Downloading Or Click Here To Download Counter in JavaScript.

00:46  , ,  No comments

Demo:-  

About:- In Previous Article I Write About How to Highlight Searched Text In Gridview . In this Article using JavaScript  Learn How to create time wait Counter for downloading anything.

Coding:-

<html>
<head>
<title>Counter Example</title>

<script type="text/javascript" language="javascript">
function startcounter(s)
{
var de = document.getElementById("dCounter");
de.innerHTML = 'Please Wait For<br>' +  s  + '<br>Seconds';
if(s == 0)
{
document.getElementById("dAd").style.display = 'none';
document.getElementById("dDownload").style.display = 'block';
}
else
{
s--;
setTimeout('startcounter(' + s + ')',500);
}
}
function hidedcounter()
{
document.getElementById("dCounter").style.display = 'none';
}
</script>
</head>
<body onload="startcounter(10)">
<center>
<div id="dCounter" style="font:bold 30px verdana;"></div>
<br><br>
<div id="dAd">
<img src="hydrangeas.jpg" width="300" height="300" border="1" alt="Advertisement"/>
<br><br>
Or <br><a href="#" onclick="startcounter(0),hidedcounter()">Click Here</a>
</div>
<div id="dDownload" style="display:none;">
<input type="button" value="Download"/>
</div>
</center>
</body>
</html>

Read More
Subscribe to: Posts (Atom)