Sunday, November 29, 2015

Jquery: Open an Image in popup on thumbnail click

In this article I am going to explain how to open image in popup on thumbnail click using Jquery.


Description:
To implement this functionality I am using fancybox Jquery plugin. When user move the cursor to thumbnail/image, preview icon become visible and fade out effect will be applied. When user clicks on preview icon image will be open in a popup.

Implementation:
Add the below given style to CSS file or in web page before closing </head> tag.

Saturday, November 28, 2015

Asp.net: Search and highlight the text In Gridview

In this article I am going to explain how to search the record and highlight in Gridview using Asp.net

In the previous article I have explained Open image in popup using jquery and Imagehover effect using CSS

Description:
I have created a table Tb_movie and displaying the records in gridview data control.

I want to filter the records based on movie name. To implement this functionality I have create two procedure one to bind the data to gridview and another one to filter the record.

Implementation:

Friday, November 27, 2015

Open image in popup using jquery

In this article I am going to explain how to open image in popup using Jquery.


Description:
To implement this functionality I am using fancybox Jquery plugin. When user move the cursor to thumbnail/image, preview icon become visible and fade out effect will be applied. When user clicks on preview icon image will be open in a popup.

Implementation:
Add the below given style to CSS file or in web page before closing </head> tag.

Wednesday, November 25, 2015

Image hover effect using CSS

In this article I am going to explain how to apply hover effect on image using CSS transitions property.


Description:
CSS3 transitions allow elements to change the value over a specified smoothly.

Implementation:
Add the given style to CSS file or before closing the </head> tag.
<style>
.view {
   width: 500px;
   height: 400px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 500px;
   height: 400px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view a.info {
   background:url(img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;

Monday, November 23, 2015

Image hover effect using Jquery and CSS

In this article I am going to explain how to applying hover effect to image/images using jquery and css.

Description:

To apply image hover effect using Jquery and CSS. On mouse hover its fades the image/images.

Implementation:

Add the below given style to stylesheet or add it before closing </head> tag.
    <style>
        table img {
        width:250px;
        }
        span.roll {
    background:url(images/mag.png) center center no-repeat #000;
    height: 141px;
    position: absolute;
    width: 250px;
    z-index: 10;           
            -webkit-box-shadow: 0px 0px 4px #000;
            -moz-box-shadow: 0px 0px 4px  #000;
            box-shadow: 0px 0px 4px  #000;
}
span.rollover {
            opacity: 1;
            -o-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -webkit-transition: -webkit-transform 1s;
            background:url(images/mag.png) center center no-repeat #000;
            cursor: pointer;
            height: 141px;
            width: 250px;
            position: absolute;
            z-index: 10;
            opacity: 0;
}
span.rollover:hover {
            opacity: .7;
            -o-transition-duration: 1s;
            -moz-transition-duration: 1s;
            -webkit-transition: -webkit-transform 1s;
            -webkit-box-shadow: 0px 0px 4px #000;
            -moz-box-shadow: 0px 0px 4px #000;
            box-shadow: 0px 0px 4px #000;
}
    </style>

Wednesday, November 4, 2015

Generate unique OTP in asp.net using C#, vb.net

In this article I am going to explain how to generate unique OTP (one time password) in asp.net

Description:

OTP stand for one time password. It is a password that is valid for only one login session or transaction. It is widely used by the banks for transactions. It can be numeric as well as alphanumerical.

Implementation:

Method (code) to generate the numeric OTP:
Add a webform to project. Drag and drop the required control from toolbox to webform. Below given html markup consist of button and label control.