Daily Coding

Poster swing – A jQuery plug-in for Poster Style Swing

Ramesh Soni — Tue, 15 Apr 2014 00:00

Poster swing plugin can be used for adding poster swing effect on html elements. The plugin uses rotation transform for adding the swing effect. See http://caniuse.com/#feat=transforms2d to check which browser will support this.

Usage

You must include jQuery.js and jquery.posterSwing.js (or jquery.posterSwing.min.js) in you web page in order to use this plugin.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.posterSwing.min.js" type="text/javascript"></script>

For adding poster swing effect to any html element, use following with jQuery selector -

$(function () {            
    $("#myDiv").posterSwing([options]);
});

Currently following options are available -

duration : (default value 4000)
total duration (in milliseconds) for which the animation will run.
angle : (default value 30)
max angle to which the swing will be done.
swingCenter : (default value top center = 50% 5%)
x, y value of the center around which swing will be done - can be in px or %.

Demo

Default

$(element).posterSwing();

Small angle

$(element).posterSwing({
    angle: 10
});

Fast

$(element).posterSwing({
    duration: 2000,
    angle: 10
});

Slow

$(element).posterSwing({
    duration: 16000
});

Custom swing center - 1

$(element).posterSwing({
    swingCenter: "50% 50%"
});

Custom swing center - 2

$(element).posterSwing({
    swingCenter: "50% 100%"
});

Whole body

$("body").posterSwing({
    duration: 2000,
    angle: 10
});

Source code

/*
  this code will be 
  poster swing
*/
$(this).next("pre")
  .posterSwing();

Button

$(this).posterSwing();

Image courtesy http://www.smashingmagazine.com/

You can view full usage and demonstration on the demo page - http://demo.com

View Demo

Download Source Files

EasyTimer - JavaScript style setTimeout and setInterval in C#

Ramesh Soni — Wed, 03 Oct 2012 05:00

Download Source Files

I found JavaScript setTimeout and setInterval functions quite handy for timer like functionality and some time wish I could use that in C# too. In an earlier post I create a C# like timer functionality in JavaScript. Now, I want to do opposite i.e. implement JavaScript setTimeout and setInterval like functionality in C#.

This is can be done very easily using Lamda expressions and Timer. Look at the below utility class -

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DailyCoding.EasyTimer
{
    public static class EasyTimer
    {
        public static IDisposable SetInterval(Action method, int delayInMilliseconds)
        {
            System.Timers.Timer timer = new System.Timers.Timer(delayInMilliseconds);
            timer.Elapsed += (source, e) =>
            {
                method();
            };

            timer.Enabled = true;
            timer.Start();

            // Returns a stop handle which can be used for stopping
            // the timer, if required
            return timer as IDisposable;
        }

        public static IDisposable SetTimeout(Action method, int delayInMilliseconds)
        {
            System.Timers.Timer timer = new System.Timers.Timer(delayInMilliseconds);
            timer.Elapsed += (source, e) =>
            {
                method();
            };

            timer.AutoReset = false;
            timer.Enabled = true;
            timer.Start();

            // Returns a stop handle which can be used for stopping
            // the timer, if required
            return timer as IDisposable;
        }
    }
}

To use setTimeout this you can simply do -

EasyTimer.SetTimeout(() =>
{
    // --- You code here ---
    // This piece of code will once after 1000 ms delay

}, 1000);

The code will run after 1000 ms delay similarly like JavaScript setTimeout. The function also returns a handle. If you want clearTimeout like functionality, then the simply dispose off the handle.

var stopHandle = EasyTimer.SetTimeout(() =>
{
    // --- You code here ---
    // This piece of code will once after 1000 ms

}, 1000);

// In case you want to clear the timeout
stopHandle.Dispose();

Similarly you can use setInterval as -

EasyTimer.SetInterval(() =>
{
    // --- You code here ---
    // This piece of code will run after every 1000 ms

}, 1000);

and SetInterval also returns a stop handle which you can use for clearInterval like functionality. Just dispose off the handle -

var stopHandle = EasyTimer.SetInterval(() =>
    {
        // --- You code here ---
        // This piece of code will run after every 1000 ms
        // To stop the timer, just dispose off the stop handle

    }, 1000);

// In case you want to clear the interval
stopHandle.Dispose();

Download Source Files

ImageLens – A jQuery plug-in for Lens Effect Image Zooming

Ramesh Soni — Mon, 28 Mar 2011 01:19

View Demo

Download Source Files

I was searching a good jQuery plug-in for image zooming but couldn't find any which was matching my criteria. I need the lens effect while zooming images and it should work without much plumbing. So, I decided to create one and now sharing this with everyone.

What I need to use this?

jQuery
ImageLens plug-in – jquery.imagelens.js
An image

How to use this?

Include jQuery and jquery.imageLens.js in you web page -

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

For default image lens just use imageLens as below. Note that it will automatically calculate actual size of image and start showing zooming -

$("#img_01").imageLens();

Note - If you are using IE 8 or lower than you will see a square lens

(hover on image to see the lens effect)

If you thumbnail image is different from zoomed image then you can specify custom image source -

$("#img_03").imageLens({ imageSrc: "sample01.jpg" });

(hover on image to see the lens effect)

You can also change lens size -

$("#img_02").imageLens({ lensSize: 200 });

(hover on image to see the lens effect)

There are some more attributes you can adjust in the lens like border color and border size -

$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });

(hover on image to see the lens effect)

Image courtesy http://www.smashingmagazine.com/

Updates

1. Optimized plug-in code for size and performance - By Andreas
2. Round lens support in IE8 or below - By Jeppe

View Demo

Download Source Files

jQuery Plug-in for Showing Message Box in Topbar

Ramesh Soni — Tue, 22 Mar 2011 22:46

View Demo

Download Source Files

Topbar message box plug-in can be used to showing message box or notifications on a web page. This is very simple to use and easy to configure. Of course you need jQuery to use this.

Usage

To use this plug-in include jQuery and juery.topbar.js in you web page -

<script src="jquery.js" type="text/javascript"></script>
<script src="juery.topbar.js" type="text/javascript"></script>

Now create a html element which you want to show in topbar as messagebox -

<p>
    <a href="javascript:void(0)" id="demo01">Demo 1 - Simple</a>
</p>
<div id="demo01-body" style="display:none;">
    This is a simple demo
    <span style="font-size: small">(click to close)</span>
</div>

Now use showTopbarMessage to show the notification on topbar -

$(function () {

    $("#demo01").click(function () {
        $('#demo01-body').showTopbarMessage();
    });

});

Currently you can configure following attributes -

background: Hex code of color for bar background. Default value is - "#888".
borderColor: Hex code of color for bar border color. Default value is - "#000".
foreColor: Hex code of color for bar fore color. Default value is - "#000".
height: Height of the bar. Default value is "50px".
fontSize: Size of the text displayed in the top bar. Default value is - "20px"
close: Specify how the notifications will be closed. "click" – means it will be closed on click, else specify number of milliseconds after which bar will be closed automatically.

You can view full usage and demonstration on the demo page.

View Demo

Download Source Files

Create Printer Friendly Web Page Using Media Attribute

Ramesh Soni — Wed, 04 Aug 2010 23:53

View Demo

Download Source Files

When you create a web page you usually keep in mind how it will rendered on the browser and its usability. Sometime, depending upon the content, you also know that your page might be printed by end user. But you don’t want that the printer version of your page to be same as the screen version. Most of the time you might create a separate printable version of the page. User will click specially open the printable version and take its print or sometime he will directly print your webpage.

Now what are the issues here -

The web page is not printer friendly therefore the content might get distorted while printing it into a A4 size paper.
The print will contain unnecessary links and images while have no use in printable version.
The webpage might have dark background which will lead to wastage of print ink.
Some text might have light colors which may not be visible clear on a black & white printout.
If you create separate printable view then it will involve another user action which sometimes user don’t do.

There is a clean solution to this problem using the media attribute in the link tag. By using you can specify on which media a particular style sheet will be applicable. Therefore you can have different style sheet for printer and browser screen and user don’t have to worry about this.

Lets take an example to understand this. Look at the screen below (or click here to view html page)

Now lets start making it printer friendly. First of all create three different style sheets. One for screen, one for print and one which will contain common classes. Include this css in page and add desired media value i.e. for printer add media = print and for screen css add media = screen. Don’t specify the media for the common css.

<link href="style-common.css" rel="stylesheet" type="text/css" />
<link href="style-screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="style-print.css" media="print" rel="stylesheet" type="text/css" />

I assume we already have all css except the printer friendly css. Now lets start creating the printer. First of all change the body color. Since default color of white so we moved the body background color css to the screen css -

/*style-screen.css*/
body
{
    background-color: #666666;
    color: #CCCCCC;
    border-bottom: 2px solid #CCCCCC;
}

Now change the header background color -

#header
{
    background-color: #FFFFFF;
    color: #000000;
    border-bottom: 2px solid #000000;
}

We don’t need the left menu in the printer view so lets remove it -

#leftMenu
{
    display: none;
}

Also hide any other smaller thing like Back to dailycoding, print button etc.

.dontprint
{
    display: none;
}

Now when you see this page in browser the view will remain same, but when you print this page it will look like below -

You can see that we haven't created any new page here and above page much better printer friendly than original page. This all was done just using css.

View Demo

Download Source Files

Top 5 new features of Visual Studio 2010 and .NET 4

Ramesh Soni — Wed, 14 Apr 2010 00:08

Visual Studio 2010 has finally released and is available for download. You can download various version from below location -

Visual Studio 2010 – 90 days free trial
http://www.microsoft.com/visualstudio/en-us/download
Visual Studio 2010 – Express Editions
http://www.microsoft.com/express/Downloads/#Visual_Studio_2010_Express_Downloads

There lots of improvement in Visual Studio 2010 over past version. Below are some new great features of Visual Studio 2010 -

Better code intellisense

Visual Studio 2010 has better code intellisense support which make it easier for look for methods and functions. You can now easily search for inline keyword, or even use abbreviation to search for properties or methods.

See - VS 2010 Code Intellisense Improvements

Improved multi-targeting support

Though multi-targeting was there in Visual Studio 2008, but the Visual Studio 2010 has got better support for it. With its new “reference assemblies”, it provides 100% accurate intellisense.

See - Multi-Targeting Support

Multi-monitor support

Earlier, all editor and child windows are hosted inside a single parent windows, but with the new IDE you can host every single child windows as separate windows outside of the main windows. You can move these to other monitors which makes it to support multiple monitors.

See Multi-Monitor Support

Enhanced code navigations

Visual Studio 2010 has introduces a number of new features to improve the searching and navigational capabilities. The new “Navigate to” features provides you a fast and incremental search of functions, classes, properties etc.

With its “View call Hierarchy” features can can discover from where a particular method or property is called which helps you to refactor and make you code even better.

Another features “Highlight Reference” helps of to discover what part of code is using a particular variable.

See Searching and Navigating Code in VS 2010

Parallel computing

With Visual Studio 2010, now you can take advantage of multi-core processor by using parallel computing feature. This help you to write code which can execute even faster. Visual Studio also supports parallel debugging for the parallel programming.

See VS2010 Parallel Computing Features Tour, Parallel Debugging

Using DebuggerBrowsable Attribute for a better view in debugger window

Ramesh Soni — Sat, 23 Jan 2010 01:02

There are lots of small tricks in .net which can be very useful if used wisely. In this post I want to discuss the use of DebuggerBrowsableAttribute. Using this attribute you can control how a member of class will be displayed in debugger windows during debugging. Before that consider small example:

public class Organization
{
    public List<Employee> Employees
    {
        get;
        set;
    }

    public Organization()
    {
        this.Employees = new List<Employee>();
    }
}

public class Employee
{
    private Guid UniqueGuid
    {
        get;
        set;
    }

    public string Code
    {
        get;
        set;
    }

    public string Name
    {
        get;
        set;
    }

    public Employee()
    {
        UniqueGuid = Guid.NewGuid();
    }
}

Lets create a instance of Organization and add some sample data:

Organization org = new Organization();
org.Employees.Add(new Employee() { Code = "E01", Name = "Matt" });
org.Employees.Add(new Employee() { Code = "E02", Name = "Tim" });
org.Employees.Add(new Employee() { Code = "E03", Name = "David" });
org.Employees.Add(new Employee() { Code = "E04", Name = "Tom" });

Now when you run this program in debug mode and try to view the org in debugger window it will look like this:

Lets try to change it using DebuggerBrowsableAttribute. Make following changes by adding DebuggerBrowsableAttribute:

    [DebuggerBrowsable(DebuggerBrowsableState.RootHidden)]
    public List<Employee> Employees
    {
        get;
        set;
    }


    [DebuggerBrowsable(DebuggerBrowsableState.Never)]
    private Guid UniqueGuid
    {
        get;
        set;
    }

Again run this program in debug mode and try to view the org in debugger window. Now it will look like this

You can see how this small but useful attribue can change the look of the debugger window.

JavaScript Exception Handling Techniques

Ramesh Soni — Tue, 04 Aug 2009 03:49

Like the Object oriented programming the exception handling is also not used while coding in JavaScript. That why in most of cases if there is any problem in one part in a page then surprisingly other part also stops working. In this post we will be discussing the various techniques to handle exceptions in JavaScript.

Using try..catch block

try..catch block in JavaScript is very much similar to the regular C# try..catch block. The suspected code will be put in try block and all exceptions which will occur in the try block will be caught in catch block.

window.onload = function()
{
    try
    {
        var x = 90;
        var value = x / y;
    }
    catch(err)
    {
        document.write(err.name + ": " + err.message + "<br/>");
    }
}
Output:
TypeError: 'y' is undefined

In catch you will get the object containing type and description of the exception. More over you can also use finally block in the same way as you use in C#.

window.onload = function()
{
    try
    {
        var x = 90;
        var value = x / y;
    }
    catch(err)
    {
        document.write(err.name + ": " + err.message + "<br/>");
    }
    finally
    {
        alert('This is finally block');
    }
}

Using onerror event

onerror event will be raised each time there is any error while performing a action in the document. This like on place exception handling similar to Application_Error in ASP.NET. Here is sample code which demonstrate this:

window.onload = function()
{
    var x = 90;
    var value = x / y;
}

window.onerror = function(errorMeaage, fileName, lineNumber)
{
    document.write('Error: ' + errorMeaage);
}

Using jQuery Solution

It is similar to using onerror but with jQuery syntax. The syntax is:

$(window).error(
    function(errorMeaage, fileName, lineNumber)
    {
        // handle error here
    }
);

Top 5 Small but Must have Extension Methods

Ramesh Soni — Thu, 28 May 2009 00:00

In this post I want to cover some very basic and small extension methods which are very useful for any developer. All below mentioned extension method are not doing any complex operation. Rather they are just performing very simple task which you generally encounter a lots of times in your day today coding.

Download Source Files

1. IsNull

This is probably most commonly used expression. A lots of places in out code we check to null references. We usually add the obj == null or obj != null check to do this. Here is the IsNull extension method

public static bool IsNull(this object source)
{
    return source == null;
}

Using the you can avoid the lazy null check. Example:

public void ProcessData(DataSet input)
{
    if (!input.IsNull())
    {
        // business logic here
    }
}

2. FormatString

We often use string.Format to format the string like

string message = string.Format("Welcome {0} (Last login: {1})", 
    userName, lastLogin);

The alternative way to do this is using below extension method

public static string FormatString(this string format, params object[] args)
{
    return string.Format(format, args);
}

Now the above example can be re-written as

string message = "Welcome {0} (Last login: {1})".FormatString(userName, lastLogin);

3. RaiseEvent

How you generally raise you events? I guess something like below

protected void OnMyEvent(EventArgs e)
{
    if (MyEvent != null)
    {
        MyEvent(this, e);
    }
}

Here for each event you need to check the null reference before you raise it and also you create a new method so that you don’t have to add this check each place from where you are raising the event even if there is no special logic in the function. Here it the set of extension method to raise the events that matches the signature of EventHandler or EventHalder<TEventArgs>:

public static void Raise(this EventHandler eventHandler, 
    object sender, EventArgs e)
{
    if (eventHandler != null)
    {
        eventHandler(sender, e);
    }
}

public static void Raise<T>(this EventHandler<T> eventHandler,
    object sender, T e) where T : EventArgs
{
    if (eventHandler != null)
    {
        eventHandler(sender, e);
    }
}

Now this is how to raise the above event

MyEvent.Raise(this, e);

4. Match

This extension method is for pattern matching in any string using Regex. This is how you generally use it

Regex regex = new Regex("[0-9]");
if (regex.IsMatch(myData))
{
    // do someting
}

And here is the extension method to do this simply

public static bool Match(this string value, string pattern)
{
    Regex regex = new Regex(pattern);
    return regex.IsMatch(value);
}

After this look at the code below. It became much simpler than the traditional approach:

if (myData.Match("[0-9]"))
{
    // do someting
}

5. ToInt

This method has three flavors, for Int16, Int32 and Int64. This can be easily used while doing string to int conversion. Here are the methods:

public static long ToInt16(this string value)
{
    Int16 result = 0;

    if (!string.IsNullOrEmpty(value))
        Int16.TryParse(value, out result);

    return result;
}

public static long ToInt32(this string value)
{
    Int32 result = 0;

    if (!string.IsNullOrEmpty(value))
        Int32.TryParse(value, out result);

    return result;
}

public static long ToInt64(this string value)
{
    Int64 result = 0;

    if (!string.IsNullOrEmpty(value))
        Int64.TryParse(value, out result);

    return result;
}

I hope you enjoyed reading this article. You can download the source file from here also

Download Source Files

Business Cards and Postcards Giveaway : Comment and Win

Ramesh Soni — Thu, 26 Mar 2009 00:46

This contest is closed now. There were very few comments; so it was not difficult to choose the winners. Here are the winners

1st Prize - 1000 Standard Size Business Cards - Alex Lyman
2nd Prize - 500 4x6" Postcards - Alin-T

Congrats winner. You will be soon contacted by UPrinting for the preferences.

Here is business card giveaway for the readers of DailyCoding. The prizes are sponsored by the UPrinting.

1st Prize - 1000 Standard Size Business Cards

2nd Prize - 500 4x6" Postcards

You can choose from any of their stocks for these items. The rules are very simple:

Leave a comment (along with your email address) at the end of this post, describing what you would use the free business cards and/or postcards for.
Two winners will be chosen based on most interesting comments.
There is no fix end date of this contest.
Winners in the United States and Canada qualify for free shipping. Shipping fees will apply to winners outside these areas.

Those who don’t know about the UPrinting; It is a leading online printing business card printing company that provides high quality printing of business cards¸postcards, brochures, catalogues, posters, flyers at the most affordable prices.

Add Vista Look to your WPF Control on Windows XP

Ramesh Soni — Tue, 27 Jan 2009 06:22

Vista had come with new and cool look & feel. If you want to add the Vista Aero style theme to you WPF application running on Window XP then it is very easy trick. You don’t need any third party library or tool to achieve this.

To do this all you need to do is to add following lines of xaml code into the designer of your window right after window tag:

<ResourceDictionary Source="/PresentationFramework.Aero, 
   Version=3.0.0.0, Culture=neutral, 
   PublicKeyToken=31bf3856ad364e35, 
   ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml" />

If you want to apply this look through out the application then add this to app.xaml under <Application.Resources> section.

Before Aero Theme

After Aero Theme

The limitation of this technique is that it don't change the look of container form. You can see it still looks like a normal XP form.

Customized Html Controls: Creating Custom Checkbox

Ramesh Soni — Wed, 17 Dec 2008 02:21

Under “Customized Html Controls” section I will discuss about how to create and customized standard html controls. This is first article in this category. This will discuss about how we can create a custom checkbox using CSS and jQuery.

Checkbox Image

For this you need two images, one for checked state of checkbox and another for unchecked state of the checkbox. However, you can also use a single image containing both checked and unchecked state and use CSS trick like I use.

Checkbox CSS

Here is the CSS classes we will be going to use for the checkbox

.checkBox
{
    background-position: 0px 0px;
}

.checkBoxClear
{
    background-position: -21px 0px;
}

.checkBox, .checkBoxClear
{
    background-image: url('CheckBox.png');
    background-repeat: no-repeat;
    display: inline-block;
    float: left;
    width: 21px;
    height: 21px;
    padding: 0px;
    margin: 0px;
    cursor: hand;
}

Checkbox JavaScript

Finally below is the JavaScript code using jQuery which will control the checking and un-checking of our checkbox using click event. It will basically toggle the CSS which will change the state.

<script language="javascript" type="text/javascript">
<!--
$(document).ready(function()
{
    $(".checkBox,.checkBoxClear").click(function(srcc)
    {
        if ($(this).hasClass("checkBox"))
        {
            $(this).removeClass("checkBox");
            $(this).addClass("checkBoxClear");
        }
        else
        {
            $(this).removeClass("checkBoxClear");
            $(this).addClass("checkBox");
        }
    });        
});
//-->
</script>

Html Code

Here is a sample Custom Checkbox with the html code.

Select options

Lorem ipsum dolor sit amet

Aenean vitae elit quis erat interdum tempus

Duis laoreet viverra quam

Mauris pellentesque tristique erat

<h3>Select options</h3>
<div id="Div1" class="checkBox">&nbsp;</div>
<label for="Div1">
    Lorem ipsum dolor sit amet</label><br />
<div id="Div2" class="checkBox">
    &nbsp;</div>
<label for="Div2">
    Aenean vitae elit quis erat interdum tempus</label>
<div id="Div3" class="checkBox">
    &nbsp;</div>
<label for="Div3">
    Duis laoreet viverra quam</label>
<div id="Div4" class="checkBox">
    &nbsp;</div>
<label for="Div4">
    Mauris pellentesque tristique erat</label>

Random Sort a List Using LINQ

Ramesh Soni — Fri, 21 Nov 2008 02:16

LINQ (Language Integrated Query) is a one of very useful feature of .net 3.5 framework. This allows you to query objects and perform complex operations simply and efficiently. There are lots of trick which can be used with the help of LINQ. In this article I am explaining how can we random sort a List using LINQ

Random Sort

Consider the below Employee class:

public class Employee
{
    public int Id
    {
        get;
        set;
    }
    public string Name
    {
        get;
        set;
    }
}

This is how you can randomly sort the List<Employee> object:

List<Employee> list = new List<Employee>();

list.Add(new Employee { Id = 1, Name = "Davolio Nancy" });
list.Add(new Employee { Id = 2, Name = "Fuller Andrew" });
list.Add(new Employee { Id = 3, Name = "Leverling Janet" });
list.Add(new Employee { Id = 4, Name = "Peacock Margaret" });
list.Add(new Employee { Id = 5, Name = "Buchanan Steven" });
list.Add(new Employee { Id = 6, Name = "Suyama Michael" });
list.Add(new Employee { Id = 7, Name = "King Robert" });
list.Add(new Employee { Id = 8, Name = "Callahan Laura" });
list.Add(new Employee { Id = 9, Name = "Dodsworth Anne" });

list = list.OrderBy(emp => Guid.NewGuid()).ToList();

Purely CSS Callouts

Ramesh Soni — Thu, 16 Oct 2008 02:16

This article explains how you can create callouts using CSS and without using a single image. This will use the CSS thick border technique for creating slant area. Look at the callouts below:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

Ramesh Soni Said

This callout is created only using CSS. The arrow shown in the callout is basically a DIV with thick up border and transparent left and right border. And its height and width are 0. You only see the border or the DIV which will create the arrow like effect.

Here is the complete CSS and html code of this:

CSS Code

<style type="text/css">    
    .calloutUp
    {
        height: 0;
        width: 0;
        border-bottom: 12px solid #ffffff;
        border-left: 12px dotted transparent;
        border-right: 12px dotted transparent;
        left: 0px;
        top: 0px;
        margin-left: 20px;
        z-index: 10;
    }
    .calloutUp2
    {
        position: relative;
        left: -10px;
        top: 2px;
        height: 0;
        width: 0;
        border-bottom: 10px solid #9999ff;
        border-left: 10px dotted transparent;
        border-right: 10px dotted transparent;
        z-index: 11;
    }
    .calloutDown
    {
        height: 0;
        width: 0;
        border-top: 12px solid #ffffff;
        border-left: 12px dotted transparent;
        border-right: 12px dotted transparent;
        left: 0px;
        top: 0px;
        margin-left: 20px;
        z-index: 11;
    }
    .calloutDown2
    {
        position: relative;
        left: -10px;
        top: -12px;
        height: 0;
        width: 0;
        border-top: 10px solid #9999ff;
        border-left: 10px dotted transparent;
        border-right: 10px dotted transparent;
        z-index: 10;
    }
    .divContainerUp
    {
        background-color: #9999ff;
        border: solid 1px #ffffff;
        position: relative;
        top: -1px;
        z-index: 9;
        width: 500px;
        padding: 4px;
    }
    .divContainerDown
    {
        background-color: #9999ff;
        border: solid 1px #ffffff;
        position: relative;
        top: 1px;
        z-index: 3;
        width: 500px;
        padding: 4px;
    }
    .divContainerMain
    {
        background-color: #ccccff;
        padding: 8px;
    }
</style>

Html Code

<div class="divContainerMain">
    <h3>
        Up Side Callout</h3>
    <div>
        <a href="#">Ramesh Soni</a> Said</div>
    <div class="calloutUp">
        <div class="calloutUp2">
        </div>
    </div>
    <div class="divContainerUp">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt
        turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus.
        Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla
        viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan
        consectetuer.
    </div>
    <br />
    <br />
    <h3>
        Down Side Callout</h3>
    <div class="divContainerDown">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt
        turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus.
        Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla
        viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan
        consectetuer.
    </div>
    <div class="calloutDown">
        <div class="calloutDown2">
        </div>
    </div>
    <div>
        <a href="#">Ramesh Soni</a> Said</div>
</div>

Here is a full example and up side and down side callouts.

Up Side Callout

Ramesh Soni Said

Down Side Callout

Ramesh Soni Said

Top 7 Tip for Optimizing CSS

Ramesh Soni — Mon, 06 Oct 2008 02:13

CSS is very important component for design and layout of web pages. These includes all the syles like colors, size, position, backgrounds, fonts etc. to enrich the look and feel of you pages, but it is very easy for CSS to grow to a huge size if you are not following proper guidelines to optimize this. By doing so you are not only making you css cleaner but also decreasing the response size of file. Here are some tip for optimizing the CSS:

1. Aggregate Multiple Properties

Combine multiple properties. For example

for margin, instead of

margin-top: 8px;
margin-right: 4px;
margin-bottom: 8px;
margin-left: 4px;

you can use

margin: 8px 4px 8px 4px;

for font instead of

font-family: Tahoma;
font-weight: bold;
font-style: italic;
font-size: 12px;

you can use

font: italic bold 12px Tahoma;

for background instead of

background-image: url(bk_main.jpg);
background-repeat: repeat-x;
background-color: #ccccff;

you can use

background: #ccccff url(bk_main.jpg) repeat-x;

2. Group Common Styles

If you are having something like below where two element share some common properties

H2
{
    font-size: 16pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

H3
{
    font-size: 14pt;
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

Then you can share their common properties like below

H2, H3
{
    color: #4169e1;
    font-family: 'Trebuchet MS' , Arial;
    margin: 4px 0px 2px;
    padding-left: 10px;
    text-decoration: underline;
}

H2
{
    font-size: 16pt;
}

H3
{
    font-size: 14pt;
}

3. Use Shorthand Hexadecimal for Simple Colors

You can also specify simple colors using shorthand color names. For example

#99ff33 can be replace with #9f3
#ff0000 can be replace with #f00
#000000 can be replace with #000

4. Use Classes in Parent Elements

You may specify element style in the parent control. Instead of using

<p class="myClass">Home</p>
<p class="myClass">About</p>
<p class="myClass">Contact</p>
<p class="myClass">Sitemap</p>

you may also do this

<div class="myClass">
    <p>Home</p>
    <p>About</p>
    <p>Contact</p>
    <p>Sitemap</p>
<div>

5. Don't Use Giddy Comments

The below comment

/*****************************/
/**********Header CSS*********/
/*****************************/

can also simply written as

/*Header CSS*/

6. Never Attach Style to Elements

Always specify styles in CSS. Don't add styles directly to elements. Instead of

<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Home</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">About</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Contact</p>
<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Sitemap</p>

use

<p class="myClass">Home</p>
<p class="myClass">About</p>
<p class="myClass">Contact</p>
<p class="myClass">Sitemap</p>

7. Remove Extra White Spaces and Line breaks

For decreasing the file size you can remove the extra white spaces and lines breaks between styles.

Animated Progress Bar without Images

Ramesh Soni — Wed, 03 Sep 2008 02:13

Look at below progress bars

These don't contain any images. They all are pure JavaScript based progress bars. They uses the JavaScript Timer Class for the delay and jQuery fading function transparency for animated effect. To add a progress bar to the page is very easy, just add include the ProgressBar class and add following code:

var bar1 = new ProgressBar("progressContainer1", 10, 
  "progressTable", "cell1", "size");
bar1.Start();

First parameter is the ID of the div which will contain the progress bar. Second parameter is number of cells you want to have in progress bar. Third is the css class for outer table of the progress bar. Fourth is the the css class for each celll and fifth the the css class for the size of each cell.

Here is the code for the whole example and this is the link to the live demo.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animated Progress Bar without images</title>

    <script src="jquery.js" type="text/javascript"></script>

    <style media="screen" type="text/css">
        .progressTable
        {
            border: solid 1px #e1e1e1;
        }
        
        .size, .cell1, .cell2, .cell3
        {
            width: 15px;
            height: 15px;    
        }
        .cell1
        {        
            background-color: #22dd22;
            display: none;
        }
        .cell2
        {        
            background-color: #dd2222;
            display: none;
        }
        .cell3
        {        
            background-color: #2222dd;
            display: none;
        }
    </style>
    <script language="javascript">
    <!--
    $(document).ready(function()
    {
        var bar1 = new ProgressBar("progressContainer1", 10, 
          "progressTable", "cell1", "size");
        bar1.Start();
        
        var bar2 = new ProgressBar("progressContainer2", 10, 
          "progressTable", "cell2", "size");
        bar2.Start();
        
        var bar3 = new ProgressBar("progressContainer3", 10, 
          "progressTable", "cell3", "size");
        bar3.Start();
    });
        
    var ProgressBar = function(divId, cellCount, tableCss, cellCss, sizeCss)
    {
        var index = -1;
        var timerObj = new Timer();
        
        this.Init = function()
        {
            var str = "<table class='" + tableCss + "' cellpadding='0' cellspacing='1'><tr>";
            for(var cnt=0; cnt<cellCount; cnt++)
            {
                str += "<td class='" + sizeCss + "'><div class='" 
                  + cellCss + " " + cellCss + cnt + "'></div></td>";
            }
            str += "</tr></table>";
            $("#" + divId).append(str);
            
            timerObj.Interval = 100;
            timerObj.Tick = timer_tick;
        }
        
        this.Start = function()
        {
            this.Init();
            timerObj.Start();
        }
        
        function timer_tick()
        {
            //debugger;
            index = index + 1;
            index = index % cellCount;
            
            $("#" + divId + " ." + cellCss + index).fadeIn(10);
            $("#" + divId + " ." + cellCss + index).fadeOut(500);
        }
    }
    
    // Declaring class "Timer"
    var Timer = function()
    {        
        // Property: Frequency of elapse event of the timer in millisecond
        this.Interval = 1000;
        
        // Property: Whether the timer is enable or not
        this.Enable = new Boolean(false);
        
        // Event: Timer tick
        this.Tick;
        
        // Member variable: Hold interval id of the timer
        var timerId = 0;
        
        // Member variable: Hold instance of this class
        var thisObject;
        
        // Function: Start the timer
        this.Start = function()
        {
            this.Enable = new Boolean(true);
    
            thisObject = this;
            if (thisObject.Enable)
            {
                thisObject.timerId = setInterval(
                function()
                {
                    thisObject.Tick(); 
                }, thisObject.Interval);
            }
        };
        
        // Function: Stops the timer
        this.Stop = function()
        {            
            thisObject.Enable = new Boolean(false);
            clearInterval(thisObject.timerId);
        };
    
    };
    
    //-->
    </script>

</head>
<body>
    <div id="progressContainer1">
    </div>
    <br />
    <div id="progressContainer2">
    </div>
    <br />
    <div id="progressContainer3">
    </div>
</body>
</html>

Maintaining Dirty and New state of objects

Ramesh Soni — Tue, 26 Aug 2008 02:10

I have worked on CSLA on few projects and I am very much impressed from all of its features. However not every application wants to use CSLA but may be some features out of it. This post is about adding IsDirty and IsNew capabilities to our object. I used CSLA as reference for create these classes.

Base Classes Definitions

ObjectBase

public class ObjectBase
{
    private bool _isDirty;
    private bool _isNew = true;

    public bool IsDirty
    {
        get { return _isDirty; }
    }

    public bool IsNew
    {
        get { return _isNew; }
    }

    protected void MarkDirty()
    {
        _isDirty = true;
    }

    protected void MarkClean()
    {
        _isDirty = false;
    }

    protected void MarkAsNew()
    {
        _isNew = true;
    }

    protected void MarkAsOld()
    {
        _isNew = false;
        _isDirty = false;
    }
}

ObjectListBase

public class ObjectListBase<T> : List<T> where T : ObjectBase
{
    public bool IsDirty
    {
        get
        {
            foreach (T item in this)
            {
                if (item.IsDirty)
                    return true;
            }
            return false;
        }
    }
}

Using Base Classes

To use these base classes, simply inherit your business object from ObjectBase and collection objects from ObjectListBase. Let take example:

Suppose a class Employee represents an employee entity and its collection class EmployeeList.

Employee

public class Employee : ObjectBase
{
    // Member Variables
    private int _employeeCode;
    private string _employeeName;
    private decimal _salary;

    // Public properties
    public int EmployeeCode
    {
        get { return _employeeCode; }
        set
        {
            if (_employeeCode != value)
            {
                _employeeCode = value;
                base.MarkDirty();
            }
        }
    }

    public string EmployeeName
    {
        get { return _employeeName; }
        set
        {
            if (_employeeName != value)
            {
                _employeeName = value;
                base.MarkDirty();
            }
        }
    }

    public decimal Salary
    {
        get { return _salary; }
        set
        {
            if (_salary != value)
            {
                _salary = value;
                base.MarkDirty();
            }
        }
    }

    // Constructor
    public Employee()
    {
    }

    public void Fetch(int employeeCode)
    {
        // Code to fetch employee
        base.MarkAsOld();
    }

    public void Save()
    {
        // Code to save employee
        if (base.IsNew)
        {
            // Code Insert into database
        }
        else
        {
            // Code to Update into databse
        }

        base.MarkClean();
        base.MarkAsOld();
    }
}

EmployeeList

public class EmployeeList : ObjectListBase<Employee>
{
    public static EmployeeList GetAllEmployees()
    {
        EmployeeList employes = new EmployeeList();
        employes.FetchAll();
    }

    protected EmployeeList()
    {
    }

    protected void FetchAll()
    {
        // Code to fetch employee list and 
        // add to this list
    }

    public void Save()
    {
        foreach (Employee employee in this)
        {
            if (employee.IsDirty)
            {
                employee.Save();
            }
        }
    }
}

Using Objects

See the code below:

EmployeeList employess = EmployeeList.GetAllEmployees();

// ..
// do operation of list
// ..

// Saves the list
if (employess.IsDirty)
{
    employess.Save();
}

Above code fetch list employee from database. You may perform add/edit operations on this. The class will manage the dirty and new state of object itself and Saves only those object in which changes are done. In this way we can save unnecessary trips to database.

Object Oriented Programming with JavaScript : Timer Class

Ramesh Soni — Wed, 13 Aug 2008 02:10

JavaScript with Oops is not much used by developers while creating application however we can make our life easy if we use JavaScript with Oops.

Let's started object oriented programming in JavaScript by taking example of a Timer class, similar to the Timer control in windows application.

Create Class

Create the class Timer. Below code shows how to declare the class

// Declaring class "Timer"
var Timer = function()
{
    // ....        
    // Class body
    // ....
}

Add Public Properties

To add public properties to the class we use this keyword as shown below

// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
    
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
}

You can see that we have created 2 properties (Interval and Enable) of Timer class and assigned default values to them.

Add Events (If any)

Now we might want to add events to the class in case we need. For Timer class we need "Tick" event which will be fired every after "Interval". Event are added the same way as the public properties.

// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
    
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
    
    // Event: Timer tick
    this.Tick;
}

Add Private Member Variables

We need 2 private variable in the class to hold the timer Id and the class instance. The private variable are added using 'var' keyword.

// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
    
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
    
    // Event: Timer tick
    this.Tick;
    
    // Member variable: Hold interval id of the timer
    var timerId = 0;
    
    // Member variable: Hold instance of this class
    var thisObject;
}

Add Functions

Public functions are also added the same way as public properties using this keyword. We need 2 function in the timer, first "Start" to start the timer and second "Stop" to stop the timer.

// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
    
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
    
    // Event: Timer tick
    this.Tick;
    
    // Member variable: Hold interval id of the timer
    var timerId = 0;
    
    // Member variable: Hold instance of this class
    var thisObject;
    
    // Function: Start the timer
    this.Start = function()
    {
        this.Enable = new Boolean(true);

        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick(); 
            }, thisObject.Interval);
        }
    };
    
    // Function: Stops the timer
    this.Stop = function()
    {            
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };

};

You can see I have incorporated the timer functionality using the setInterval function of the JavaScript. Our class is ready for use now.

Using the Class

To use the class first create the instance of Timer.

var obj = new Timer();

Now assign the value to its properties as needed.

obj.Interval = 300;

Attach handler to the events

obj.Tick = timer_tick;

function timer_tick()
{
    // Do something..
}

Now call the "Start" function to start the timer

obj.Start();

To stop the timer anytime in between just call the "Stop" function.

obj.Stop();

Here is a working example of this class for you reference.

Avoiding Event != null Check

Ramesh Soni — Thu, 07 Aug 2008 02:10

Lets take a simple example of declaring and raising a custom event. Look at the code below:

public class EventTestClass
{
    public event EventHandler NewEvent;

    protected void OnNewEvent()
    {
        NewEvent(this, EventArgs.Empty);
        // Above code will raise System.NullReferenceException
        // exception if there is no handler registered with it.
    }
}

As you know if if don't attach any handler to the NewEvent above then the OnNewEvent will throw exception because the NewEvent is null at that time. To get rid of this we generally put a null check on the event as shown below:

public class EventTestClass
{
    public event EventHandler NewEvent;

    protected void OnNewEvent()
    {
        if (NewEvent != null)
        {
            NewEvent(this, EventArgs.Empty);
        }
    }
}

There could be better way solving problem look at the solution below:

public class EventTestClass
{
    public event EventHandler NewEvent = delegate { };

    protected void OnNewEvent()
    {
        NewEvent(this, EventArgs.Empty);
    }
}

The above code will work perfectly fine even if you don't attach any handler to the event. This is because the event is not null now as we have already registered on empty handler with it.

Layout Form without Tables with CSS Trick

Ramesh Soni — Mon, 04 Aug 2008 02:08

Creating a form with lots of field could be a tedious task as it involves playing with TR and TD in html table. Along with that it also increases the size and complexity of the html code of out page. e.g. Look at the below form:

Title
First Name
Last Name
Address

City
Zip

Could you imagine it to create without using table or nested div. Well if no then you can just by using easy CSS trick. here is the whole css + html code for doing this.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout Form without Tables</title>
    <style type="text/css">
    .formLayout
    {
        background-color: #f3f3f3;
        border: solid 1px #a1a1a1;
        padding: 10px;
        width: 300px;
    }
    
    .formLayout label, .formLayout input
    {
        display: block;
        width: 120px;
        float: left;
        margin-bottom: 10px;
    }
 
    .formLayout label
    {
        text-align: right;
        padding-right: 20px;
    }
 
    br
    {
        clear: left;
    }
    </style>
</head>
<body>
    <div class="formLayout">
        <label>Title</label>
        <select>
            <option>Mr.</option>
            <option>Dr.</option>
            <option>Ms.</option>
            <option>Mrs.</option>
        </select><br>
        <label>First Name</label>
        <input id="name" name="name"><br>
        <label>Last Name</label>
        <input id="Text1" name="name"><br>
        <label>Address</label>
        <input id="address1"><br>
        <label></label>
        <input id="address2"><br>
        <label>City</label>
        <select id="city">
            <option>New York</option>
            <option>Chicago</option>
            <option>etc.</option>
        </select><br>
        <label>Zip</label>
        <input id="zip"><br>
    </div>
</body>
</html>