Friday, February 26, 2016

Bounce a circle with Css

Intoduction :-
Hii Friends...
Today I explain how to make a bouncing circle with the help of css.

DEMO:-

Welcome On Dot Net Modules

Example :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Welcome on Dot Net Modules</title>
<style type="text/css">
    body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 500px;
margin: 50px auto;
color: #444;
}
.circle {
background: rgb(36, 159, 163);
width: 130px;
height: 130px;
border-radius: 65px;
margin: 50px;
display: inline-block;
margin-left:165px;
}
.bounce {
animation: bounce 1s .5s;
transform: scale(0.85);
}

@keyframes bounce {
0% { transform: scale(1.1); opacity: 1 }
50% { transform: scale(1.6); opacity: .7; }
60% { transform: scale(0.6); opacity: 1 }
80% { transform: scale(0.95) }
100% { transform: scale(0.85) }
}
</style>
</head>
<body>
    <div style="border: 5px groove rgb(36, 159, 163);">
        <h1 style="color: rgb(36, 159, 163); font-style: italic; text-align: center">
            Welcome On Dot Net Modules</h1>
        <div class="circle bounce">
        </div>
    </div>
</body>
</html>

How to make color picker

Unknown 5:22 AM Asp.net No comments

Intoduction :-
Hii Friends...
Today i going to put a very interesting module i.e how to make a color picker module.
Its very interesting and very easy so now i put the code here.

Example :-

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

protected void btnSubmit_Click(object sender, EventArgs e)

{

pnlResults.Visible = true;

lblSelectedText.Text = txtCardText.Text;

lblSelectedColor.Text = txtCardColor.Text;

}

</script>

<title>Welcome on dotnet modules</title>

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<h1>Fill the color</h1>

<asp:Label

ID="lblCardText"

Text="Card Text"

AssociatedControlID="txtCardText"

runat="server" />

<br />

<asp:TextBox

ID="txtCardText"

Runat="server" />

<asp:Label

ID="lblCardColor"

Text="Card Color"

AssociatedControlID="txtCardColor"

runat="server" />

<br />

<asp:TextBox

ID="txtCardColor"

AutoCompleteType="None"

Runat="server" />

<asp:Button

ID="btnPickColor"

Text="Pick Color"

Runat="server" />

<asp:Label

ID="lblSample"

Runat="Server"> Welcome </asp:Label>

<cc1:ColorPickerExtender

ID="txtCardColor_ColorPickerExtender"

TargetControlID="txtCardColor"

PopupButtonID="btnPickColor"

PopupPosition="TopRight"

SampleControlID="lblSample"

Enabled="True"

runat="server">

</cc1:ColorPickerExtender>

<asp:Button

ID="btnSubmit"

Text="Submit"

Runat="server" OnClick="btnSubmit_Click" />

<asp:Panel ID="pnlResults" Visible="false" runat="server">

<h2>Your Selection</h2>

Selected Text:

<asp:Label

ID="lblSelectedText"

Runat="server" />

<br />

Selected Color:

<asp:Label

ID="lblSelectedColor"

Runat="server" />

</asp:Panel>

</div>

</form>

</body>

</html>

Calculator with Angular JS

Unknown 1:44 AM js No comments

Intoduction :-
Hii Friends...

Today I explain how to make a Calculator with the help of Angular JS. In this code i use some directives like data-ng-app , data-ng-init , ng-model. And i already explained these terms in my first post i.e Angular Directives . So now here i direct put my code.

DEMO

Calculator

Quantity: Price:

Result: {{quantity * price}}

Example :-

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div style="height: 225px; width: 405px; border: 2px groove rgb(36, 159, 163); text-align: center;">
<div data-ng-app="" data-ng-init="quantity=2;price=5">

<h2 style="color:rgb(36, 159, 163);">Calculator</h2>

Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">

<p><b>Result:</b> {{quantity * price}}</p>

</div>
</div>
</body>
</html>

Angular Directives

Unknown 12:52 AM js No comments

Intoduction :-
Hii Friends...

Today I explain about Angular Directives.

1) Angular JS use new attribute i.e called Directives.

2) Angular JS offers functionality to your applications because it has set of built-in directives.

3) There are many types of Directives like -

    * ng-app
    * ng-init
    * ng-model
    * ng-repeat

Now here I put a example on ng-repeat Directive.

Example :- 1

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="names=['Jorge','Herry','bets','renot']">
<p>List with ng-repeat:</p>
<ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
</ul>
</div>

</body>
</html>

DEMO

List of details:

{{ x.name + ', ' + x.country }}

Example :-2

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="names=[
{name:'Jorge',country:'Koria'},
{name:'Herry',country:'Bombey'},
{name:'Reney',country:'chaina'}]">

<p>List of details:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>

Angular Expressions

Unknown 2:07 AM js No comments

Intoduction :-

Hii Friends...

Today I explain about angular js expressions. this is similar to JavaScript expressions.

1) The expressions in angular JS we can written inside double braces.
    Like = {{ expression }}.

2) We can written expressions inside a directive.
    Like = ng-bind=" expression ".

3) These expressions are similar to JavaScript expressions and it has literals,variables and operators.
    Like = {{ firstName + " " + lastName }}

DEMO

My expression Result is : {{ 2 + 2 }}

Example :-

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app>
<p>My expression Result is : {{ 2 + 2 }}</p>
</div>

</body>
</html>

Angular Js Introduction

Unknown 9:35 AM js No comments

Intoduction :-

Hii Friends...

Today I explain about angular js. Angular js is a part of javascript but its extended.

1 ) AngularJS extends HTML with new attributes and its easy to learn.

2) AngularJS is perfect for Single Page Applications (SPAs).

3) AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

AngularJS extends HTML with ng-directives ->

* The ng-app directive defines an AngularJS application.

* The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

* The ng-bind directive binds application data to the HTML view.

DEMO

Enter in the input box:
Name :

Hii {{name}}

Example :-

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">

<p>Enter in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter Your Name"></p>
<h1>Hii {{name}}</h1>

</div>

</body>
</html>

3D Transform With Html or Css

Unknown 3:29 AM css, html No comments

Intoduction :-

Hii Friends...

Today I explain how to make 3D Transform With the help of Html or Css.

Welcome

.NetModules

HTML & CSS Code

<div class="original">

<div class="spin">
    <figure class="box box-1">Welcome</figure>
</div>
</div>

<div class="original">
<div class="spin">
    <figure class="box box-2">.NetModules</figure>
</div>
</div>
<style>
body {
color: #fff;
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
margin: 12px 15px;
}
.original,
.box {
border-radius: 6px;
}
.original {
background: #eaeaed;
border: 1px dashed #cecfd5;
float: left;
margin: 12px 15px;
}
.box {
background: #249FA3;
height: 95px;
line-height: 95px;
text-align: center;
width: 95px;
}
.spin {
cursor: pointer;
transform-style: preserve-3d;
}
.spin:hover {
    animation: spin 5s linear infinite;
}
@keyframes spin {
0% {
    transform: rotateY(0deg);
}
100% {
    transform: rotateY(360deg);
}
}
.box-1 {
transform: rotate(20deg);
}
.box-2 {
transform: rotate(-55deg);
}
</style>

Demo:-

Bootstrap Model

Unknown 9:48 AM Bootstrap No comments

Intoduction :-

Hii Friends...

Today I explain how to make a bootstrap model in asp.net . Its not so complicated its easy. here some terms that we use in this code so i explain them.

data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal

HTML & CSS Code

<body>

<div class="container">

<h2> Bootstrap Modal </h2>



<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>



<div class="modal fade" id="myModal" role="dialog">

<div class="modal-dialog">





<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">×</button>

<h4 class="modal-title">This is Header</h4>

</div>

<div class="modal-body">

<p>Welcome on Asp.net Module.</p>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</div>



</div>

</div>



</div>

</body>

Demo:-

how to make a popup

Unknown 10:39 AM js No comments

Intoduction :-

Hii Friends...

Today I explain how to make a popup with the help of java script in asp.net . Here i make a login form and show it in a popup box.

HTML & CSS Code

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

<html>

<head>

<title>LIGHTBOX EXAMPLE HERE</title>

<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 #a6c25c;

width:135px;

}

.button2

{

background-color:#a6c25c;

color:White;

font-size:11px;

font-weight:bold;

border:1px solid #7f9db9;

width:68px;

}

</style>

</head>

<body>

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

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a>

<div id="light" class="white_content">

<table cellpadding=0 cellspacing=0 border=0 style="background-color:#a6c25c;" width="100%"><tr><td height="16px"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="close.gif" style="border :0px" width="13px" align="right" height="13px"/></a></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" colspan="2" class="headertext" >Login Form Here </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="Button1" runat="server" Text="Sign In" class="button2"/>

<asp:Button ID="Button2" runat="server" Text="Sign Up" class="button2" /></td>

</tr></table></td></tr>

<tr><td height="10px"></td></tr>

</table>

</td></tr>

</table>

<div align="center" class=" headertext">

<asp:Label ID="txtlbl" runat="server" ></asp:Label></div>

</div>

<div id="fade" class="black_overlay"></div>

</form>

</body>

</html>

Demo:-

Friday, February 26, 2016

DEMO:-

Welcome On Dot Net Modules

Example :-

Tuesday, February 23, 2016

Saturday, February 20, 2016

Today I explain how to make a Calculator with the help of Angular JS. In this code i use some directives like data-ng-app , data-ng-init , ng-model. And i already explained these terms in my first post i.e Angular Directives . So now here i direct put my code.

DEMO

Calculator

Example :-

Today I explain about Angular Directives.

1) Angular JS use new attribute i.e called Directives.

2) Angular JS offers functionality to your applications because it has set of built-in directives.

3) There are many types of Directives like -

* ng-app * ng-init * ng-model * ng-repeat

Now here I put a example on ng-repeat Directive.

Example :- 1

<html><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><body><div ng-app="" ng-init="names=['Jorge','Herry','bets','renot']"> <p>List with ng-repeat:</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul></div></body></html>

DEMO

Example :-2

Friday, February 19, 2016

Hii Friends...

Today I explain about angular js expressions. this is similar to JavaScript expressions.

DEMO

<html><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><body><div ng-app><p>My expression Result is : {{ 2 + 2 }}</p></div></body></html>

Thursday, February 18, 2016

Hii Friends...

Today I explain about angular js. Angular js is a part of javascript but its extended.

1 ) AngularJS extends HTML with new attributes and its easy to learn.

DEMO

Hii {{name}}

Wednesday, February 10, 2016

Hii Friends...

Today I explain how to make 3D Transform With the help of Html or Css.

Welcome

.NetModules

HTML & CSS Code

<div class="original">

Friday, February 5, 2016

Intoduction :-

Hii Friends...

Today I explain how to make a bootstrap model in asp.net . Its not so complicated its easy. here some terms that we use in this code so i explain them.

HTML & CSS Code

Wednesday, February 3, 2016

Intoduction :-

Hii Friends...

Today I explain how to make a popup with the help of java script in asp.net . Here i make a login form and show it in a popup box.

HTML & CSS Code

Popular Posts

Blog Archive

About Me

* ng-app
* ng-init
* ng-model
* ng-repeat

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="names=['Jorge','Herry','bets','renot']">
<p>List with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

</body>
</html>

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app>
<p>My expression Result is : {{ 2 + 2 }}</p>
</div>

</body>
</html>