Computer Programming

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#box1
{
background-color : Gray;
height:200px;
width : 200px;
}

</style>
<script type ="text/javascript">
function fadeout(ele) {
var elem = document.getElementById(ele);
elem.style.transition = "opacity 1.0s linear 0s";
elem.style.opacity = 0;
}
function fadein(ele) {
var elem = document.getElementById(ele);
elem.style.transition = "opacity 1.0s linear 0s";
elem.style.opacity = 1;
}

</script>

<title>Change Background color</title>
</head>
<body>
<button onclick="fadeout('box1');"> fadeout</button>
<button onclick="fadein('box1');"> fadein</button>

<div id="box1">Paste your content here</div>
</body>
</html>

Code generate the following output

Element fadeout, FadeIn using Java Script

JavaScript

April 06, 2015

Example of Navigator object in Java Script

<!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>

<title>Navigator objects</title>
</head>
<body>
<script type="text/javascript" >
document.write("User Agent Header " + navigator.userAgent +"<br/>");
document.write("Browser Code name: " + navigator.appCodeName + "<br/>");
document.write("Browser name: " + navigator.appName + "<br/>");
document.write("Browser Version: " + navigator.appVersion + "<br/>");
document.write("Cookies Enabled " + navigator.cookieEnabled + "<br/>");
document.write("Platform " + navigator.platform + "<br/>");

</script>
</body>
</html>

Code generate the following Output

Example of Navigator object in Java Script

ASP.NET JQUERY

April 06, 2015

Resize Gridview Control using JQuery

Resizable() is the method, through which we can resize our asp.net control. Actually here we resize division tag using jquery and css, that is already available on this path.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

Through the jquery-ui.css, we can create a outer box around the controls. This css file contain a single class that is ui-widget-content, in which define some properrties, Check this snapshot.

And the jquery-ui.js file contain resizable() method, check this snap.

How to take some steps for doing this

1. Add a one link and two script file in the head tag.
2. Add this script tag , in which call resizable() method by the id of div tag.
3. Add a <div> tag with ui-widget-content class and id proerty
4. Take controls inside the <div>Controls</div> tag.
5. Bound the controls from data source.
6. Run this application

Full code

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

<head>

<title>Resizable ASP.NET Control</title>

$(function () {

$("#divresize").resizable();

})

</script>

</head>

<body>

<asp:GridView ID="GridView1" runat="server" Width="100%">

<HeaderStyle ForeColor="Orange" BackColor ="Green"

</asp:GridView>

</div>

</form>

</body>

</html>

Code generate the following output

Resize Controls at run time using JQuery-1

Resize Controls at run time using JQuery

JavaScript

April 06, 2015

Required validation in Java Script

<!DOCTYPE html>

<html>
<head>
<title>encode and decode</title>
<script type="text/javascript" >
function validation() {
var val = document.getElementById('in');
if (val.value.length == 0) {
alert("Required");

}
}

</script>
</head>
<body>
<h1>Example of required field validation control</h1>
<input type="text" name="gt" value="" id="in" />
<button onclick="validation();">perform validation</button>
</body>
</html>

Code generate the following output

JavaScript

April 06, 2015

Compare validation using Java Script

<!DOCTYPE html>
<html>
<head>
<title>encode and decode</title>
<script type="text/javascript" >
function validation() {

var firstvalue = document.getElementById('first');
var secondvalue = document.getElementById('second');
if (firstvalue.value != secondvalue.value) {
alert("Password not match");

}

}

</script>
</head>
<body>
<h1>Example of compare field validation control</h1>

Password<input type="password" name="gt" value="" id="first" /><br />
Re-type<input type="password" name="gt" value="" id="second" />
<button onclick="validation();">perform validation</button>

</body>
</html>

Code generate the following output

JavaScript

April 06, 2015

How to add TextBox value in Java Script

<!DOCTYPE html>

<html>
<head>
<title>encode and decode</title>
<script type="text/javascript" >

function validation() {

var firstvalue = document.getElementById('first');
var secondvalue = document.getElementById('second');
var finalvalue = eval((firstvalue.value)+ "+" +( secondvalue.value));
alert(finalvalue);

}

</script>
</head>
<body>
<h1>Addition of two or more number</h1>

Enter Number<input type="text" name="gt" value="" id="first" /><br />
Enter Second<input type="text" name="gt" value="" id="second" />
<button onclick="validation();">Add number</button>

</body>
</html>

Code generate the following output

JavaScript

April 06, 2015

Example of Count Down timer in Java Script

<!DOCTYPE html>

<html>
<head>
<title>encode and decode</title>
<script type="text/javascript" >
function Timercount(second,outwin) {

var stat = document.getElementById(outwin);
stat.innerHTML = "Please wait for " + second + "seconds";
if (second < 1) {
clearTimeout(timervalue);
stat.innerHTML = '<h3> CountDown Complete</h3>';
}
second--;
var timervalue = setTimeout('Timercount(' + second + ',"' + outwin + '")', 1000);

}

</script>
</head>
<body>
<div id="first"></div>
<script type="text/javascript">Timercount(10,"first");
</script>

</body>
</html>