jCargoo | Technology & Programming

10 Horizontal Menus with jQuery Effects

2009-11-07T11:40:00.000-08:00

Well this is a roundup of some simple horizontal menus I have developed with jQuery.
They are all free to use. You can customize the code as you like. Every menu shows a different manner to present the user interaction.
jQuery comes to make all these menus more unique and special .
Please do not hesitate to add any kind of remark to improve this work.
All menus have been successfully tested in Firefox3.5.5, IE8, Chrome 3.0.195.27 and Safari 4.0.3.
One more thing to mention is that all these menus need to be slightly improved to be full developed CSS menus.

Let's have a try?

View Demo

Rounded corner (not in IE) background follows any menu link you move the mouse on it with an elastic effect.

The lightning image moves over the menu link with elastic effect.

Spice your menu with random colors when hovering.

A professional menu to add more significance to your menu.

One another elastic effect.

Give your bottom border another animation.

A colored vertical line is shown inside every menu item when hovering.

Every menu item grows when you put the mouse on.

Detailed menu content.

Every menu item has its own defined color.

Here is a code snippet for the first menu:


$('.hoverMenu1').css("left", $('.current1').offset().left).css(
"width",
parseFloat($('.current1').width(), 10)
- parseFloat($('.hoverMenu1').css("padding-left"), 10)
* 2);
$('#bar1 li a').hover(
function() {
var offset = $(this).offset();
$('.hoverMenu1').stop().animate( {
left : offset.left,
width : $(this).width()
}, 1000, 'easeOutElastic');
},
function() {
$('.hoverMenu1').stop().animate(
{
left : $('.current1').offset().left,
width : parseFloat($('.current1').width(), 10)
  - parseFloat($('.hoverMenu1').css(
    "padding-left"), 10) * 2
}, 600, 'easeOutBounce');
});

jQuery plugins used : jquery.easing.1.3.js and jquery.color.js.

Download Here

Friday Post: Programming, Blogging and Freelancing Best Selection

2009-08-14T13:04:00.000-07:00

Before to reveal my best articles I have read this week, I would like first to talk concisely about some events which left their mark on me. As usual some important things happen this week. People talked about the event day of the Apple Tablet announcement and its launch date (September 7th) or till 2010. Social media news bloggers were interested on Facebook acquirement of FriendFeed, Facebook Paid Nearly $50 Million for FriendFeed to update his status to "Married"

. Again we talked about the cyberattacks that twitter was subjected to. The Zune HD’s launch date (September 15th) announced by Microsoft. YouTube homepage gets finally an unnecessary redesign. Better sharing features added to Google reader so you can finally share your RSS items with your favorite social websites. Google talked about the next-generation architecture for Google's web search. This new search engine version is called Google Cafeine.
Google unveiled also the new "Social Gadgets" for its iGoogle site. This new detail lets some observers to say that iGoogle is transformed to a social network and might be the start of Facebook real problems(...)
There are so many other events to talk about. However, the aim of my Friday Post is merely to share with you my best posts selection of this week.
This following posts roundup remains varied.

Programming

8 Regular Expressions You Should Know

Review of eight regular expressions that you should know for your next coding project. The article is well explained. The comments too.

jQuery for Absolute Beginners: The Complete Series

Jeffrey Way, the editor of Nettuts+ posted fifteen video tutorials that teach you how to use the jQuery library. Neat screencasts, clear explanation, and several IDE, browsers and tricks used to teach you how to use the jQuery library in your projects.

Blogging

How to Create a High Quality Blog

Some tips for creating the best blog you can, and doing so with the resources you already have. Interesting article about how to make a convenient strategy for your blog.

Five Beginner’s Blogging Tips

The post is somehow old but the content still remains relevant and will be always so in the future. Simple beginners’ points are discussed with a clear method.

10 Tips for Using Affiliate Programs on your Blog

Darren Rowse presents a few tips that should help bloggers get the best results out of any affiliate program that they choose to run with. The revealed method will not surely work right for every blogger. Because all of us have already had at least one time (or more) affiliate program bad experimentation (in terms of revenue streams).

The Evolution of Blogging

Om Malik talks with a sharp insight (as per usual) about the current and the next generation of blogging systems and their needs to be associated with agile resources. The article is not technical but the future idea presented is interesting.

20 Free Keyword Research Tools – Comprehensive Insight

All is about keywords. What are the means that help you to have good search rankings because of SEO and trackbacks? This was the idea behind this article. However, the article does not give a neat comparative review of those search tools with advantages and disadvantages.

Freelancing

17 Tips for Designers on Starting a Freelance Business

Very good article which unveil some of the most important tips and aspects of freelancing and the lifestyle that comes with it. The only thing which was not deeply discussed is the customer aspect.

Are You a Daredevil Freelancer?

Small post but rich article. It focuses on this important step of taking the risk.

5 Must read articles for Freelancers

This post gathers 5 great articles showing the most important freelance elements in terms of business, security, resources and other amazing tips related to freelance field.

Freelancing and the Power of Partnering

Harness the power of partnering is the main subject of this nice article. Only examples are given to show how the partnering has its significant weight to fulfi your task.

What about you? I need your suggestions and ideas.

Have a wonderful weekend!

5 Very Useful Resources for MooTools Developers

2009-08-13T02:22:00.000-07:00

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. There are several sites and famous applications using MooTools. Here are 5 useful resources that I recommend to read and check for developers programming with MooTools.

jQuery vs MooTools
Picking a library to use, this is the main point of several people starting to code in JavaScript. This article gives an informative and useful clue to help choosing between jQuery and MooTools frameworks. The author tried to keep as unbiased as possible.

41 of the Best MooTools Ajax Example Downloads
This is merely the best MooTools examples scrupulously gathered by Speckyboy Design Magazine. The list includes several good examples for beginners and advanced MooTools developers (Slideshow, login form, sortable table, rounded corners...)

Twitter Emulation Using MooTools 1.2 and PHP
Using PHP, MySQL, and MooTools javascript, David Walsh provides a basic Twitter-like status system. MooTools is used to create subtle animations and Ajax requests.

TextboxList
TextboxList turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a “list” of items that can be easily deleted. It comes with an Autocomplete plugin.

11 Ways to Enhance a User Interface with MooTools
Interactivity, subtle effects and jazzing up your UI forms; there are the 3 main reasons behind writing a great article like this which presents 11 clear tutorials talking about MooTools.

For any idea or suggestion, please leave a comment.

Read also :
The 17 Most Widely Used JavaScript Frameworks

Overlay Text over an Image with a Very Simple jQuery Snippet

2009-08-10T10:15:00.000-07:00

This post will show you how much jQuery is helpful to give a trendy face of the presentation of your images.
There are some developers who want only to put fixed text messages above the images. But there are others who like to add some spices to their images look.

This code which I will show you has been developed to be clear and simple as much as possible.

View Demo

The main idea behind consists to let user get the comment (or explanation) of the image he is hovering. This comment will appear when the user hover over the image, and will disappear when the mouse is out of the image.

So here I go. Our schematic will be like following:

Then the HTML code is:


<div id="container">
 <div class="wrap">
     <img class="back" src="leopard.jpg" alt="image"/>

     <span class="comment">
         Apple - Mac OS X Snow Leopard <br/> The world's most advanced OS
     </span>
 </div>
</div>

Note that the width/height of the wrap div is the same as those of the image.

The CSS is also simple to understand:


#container {
  width: 850px;
  text-align: center;
  margin: auto;
}

.back
{
  position:absolute;
  top:0;left:0;
}
.wrap
{
  width:550px;
  height:390px;
  position:relative;
  margin:auto;
  overflow:hidden;
}

.comment
{
  position:absolute;
  width:550px;
  top:400px;
  left:0px;
  letter-spacing: -1px;
  color: white; font: 24px/45px Berlin Sans FB, Sans-Serif;
  background: #4A4D4A;
  padding: 10px;
  filter:alpha(opacity=60);
  -moz-opacity:0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
  line-height: 90%
}

The image class as well as the comment class should have absolute position in order to have the comment to be stuck on the image. Thus, the wrap class should be defined with relative position;
The overflow should be set to hidden for wrap class. This is done to hide the comment when it goes back;
There are the only important things to talk about. Otherwise, the rest of the parameters is clear to devour.

Finally, let’s talk about jQuery code. This code is a way to fulfill our task which is spicing our image look.


$(function(){

$('.wrap').hover(function(){
  $(this).children('.comment').stop().css("top", "0px");}
   
  , function(){
  $(this).children('.comment').stop().animate({"top": '400px'}, 600);});

});

We used hover jQuery event. The top value of the comment was 400px, which means that it was out of our eyesight. Now jQuery helps us to resotre it (set the top value to 0). Since the mouse is out of the image, the second function is fired with some animation thanks to jQuery effect.

For any kind of suggestion, please don’t hesitate.

Download Here

Tested successfully in Safari, FF, IE and Chrome (last versions)

The 17 Most Widely Used JavaScript Frameworks

2009-08-05T14:04:00.001-07:00

This is one of several points of entry found on the web in which some information about JavaScript frameworks are gathered.
The emergence of some recent JavaScript frameworks and libraries contributed widely to fine down a heavy volume of complex developers tasks.
Before to settle on a framework, the developer should know what are

the existing alternatives. This following list helps to give a pithy overview of the most used JavaScript frameworks. Note that this list contains also some excellent frameworks that are lacking only some popularity.
The purpose of the article is not to give the list of all JavaScript frameworks -because there are hundreds of Ajax/JavaScript frameworks available. But as I said, it is always good to know what the strongest choices do you have are.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

MIT and GPL licenses.

Details
IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome
Supports CSS 1-3 selectors and more!
About 19KB in size (Minified and Gzipped)

Documentation
http://docs.jquery.com/Main_Page

Books
jQuery in Action, Learning jQuery.

Plugins
http://plugins.jquery.com/

UI example

Get started with some tutorials here.

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.
Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

MIT (source code) and CC BY-SA (documentation) licences.

Details
IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.25+
More about Prototype and CSS3 is here.
About 128KB in size

Documentation
http://www.prototypejs.org/api

Books
Prototype and Scriptaculous in Action, Practical Prototype and script.aculo.us.

UI example

Get started with some tutorials here.

script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. It provides a visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more.
script.aculo.us includes the Prototype JavaScript Framework.

MIT license.

Details
IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.25+
About 141KB in size

Documentation
http://wiki.github.com/madrobby/scriptaculous

Books
Prototype and script.aculo.us, Practical Prototype and script.aculo.us.

UI example

Get started with some tutorials here.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

MIT license.

Details
Safari 2+, IE 6+, FF 2+ (and browsers based on gecko), Opera 9+.
About 65 kb in size (YUI Compressor)

Documentation
http://mootools.net/docs/core

Books
The Definitive Guide to MooTools, Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools.

UI example

Get started with some tutorials here.

The Dojo Toolkit is an open-source JavaScript toolkit useful for building great web applications. It is lightning fast, extremely robust, and supplies a solid set of tools for DOM manipulation, animations, Ajax, event and keyboard normalization, internationalization (i18n) and accessibility (a11y).

BSD or the Academic Free License version 2.1 licenses.

Details
IE 6+, Firefox 1.5+, FF 3.5 (1.3.2 only) (Dijit supports only FF 2+), Safari 3.2, Safari 4.0 (1.3.2 only), Chrome 1.0, Chrome 2.0 (1.3.2 only), Opera 9.6 (Dojo Core only), Konqueror 3.5+ (Dojo Core only)
About 28K (gzipped)

Documentation
http://dojotoolkit.org/docs, http://docs.dojocampus.org/

Books
Dojo: The Definitive Guide, JavaScript and Ajax Tools for Great Web Experiences (Pragmatic Programmers), Learning Dojo, Practical Dojo Projects.

UI example

Get started with some tutorials here.

The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX

BSD license

Details

A-grade
A-grade support is the highest support level. By taking full advantage of the powerful capabilities of modern web standards, the A-grade experience provides advanced functionality and visual fidelity.
A-grade browsers are identified on a whitelist. Approximately 96% of our audience enjoys an A-grade experience.
Summary: A-grade browsers are identified, capable, modern and common. QA tests all A-grade browsers, and bugs are addressed with high priority.

About 11.6 MB (zipped)

Documentation
http://developer.yahoo.com/yui/yuidoc/

Books
Learning the Yahoo! User Interface library.

UI example

Get started with some tutorials here.

ASP.NET AJAX is the free Microsoft AJAX framework for building highly interactive and responsive web applications that work across all popular browsers. The ASP.NET AJAX framework includes Server-Side ASP.NET AJAX, Client-Side ASP.NET AJAX, the AJAX Control Toolkit, and the jQuery library. ASP.NET AJAX enables developers to choose their preferred method of AJAX development, whether it is server-side programming, client-side programming, or a combination of both.

Microsoft Permissive License (Ms-PL).

Details
IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.25+
About 330KB in size (zipped)

Documentation
http://www.asp.net/ajax/documentation/

Books
Programming ASP.NET AJAX, ASP.NET AJAX in Action, Pro Ajax and the .NET 2.0 Platform.

UI example

Get started with some tutorials here.

The Spry framework is Adobe’s Ajax framework that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages. The Spry framework is a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript, without the need for refreshing the entire page.

BSD license.

Details
Firefox 1.5 +(Windows and Mac) • Netscape 7.2 (Windows) • Internet Explorer 6+ (Windows) • Safari 2.0.3 (Mac)
About 4.88 MB in size (zipped)

Documentation
http://labs.adobe.com/wiki/index.php/Spry

Books
The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP

UI example

Get started with some tutorials here.

MochiKit is a highly documented and well tested, suite of JavaScript libraries that will help you get shit done, fast. The team in charge took all the good ideas they could find from Python, Objective-C, etc. Experience and adapted it to the crazy world of JavaScript. JSAN and Dojo Toolkit are fully supported by and interoperable with MochiKit.

MIT, and the Academic Free License version 2.1 licenses.

Details
Safari 2.0.2, Firefox 1.0.7, Firefox 1.5b2, Internet Explorer 6, and Opera 8.5
About 460 KB in size (zipped)

Documentation
http://www.mochikit.com/doc/html/MochiKit/index.html

Books
Practical JavaScript, DOM Scripting and Ajax Projects

UI example

Get started with some tutorials here.

Ext JS is a cross-browser JavaScript library for building rich internet applications which includes customizable UI widgets and an intuitive, easy to use API.

Commercial License, GNU GPL license v3, or OEM / Reseller License. Please check here.

Details
Internet Explorer 6+, FireFox 1.5+ (PC, Mac), Safari 3+, Opera 9+ (PC, Mac).
About 156 KB in size.

Documentation
http://extjs.com/deploy/dev/docs/

Books
Learning Ext JS, Developing with Ext GWT.

UI example

Get started with some tutorials here.

Rialto (Rich Internet Application Toolkit) is ajax-based cross browser javascript widgets library. Because it is technology agnostic it can be encapsulated in JSP, JSF, .Net, Python or PHP graphic components. The purpose of Rialto is to ease the access to rich internet application development to corporate developers. Ideally a Rialto developer has neither need to write or understand DHTML, Ajax or DOM code.

Open source Apache License.

Details
Firefox 1.5 +, IE 6+ and Opera 9+
About 530 KB in size.

Documentation
http://rialto.improve-technologies.com/js/javascriptDocV1/summary.html

Books
JavaScript pour le Web 2.0 (fr)

UI example

Get started with some tutorials here and here also.

Archetype is a JavaScript Framework for JavaScript and Ajax application that enables developers to use JS for light to heavy clientside developments. It shares a lot of things in common with Prototype.

The Framework:
* takes care of all the application loading part and dependencies loading
* eases a lot OO Programming in JS
* is designed to fully work in MVC on the client side
* adds an easy to use template interface for the best JS template systems (JST, EJS, DOMTAL, Prototype, etc.)

MIT License

Details
Browsers: n/a
About 2.1 MiB (zipped).

Documentation
http://archetypejs.org/project-info.html

Books
n/a
UI example

Get started with some tutorials here.

UIZE (pronounced "you eyes") is a powerful, open source, object oriented JavaScript framework - supporting widgets, AJAX, DOM, templates, and more. You can call it an "Ajax Framework", an "Ajax Toolkit", a "JavaScript Framework", a "JavaScript API", a "JavaScript Toolkit", a "JavaScript Toolbox"...UIZE allows you to create more effective user interfaces in your Web-based applications and services.

GNU General Public License.

Details
Browsers: n/a
About 6.8 MB (zipped).

Documentation
http://www.uize.com/explainers/using-the-documentation.html

Books
n/a

UI example

Get started with some tutorials here.

Rico is an open source JavaScript library for developing rich Internet applications (RIAs) that use Ajax.[1]
Rico uses the Prototype Javascript Framework and JSON libraries.

Apache 2.0 License.

Details
Browsers: IE 5.5, IE 6, Firefox 1.0x/Win, Camino/Mac, Firefox 1.5x/Mac. Currently, the Drag And Drop is not supported on Safari and the Ajax API requires Safari 2.0.3
About 1.5 MiB (zipped).

Documentation
n/a

Books
Ajax Black Book

UI example

Get started with some tutorials here (1, 2)

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.
It's very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won't let a user break the effect with multiple, crazy clicks. Optimized to make you write the lesser code possible, the new moo.fx is so modular you can create any kind of effect with it.

MIT License.

Details
Safari 2+, IE 6+, FF 2+ (and browsers based on gecko), Opera 9+.
About 3,2 KB.

Documentation
http://mootools.net/docs/core
Old: http://moofx.mad4milk.net/old/documentation/

Books
n/a

UI example

Get started with some tutorials here.

midori is an ultra-lightweight JavaScript framework that gets the job done without getting in your way.

MIT License.

Details
Internet Explorer 6+, Firefox 1.5+, Safari 2+, Opera 9+
About 45KB.

Documentation
http://www.midorijs.com/docs.html

Books
n/a

UI example

Get started with some tutorials here.

qooxdoo is a comprehensive and innovative framework for creating rich internet applications (RIAs). Leveraging object-oriented JavaScript allows developers to build impressive cross-browser applications. No HTML, CSS nor DOM knowledge is needed.

GNU Lesser General Public License (LGPL) and the Eclipse Public License (EPL).

Details
Microsoft Internet Explorer 5.5, 6 and 7, any Gecko-based browser with Gecko version 1.7 or higher. This includes Firefox 1.0, 1.5, 2.0 and any Mozilla Suite 1.3 or higher, Opera 8 or 9, Safari 3.0.
About 45KB.

Documentation
http://qooxdoo.org/documentation

Books
n/a
UI example

Get started with some tutorials here.

For any suggestion, please leave a comment.

Put del.icio.us Button With Counter In Blogger Posts

2009-04-23T00:24:00.000-07:00

This is article will show you how to add a del.icio.us link with a counter displaying the users number that bookmarked the current article in del.icio.us.

del.icio.us is a famous social bookmarking service which gives for all users

a great opportunity to discover millions of unique URLs bookmarked.

Therefore, if you accept to show a simple/reachable link to bookmark your post as well as to show how many users have bookmarked this post, this will doubtlessly be a manner to move up your article’s popularity.

The result will be like this:

How to do that:

1 - Go to your Layout, Edit your template and Expand Widget Templates.

2 - Add the following CSS classes


.delicioushits{
   float:right;
   padding:2px 4px;
   font-size:12px;
   color:#343434;
   background:url(“Use Your 14x14 delicious Logo URL”) left no-repeat; padding:0 10px 0 20px;
}
.delicioushitsbold{
   font-weight: bold;
}

3 – Place this following code snippet just before <b:includable id='post' var='post'> in case of you want to display it like in this site. Otherwise, you can choose your convenient position within the Blogger template and edit the appropriate CSS classes.


<span class='delicioushits'>
<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' target='_blank'>Save to del.icio.us</a> with
<span class='delicioushitsbold' expr:id='"a"+data:post.id'>0</span> hits!</span>

<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById('a<data:post.id/>').innerHTML = urlinfo.total_posts;
}
</script>
<script expr:src='"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&callback=displayURL"'/>

4- This was successfully tested in Chrome, FF, Safari and IE.

5- Enjoy yourself.

Put Google AdSense Only Into Blogger Single Post

2009-04-22T03:33:00.000-07:00

I have received an e-mail from a Blogger user asking me how I did to place Google AdSense inside every post without showing it on the first page. This means that the Google AdSense is only shown when you are on the article page

.

I haven’t answered this guy but this article will be my answer.

First, go to your Layout, Edit your template and Expand Widget Templates.

Search for the following snippet:


<p><data:post.body/></p>

Just before the "data:post.body", you should add your Google AdSense script as the following:


<b:if cond='data:blog.pageType == "item"'>
<!-- Your Google Adsense Script -->
</b:if><data:post.body/>

The if statement is used to show your sponsored links only into the single post and not in the home page for example.

This is a nice and clean way to give more visibility to your sponsored links.

20 Awesome Navigation Menus

2009-04-13T04:33:00.001-07:00

Website Menus need to be simple, user-friendly, well-designed or at least clear and obvious. This is the first point to consider before designing any menu as all menus are the important elements to guide your visitor through your website.
The purpose of this article is to present you 20 navigation menus which I find perfectly designed.

In other words, they are all excellent. Of course, there are so many menus that you can continue to discover everyday through the web but these menus below are my favorite.
These menus will also give you a sort of inspiration to help you to design your own navigation menu. Every menu is well-matched with the style of its website.
All these navigation menus are either CSS-based or JavaScript&CSS-based.

For any suggestion about other CSS-based or JavaScript-CSS-based navigation menu (s) please just leave a comment.

1 - Hopking Design

2 - Nopoko Graphics

3 - Mars Hill

4 - 24 ways

5 - Wards Exchange

6 - Jayme Blackmon

7 - Nathan Borror

8 - Ten Thousand Things

9 - Students Against Destructive Decisions

10 - Folietto

11 - Clothing + Kindness

12 - Navigant Consulting

13 - Sitesquared

14 - Web Designer Wall

15 - Aviary

16 - Acko.net

17 - House of spring mix

18 - Studio Racket

19 - Artgeex

20 - Design Intellection

Validation Messages for Form Fields with jQuery

2009-04-07T07:56:00.000-07:00

Validation hints are useful for any kind of form. It is useful because the user remains aware about the validation of the field criteria he is trying to fill in.
This post is about showing you how to create this kind of feedback using jQuery and

CSS.

View Demo

Let’s go through the code.

General behavior:

HTML


<input
type="XXYY"
id="XXXX"/>
<span class="message">XXXX message.</span>

Since any input element receives focus either via the pointing device or by tabbing navigation, the focus event fires and executes following function:


$("input").focus( function() {$(this).parent().find("span.message").css("display", "inline");});

This means that we will display the message inside the span element.

When any input element loses focus either via the pointing device or by tabbing navigation, the following function will be executed:


$("input").blur( function() {$(this).parent().find("span.message").css("display", "none");});

This means that we will hide the message inside the span element.

The span message will be displayed following its CSS class definition:


span.message {
  display:none;
  position:absolute;
  font:normal 11px/14px verdana;
  width:250px;
  margin: -12px 0 0 14px;
  padding:5px 5px 5px 40px;
  border: 1px solid #9F6000;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color: #FEEFB3;
  background-image:url('warning.png');
}

Username:

jQuery:


$("#username").keyup( function() {
var fieldset = $(this).parent();
var text = $(this).val();
if (text.length > 7) {
fieldset.addClass("done");
}
else {
fieldset.removeClass("done");
}
});

We merely check the length of the value entered in the username field when the keyup event is triggered;
If it is okay (text length value is higher than 8), we apply the CSS class “done” and if not, the warning message “span.message” remains applied.

CSS:


fieldset.done span.message {
  border: 1px solid #4F8A10;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url('success.png');
}

Password and Password confirmation:

jQuery:


$("#password").keyup( function() {
var fieldset = $(this).parent();
var text = $(this).val();
if (text.length > 3 && text.length <> 7) {
fieldset.removeClass("almostgood");
fieldset.addClass("done");
} else {
fieldset.removeClass("almostgood");
fieldset.removeClass("done");
}
});

$("#password1").keyup( function() {
var fieldset = $(this).parent();
var text = $(this).val();
if(text!=$("#password").val() && jQuery.trim($("#password").val())!=""){
$("#passwordok").css("display", "none");
$("#passwordnok").css("display", "inline");
}
else{
if(text==$("#password").val()){
$("#passwordnok").css("display", "none");
$("#passwordok").css("display", "inline");
}
if(jQuery.trim($("#password").val())==""){
$("#passwordnok").css("display", "none");
$("#passwordok").css("display", "none");
}
}
});

If we find that the password is at least 4 characters long, this can be good enough to continue. Then the “almostgood” CSS class will be applied;
If the password is at least 8 characters long, that's very good and the “done” CSS class will be applied in this case;
The second keyup event above concerns password comparing. In case of #password and #password1 values are the same; “passwordok” CSS class will be applied. In the opposite case, it is CSS class “passwordnok”.

CSS:


fieldset.done span.message {
  border: 1px solid #4F8A10;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url('success.png');
}

fieldset.almostgood span.message {
  border: 1px solid #9F6000;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color:  #FEEFB3;
  background-image:url('almostgood.png');
}

#passwordnok{
  font:normal 11px/14px verdana;
  width:250px;
  position:absolute;
  margin: -12px 0 0 14px;
  padding:5px 5px 5px 40px;
  border: 1px solid #9F6000;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color:  #FEEFB3;
  background-image:url('passnok.png');
  display:none;
}

#passwordok{
  font:normal 11px/14px verdana;
  width:250px;
  position:absolute;
  margin: -12px 0 0 14px;
  padding:5px 5px 5px 40px;
  border: 1px solid #9F6000;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #4F8A10;
  background-color:  #FEEFB3;
  background-image:url('passok.png');
  display:none;
}

Email:

jQuery:


$("#email").keyup( function() {
var fieldset = $(this).parent();
var text = jQuery.trim($(this).val());
if (text.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
fieldset.addClass("done");
} else {
fieldset.removeClass("done");
}
});

We simply use regular expressions to validate the e-mail field.

That’s all guys.

Download here

A jQuery Tabbed Box

2009-02-24T03:52:00.000-08:00

This article will show you how to create a tabbed box and how jQuery can be useful to let you play with the tabs.

View Demo

Let’s show first the high-level structure:
HTML


<div id="wrap">
<div class="tabbed">
 <ul class="tabs">
  <li><a id="1" href="#">My Mail</a></li>
  <li><a id="2" href="#">RSS</a></li>
  <li><a id="3" href="#">PHP Courses</a></li>
  <li><a id="4" href="#">jQuery for All</a></li>
 </ul>
 <div id="1" class="content">
 <center><h3>Tab1</h3></center>
  <p>Sed ut perspiciatis...</p>
 
 </div>
 <div id="2" class="content">
 <center><h3>Tab2</h3></center>
  <p>eum iure reprehenderit, qui ...</p>
 </div>
 <div id="3" class="content">
 <center><h3>Tab3</h3></center>
  <p> iusto odio dignissimos...</p>
 </div>
 <div id="4" class="content">
 <center><h3>Tab4</h3></center>
  <p>voluptatem sequi...</p>
 </div>
</div>
</div>

The code above is made up of:

+ Principal wrapper (wrap class);

CSS


#wrap {
width: 400px;
font-size: 12px;
margin: 20px auto;
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}

+ Another wrapper (tabbed class) that holds the whole tabbed box;

CSS


.tabbed {
width: 400px;
background: #39414A repeat-x bottom;
}

+ A list (tabs class) which contains all the 4 tabs;

CSS


.tabbed {
width: 400px;
background: #39414A repeat-x bottom;
}

.tabbed .tabs li {
list-style: none;
float: left;
}

.tabbed .tabs li a {
display: block;
width: 99.25px;
padding: 5px 0;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
background: #181C21 repeat-x bottom;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
}

.tabbed .tabs li:first-child a {
border-left: none;
}

.tabbed .tabs li a:hover {
color: #B4CBD9;
}

.tabbed .tabs li a:focus {
outline: none;
}

The width of “tabbed .tabs li a” was calculated as follows:
- We have “.tabbed .tabs li:first-child a” has no left border;
- Then we have only 3 border-left of 1 px;
- The full width is 400px.

So: (400px – 3 * 1px)/4 = 99.25px

+ 4 Divs (content class) considered as containers of all tabs.

CSS


.content{
display: none;
border:1px solid #fff;
}

.content p{
padding: 20px 10px 10px 10px;
color:#C0D0C0;margin: 1em 0;
}

jQuery:


$(document).ready(function() {

$("#wrap").corner("round 10px");

$(".tabs li a").click(function(event) {
 $(".tabbed .content").css("display", "none");
 $(".tabbed .tabs li a").removeClass("active");
 $(this).addClass("active");
 $(".tabbed .content[@id="+$(this).attr("id")+"]").fadeIn("def");
});

$(".tabs li a[@id=1]").click();

});

In order to have a round corner for wrap class, I have chosen to use the Corner jQuery plugin.

Our code is very simple to understand. We first choose to display only the tab content that we prefer thanks to: $(".tabs li a[@id=1]")
Now you may know why we have an id for every anchor that matches the same id defined in the content class for div element.

Example:


<li><a id="X" href="#">HHHHH</a></li>
...
<div id="X" class="content">
...

The active class applied when the click event is triggered for each matched element is:


.tabbed .tabs li a.active {
background: #fff;
color: #B4CBD9;
}

Finally, the fadeIn effect was used to show the content of every tab.
That’s all.

Preloaders in 3D

2009-02-11T03:08:00.000-08:00

I was just searching for a nice 3D loading image to put it in a form when a user submits his login details (in my application).
If you remember I have already talked about ajaxload which eases your life to create your own ajax loader icon.
Now I am so glad to give you another useful link that can help you to

create your animated gif preloader. The service is called Preloaders. You have simply to choose:

Categories: 3 dimensional (3D), Rectangular, Circular, or Horizontal;

Preloader type;
Background color;
Foreground color;
Size of your gif;
Animation speed of your preloader.

That’s all.

7 Vertical Menus With jQuery Effects

2009-02-08T22:17:00.000-08:00

7 Useful effects (accordion, bounce…) that you can use to animate your vertical menus with only one level have been gathered in this post.
Two of the menus are using the powerful jQuery Easing Plugin (version 1.3) and the rest is simply using the css and animate functions in order to create custom

animations.

View Demo

All the menus are chiefly having a common HTML structure:

<ul class="cssclassone">
    <li><a class="cssclasstwo" href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">CV</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact Me</a></li>
</ul>

We have chosen to write a simple jQuery code just to make sure to be able to understand how every effect for every right menu is working.
Every effect is triggered thanks to mouseover and mouseout events. For menu D for example, we simply use the jquery.min.js script to create our custom animation using css function to change the background color value and animate function to change the padding-left css property value.

/*Menu D*/
$(".menu2 .menu2_liste li a").mouseover(function () {
    $(this).css("background-color","#FFFFFF");
    $(this).animate({ paddingLeft: "50px" }, 50 );
});

$(".menu2 .menu2_liste li a").mouseout(function () {
    $(this).css("background-color","#ECEFF5");
    $(this).animate({ paddingLeft: "4px" }, 50 );
});

Menu E is using the jQuery Easing Plugin (file jquery.easing.1.3.js) with 'easeOutBounce' easing type to make every menu tab to vertically bounce.

/*Menu E*/
$(".sliding-element1 a").mouseover(function(){
    $(this).stop().animate({width:'250px'},{queue:false, duration:600, easing: 'easeOutBounce'});
});

$(".sliding-element1 a").mouseout(function(){
    $(this).stop().animate({width:'148px'},{queue:false, duration:600, easing: 'easeOutBounce'});
});

Of course this is an unvarnished code which lets you to customize it with your favorite colors and style.
That’s all.

Download Here

Important: Thanks to Shin, I have added .stop() to every menu script now to get a real accordion effect. Just refresh your browser cache in order to view the “new” live demo.

3 Table Designs Based on CSS

2009-01-22T22:49:00.000-08:00

This article comes in handy because it will provide you some examples showing how you can style tables with CSS. There are 3 examples of CSS table designs that I like to show you in the current post:

View Demo

Let’s start with talking about the general XHTML code of each table:
HTML


<!-- Table markup-->

<table id="...">

<!-- Header -->

<thead>
<tr>
<th scope="col">...</th>
...
</tr>
</thead>



<!-- Body of the Table -->

<tbody>
<tr>
<td>...</td>
...
</tr>
...
</tbody>

</table>

Example 1
We simply play with borders, padding, colors, backgrounds, and hover effects of the table cells. When you hover over every row, this row becomes clearly apparent.
CSS

#table1
{
font-size: 12px;
margin: 50px;
width: 500px;
text-align: left;
border-collapse: collapse;
border: 1px solid #99CCFF
}
#table1 th
{
padding: 20px 10px 10px 10px;
font-weight: normal;
font-size: 16px;
color: #99CCFF;
}
#table1 tbody
{
background: #F5F39F;
}
#table1 td
{
padding: 10px;
color: #3E3E3E;
border-top: 1px dashed #F7AE65;
}
#table1 tbody tr:hover td
{
color: #fff;
background: #CCE6FF;
}

Example 2
This is a nice design which you can customize in order to let colors (of borders and of cells) mach with your site colors.
Here is the CSS:
CSS

#table2
{
font-size: 12px;
margin: 50px;
width: 500px;
text-align: center;
border-collapse: collapse;
border-top: 7px solid #99CCFF;
border-bottom: 7px solid #99CCFF;
}
#table2 th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #FFF5F2;
border-right: 1px solid #99CCFF;
border-left: 1px solid #99CCFF;
color: #767676;
}
#table2 td
{
padding: 8px;
background: #CCE6FF;
border-right: 1px solid #99CCFF;
border-left: 1px solid #99CCFF;
color: #767676;
}

Example 3
This is a zebra table. The aim is to alternate background color to make things more clear for people reading table data. Simply add class="select" to every tr tag that you want to be colored like the following:
HTML


    <tr class="select">
        <td>Mohammed</td>
        <td>52</td>
        <td>2</td>
        <td>V</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Samir</td>
        <td>25</td>
        <td>2</td>
        <td>V</td>
        <td>1</td>
    </tr>

The CSS will be defined like this:
CSS

#table3
{
font-size: 12px;
margin: 50px;
width: 500px;
text-align: left;
border-collapse: collapse;
}
#table3 th
{
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
color: #767676;
}
#table3 td
{
padding: 10px;
color: #767676;
}
#table3 .select
{
  background: #CCE6FF;
}

CSS Navigation Bar With Only 1 Image

2009-01-20T02:46:00.000-08:00

This is a technique which can help to develop a nice navigation bar using only one image for all link buttons.
The image was simply created thanks to Microsoft Office Powerpoint 2007!
Why I am talking about only 1 image? Because using only 1 image will increase the processing time as well as

the bandwidth if you compare this with using 5 images (in this example we have 5 links).

View Demo

This is the image we will use (click over it if you want to get the real size):

In order to hold a part of the image, we will use a span inside the link in the list (the list represents the whole navigation bar).

HTML

<ul class="image">
      <li><a href="#" title="Home" class="current"><span></span>Home</a></li>
      <li><a href="#" title="Tutorials"><span></span>Tutorials</a></li>
      <li><a href="#" title="Archives"><span></span>Archives</a></li>
      <li><a href="#" title="About"><span></span>About</a></li>
      <li><a href="#" title="Contact us"><span></span>Contact us</a></li>
</ul>

CSS

ul:

Nothing to really explain here as every thing seems to be clear. We want to say that we don't want any kind of bullet in our navigation menu so this is why we have list-style set to none. We have defined some borders to make a beautiful navigation bar. <li> and <span> will have float left so same thing will be defined in the current <ul>. Using float: left, you can place whatever below your CSS navigation menu and it will display alongside the menu and not below it.


ul.image {
      padding: 3px;
      list-style: none;
      background-color: #fff;
      border-bottom: 1px solid #E8E8FF;
      border-left:1px solid #E8E8FF;
      float: left;
      clear: left;
}

li:
As mentioned above we use float with left value for <li>. The used margin value is for the space between the list buttons.


ul.image li {
      float: left;
}

ul.image li a {
      float: left;
      text-decoration: none;
      color: #E2E4EC;
      padding: 3px 19px 0 0;
      margin-right: 15px;
      font: 700 14px "Georgia", Helvetica, sans-serif;
}

span:

ul.image li a span {
      float: left;
      padding-right: 19px;
      display: block;
      margin-top: -3px;
      height: 30px;
}

hover and current:
I wanted to not combine following CSS codes to make thnings clear regarding when we hover a link, hover over a span, and when the current button is activated.


ul.image li a:hover {
      color: #1A61A9;
      background: url(1.png) no-repeat top right;
}

ul.image li a:hover span {
      background: url(1.png) no-repeat top left;
}

ul.image li a.current {
      background: url(1.png) no-repeat top right;
      color: #1A61A9;
}

ul.image li a.current span {
      background: url(1.png) no-repeat top left;
}

Keep Your Kids Away From Inappropriate Content with FoxFilter

2009-01-19T07:48:00.000-08:00

Block undesirable sites under Firefox is simple and possible if you choose to use Foxfilter which is a Firefox add-on.
Works on Mac, Linux and Windows platforms, Foxfilter is an efficient way to hold back any inappropriate content access.

How to use it?

Go here to add the add-on to your Firefox. Accept to install it.
You will find “FoxFilter Preferences” under Tools menu. Click on this link and make sure that you have ‘Enable Filtering’ already activated. Now you have just to save the changes.

In the Black List tab, you can specify in the “Block These Keywords and Websites” field all keywords that you want to be blocked. You can also ignore a keyword matching within specific phrases.

FoxFilter includes white list feature which allows parents, administrators, etc. to designate a specific list of sites that can be accessed. The sensitivity tab is used to control which elements of a Web page will be examined (URL, Title, Meta Content and Body Content).
In order to prevent FoxFilter from being disabled or removed, the security tab allows you to customize your security settings.

Submit Button Enabling With jQuery

2009-01-11T06:40:00.000-08:00

In this article I will show you how you can create a modern submit button. Do you want to know why I mentioned in the title the “Enabling” word? In fact, the reason is simply linked to how you can re-enable again a submit button after being disabled.

In other words, when a user clicks on the submit button, this one is grayed, then after a while (time you choose by yourself) the button becomes once again enabled in order to be clicked and so on.
This technique can be helpful for quite a few Ajax applications.
If you are sure that your form could be successfully submitted in a given amount of time, you have only to specify this amount of time (+ X ms) in the following jQuery function. So when things go wrong (problem in the submit action), the submit button will be simply enabled again and asking the user to submit for another time.

View Demo

jQuery

$(function() {
var input=$("input:submit");
input.click(function () {
   $(this).attr("disabled", true);
   $(this).attr("value", "Submitting...");
   //Resubmit again after 4000ms
   setTimeout(function(){ input.removeAttr("disabled"); input.attr("value", "Submit again");}, 4000);
});
});

Of course you can customize this jQuery script so that the amount of time can be automatically filled out contingent on the success or not of the submit action (server-side control).

Image Reflection With -webkit-transform Property

2009-01-10T06:20:00.000-08:00

In this example, I would like show you how it would be great and also simple if you use the ~~CSS3’s~~ -webkit-transform property in order to spice your logo or image with a pretty reflection.

View Demo (works only with Chrome and Safari)

Here is what the main CSS code looks like:

CSS

.reflected {
background: #fff url(mycar.jpg) no-repeat;
padding-top: 252px;
height: 150px;
overflow: hidden;
float: left;
position: relative;

}
.reflected img{
-webkit-transform: rotate(180deg);
opacity:0.5;
}

The -webkit-transform property is used to rotate mycar.jpg image by 180 degrees. Since this is done, we will set the opacity to 0.5 in order to give our reflection a very much alive aspect.

And our HTML code will be as follows:

HTML

<div class="reflected">
<img src="mycar.jpg" />
</div>

Final result:
Please be aware again that this example was tested in quite some browsers, and the only web browsers that support this CSS property until now are Chrome and Safari.

I have struck the CSS3 word as technically speaking, the -webkit-transform property is not at all a “CSS 3” property– sorry I was wrong. But it remains just a proprietary extension of the W3C spec.

tinySpell(Windows): Check Your Spellings On The Fly

2009-01-06T03:54:00.000-08:00

Let’s take Notepad as an example. As everyone knows, this Windows application does not have a built-in spellchecker. There are many times when I edit my text on Notepad and go back to Office Word just to correct my spelling. Now I think

that I will save my time with tinySpell which is a handy tool allowing you to easily and quickly check and correct the spelling in any Windows application.
tinySpell watches your typing on the fly and alerts you whenever it detects a misspelled word. It checks as well the spelling of text that you copy to the clipboard:

When a misspelled word is detected, tinySpell beeps and shows a spelling tip and the tinySpell icon in the system tray turns from white to yellow.
To correct your spelling mistake you have simply either to click on the tinySpell icon or press the assigned hot-key. You will then get a pop up with a list of probable replacement words to select from the list.

The application comes with an American-English dictionary containing more than 110,000 words. tinySpell comes as a freeware and also as a paid app (tinySpell+).
If you use tinySpell+ (10.00 USD), you will be able to use download and install other dictionaries.

The tinySpell settings window allows you to customize the text color displayed in the tip, the beep sound, the tip size and so many other parameters:

Last thing to say is that the application has some downsides like:

It focuses only on the word you type on the text so when you type your word in two phases, it will only take into consideration the last part of the word (second phase);
If you type a password and you move on the next page, the password remains displayed in the small tip! Be careful.

Current version: Version 1.7: Windows 2000/XP/Vista.

VixML: A Simple Platform for the iPhone Platform

2009-01-06T01:47:00.000-08:00

If you always wish to develop your own iPhone/iPod Touch applications but you don’t have enough SDK programming knowledge for this kind of devices you will most assuredly love VixML. This platform released by the developers of Viximo will allow

the designers to create basic iPhone applications (with full access to phone’s multi-touch interactivity functions) with a minimal amount of programming knowledge.

VixML toolkit includes an editor and simulation engine for building and previewing the coding designs. It is based on the XML markup language. It uses a number of pre-designated tags, the VixML WYSIWYG SDK and emulator. Those tags allow developers and designers to make their applications sensitive to some common iPhone user inputs, including shaking! So no need to touch any Objective C.
TechCrunch has covered the VixML launch and said that for now applications created using VixML can only be published to Viximo’s upcoming TrueFlirt app, which lets users create send to friends, and view “flirtatious” animations and mini-apps for the iPhone.

There are of course other interesting iPhone development platforms like:

Phonegap which is a development tool that allows web developers to take advantage of the core features in the iPhone, Android, and Blackberry SDK using JavaScript. The whole platform is a sort of container for web applications running on the iPhone that allows them to access the GPS, the camera, vibration controls and so on.

Big Five which is a web application gateway for the iPhone and iPod Touch that offers an API allowing developers to access native iPhone functions such as the GPS, and camera via JavaScript.

Here is a video showing a cool experience done with VixML I have got from VixML examples page.

'iPhone' Nano Finally Here But... in China!

2009-01-05T05:46:00.000-08:00

Another cheap rubbish Chinese product comes to disquiet the MacWorld 2009 event. This is of course a fake of the apple's long-awaited miniature version of the iPhone. It combines 3G functionality with an iPod Nano. No enough

time for those stealers who gave rise to this stuff to wait until that Apple offers for sale its iPhone Nano –the thing which is absolutely hearsay before now.

As you can see from the picture, Mini-iPhone ($102.76) is just a miniature version of the legitimate big brother. Fake iPhone manufacturers in China have actually started selling iPhone Nanos in Thailand market.
Mini-iPhone has two SIM card slots, Bluetooth A2DP as well as a VGA camera (technical details).
iPhone Nano untill now is still under speculation, but if the real iPhone nano will not come, it’ll be really hard time for those Chinese swindlers to push simple people to lap up these clones.

Al Jazeera's Gaza Channel on Twitter

2009-01-04T23:30:00.000-08:00

I really wanted to start this 2009 year by sharing with you a great twitter account to follow which is: AJGaza.
I’d have liked to start a happy year as normally everyone wishes me to do. But seemingly things do not happen like I want. Israel continues intensifying assault on Gaza

and Hundreds of Palestine’s civilians have been killed until now , four Israeli civilians killed and 2,450 injured so far.

So you can stay up to date with all the latest developments on the violence in and around the Gaza Strip with Al Jazeera's Gaza channel on Twitter.
After all I wish you all a happy new year.

Use Friendbar to Easily Keep in Touch

2008-12-31T07:37:00.000-08:00

Keep in touch with friends on the Web easily; I think this is everyone’s purpose. Friendbar connects all Twitter add-ons and your Facebook add-ons all in one.
Friendbar displays a running stream of texts and photos updates from Facebook and Twitter right on the toolbar allowing you to post your updates and reply from the toolbar itself.

All its features are explained in add-on page here.
This tool then will reduce people’s time spent on managing their friends from one Website to another. Friendbar add-on is still on experimental phase. I expect that the add-on will support other social networks. So more updates will surely come.

Convert Gmail Email To A Google Docs Document in One Sec

2008-12-31T06:09:00.000-08:00

Sometimes when I receive an email, I need to share the email content in a kind of a document with my peers.
Of course there is a classic method to do so which is simply to copy and paste the email content into a word document. But how about if the content holds plenty messages? It will be

probably a big pain to follow.

Gmail Labs offers a slick widget that lets you to convert any email conversation to text document.
The feature is too easy to activate. Just go to the “Settings/Labs” and click on “enable” of “Create a Document” widget. Then you can save your settings. Your Gmail user interface will be restarted to refresh your update.

As soon as you open an email, on the right hand side of the page, you should see this link “Create a document” like so.

If you click on “Create a document” link you will see that the full text of your email will be transferred to a new Google Docs document.

The text document you get can for example be downloaded or saved in your PC in different formats.

Now you can do whatever you want with this new document (share/modify/save/convert to another format….). I personally find this feature useful.

Google Updates The Toolbar PageRank

2008-12-31T03:43:00.000-08:00

Matt Cutts in his twitter has confirmed that Google has updated the PageRank values today embedded in the Google Toolbar.
Just a small information to know is that the PageRank displayed on Google Toolbar displays sometimes an outdated number

. This information was confirmed by Vanessa Fox who said that Google maintains two different PageRanks. The first one is an internal one which is computed regularly. Whereas the second one that you see on Google toolbars is the external PageRank which is updated infrequently.

How to Add Your Website to Firefox's Search Bar With OpenSearch XML?

2008-12-30T21:50:00.000-08:00

I always believed that the search right from your browser’s address toolbar is very helpful especially when you have the ability to customize (to add/remove) the list of the present websites in order to be able to have other(s) than the ones existing by default. But how about creating your OWN website search feature in the browser among others (Wikipedia, Amazon…) which will allow users to search directly on your site? I mean like so:

This is possible thanks to the OpenSearch XML. Let’s first create our XML file which is very simple to understand and to customize (its name will be opensearch.xml):

XML

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>jCargoo Search</ShortName>
    <LongName>Youssef ELALAOUI Blog Search</LongName>
    <Description>Search what you want in the jCargoo's Blog articles</Description>
    <InputEncoding>UTF-8</InputEncoding>
    <OutputEncoding>UTF-8</OutputEncoding>
    <AdultContent>false</AdultContent>
    <Language>en-us</Language>
    <Developer>Youssef ELALAOUI</Developer>
    <Contact>youssef.elalaoui@jcargoo.org</Contact>
    <Description>Search for IT and programming topics like Browser, Add-ons, jQuery, Firefox, Lucene and so on!</Description>
    <Tags>youssef elalaoui php css html jquery apache mysql mootools javascript programming struts struts2 ajax google symfony twitter</Tags>
    <Attribution>Search data from Youssef ELALAOUI, http://jcargoo.org</Attribution>
    <SyndicationRight>open</SyndicationRight>
    <Query role="example" searchTerms="Morocco"/>
    <Image height="16" width="16" type="image/x-icon">http://www.imageous.net/files/maarhh727hrda6tsnmzb.ico</Image>
    <Url type="text/html" template="http://www.jcargoo.org/search?q={searchTerms}"/>
</OpenSearchDescription>

XHTML
Add the following line to the header in order to allow each browser to know that I have an Open Search document available:

<link rel="search" type="application/opensearchdescription+xml" href="http://jcargoo.i8.com/opensearch.xml" title="jCargoo Blog Search" />

Now you can notice that Firefox for example is showing a link that says “Add jCargoo Blog Search” in the browser’s search engine list. If you click on this link, you will be able to see your site whthin the browser with your favicon.

That’s it.