Computer Programming

How to Navigate from page to specific URL

Add HyperlinkButton control with specified code , code is

<HyperlinkButton FontSize=" 30" Content="Google.com" NavigateUri=" http://www.google.com" Margin="272,218,0,475" Height="75" />

</Grid>

This code add into MainPage.xaml file

Code generate the following output

windows store How to Navigate from page to specific URL

How to Navigate from one page to another page in windows store app tutorial

Add click event handler with HyperLinkButton control look like

Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<HyperlinkButton Click="HyperlinkButton_Click" FontSize=" 30" Content="Move to Next page" Margin="272,218,0,475" Height="75" />

</Grid>

Add Handler code in MainPage.xaml.cs file

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)

{

this.Frame.Navigate(typeof(secondpage));

}

Code Generate the following output

How to Navigate from one page to another page in windows store app tutorial

Windows Store Apps

Windows Store: Hello World !

In this tutorial, you learn how to

Before you start
Create a new project
Hello World Output

Before you start...

To complete this tutorial, you need Windows 8.1 and Visual Studio 2013. To download them
You also need a developer license. For instructions, see Get a developer license.

Create a new project in Visual Studio

Step-1 : Launch Visual Studio 2013.
Step-2 : Select File > New Project.
Step-3 : In the left pane, expand Installed > Templates, then expand Visual Basic or Visual C# and pick the Windows Store template type.
Step-4 : In the center pane, select the Blank App template.
Step-5 : In the Name text box, enter name according you.
Step-6 : Click OK to create the project.

if you run the application at this point, you should see a nice "Hello World" message. If you're running the default themes, it will be white text on a black background.

JavaScript

April 06, 2015

Collapse or Expand slide using Java Script

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

</style>
<script type ="text/javascript">
function slideopen(ele) {
var elem = document.getElementById(ele);
elem.style.transition = "height 0.2s linear 0s";
elem.style.height = "200px";
}
function slideclose(ele) {
var elem = document.getElementById(ele);
elem.style.transition = "height 0.2s linear 0s";
elem.style.height = "0px";
}

</script>

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

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

Code generate the following

Collapse or Expand slide using Java Script

JavaScript

April 06, 2015

Element fadeout, FadeIn using Java Script

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