Anas' Views

Tuesday, 4 March 2014

HTML Escape Characters: Complete List

Symbol	Code	Entity Name
™	™
€		€
Space
!	!
"	"	"
#	#
$	$
%	%
&	&	&
'	'
(	(
)	)
*	*
+	+
,	,
-	-
.	.
/	/
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
:	:
;	;
<	<	<
=	=
>	>	>
?	?
@	@
A	A
B	B
C	C
D	D
E	E
F	F
G	G
H	H
I	I
J	J
K	K
L	L
M	M
N	N
O	O
P	P
Q	Q
R	R
S	S
T	T
U	U
V	V
W	W
X	X
Y	Y
Z	Z
[	[
\	\
]	]
^	^
_	_
`	`
a	a
b	b
c	c
d	d
e	e
f	f
g	g
h	h
i	i
j	j
k	k
l	l
m	m
n	n
o	o
p	p
q	q
r	r
s	s
t	t
u	u
v	v
w	w
x	x
y	y
z	z
{	{
\|	\|
}	}
~	~
Non-breaking space
¡	¡	¡
¢	¢	¢
£	£	£
¤	¤	¤
¥	¥	¥
¦	¦	¦
§	§	§
¨	¨	¨
©	©	©
ª	ª	ª
«	«
¬	¬	¬

®	®	®
¯	¯	¯
°	°	°
±	±	±
²	²	²
³	³	³
´	´	´
µ	µ	µ
¶	¶	¶
·	·	·
¸	¸	¸
¹	¹	¹
º	º	º
»	»	»
¼	¼	¼
½	½	½
¾	¾	¾
¿	¿	¿
À	À	À
Á	Á	Á
Â	Â	Â
Ã	Ã	Ã
Ä	Ä	Ä
Å	&#197	Å
Æ	Æ	Æ
Ç	Ç	Ç
È	È	È
É	É	É
Ê	Ê	Ê
Ë	Ë	Ë
Ì	Ì	Ì
Í	Í	Í
Î	Î	Î
Ï	Ï	Ï
Ð	Ð	Ð
Ñ	Ñ	Ñ
Ò	Ò	Ò
Ó	Ó	Ó
Ô	Ô	Ô
Õ	Õ	Õ
Ö	Ö	Ö
×	×	×
Ø	Ø	Ø
Ù	Ù	Ù
Ú	Ú	Ú
Û	Û	Û
Ü	Ü	Ü
Ý	Ý	Ý
Þ	Þ	Þ
ß	ß	ß
à	à	à
á	á	á
â	â	â
ã	ã	ã
ä	ä	ä
å	å	å
æ	æ	æ
ç	ç	ç
è	è	è
é	é	é
ê	ê	ê
ë	ë	ë
ì	ì	ì
í	&#237	í
î	î	î
ï	ï	ï
ð	ð	ð
ñ	ñ	ñ
ò	ò	ò
ó	ó	ó
ô	ô	ô
õ	õ	õ
ö	ö	ö
÷	÷	÷
ø	ø	ø
ù	ù	ù
ú	ú	ú
û	û	û
ü	ü	ü
ý	ý	ý
þ	þ	þ
ÿ	ÿ
Ā	Ā
ā	ā
Ă	Ă
ă	ă
Ą	Ą
ą	ą
Ć	Ć
ć	ć
Ĉ	Ĉ
ĉ	ĉ
Ċ	Ċ
ċ	ċ
Č	Č
č	č
Ď	Ď
ď	ď
Đ	Đ
đ	đ
Ē	Ē
ē	ē
Ĕ	Ĕ
ĕ	&#277
Ė	Ė
ė	ė
Ę	Ę
ę	ę
Ě	Ě
ě	ě
Ĝ	Ĝ
ĝ	ĝ
Ğ	Ğ
ğ	ğ
Ġ	Ġ
ġ	ġ
Ģ	Ģ
ģ	ģ
Ĥ	Ĥ
ĥ	ĥ
Ħ	Ħ
ħ	ħ
Ĩ	Ĩ
ĩ	ĩ
Ī	Ī
ī	ī
Ĭ	Ĭ
ĭ	ĭ
Į	Į
į	į
İ	İ
ı	ı
Ĳ	Ĳ
ĳ	ĳ
Ĵ	Ĵ
ĵ	ĵ
Ķ	Ķ
ķ	ķ
ĸ	ĸ
Ĺ	Ĺ
ĺ	ĺ
Ļ	Ļ
ļ	ļ
Ľ	&#317
ľ	ľ
Ŀ	Ŀ
ŀ	ŀ
Ł	Ł
ł	ł
Ń	Ń
ń	ń
Ņ	Ņ
ņ	ņ
Ň	Ň
ň	ň
ŉ	ŉ
Ŋ	Ŋ
ŋ	ŋ
Ō	Ō
ō	ō
Ŏ	Ŏ
ŏ	ŏ
Ő	Ő
ő	ő
Œ	Œ
œ	œ
Ŕ	Ŕ
ŕ	ŕ
Ŗ	Ŗ
ŗ	ŗ
Ř	Ř
ř	ř
Ś	Ś
ś	ś
Ŝ	Ŝ
ŝ	ŝ
Ş	Ş
ş	ş
Š	Š
š	š
Ţ	Ţ
ţ	ţ
Ť	Ť
ť	&#357
Ŧ	Ŧ
ŧ	ŧ
Ũ	Ũ
ũ	ũ
Ū	Ū
ū	ū
Ŭ	Ŭ
ŭ	ŭ
Ů	Ů
ů	ů
Ű	Ű
ű	ű
Ų	Ų
ų	ų
Ŵ	Ŵ
ŵ	ŵ
Ŷ	Ŷ
ŷ	ŷ
Ÿ	Ÿ
Ź	Ź
ź	ź
Ż	Ż
ż	ż
Ž	Ž
ž	ž
ſ	ſ
Ŕ	Ŕ
ŕ	ŕ
Ŗ	Ŗ
ŗ	ŗ
Ř	Ř
ř	ř
Ś	Ś
ś	ś
Ŝ	Ŝ
ŝ	ŝ
Ş	Ş
ş	ş
Š	Š
š	š
Ţ	Ţ
ţ	ţ
Ť	Ť
ť	Ɂ
Ŧ	Ŧ
ŧ	ŧ
Ũ	Ũ
ũ	ũ
Ū	Ū
ū	ū
Ŭ	Ŭ
ŭ	ŭ
Ů	Ů
ů	ů
Ű	Ű
ű	ű
Ų	Ų
ų	ų
Ŵ	Ŵ
ŵ	ŵ
Ŷ	Ŷ
ŷ	ŷ
Ÿ	Ÿ
Ź	&#377
ź	ź
Ż	Ż
ż	ż
Ž	Ž
ž	ž
ſ	ſ

Thursday, 16 January 2014

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

DOWNLOAD SOURCE CODE FOR DAG ABLE AND RE-SIZABLE DIV

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

Anas' Views

Tuesday, 4 March 2014

HTML Escape Characters: Complete List

Thursday, 16 January 2014

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

Thursday, 26 December 2013

How to create a news scroller using HTML marquee.

How to create a always visible div in css and HTML

Friday, 1 November 2013

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

What is CAPTCHA and why we are using CAPTCHA

DOWNLOAD SOURCE CODE FOR CAPTCHA IMAGE VALIDATION IN ASP.NET

DOWNLOAD SOURCE CODE FOR CAPTCHA IMAGE VALIDATION IN ASP.NET

Monday, 19 August 2013

HOW TO MAKE SYMBOLS WITH KEYBOARD

My Blog List

Pages