Basics of using jTemplate

Hi All,

jTemplate is a wonderful plugin for json data. It reduces a lot of markup repition on client-side. It works like a repeater control in asp.net but the repeater is implemented on the client-side.Following are simple steps to implement jTemplate.

First in the head section put the following code.

That is all for the head part. Now in the body section
have a container element(div works) which will list
the json data.

Now you can see the result of json data printed
as li elements on the page.

Code for Masked Slider Plugin

Following is the code for the masked slider plugin. Just copy the code and paste it in a javascript file.


var timer = null;

(function($) {
$.fn.maskedSlider = function(options) {

var defaults = {
stripHeight: 50,
topSliderColor: 'gray',
bottomSliderColor: 'gray',
opacity: 0.6,
duration: 1500,
horizontal: true
};

var options = $.extend(defaults, options);
var flag = true;
var element = $(this).attr("id");
var elementWidth = $(this).width();
//if you want the paddding and border to be included in the width then uncomment the following lines
/*var elementWidth = $(this).width() +
parseInt($(this).css("padding-left"),10) +
parseInt($(this).css("padding-right"),10) +
parseInt($(this).css("border-left-width"),10) +
parseInt($(this).css("border-right-width"),10);
*/
var elementHeight = $(this).height();
//if you want the paddding and border to be included in the height then uncomment the following lines
/*var elementHeight = $(this).height() +
parseInt($(this).css("padding-top"),10) +
parseInt($(this).css("padding-bottom"),10) +
parseInt($(this).css("border-top-width"),10) +
parseInt($(this).css("border-bottom-width"),10);
*/
var topDivId = element + "_top";
var bottomDivId = element + "_bottom";
var leftDistance = 0;
var topDistance = 0;

$(this).css("position", "relative");
$(this).append("

");
$(this).append("

");

/*Settings for the top/left slider*/
$("#" + topDivId).css({
"position": "absolute",
"background-color": options.topSliderColor,
"opacity": options.opacity,
"-moz-opacity": options.opacity,
"-khtml-opacity": options.opacity,
"left": leftDistance,
"top": topDistance
});

if (options.horizontal) {
$("#" + topDivId).css("width", elementWidth);
$("#" + topDivId).css("height", 0);
}
else {
$("#" + topDivId).css("height", elementHeight);
$("#" + topDivId).css("width", 0);
};
/*end settings for the top/left slider*/


/*settings for the bottom/right slider*/
$("#" + bottomDivId).css({
"position": "absolute",
"background-color": options.bottomSliderColor,
"opacity": options.opacity,
"-moz-opacity": options.opacity,
"-khtml-opacity": options.opacity
});

if (options.horizontal) {
$("#" + bottomDivId).css({
"height": elementHeight - options.stripHeight,
"width": elementWidth,
"left": leftDistance,
"top": topDistance + options.stripHeight
});
}
else {
$("#" + bottomDivId).css({
"height": elementHeight,
"width": elementWidth - options.stripHeight,
"left": leftDistance + options.stripHeight,
"top": topDistance
});
};
/*end settings for the bottom slider*/

timer = setInterval(function() {
if (flag) {
flag = false;
if (options.horizontal) {
$("#" + topDivId).stop().animate({
height: elementHeight - options.stripHeight
}, options.duration);
$("#" + bottomDivId).stop().animate({
height: 0, top: topDistance + elementHeight
}, options.duration);
}
else {
$("#" + topDivId).stop().animate({
width: elementWidth - options.stripHeight
}, options.duration);
$("#" + bottomDivId).stop().animate({
width: 0, left: leftDistance + elementWidth
}, options.duration);
};
}
else {
flag = true;
if (options.horizontal) {
$("#" + topDivId).stop().animate({ height: 0 }, options.duration);
$("#" + bottomDivId).stop().animate({
height: elementHeight - options.stripHeight,
top: topDistance + options.stripHeight
}, options.duration);
}
else {
$("#" + topDivId).stop().animate({ width: 0 }, options.duration);
$("#" + bottomDivId).stop().animate({
width: elementWidth - options.stripHeight,
left: leftDistance + options.stripHeight
}, options.duration);
};
};
}, options.duration);

};
})(jQuery);


(function($) {
$.fn.stopSlider = function() {
clearInterval(timer);
}
})(jQuery);



You can see the demo at: http://calyan.co.cc/Demo.php

Detect your best pals Yahoo Messanger Status

Hi Frnds,

At any time, if you need to check the yahoo messanger status of some one, just visit this site:

http://detectinvisible.com/

Yet there are many other sites which provide you with the same functionality, i found this as the best one.

Rounded Corners Using CSS

Hi All,

Ever wondered if you have an option to create rounded div using css. Not in all browsers but the most popular browser i.e., the mozilla has such an option. To have rounded corner for a div we just need to give it as,

#myDiv
{
border:solid 1px black;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

or you can give all in a single line as

#myDiv
{
border: solid 1px black;
-moz-border-radius: 10px;
}

For Safari broswer, you can use

-webkit-border-radius: 10px;

or you can specify individually as

-webkit-border-top-right-radius: 10px;
-webkit-border-top-leftt-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

For more information, please visit:
http://www.the-art-of-web.com/css/border-radius/

Power of semi-colon in javascript

I have been scripting since 2years from now and when i saw this link:

http://robertnyman.com/2008/10/16/beware-of-javascript-semicolon-insertion/

I thought there is some thing new, infact a lot more about javascript that i should know. Please go thru this link to have more understanding of semicolon.

Also while using jquery if you use the jquery file as,

<script src="js/jquery-1.2.6.min.js" type="text/javascript" /> //bad

The correct usage would be

<script src="js/jquery-1.2.6.min.js" type="text/javascript" ></script> //correct usage

Masked Slider Plugin in jQuery

Hi All,
This is my post after a long break. Well i have been looking into different technologies like photoshop, blend and i stopped at flash. I saw a simple and sweet animation in flash that suits excatly for displaying products.
After few days i succeeded to implement the same feature in jQuery.
So here is a sample screen-shot of how it looks like.



The slider moves up and down giving a pretty cool visual experience for viewers. The image is set a background image for the containing div element. You just need to call the slider plugin as,

$("#divWithBgImage").maskedSlider({defaultOpacity : 0.6, stripHeight: 55});

That's it and the rest of the visual effects are applied by the plugin. Also the plugin has many options that it supports. Here are the list of supported options:

{
defaultOpacity : 0.6,
stripHeight : 40,
topSliderColor : gray,
bottomSliderColor : gray,
duration : 2000,
horizontal : true
}

The options are self explainable. The last option specifies that the slider will move vertically if horizonal : false is specified.

Note: The function can be called only once within a page. i.e., it can be called on any div element within a page once and only once.

The problem here is - i m adding new html elements on given div and animating their height and position. If its called for more than one div then there will be a runtime conflict in the browser because the same id exists(newly added html elements thru plugin) for called div elements.
I assure you my next post will give a solution to this problem.
If any one is intrested to get the plugin, Reply me or email me at calyan.bandi@gmail.com or you can email me at buntychitti@yahoo.com

Convert a Canvas into an Image

Hi,
I have once faced this problem and google produced me with pieces of information which i grouped into the following. The below function will take a Canvas element as an input and makes an image out of it.

public static BitmapDecoder CreateImageFromCanvas(UIElement element, int dpix, int dpiy, ImageFormat format)
{
double dpiX = 96;
double dpiY = 96;

FrameworkElement fwElement = element as FrameworkElement;
Rect bounds = VisualTreeHelper.GetContentBounds(fwElement);
bounds = new Rect(0, 0, fwElement.Width, fwElement.Height);

// create the renderer.
RenderTargetBitmap rendertarget = new RenderTargetBitmap((Int32)(bounds.Width * dpiX/96.0),
(Int32)(bounds.Height*dpiY / 96.0), dpiX, dpiY, PixelFormats.Pbgra32);
// Render the element on screen.
rendertarget.Render(element);

BitmapEncoder bmpe;

// Select the image format.
if (format == ImageFormat.Png)
{
bmpe = new PngBitmapEncoder();
}
else if (format == ImageFormat.Bmp)
{
bmpe = new BmpBitmapEncoder();
}
else if (format == ImageFormat.Jpeg)
{
bmpe = new JpegBitmapEncoder();
}
else
{
bmpe = new PngBitmapEncoder();
}

bmpe.Frames.Add(BitmapFrame.Create(rendertarget));

Stream fl = new MemoryStream();
bmpe.Save(fl);


BitmapDecoder bmpd;
// Select the image format.
if (format == ImageFormat.Png)
{
bmpd = new PngBitmapDecoder(fl, BitmapCreateOptions.IgnoreColorProfile, BitmapCacheOption.Default);
}
else if (format == ImageFormat.Bmp)
{
bmpd = new BmpBitmapDecoder(fl, BitmapCreateOptions.IgnoreColorProfile, BitmapCacheOption.Default);
}
else if (format == ImageFormat.Jpeg)
{
bmpd = new JpegBitmapDecoder(fl, BitmapCreateOptions.IgnoreColorProfile, BitmapCacheOption.Default);
}
else
{
bmpd = new PngBitmapDecoder(fl, BitmapCreateOptions.IgnoreColorProfile, BitmapCacheOption.Default);
}

MemoryStream mStream = (MemoryStream)fl;
System.IO.File.WriteAllBytes("F:\\Samples\\myimage."+format, mStream.ToArray());

fl.Close();

return bmpd;
}

Remember you can only pass a canvas element as an argument to this function. Ofcourse it accepts any UIElement but if you pass anything other than a Canvas element you will get a blank image.

Subsequently you can use this function in your main class file like,
myImage.Source = GrapSnapShot(myCanvas, 89,89,ImageFormat.Png).Frames[0];
where myImage is an Image element in your xaml file and it displays your canvas as an image.

Difference between Logical and Visual Tree in WPf

Hi All,
Just go through this link:

http://blogs.msdn.com/mikehillberg/archive/2008/05/23/Of-logical-and-visual-trees-in-WPF.aspx

Accessing template elements of a usercontrol

Hi Frnds,
In the last post I explained of creating a user control which acts like a container. In this post I will explain how to change the properties of your user control. The following steps will clear you about this,
1. Create a public property for the user control, accessing on which you will change the properties of your usercontrol. This is something like,
Private string someText;
Public string SomeText
{
Set { this.txtName.Text = value; }
Get { return txtName.Text; }
}
2. Since your properties are kept inside control template you cannot refer them simply by name as above.i.e.,this.txtName is not accessible if txtName is name of an element inside the control template.To access that element you need to have something like,
TextBlock txtBlock = (TextBlock)Template.FindName(“txtName”,this);
So if you think of something like,
Set
{
TextBlock txtBlock = (TextBlock)Template.FindName(“txtName”,this);
txtBlock.Text = value;
}
Then you are mistaken. This is because inside the setter you cannot fill the object txtBlock. This means that you will get a null reference when you run the above code. The reason is control hierarchy loading. When your setter method is executing your TextBlock is not yet created and so it will return an error(a run-time error).So the solution would be to set the value inside onApplyTemplate().The overall code looks like this:
MyUserControl.xaml
<USerControl x:Class="MyUserControl" Height="Auto" Width="Auto"......>
<UserControl.Template>
<ControlTemplate>
<Grid>
<Border Height="Auto" Width="Auto" Background="{TemplateBinding Property=ContentControl.Background}" CornerRadius="10" Name=”myContainer”>
<ContentPresenter Content="{TemplateBinding Property=ControlContent.Content}" />
</Border>
</Grid>
</ControlTemplate>
</UserControl.Template>


MyUserControl.xaml.cs
Public partial class MyUserControl : UserControl
{
Public MyUserControl()
{
InitializeComponent();
}
Public override void OnApplyTemplate()
{
Border border = (Border)Template.FindName(“myContainer”,this);
border.CornerRadius = new CornerRadius(topLeftRadius,0,10,0);
base.OnApplyTemplate();
}
Private double topLeftRadius;
Public double TopLeftRadius
{
Set { topLeftRadius = value; }
Get { return topLeftRadius; }
}
}


And in the main window Main.xaml
<Window…….>
<MyUserControl Background=”Chocolate” Height=”100” Width=”65” TopLeftRadius=”20”>
<TextBlock HorizontalAlignment=”Center” VerticalAlignment=”Center”>Some Text </TextBlock>
</MyUserControl>
</Window>

Please feel free to scold me if anything wrong mentioned.
Hope this was helpful

Creating UserControl to hold other controls in WPF

Hi Friends,
You can find many samples in google for creating user controls and my post stands little adhead of them.
Firstly if you create a user control and in the main window where you use the usercontrol, if you try to put some content within your usercontrol, it will throw an error. This is because your usercontrol is not designed to handle other wpf elements within it. To make this happen you have to follow a different apporach.
The following is a sample code for creating such a control:
<USerControl x:Class="MyUserControl" Height="Auto" Width="Auto"......>
<UserControl.Template>
<ControlTemplate>
<Grid>
<Border Height="Auto" Width="Auto" Background="{TemplateBinding Property=ContentControl.Background}" CornerRadius="10">
<ContentPresenter Content="{TemplateBinding Property=ControlContent.Content}" />
</Border>
</Grid>
</ControlTemplate>
</UserControl.Template>

And in your main window just add it as
<MyUserControl Background="LightBlue" Height="50" Width="75">
<Button content="Push Me">
</MyUserControl>

Remember here both MyUserControl and the Main window remain in the same namespace. The result of the above code will be a rounded rectangle with a button inside it. Creating a rounded rectangle as an usercontrol is easy but it will not act like a container for holding for other elements. What the magic i have done here is, i've defined the look of my usercontrol as rounded rectangle inside the usercontrol template and mainly the ContentPresenter Tag which makes the control to hold other items. Other important issue to look at is the TemplateBinding. I will not explain about TemplateBinding for now but you can find many sites that will help you around.
In my next post i'll explain how to change/access the cornerradius of the rectangle from code-behind of the usercontrol which will help you to expose the accessibility to the main window.

Double-click solution file to create your web site

Hi all,
In Visual Studio, if you have to go for any web based content you will be left with two choices - web site/web application. Here is one difference that may be helpful for your selection criteria:

1. Create a solution file.
2. Add a new project and select the project type as "Asp.Net Web Application".
3. Right click on this web application and select properties - go to 'Web' tab, under server you will find the radio box 'Use Visual Studio Development Server' selected. Below that is the radio box 'Use Local IIS Web server'. Uncheck the former and select the later one.
4. Now when you export your solution file to another machine and when you double-click the solution file, your web site is automatically created in the IIS Server of that machine.

If you select a new web site to be added to your solution file then you won't find such an option as described above. So if you have a web site added to your solution file and when you open the solution file in another machine, the default url will be something like 'http://localhost/MySite/MyPage.aspx' and this means a site located in that machine. But since you don't have any such site published in IIS yet, your visual studio will warn you about this and the project will be unavailable.

Difference between Raster Image and Vector Based Images

Hi All,
In differentiating the two kinds of images what i conclude is "Vector based images are mathematical images - this implies that these are image format used by computers. This is true because a raster image has definition defined pixel by pixel.
For a better understanding pls go through the following link:
http://www.nw-media.com/photography-articles/31/raster-vs-vector/

ADO.NET Entity Framework and Linq Framework

I googled for this and i have found the following links which will clear many confusions 

http://msdn.microsoft.com/en-us/library/cc161164.aspx

http://dotnetaddict.dotnetdevelopersjournal.com/adoef_vs_linqsql.htm

http://social.msdn.microsoft.com/forums/en-US/adodotnetentityframework/thread/55a7a796-2bef-4df9-b858-2f9804d39af5/

http://dotnethitman.spaces.live.com/blog/cns!E149A8B1E1C25B14!195.entry

Please go thru these links once.

Writing Your Own HttpHandler

Hi All,

Today i'll explain how to write our own handler for a new kind of page. Firstly, Handlers(as the term explain) are for handling things. These things are client requests. So for a client request to Default.aspx there will be a handler. This will be a default handler which will ship along with asp.net runtime. If you have new kind of extension you can writer your own handler.

The reason of writing this blog is for a good understanding of http handlers. I insist you to follow these steps and create your own handler. I have followed these procedures from the site:

http://www.15seconds.com/Issue/020417.htm

Step 1:

In u r VS, create a new c# class library and the name the class as MyOwnHandler.

The code should be

using System;

using System.Web;

using System.Text;

namespace MyCustomizedHandler

{

  public class MyOwnHandler: IHttpHandler

  {

     public MyOwnHandler()

     {

     }

      #region for implementing HttpHandler

      Public void ProcessRequest(HttpContext context)

      {

         HttpResponse responseObject = context.Response;

         responseObject.Write("<html><body><h1>My Customized page</h1>");        

 responseObject.Write("</body><html>");

       }

       Public bool IsReusable

       {

            get

            {

                  return true;

            }

       }

       #endregion

      }

  }

}

Rather than copying and pasting i insist all of u to type this small piece of code manually. Now just compile this from ur VS and paste the output of this dll into a virtual folder webapplication. I have a website in my iis with the name 'jsonSamples', so i placed the dll output of the above code into the bin directory of 'jsonSamples'. 

Step2: 

Now open the web.config file of the webapplication(in my case 'jsonSamples') and add the following piece of code inside it:

<httpHandlers>

     <add verb="*" path=".sample" type="MyCustomizedHandler.MyOwnHandler,       MyCustomizedHandler">

</httpHandlers>

Step3:

All what we have done is in the application level. i.e., our application knows how to render a request for the page type .sample. Now we have to tell this to the iis webserver also. For that we have to do:

Launch IIS, right click on Default Web Site, go to home directories tab, click on configuration. This will open a new window. Now click on the add button and in the Executable section give the url of the aspnet_isapi.dll. Down to it, the extension should be given as 'sample'.

Click all ok's and close the window.

Now from ur browser just make a request some thing like this:

http://localhost/jsonSamples/helllo.sample

http://locahost/jsonSamples/239kshrkweh.sample

http://localhost/jsonSamples/anything.sample

You should get the output. (But i didn't get the output for the first time)

If u dont get the output then dont panic, just open ur webapplication(jsonSamples) in VS and for it add reference of u r class library dll. Even though u have placed the dll in the bin directory of the webappliation but u need to do add reference to the same item once again from VS. I dont know why but it works.

Hope this helped.

Improve u r english

Hi Friends,

I have found a site that help u improving u r english skills. It was really helpful for me. May be u should also  take a look at it.

 

http://www.pandorabots.com/pandora/talk?botid=f5d922d97e345aa1

List all Running Applications through windows script

Hi All,

The following is a simple script which will list all the applications inside ur taskmanager applications tab.

Set objWord = CreateObject("Word.Application")

Set colTasks = objWord.Tasks

For Each objTask in colTasks

    If objTask.Visible Then

        Wscript.Echo objTask.Name

    End If

Next

objWord.Quit

Must and should read link:

http://www.microsoft.com/technet/scriptcenter/topics/office/tasks.mspx

Infact i actually copied the above code from this link only. This was really very helpful and it explained me a lot. I'd simply like to say: "All the processes which are not running in hidden mode are listed in the applications tab.If a process doesn't have a visible window then it will not be present in the applications tab."

I really insist all of u to go through the above link for a better understanding of things.

Hpy Scripting.........

Open Yahoo Mail through Windows Script

Hi People,

I'm a Newbie to scripting world. I thought of writing a windows script which will take my credentials and automatically logs me into yahoo. With lots of googling i  m able to write the following code:

set objIE = CreateObject("InternetExplorer.Application")

objIE.Navigate "www.mail.yahoo.com"

objIe.Visible = true

'wait untill page gets loaded

While objIE.busy

WScript.Sleep 1000

Wend

objIE.document.getElementByID("username").value = "my_username"

objIE.document.getElementByID("passwd").value = "my_password"

 objIE.document.getElementsByName(".save")(0).click()

That's it. Copy and paste the above code. Yeah pls fill corresponding username and password fields. This code needs to be worked in the following sections:

1)Inside the if condition i m finding the username textbox through DOM selection and then filling in the appropriate fields. But this may affect if the textbox name changes.

The following are some of the links where u can find some more useful information:

http://www.visualbasicscript.com/m_68329/tm.htm

http://www.visualbasicscript.com/m_68329/mpage_1/tm.htm#68433

http://my.safaribooksonline.com/0735622442/ch03lev1sec9

CSS Tips

The disadvantage of using table-layout is, once the entire table is loaded then only u can view it. This is a performance issue interms of user experience, for ex if u have table with hundred images, until all the images r loaded u cannot see them. Instead if u follow some other way like using div's, it might be good.

Also dont overwrite styles until unless they r explicitly required. This is because if u have color coming for a p element from two style rules then it is considered as an error in css validator checks.

Giving negative margins will mess up things in IE6.