Sometimes, we need a percentage bar / progress bar to show the progress of a specific task in web application. However, it is very difficult to find a working and easy solution without using Flash.
webappers has created java script based beautiful Progress Bar.
jLinq is a Javascript library that lets you write queries against arrays of javascript objects and JSON data.
Syntax for jLinq is much similar to LINQ ,
var results = jLinq.from(data.users)
.startsWith("first", "a")
.orEndsWith("y")
.orderBy("admin", "age")
.select();
//Some sample queries
var results = jLinq.from(records)
.startsWith("firstname", "jo") // first name starting with 'jo'
.or("ji") // or first name starting with 'ji'
var results = jLinq.from(records)
//you can use an array of values to check
.startsWith("firstname", ["a","e","i","o","u"])
If the field is…
– a string, checks if it ends with the value
– an array, checks if the last element matches the value
– else, convert to a string and check returns jLinq Object
For all commands with examples see this.
results[index][‘field’] will retrieve values from result object.
Following e.g. will retrieve data and displays in table,
var results = jLinq.from(data.users)
.startsWith("first", "a")
.toTable();
document.write(results);
We can also create our own commands,
jLinq.extend({
name:"evenValues", //the name of this command i.e. method
type:"query", //the kind of command this is
count:0, //how many parameters we expect
method:function(query) {
//determine how to evaluate the value being compared
var compare = query.when({
"string":function() {
return query.value.length;
},
"array":function() {
return query.value.length;
},
"other":function() {
return query.helper.getNumericValue(query.value);
}
});
//the actual comparison
return compare % 2 == 0;
}
});
E.g using custom command,
//this method is one way to do it
jLinq.from(data.users)
.less("age", 30)
.or()
.evenValues()
.select();
When you extend a query command , several additional operator prefixed name command are added to jLinq as well. Each of these perform the correct switches when they are used.
//this orEvenValues command is generated automatically
jLinq.from(data.users)
.less("age", 30)
.orEvenValues()
.select();
WebSite: http://www.hugoware.net
Videos: http://www.hugoware.net/Video
Download: http://www.hugoware.net/Downloads
Last week I had given useful cheats sheets , which contains useful information for developer which gives quick reference to programming language.
Now here are some new cheat sheets for HTML 5,
HTML 5 Cheat Sheets
References :
HTML 5 is the next major version of HTML. It introduces a new elements that will make our pages more semantic. This will make it a lot easier for search engines and screen readers to navigate our pages, and improve the web experience for everyone.
HTML 5 uses < !DOCTYPE html>which tells browser that current document is written in HTML5 .
HTML 5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:
canvas element.contenteditable attribute.draggable attribute.
I have created demo page by referring post by Mads Kjaer and HTML 5 working draft . Mads has explained very well in the post.
The structure of page is,
<!doctype html> <html> <head> <title>Page title</title> </head> <body> <header> <h1>Page title</h1> </header> <nav> <!-- Navigation --> </nav> <section> <!-- Main content area --> </section> <aside> <!-- Sidebar --> </aside> <footer> <!-- Footer --> </footer> </body> </html>
Online Demo:
Download Demo Page:
Gritter is jquery plugin for notification which displays messages in bubble/popup that appears in the top of web page.
It has facility to disappear automatically after x seconds or display until manually cloase with the “sticky” option.
We can set the speed of the fade effect used while the notifications appear/disappear.
I have found awesome collections of cheat sheets on internet which gives quick reference guide of various functionality.
Here are some good cheats links,
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
–
jQuery Impromptu is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.
The HTML Encode method in asp.net applies HTML encoding to a specified string. This is useful method of encoding form data.It converts potentially unsafe characters to their HTML-encoded equivalent.
e.g.
() is converted to >.
(&) is converted to &.
(“) is converted to ".
How to Use:
1.
2. div.InnerHtml = Server.HtmlEncode(“Enter a word <here>”);
It always good to send query string values in encrypted format. Encrypted URLs prevents sending illegal requests or invalid data to the application server. Users or attackers cannot see the request details of the URL as they are encrypted.
Before encryption,
http://localhost:60608/EncryptURLDemo/Default2.aspx?text=amol
After encryption,
http://localhost:60608/EncryptURLDemo/Default2.aspx?q=dSoxSTYQLHY3arcO+hfCO7uMyRNnIpRCoUqk0oyR80c=
string url=string.Format("~/Default2.aspx?text= {0}",EncryptionHelper.Encrypt("valuehere"));
if (Request.QueryString["text"] != null) Text = EncryptionHelper.Decrypt(Request.QueryString["text"]);
<httpModules> <add type = "QueryStringModule" name = "QueryStringModule" /> </httpModules>
Assembly: Download Now
Source code and Demo: Download Now
Ultimate Web Resources 