Folllowing are some of the best search engine tricks in google:
http://google.about.com/od/searchingtheweb/tp/searchtrickstp.htm
February 08, 2010
google search engine tricks
0 comments 2/08/2010 01:41:00 AM Posted by kalyan kumar BOctober 01, 2009
Basics of using jTemplate
0 comments 10/01/2009 12:51:00 PM Posted by kalyan kumar B
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.
August 19, 2009
Code for Masked Slider Plugin
0 comments 8/19/2009 06:58:00 PM Posted by kalyan kumar BFollowing 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
July 01, 2009
Detect your best pals Yahoo Messanger Status
0 comments 7/01/2009 08:15:00 PM Posted by kalyan kumar BJune 30, 2009
Rounded Corners Using CSS
0 comments 6/30/2009 07:39:00 PM Posted by kalyan kumar BHi 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
or you can give all in a single line as
{
border:solid 1px black;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}#myDiv
For Safari broswer, you can use
{
border: solid 1px black;
-moz-border-radius: 10px;
}-webkit-border-radius: 10px;
or you can specify individually as
-webkit-border-top-right-radius: 10px;For more information, please visit:
-webkit-border-top-leftt-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
http://www.the-art-of-web.com/css/border-radius/
June 22, 2009
Power of semi-colon in javascript
0 comments 6/22/2009 05:38:00 PM Posted by kalyan kumar BI have been scripting since 2years from now and when i saw this link:
June 19, 2009
Masked Slider Plugin in jQuery
0 comments 6/19/2009 05:15:00 PM Posted by kalyan kumar BHi 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