Thursday, 16 January 2014

How to create a drag able and resizable div in ASP.Net/C#

Resize and drag a div in ASPX page/HTML Page
Here we are going to demonstrate making a div that can be drag and resize by users. We are achieving this drag and resize of div functionality using Jquery files. We already posted some article related with Jquery and Javascript. Here we are again demonstrating a detailed post regarding Draggable and Resizable div using Jquery files.
Drag able Re-sizable Div in HTML/ASPX Page
Drag able and Resizable Div using Jquery in HTML/ASPX Page
For implementing drag and resize Div, we need to download following jquery and css files and included in the ASPX/HTML page.
1. jquery.min.js          - Download from here 
2. jquery-ui.min.js    - Download from here 
3. jquery-ui.css          - Download from here 
After downloading above files we need to create a HTML/ASPX Page and include above files as mentioned below.
<script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery-ui.min.js" type="text/javascript"></script>
 <link rel="stylesheet" href="jquery-ui.css"
 type="text/css" media="all" />
HTML/ASPX Page for creating drag able and re sizable div
<!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>Untitled Page</title>
 <script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery-ui.min.js" type="text/javascript"></script>
 <link rel="stylesheet" href="jquery-ui.css"
 type="text/css" media="all" />
 <style type="text/css">
 #resizediv
 {
 width: 150px;
 height: 150px;
 padding: 0.5em;
 background: #EB5E00;
 color: #fff;
 }
 </style>
 <script type="text/javascript">
$(document).ready(function () {
$("#resizediv").resizable();
$("#resizediv").draggable();
});
</script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="resizediv">
 Drag me ... or Resize me....<br />
 This is a Div that can be Drag and Resize by you.. .
 </div>
 </form>
</body>
</html>

------

                        DOWNLOAD SOURCE CODE FOR DAG ABLE AND RE-SIZABLE DIV 

Thursday, 26 December 2013

How to create a news scroller using HTML marquee.

Very simple News Scroller using HTML
In most of the website we can see that there is a portion for updates from the company. This updates can be shown by javscript,jquery,ajax etc technologies and it should be some effort also we have to include some pages for this.
For eg if we are implemented javscript newsticker the user’s browser must enable javascript, otherwise nothing going to happen. So the better method is if we can create a simple news ticker by using html elements only, it will be more faster and reliable in all browsers.
Following are the very simple and attractive vertical news ticker using HTML elements only. (Without using jquery,js,ajax..) So it should be work in all browsers even in the javascript disabled mode. We can give more attractive color and style for the news ticker.
Simple HTML code for showing news updates.
<div style="width: 180px; text-align: center; margin-top: 30px; 
margin-bottom: 2px;
        font-weight: bold;">
        Announcements</div>
    <div id="news-container">
        <marquee bgcolor="#ffffff" scrollamount="1" height="80" 
direction="up" loop="true"
            width="95%">
        We offers shopping cart <span style="color: blue;">
domain hosting free</span>
for limitted customers.
        <br /><br />
        You can choose your own style,color and domain 
for your shopping site.
        <br /><br />
        Supershope has largest number of viewers in the world. 
<span style="color: blue;">
You can sell your products here.</span><br />
        <br />
        <span style="color: blue;">Gift Paintings on Sale..!</span> 
There are thousands of
paintings available in supershope.
        Please contact us to buy paintings for affordable price.
        <br /><br />
        The Shopping cart product with <span style="color: blue;">
'supershope.com' domain also
            avaliable </span>for first customer with special package.
    </marquee>
    </div>

How to create a always visible div in css and HTML

 How to create a div that is always visible even while scrolling 
In some scenario we need to show some information like ads,twitter like account’s logo,new updates etc..  always to user even he is scrolling website We can implement this using simple HTML and CSS within few steps. We can create more attractive div with given appropriate color and style to css.
 Step by step process to create always visible div 
Here we are explaining how easily we can create an always visible div using simple CSS in html by steps by step. We can create always visible div within 2 steps.
 Step 1
Create a css class and name it “alwaysVisibleDiv” (you can give any name that you like). And add position as “fixed”; 
<style type="text/css">
<!--
.alwaysVisibleDiv
{
    position: fixed;
    bottom: 10px;
    left: 10px;
}
//-->
</style>
 
Step2
 Add a new div to the page and specify the class name (class=”alwaysVisibleDiv”)
 <div class="alwaysVisibleDiv">
    Hello I am here always
</div>
 Always visible div is ready. You can see above div position is always there (here we are fixed bottom left) even user scrolling website. We can fix this div at any position of the web page by giving bottom,right,top,left position to the class ‘alwaysVisibleDiv’. By using this html css code we can keep element in view while scrolling website without any jquery,ajax techniques.

Friday, 1 November 2013

How to implement CAPTCHA image validation in ASP.Net/C#

What is CAPTCHA and why we are using CAPTCHA

A CAPTCHA  is a type of challenge-response test used in computing as an attempt to ensure that the response is generated by a human being. The process usually involves a computer asking a user to complete a simple test which the computer is able to grade. These tests are designed to be easy for a computer to generate but difficult for a computer to solve, but again easy for a human. If a correct solution is received, it can be presumed to have been entered by a human. A common type of CAPTCHA requires the user to type letters and/or digits from a distorted image that appears on the screen. Such tests are commonly used to prevent unwanted internet bots from accessing websites, since a normal human can easily read a CAPTCHA, while the bot cannot process the image letters and therefore, cannot answer properly, or at all.




How to implement CAPTCHA validation/CAPTCHA verification in ASP.Net/C#
CAPTCHA image can be generated using ASP.Net codes and we can validate the code that user enter with the code in the CAPTCHA image. Here we are going to do a sample application that demonstrates how to create a CAPTCHA image using C# codes and how we can validate the user inputs with the CPATCH code. We are having two aspx pages and one class .cs file in the sample application.
A very simple application sample for CPTCHA validation
In the page load, first of all we are creating a 6 digit random number and stored in the session. By using this random number we creates a image suing System.Drawing package by giving some width,height,font family and alignment of the numbers, So the user can able to view the codes in the CAPTCHA image but it is difficult to read using system.

DOWNLOAD SOURCE CODE FOR CAPTCHA IMAGE VALIDATION IN ASP.NET

Below is the Class that we used for creating a CAPTCHA image with random number
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Drawing.Text;

namespace CaptchaImage
{
       /// <summary>
       /// Summary description for CaptchaImage.
       /// </summary>
       public class CaptchaImage
       {
              // Public properties (all read-only).
              public string Text
              {
                     get { return this.text; }
              }
              public Bitmap Image
              {
                     get { return this.image; }
              }
              public int Width
              {
                     get { return this.width; }
              }
              public int Height
              {
                     get { return this.height; }
              }

              // Internal properties.
              private string text;
              private int width;
              private int height;
              private string familyName;
              private Bitmap image;

              // For generating random numbers.
              private Random random = new Random();

              // ====================================================================
              // Initializes a new instance of the CaptchaImage class using the
              // specified text, width and height.
              // ====================================================================
              public CaptchaImage(string s, int width, int height)
              {
                     this.text = s;
                     this.SetDimensions(width, height);
                     this.GenerateImage();
              }

              // ====================================================================
              // Initializes a new instance of the CaptchaImage class using the
              // specified text, width, height and font family.
              // ====================================================================
              public CaptchaImage(string s, int width, int height, string familyName)
              {
                     this.text = s;
                     this.SetDimensions(width, height);
                     this.SetFamilyName(familyName);
                     this.GenerateImage();
              }

              // ====================================================================
              // This member overrides Object.Finalize.
              // ====================================================================
              ~CaptchaImage()
              {
                     Dispose(false);
              }

              // ====================================================================
              // Releases all resources used by this object.
              // ====================================================================
              public void Dispose()
              {
                     GC.SuppressFinalize(this);
                     this.Dispose(true);
              }

              // ====================================================================
              // Custom Dispose method to clean up unmanaged resources.
              // ====================================================================
              protected virtual void Dispose(bool disposing)
              {
                     if (disposing)
                           // Dispose of the bitmap.
                           this.image.Dispose();
              }

              // ====================================================================
              // Sets the image width and height.
              // ====================================================================
              private void SetDimensions(int width, int height)
              {
                     // Check the width and height.
                     if (width <= 0)
                           throw new ArgumentOutOfRangeException("width", width, "Argument out of range, must be greater than zero.");
                     if (height <= 0)
                           throw new ArgumentOutOfRangeException("height", height, "Argument out of range, must be greater than zero.");
                     this.width = width;
                     this.height = height;
              }

              // ====================================================================
              // Sets the font used for the image text.
              // ====================================================================
              private void SetFamilyName(string familyName)
              {
                     // If the named font is not installed, default to a system font.
                     try
                     {
                           Font font = new Font(this.familyName, 12F);
                           this.familyName = familyName;
                           font.Dispose();
                     }
                     catch (Exception ex)
                     {
                           this.familyName = System.Drawing.FontFamily.GenericSerif.Name;
                     }
              }

              // ====================================================================
              // Creates the bitmap image.
              // ====================================================================
              private void GenerateImage()
              {
                     // Create a new 32-bit bitmap image.
                     Bitmap bitmap = new Bitmap(this.width, this.height, PixelFormat.Format32bppArgb);

                     // Create a graphics object for drawing.
                     Graphics g = Graphics.FromImage(bitmap);
                     g.SmoothingMode = SmoothingMode.AntiAlias;
                     Rectangle rect = new Rectangle(0, 0, this.width, this.height);

                     // Fill in the background.
                     HatchBrush hatchBrush = new HatchBrush(HatchStyle.SmallConfetti, Color.LightGray, Color.White);
                     g.FillRectangle(hatchBrush, rect);

                     // Set up the text font.
                     SizeF size;
                     float fontSize = rect.Height + 1;
                     Font font;
                     // Adjust the font size until the text fits within the image.
                     do
                     {
                           fontSize--;
                           font = new Font(this.familyName, fontSize, FontStyle.Bold);
                           size = g.MeasureString(this.text, font);
                     } while (size.Width > rect.Width);

                     // Set up the text format.
                     StringFormat format = new StringFormat();
                     format.Alignment = StringAlignment.Center;
                     format.LineAlignment = StringAlignment.Center;

                     // Create a path using the text and warp it randomly.
                     GraphicsPath path = new GraphicsPath();
                     path.AddString(this.text, font.FontFamily, (int) font.Style, font.Size, rect, format);
                     float v = 4F;
                     PointF[] points =
                     {
                           new PointF(this.random.Next(rect.Width) / v, this.random.Next(rect.Height) / v),
                           new PointF(rect.Width - this.random.Next(rect.Width) / v, this.random.Next(rect.Height) / v),
                            new PointF(this.random.Next(rect.Width) / v, rect.Height - this.random.Next(rect.Height) / v),
                           new PointF(rect.Width - this.random.Next(rect.Width) / v, rect.Height - this.random.Next(rect.Height) / v)
                     };
                     Matrix matrix = new Matrix();
                     matrix.Translate(0F, 0F);
                     path.Warp(points, rect, matrix, WarpMode.Perspective, 0F);

                     // Draw the text.
                     hatchBrush = new HatchBrush(HatchStyle.LargeConfetti, Color.LightGray, Color.DarkGray);
                     g.FillPath(hatchBrush, path);

                     // Add some random noise.
                     int m = Math.Max(rect.Width, rect.Height);
                     for (int i = 0; i < (int) (rect.Width * rect.Height / 30F); i++)
                     {
                           int x = this.random.Next(rect.Width);
                           int y = this.random.Next(rect.Height);
                           int w = this.random.Next(m / 50);
                           int h = this.random.Next(m / 50);
                           g.FillEllipse(hatchBrush, x, y, w, h);
                     }

                     // Clean up.
                     font.Dispose();
                     hatchBrush.Dispose();
                     g.Dispose();

                     // Set the image.
                     this.image = bitmap;
              }
       }
}

DOWNLOAD SOURCE CODE FOR CAPTCHA IMAGE VALIDATION IN ASP.NET

Monday, 19 August 2013

HOW TO MAKE SYMBOLS WITH KEYBOARD



Alt + 0153.    ... trademark symbol
Alt + 0169....   ©   .... copyright symbol
Alt + 0174.....   ®   ....registered ­ trademark symbol
Alt + 0176 ... 
 °   ......degre ­e symbol
Alt + 0177 ... 
 ±  ....plus-or ­-minus sign
Alt + 0182 ... 
   .....paragr ­aph mark
Alt + 0190 ... 
 ¾  ....fractio ­n, three-fourths
Alt + 0215 ....  
×  .....multi ­plication sign
Alt + 0162..  
 ¢  ....the ­ cent sign
Alt + 0161..... 
 ¡  ..... ­.upside down exclamation point
Alt + 0191..... 
 ¿  ..... ­upside down question mark
Alt + 1.....  
  ...... sm ­iley face
Alt + 2 ...... 
  .....bla ­ck smiley face
Alt + 15.....   .....su ­n
Alt + 12...... 
  .....f ­emale sign
Alt + 11..... 
   ......m ­ale sign
Alt + 6......
.  ♠  .....s ­pade
Alt + 5.......  
  ...... ­Club
Alt + 3........
 ♥ ..... ­Heart
Alt + 4.......  
  ...... ­Diamond
Alt + 13...... 
   .....e ­ighth note
Alt + 14...... 
 ♫  ...... ­beamed eighth note
Alt + 8721....  
  .... N-ary summation (auto sum)
Alt + 251..... 
  .....s ­quare root check mark
Alt + 8236.....  
  ..... ­infinity
Alt + 24....... 
 ..... ­up arrow
Alt + 25...... 
   ...... ­down arrow
Alt + 26.....  
  .....ri ­ght arrow
Alt + 27......
    .....l ­eft arrow
Alt + 18..... 
   ......u ­p/down arrow
Alt + 29...... 
   ...lef ­t right arrow

Friday, 28 June 2013

SQL SERVER – How to Rename a Column Name or Table Name

The script for renaming any column :
sp_RENAME 'TableName.[OldColumnName]' '[NewColumnName]''COLUMN'
The script for renaming any object (table, sp etc) :
sp_RENAME '[OldTableName]' '[NewTableName]'

Thursday, 20 June 2013

ASP.Net Page Common Life-cycle Events

PreInit 

Use this event for the following:
• Check the IsPostBack property to determine whether this is the first time the page is
being processed.
• Create or re-create dynamic controls.
• Set a master page dynamically.
• Set the Theme property dynamically.
• Read or set profile property values.
Note: If the request is a postback, the values of the controls have not yet been restored
from view state. If you set a control property at this stage, its value might be overwritten
in the next event.

Init
 Raised after all controls have been initialized and any skin settings have been applied. Use
this event to read or initialize control properties.

InitComplete
 Raised by the Page object. Use this event for processing tasks that require all initialization
be complete.

PreLoad 
Use this event if you need to perform processing on your page or control before the Load
event. After the Page raises this event, it loads view state for itself and all controls, and
then processes any postback data included with the Request instance.

Load 
The Page calls the OnLoad event method on the Page, then recursively does the same for
each child control, which does the same for each of its child controls until the page and all
controls are loaded.

Control events
Use these events to handle specific control events, such as a Button control's Click event or
a TextBox control's TextChanged event. In a postback request, if the page contains
validator controls, check the IsValid property of the Page and of individual validation
controls before performing any processing.

LoadComplete Use this event for tasks that require that all other controls on the page be loaded.

PreRender
 Before this event occurs:
• The Page object calls EnsureChildControls for each control and for the page.
• Each data bound control whose DataSourceID property is set calls its DataBind
method.
• The PreRender event occurs for each control on the page. Use the event to make final
changes to the contents of the page or its controls.

SaveStateComplete
Before this event occurs, ViewState has been saved for the page and for all controls. Any
changes to the page or controls at this point will be ignored. Use this event perform tasks
that require view state to be saved, but that do not make any changes to controls.

Render 
This is not an event; instead, at this stage of processing, the Page object calls this method
on each control. All ASP.NET Web server controls have a Render method that writes out
the control's markup that is sent to the browser. If you create a custom control, you
typically override this method to output the control's markup. However, if your custom
control incorporates only standard ASP.NET Web server controls and no custom markup,
you do not need to override the Render method. A user control (an .ascx file) automatically
incorporates rendering, so you do not need to explicitly render the control in code.

Unload 
This event occurs for each control and then for the page. In controls, use this event to do
final cleanup for specific controls, such as closing control-specific database connections. For
the page itself, use this event to do final cleanup work, such as closing open files and
database connections, or finishing up logging or other request-specific tasks. Note: During
the unload stage, the page and its controls have been rendered, so you cannot make
further changes to the response stream. If you attempt to call a method such as the
Response.Write method, the page will throw an exception.