jCarousel Lite Mouse Hover Event Improvement

Koumei — Tue, 31 May 2011 22:37:35 +0000

jCarousel Lite is a fantastic jQuery plug-in to display photo gallery. You can have a look at the demo at: http://www.gmarwaha.com/jquery/jcarousellite/#demo

On this demo, the photo gallery will only scroll left or right when you click on the left arrow and right arrow. On jCarousel’s document, we can initialize the carousel start scrolling when the page finishes loading by specify the option: auto

$(".slider").jCarouselLite({
visible: 4,
auto: true,
speed: 2000
});

What if I want it to stop when my mouse hover on any of the images? Oh, jCarousel does not originally handle mouse hover event. Well, DIY time.

Firstly, download the carousel original source code from the official website

open that file (jcarousellite_1.0.1.js)

Second, add a code block between line “function go(to){” (about line 292):

//<!--add by koumei
var isMouseOver = false;
$(this).mouseover(function(){
isMouseOver = true;
}).mouseout(function(){
isMouseOver = false;
});
//add by koumei-->
function go(to) {
...
...

Third, modify function go: (around line 293)

Change "if(!running)" to "if(!running && !isMouseOver)"

Fourth, DONE.

Quite simple, I hope the author will consider this function to the next release.

You can also download my modified version and the demo at:

http://koumei.net/download/carousel-demo.zip

Html5 Drama Update Episode 2

Koumei — Mon, 26 Jul 2010 14:10:24 +0000

Html5 Drama Episode 2

Foreword:

Anonymous’ ID seems to be unveiled on this update. Well, the anonymous sends Koumei a photo image, Koumei is shocked after he knows who anonymous really is.

Summary:

2D context API is quite useful and interesting. The HTML5 canvas is absolutely fantastic!

Pre-requisition:

Firefox 3.6+ or Google Chrome. Internet Explorer 8 does not support

Use of Lambda Expression to Create Complicated Query

Koumei — Wed, 10 Mar 2010 07:12:31 +0000

.NET FX introduces a powerful weapon for creating the compact, breezy and elegant code in your project. The weapon’s name is as complicated as the mathematical stuff, called Lambda expression.

As the name implies, the great convenience comes great complication inside. Lambda expression is too important to understand, it is useful and I think it is good to know how it works. Well, it’s not as complicated as we think, just a little bit confusing when using it.

First of all, Lambda is used for 2 purposes. 1 is to simplify delegation, 2 is to create expression tree. In my case, I need to create lambda expression to create dynamic query.

Imagine the following usecase:

In your product table, there is a field called “Tags” and it’s used for storing the CSV (comma separated value) like “car, mazda, suv, luxury”, you have many records:

Product Table: (Table name: ProductTable)

ID   ProductName   Tags
1   Tow bar       car,mazda,suv,luxury
2   Cup holder   car,luxury
3   Phone holder   car,mazda
4   FM Transmitter   car,suv
5   Queens bed   luxury
6   DVD Burner   car,BMW,x5,luxury

When your searching criteria is
“mazda” and “luxury”, the following records would be selected out:

ID   ProductName   Tags
1   Tow bar       car,mazda,suv,luxury
2   Cup holder   car,luxury
3   Phone holder   car,mazda
5   Queens bed   luxury
6   DVD Burner   car,BMW,x5,luxury

In ancient SQL age, you would probably write a SQL like this:

string SQL = “SELECT * FORM ProductTable WHERE Tags LIKE’%mazda%’ OR Tags LIKE ‘%luxury%’”;

It is IMpossible to create SQL like above except the project scope tells you the fixed keywords that would be used, the keywords should flexible. Then the code would be as much as:

string[] tags = new string[]{“mazda”, “luxury”};

string SQL = “SELECT * FROM ProductTable WHERE 1=1″;
foreach(string tag in tags)
{
SQL += string.format(@” AND Tags like ‘%{0}%’”, tag);
}

You must be very exciting that your code supports as many keywrods as it can. (I did before, I mean I would be very exciting when the code filled with logical stuff, LOL, of course, not now, that’s what geek did before~ )

Back to the reality, to the modern age, with the lambda expression, what you need to do is:

(pre-condition: you have created corresponding domain model which mapped to the database.)
The domain object or entity would look like:

[Table("ProductTable")] Class ProductTable{
[Column]public int Id{get; set;}
[Column]public string ProductName{get; set;}
[Column]public string Tags{get; set;}
}

to fullfill the same kind of logic as the stone-aged people do, you just need to

DataContext db = new DataContext(“”);
Table table = db.GetTable();

string tag1 = “mazda”;
string tag2 = “luxury”;

var data = table.where(x=>x.Tags.Contains(tag1)).where(x=>x.Tags.Contains(tag2)) select new ProductTable;
return data.AsQueryable();

Since so far, you still feel comfortable with this, but after minute, you would probably wanna go back stone age, how do we dynamically create the query in this case? Unfortunately, there is no short-cut for this, but many people provide lots of solutions on the Internet. We can either download some source codes about dynamically query on Internet or just grab the codes from the blogger’s website.( Most of time, you can’t use all of their codes posted on the blog, the codes are broken and bad structure, remember what Koumei always suggests, absorb the mind from the other coders, do not copy the code they provided. )

But in here, I would rather to use Expression Tree to implement the dynamic query.

First of all, we need to create an expression, because it would be applied to IQueryable.Where(Expression> expression), so the expression should be defined as:

public static System.Linq.Expressions.Expression> ApplyTags(IEnumerable tags) //parameter is the collection of tags
{

ParameterExpression c = Expression.Parameter(typeof(ProductTable), “c”); //Get the parameter from Func, remember? this is the advanced and lazy version of delegation, we need to craete ParameterExpression to hold this

var tagsProperty = Expression.Property(c, typeof(ProductTable).GetProperty(“Tags”)); //Here is the expression for get the Tags value from ProductTable object

Type[] ContainsTypes = new Type[1];

ContainsTypes[0] = typeof(string);

System.Reflection.MethodInfo myContainsInfo = typeof(string).GetMethod(“Contains”, ContainsTypes);

//Create the expression collection (based on the tags collection from parameter)
List myTagExpressions = new List();

foreach (var t in tags)
{
myTagExpressions.Add(Expression.Call(Expression.Call(tagsProperty, “ToString”, null, null), myContainsInfo, Expression.Constant(t)));
}

Expression OrExpression = null;

foreach (Expression myTagExpression in myTagExpressions)
{
if (OrExpression == null)
{
OrExpression = myTagExpression;
}
else
{
//Need to implement OR relationship among all the expressions
OrExpression = Expression.Or(myTagExpression, OrExpression);
}
}

//This is how Expression would be extracted to expression tree later on.
Expression> predicate = Expression.Lambda>(OrExpression, c);

return predicate;

}

Again, you can’t copy the code, since you would NOT have the same object like ProductTable and the same “Tags” property as I do. Luckily, you still can copy the code that I provide later, which is using the magic of template or generic programming. Before that, let us see how to use it:

IQueryable all = table.Where(ApplyTags(new List{“mazda”,”luxury”})).AsQueryable();

Since so far, I am 100% sure you can do it like refactoring, re-structuring to optimize your code. However, I would like to provide the code which can be general used:

public static System.Linq.Expressions.Expression> ApplyFilter(IEnumerable filters, string property)
{
//Get parameter
ParameterExpression c = Expression.Parameter(typeof(T), “c”);

//Get property from
var tagsProperty = Expression.Property(c, typeof(T).GetProperty(property));

Type[] ContainsTypes = new Type[1];
ContainsTypes[0] = typeof(string);
System.Reflection.MethodInfo myContainsInfo = typeof(string).GetMethod(“Contains”, ContainsTypes);
List myTagExpressions = new List();
foreach (var t in filters)
{
myTagExpressions.Add(Expression.Call(Expression.Call(tagsProperty, “ToString”, null, null), myContainsInfo, Expression.Constant(t)));
}
Expression OrExpression = null;
foreach (Expression myTagExpression in myTagExpressions)
{
if (OrExpression == null)
{
OrExpression = myTagExpression;
}
else
{
OrExpression = Expression.Or(myTagExpression, OrExpression);
}
}
Expression> predicate = Expression.Lambda>(OrExpression, c);
return predicate;
}

The usage is similiar:

IQueryable all = table.Where(ApplyFilter(new List{“mazda”,”luxury”}, “Tags”)).AsQueryable();

Not that hard, right?

Enjoy the powerful weapon, but don’t hurt yourself, bacause the deadline is ahead!

6 DVD Burner car,BMW,x5,luxury

Lab – Analysis Utility for Dentist – Schwartz-Korkhaus Model

Koumei — Wed, 11 Nov 2009 10:07:29 +0000

Idea for creating this gadget is to minimize the time for calculating the data gathering from the dental study model. My existence is to reduce the repetition and complexity.

Email me if you need such gadget. It’s free to use for all the dentists.

After input the data of A,B,C,D,B1 and C1, the gadget can print it as PDF and the filename is set to patient’s name automatically.

Melbourne Web Developer, Website Design & Development » Lab