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.