Showing posts with label js. Show all posts

Friday, February 3, 2017

How To Create Image wipe Effect With CSS3 Webkit Animation

Intoduction :-
Hii Friends...

Today I explain how to create a Image wipe effect with CSS3. CSS transition and animations provide a way for web developers to describe various kind of animation of CSS properties. you can use this code in your project copy this code and paste it.
Demo :-

Example :-

<!DOCtYPE htMl>
<html>

<head>
   <meta charset="utf-8">

   <title>C# jadu Image Wipe</title>
   <style>

   @-webkit-keyframes wipe {
           0% {
               -webkit-mask-position: 0 0;
           }
           100% {
               -webkit-mask-position: -1200px -1200px;
           }
       }

       #rollover {
           width: 330px;
           height: 310px;
           position: relative;
           border: 8px solid #eee;
            margin-left: 50px;
            margin-top: 50px;
           -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
       }

       #rollover div {
           position: absolute;
           top: 0;
           left: 0;
       }

       #rollover div:nth-child(2) {
           -webkit-transition: -webkit-mask-position 1s ease;
           -webkit-mask-size: 600px 600px;
           -webkit-mask-image: -webkit-gradient(linear, left top, right top,
                   color-stop(0.00, rgba(0,0,0,1)),
                   color-stop(0.35, rgba(0,0,0,1)),
                   color-stop(0.50, rgba(0,0,0,0)),
                   color-stop(0.75, rgba(0,0,0,0)),
                   color-stop(1.00, rgba(0,0,0,0)));
       }

       #rollover div:nth-child(2):hover {
           -webkit-mask-position: -300px -300px;
       }

   </style>

</head>

<body>
   <div id="page-wrap">
       <div id="rollover">
           <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlEf-315eBzFgzsw8kpIJrhT69UIYJKtR4HsA8zGKQq6G2_xAuBz2g9Sw-EngxVeB3vySoZA-2LWFbksqNPSLML7HikbiV5U9iWseFBL6VIah4MykOz_WzBIMqfOKHUgsPwSCX6mSDhHg/w140-h87-p/AsPDOtNEt.jpg" alt="Smile"></div>
           <div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvWNItObgKhKiv-ahgCUQE7vpfahTmyZrnJcmyBvXsKw_1oLQScNMvNUn-L94sfE-ubpgj5Sm8k4Xw69L6AQcQI_0gYQNe6K83wVgGezxg02315r0ryZW-HPKJ-ZCa08UVnmZ_S95h8A/w140-h140-p/AspDotNet.jpg" alt="Sleep"></div>
       </div>
   </div>
</body>
</html>

jQuery image slider with three panels and 3D look

Unknown 4:57 AM js No comments

Intoduction :-
Hii Friends...

Today I explain How To make jQuery image slider with three panels and 3D look,
If you are a web designer or developer you are already aware of how to work jQuery
and CSS. CSS3 and jQuery have smart changes in web development. you Want to animate images or texts then you can easily with the help of Jquery and css3. For this I use animated hover effects,elastic effects, buttons with built-in progress bars,light boxes, image gallery effects, text effects and zoom-in effects.

Demo :-

Example :-

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome On DotNetModules</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Prata'
        rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="js/modernizr.custom.26887.js"></script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="css/noscript.css" />
    </noscript>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="fs-slider" id="fs-slider">
                <figure>
                       <img src="images/1.jpg" alt="image01" />
                       <figcaption>
                           <h3>Lorem Ipsum</h3>
                           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                       </figcaption>
                   </figure>
                <figure>
                       <img src="images/2.jpg" alt="image02" />
                       <figcaption>
                           <h3>Lorem Ipsum</h3>
                           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                       </figcaption>
                   </figure>
                <figure>
                       <img src="images/3.jpg" alt="image03" />
                       <figcaption>
                           <h3>Lorem Ipsum</h3>
                           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                       </figcaption>
                   </figure>
                <figure>
                       <img src="images/4.jpg" alt="image04" />
                       <figcaption>
                           <h3>Lorem Ipsum</h3>
                           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                       </figcaption>
                   </figure>
                <figure>
                       <img src="images/5.jpg" alt="image05" />
                       <figcaption>
                           <h3>Lorem Ipsum</h3>
                           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                       </figcaption>
                   </figure>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.imgslider.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#fs-slider').imgslider();

        });
       </script>
</body>
</html>

Dear friends if you need this code. I will provide you Zip. Put your EmailId in comment box.

How To scroll from bottom to top

Unknown 3:10 AM js 1 comment

Intoduction :-
Hii Friends...

Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jquery. In order to make the Scroll to Bottom action smooth,
jQuery animation has been used. The jQuery scrollTop property is used to set the position of the browser Scrollbar. The page is scrolled to Top or Bottom position
by setting the scrollTop property.Through this button, we can back to the top section from the bottom section of the web page without manual page scrolling.

Example :-
<img src="img/BackToTopArrow.png" class="on-click-scroll-page-image" title="Go To Top" />

<style>
.on-click-scroll-page-image
        {
            max-width:50px;
            position:fixed;
            cursor:pointer;
            bottom:5px;
            right:5px;
            display:none;
        }

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>

        $(document).ready(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 10) {
                    $('.on-click-scroll-page-image').show();
                }
                else {
                    $('.on-click-scroll-page-image').hide();
                }
            });
            $('.on-click-scroll-page-image').click(function () {
                    $("html, body").animate({ scrollTop: 0 }, 600);
                    return false;
                         });
        });

    </script>

Auto-Hiding Navbar with Javascript

Unknown 5:53 AM js 1 comment

Intoduction :-
Hii Friends...
today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with big name brands like Facebook, Twitter, Google, LinkedIn, and others using this pattern. Other apps and websites are already doing this, and it’s pretty sweet. Here’s how you do it.

DEMO:-

Go quickly to ->
Mobiles
AC
Refrigerators
Cameras
Sports

Example :-

<style type="text/css">

.topper-link
{
list-style:none;
background:#fff;
width:100%;
text-align:center;
box-shadow: 2px 2px 3px #000;
height:35px;
}
.topper-link li
{
display:inline-block;
color:#333;
}
.tp1
{

}
.topper-link li a
{
border-right: 1px solid #333;
color: #333;
display: block;
padding: 5px 10px;
text-decoration: none;
}
</style>

<div id="scid" class="row">
    <div class="container">
        <div class="top_menu tp1">
            <ul class="topper-link" style="margin-top: 3px; padding-top: 3px;">
                <li>Go quickly to -> </li>
                <li><a href="#">Mobiles</a> </li>
                <li><a href="#">Books</a> </li>
                <li><a href="#">Food</a> </li>
                <li><a href="#">Lighting</a> </li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).scroll(function () {
        if (($(this).scrollTop() / 10) > 10) {
            $('#scid').css('display', 'none');
        }
        else {
            $('#scid').css('display', 'block')

        }
    });
</script>

</div>
</div>

</div>

Get dropdown list text and value with javascript

Unknown 4:53 AM js No comments

Intoduction :-
Hii Friends...
Today I explain how to get a dropdown list text and value with the help of javascript. The main point is it depends on .text and .value. If you want to get a value of dropdown selected value then you write (.value ) otherwise you write (.Text) .

Example :-

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Welcome On Asp.Net Modules</title>
    <script type="text/javascript">
        function GetCountryDetails() {
            var name = document.getElementById("ddlName");
            document.getElementById('lbltxt').innerHTML = name.options[name.selectedIndex].text;
            document.getElementById('lblid').innerHTML = name.options[name.selectedIndex].value;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table width="50%">
        <tr>
            <td align="right">
                Select Name:
            </td>
            <td>
                <asp:DropDownList ID="ddlName" runat="server" onchange="GetCountryDetails()">
                    <asp:ListItem Text="Select" Value="0" />
                    <asp:ListItem Text="Jorge" Value="1" />
                    <asp:ListItem Text="Herry" Value="2" />
                    <asp:ListItem Text="Enguju" Value="3" />
                    <asp:ListItem Text="Yuyu" Value="4" />
                    <asp:ListItem Text="Gerry" Value="5" />
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td align="right" style="font-family: Verdana; font-size: 10pt; color: Black">
                Selected Text:
            </td>
            <td>
                <b>
                    <label id="lbltxt" />
                </b>
            </td>
        </tr>
        <tr>
            <td align="right">
                Selected text value:
            </td>
            <td>
                <b>
                    <label id="lblid" />
                </b>
            </td>
        </tr>
    </table>
    </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>

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

How to to toggle with js

Unknown 9:47 PM js No comments

Intoduction :-

Hii Friends...

Today I explain how to toggle a panel on click event with the help of Js. In Js there are many events like mouse-over,mouse-down,key press etc. So I explain this with the code.

Step : 1 The Code goes here :->

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("#sheetal").click(function(){

$("#panel").slideToggle("slow");

});

</script>

<style>

#panel, #sheetal {

padding: 5px;

text-align: center;

background-color: #249FA3;

border: solid 1px #FFF;

}

#panel {

padding: 50px;

display: none;

}

</style>

</head>

<body>

<div id="sheetal">Click Here</div>

<div id="panel">Welcome On DotnetModules Blog</div>

</body>

</html>

DEMO:-

1) When On Click

Friday, February 3, 2017

Wednesday, January 25, 2017

Monday, January 9, 2017

Friday, April 15, 2016

Example :-

<style type="text/css">

.topper-link{list-style:none;background:#fff;width:100%;text-align:center;box-shadow: 2px 2px 3px #000;height:35px;}.topper-link li{display:inline-block;color:#333;}.tp1{

}.topper-link li a{border-right: 1px solid #333;color: #333;display: block;padding: 5px 10px;text-decoration: none;} </style>

</div>

Thursday, March 3, 2016

Example :-

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

Thursday, December 31, 2015

Popular Posts

Blog Archive

About Me

.topper-link
{
list-style:none;
background:#fff;
width:100%;
text-align:center;
box-shadow: 2px 2px 3px #000;
height:35px;
}
.topper-link li
{
display:inline-block;
color:#333;
}
.tp1
{

}
.topper-link li a
{
border-right: 1px solid #333;
color: #333;
display: block;
padding: 5px 10px;
text-decoration: none;
}
</style>

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