jQuery 1.3 Cheat Sheet

Download jQuery 1.3 Cheat Sheet from http://oscarotero.com/jquery/

it is also link to its example.

Read More

CK Editor

I few months a go have posted about some WYSIWYG editor, I have come to know that there is one more tool next generation solution of FCK Editor.

Almost all developers knows about FCK Editor, Now there is a new version, CK Editor.

There is all features of FCK editor and dozens of new functionality. CK Editor is faster is fast to load and fast to use.Its current version is 3.0

See demo here.

Read More

Open ThickBox dialogbox without “HREF”

I have seen many times that Thickbox normal works with <a href=””></a> syntax,

Ex :

Inner Page Content Syntex :

<a href="#TB_inline?height=200&width=200&inlineId=hiddenModalContentID&modal=true"
class="thickbox">Click here to show hidden modal content.</a>

IFrame Syntex :

<a href="testPage.aspx?keepThis=false&TB_iframe=true&height=200&width=200"
title="saActionPage" class="thickbox">Click here</a>   

But what happen when you need to open ThickBox by click event? Here is its solution.

You can to use same syntax of HREF  with “tb_show” function.

Ex :

<script language="javascript" type="text/javascript">

    function showTB()  {

       var newURL = "#TB_inline?height=200&width=300&inlineId=hiddenModalContentID";

        tb_show("ThickBox Title Here", newURL);

    }

</script>

It means you can also open thick box by any other event also.

Read More

Export GridView To Excel : Column Format

Last Month I posted that How to export to excel from web page with data formatting.

But when you are trying to export entire grid specially with Boolean datatype column,

 

               string attachment = "attachment; filename=Registration.xls";
               Response.ClearContent();
               Response.AddHeader("content-disposition", attachment);
               Response.Charset = "";
               //set the Response mime type for excel
               Response.ContentType = "application/vnd.ms-excel";
               //create a string writer
               System.IO.StringWriter stringWrite = new System.IO.StringWriter();
               //create an htmltextwriter which uses the stringwriter
               System.Web.UI.HtmlTextWriter htmlWrite = new System.Web.UI.HtmlTextWriter(stringWrite);
               //instantiate a datagrid
               GridView dg = new GridView();
               dg.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);
               //set the datagrid datasource to the dataset passed in
               dg.DataSource = dt;
               //bind the datagrid
               dg.DataBind();
               //dg.Columns[1].ItemStyle.
               //tell the datagrid to render itself to our htmltextwriter
               dg.RenderControl(htmlWrite);
               //all that's left is to output the html
               Response.Write(stringWrite.ToString());
               Response.End();

 

its result:

You can see that checkbox is there, But this is not user friendly. because in excel operator are not familiar with check box in excel data.

It means there should be 1/0  or True/False in place of checkbox. lets see.

Add RowDataBound event to the grid…

 

               GridView dg = new GridView();
               dg.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);

 

Now create an event…

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        CheckBox chk = (CheckBox)e.Row.Cells[1].Controls[0];
        chk.Visible = false;
        if (chk.Checked)
        {
            e.Row.Cells[1].Text = "1";
        }
        else
        {
            e.Row.Cells[1].Text = "0";
        }

    }
}

You can see that now checkbox is invisible and we are writing 1 or 0 in the same cell, Cells[1] is static value for second column.

and now see the result…

You can see that value is now changed in to 1 inplace of checkbox.

We can change any kind of data by using RowDataBound event.

Read More

Search Google Map Location by Address

Normally we have to pass Latitude and Longitude to get location, but Using Google API “geocoder.getLatLng()” we can get location by passing address. thanks to one of my friend Dhiren Javia to find this solution for me.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps API Example: Simple Geocoding</title>

    <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>

    <script type="text/javascript">

        var map = null;
        var geocoder = null;

        function initialize() {
            if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("map_canvas"));
                map.setCenter(new GLatLng(22.18, 70.56), 4);
                geocoder = new GClientGeocoder();
            }
        }

        function showAddress(address) {
            if (geocoder) {
                geocoder.getLatLng(
                address,
                function(point) {
                    if (!point) {
                        alert("Location not found : " + address);
                    } else {
                        map.setCenter(point, 13);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml(address);
                    }
                }
                );
            }
        }

        showAddress(this.address.value);
    </script>

</head>
<body onload="initialize();" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
    <p>
        <input type="text" size="60" name="address" value="Rajkot" />
        <input type="submit" value="Go!" />
    </p>
    <div id="map_canvas" style="width: 500px; height: 300px">
    </div>
    </form>
</body>
</html>

Read More

Image Reflection/Shadow

Apply image reflection effect using jQuery visit here

Reflection.js for jQuery is very cool plug-in to apply reflection in image dynamically without uploading two images. It is also allows you to add instantaneous reflection effects to your images in modern browsers, in less than 2 KB.

It will create a “Canvas” tag programmatically to show reflection and working will almost all browsers. See demo here.

Read More

Compresses and Decompresses CSS

This is very good idea to compresses CSS file before uploading it on web server, It compress the file size and improve performance of web site. But some time we need to edit the same compresses file it is very big headache, There is a small online tool to compress and decompress CSS.

Visit here

Read More

Bing.com cool background collection

Microsoft have launch new search web site, Bing.com, When we open this web site, there will be a cool background every day.

Find all archives of those cool background from here.

If you don’t want to load that image use this URL one time http://www.bing.com/?rb=0. Here rb=0 means No Background Image, and type rb=1 to load it.

Read More

Thumbnail image zoom to original perview using JavaScript

Let create cool JavaScript thumbnail zoom effect.

The concept is that there will be thumbnail on page user can see it and original image will be hidden at the same time and when user rollover on that thumbnail hidden main image will smoothly resize on the same place.

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

<div>

<img src="saAction Real.jpg" alt="saAction" id="screen1" 
onmouseout="reducethumb(1); return false;" style="position: absolute;
display: none;" width="240" border="0" height="269">

<img src="saAction Thumb.jpg" alt="saAction" id="thumb1" 
onmouseover="expandthumb(1, 500, 300);">

</div>

Settings :

Thumbnail Image

• id must be "thimbN", N means number example : thumb1, thumb2 etc.
• add "onmouseover" event and cell "expandthumb" function
• "expandthumb" have three arguments (thumbnail ID last number, main image width, main image height)

Mani Image

• id must be "screenN", N means number example : screen1, screen2 etc.
• Style="display:none;"
• add "onmouseout" event and cell "reducethumb" function
• "reducethumb" function take one argument (main image ID last number)
  

thats all when you will mouse over on thumbnail it will show main mage on same plase with smooth scrool effect.

Isn't it cool download demo.

Read More

Post HTML, C#, VB.net code with formating

I have faced this problem many times posting an article on blog spot. I was not able to provide good HTML, C# or any other code with color formatting, The problem is at the HTML code was rendering as HTML and breaking the post content, It is not able to get different between our articles code and its own code.

So tried to find its solution over the net, and get many good result.

1) SimpleCode

This very simple code online tool to converter HTML in compress mode. simple and quick, Enter HTML markup, click on “Process” button and get encoded markup, you will also see preview at the buttom of the page



2) C# Code Format

This is very cool tool, It provides us to seelct language like C#, VB.Net, HTML, T-SQL and MSH. This is also option to add live number in code.

Just click on “Format My Code” button and you will get encoded HTML code with preview. See the result example below:

this is cool result, we can aslo change code style as we want, and its give CSS, it is good to apply CSS in <header> tag and the reason is that we don’t have to apply CSS file in each post.


3) CopySourceAsHtml

CSAH is one kind of add-in for Microsoft Visual Studio only It is able to work with Visual Studio 2003, 2005 and 2008.

After installing this add-in there will be a new menu in “Edit”, named “Copy as HTML…”. When you click on it will show a dialogbox for settings.

There is a one cool feature for Line Number, we enter starting line number, It is user fult when we are giving information in detailed description. Syntax highlighting, CSAH uses Visual Studio's syntax highlighting and font and color settings automatically. If Visual Studio can highlight it, CSAH can copy it, and your source should look the same in your browser as it does in your editor.

4) Encode / Decode HTML Entities

Here we have good feature that we can aslo decode give HTML.

But there is not any advance fuatures as line number or color formating.

5) BlogJet

If you want POST in your blog by any desktop application that can add post directly in your blog, BlogJet is a good software. It is a popular Windows blog client for your WordPress, TypePad, Blogger, Drupal, etc. blogs. Get convenience and speed of a native application, and the ability to write posts offline.

We can also save post in our cumputer by “bjd” file format, This application will automatically decode HTML content.

So, here are many featurs abailabel to post HTML, C#, VB.Net.

Go ahad and start posting with user friendly look.

Read More