April 2009 - Page 2 of 6 - Hungred Dot Com

Largest Collection Of Web based Tools to speed up your web development

If you are not using Firefox, you may lose out the advantages that Mozilla Firefox has provided for web developers. But this doesn't means that you must develop in Mozilla Firefox. Some people will prefer to develop their web application on some other browser instead on Mozilla Firefox especially when majority of the normal users are using Internet Explorer as their default browser. For Mozilla Firefox developers, there is a list of useful plugin that may be useful for you. Nonetheless, this article will also be equally interesting for your collection. Web based tools has become a powerful tool for many users nowadays not only developers and designers are using it but even normal users love it. In this article, i will share with you a list of web based tools which i personally keep. Hopefully, you can use it and speed up your own web development. Please take note that the 28 in the title is the initial release of tools i have, this post will be updated with more web based tools in the future. If anyone suggested something good for web based tools or i found any, i will update this list again. I believe this will be the largest collection of web based tools on the internet which is consistently updated and maintained.

Koders

Koders a search engine that allows you to search for any codes not only PHP. There are many valuable source code available in Koders that you should be aware of. This is a must have link for your web development need! This will definitely speed up your development process.

gotAPI

This is also another must have link. gotAPI is another search engine that provides you with the essential API for your reference need. It allows you to search for any methods or rule for that particular language. This is not only limited to the above picture shown on their website. They also provides API for frameworks and application language API such as C++, j2SE and lots more. MUST CHECK THIS OUT! This is a one stop reference need for your web development!

POG

POG is a web based tool that automatically generates clean & tested Object Oriented code for your PHP4/PHP5 application. This way you won't have to repeatly generate all these codes manually whenever you want to start a new PHP class. It makes your backend web development quicker and more secure for beginner objecct oriental programmers in PHP.

PHPAnyWhere

This online editor gives you one best thing. Portable. Imagine you do not have to keep any codes and editor with you when you are outstation or your computer just breaks down? If you are a busy person who is required to handle both family and work. This maybe the thing you are looking for. It allows you to code anywhere and definitely speed up your web development and secure your coding copies.

CompressorRater

Compressor rater compress your javascript and rate those compressing algorithm in each library such as YUI compressor, gzip, etc.. This is useful to compress your javascript codes with more than 1 library and get the smallest site to optimal your website load time. It provides you with the duration and the amount of size reduced by the library. This means that no matter what, there will always be one library out there that can compress and optimize your complex javascript codes. Optimize your web development now!

Javascript Regular Expression Validator

Need a JavaScript validator for your regular expression? Try this site. Other than validation, it also provides you with useful library and resources for you to work with regular expression.

Javascript beautifier

This is not something really impressive about but its something i need. Especially when I'm writing tutorials to share as i tend to write my codes in 1 straight line without break,this web based JavaScript application helps organize my code neatly so that my visitor can read and understand. Definitely a useful JavaScript organizer for my web development need.

JavaScript Regex Generator

This is one of the kind. This helps simplify your brain and optimize your web development by generating regular expression for your pattern matching need.

JSBin

JSBin is used to test your snippets of codes on the fly. Just paste all your codes into JSBin and debug your code in there. You can save the snippets and share with others online. People can review and help you with this snippets URL you provide. However, if the URL is being left alone for 3 months without review by anyone, it will automatically be deleted from the server.

JSLint

JSLint is one of the hardly see JavaScript online verifier. It verify your codes to see if there is any errors on your JavaScript. There are many features and settings that you can use to customize verification algorithms to suit your needs. If there is no debugging tools, you should use this.

CleanCSS

Unlike many CSS compressor out there which may possible cause your CSS to break down, CleanCSS provides you with a 'only safe optimizing' option. It also provides many other related things other than optimizing and compressing. It helps you to format you CSS nicely for viewing purposes too. Other features include merge shorthand,sorting and etc.

CSS Redundancy Checker

Have many CSS rules and forgotten which one is useless? CSS Redundancy checker can help you! It helps you check which CSS rule is currently not in use and can be removed safely. Perfect stuff for optimize web development purposes.

Selectoracle

This is something you may like if you are not a professional CSS coder and wish to understand the code written by certain code. Selectoracle translates your CSS rule set into pure English so that you could understand and improve your CSS skill. Definitely great stuff for people who just started or is interested in getting their CSS skill brush up.

Tinglets

A cross browser CSS web application. Tingelets are a set of bookmarklets that you can be placed in your browsers bookmark bar. When clicked, they highlight a certain tag or set of tags in a specific color or background tile. They are very handy for quickly looking at web layouts in different browsers. You can either highlight tags directly or type in a tag, id or class name to highlight the matching element(s). This tells you where have your dynamic content has disappeared to and it make tracing easier.

PXtoEM.com

This is one of the tool you will only find one way either px to em or em to px. This web base tool provides both way!(finally) It is extremely useful for you when dealing with css and dynamic effect. Finding the exact pixel or em will really save you a lot of time on web development

Conditional CSS

Don't wish to write weird symbols just to perform some hack that some browser cannot be detected? Use conditional CSS instead. It allows you to write CSS rule set in conditional if-else case. This way you can cater for all different browser need without losing readability of your CSS rule set.

CSSFly

Mozilla Firefox has webdeveloper addon extension for editing CSS on the fly. Other browser have CSSFly! CSSFly not only allows you to edit your CSS but also xHTML on real time to build up your template before throwing the CSS or xHTML code to your web server. Debugging has never been easier with CSSFly. This is one of the most useful web based application you should know when debugging any layout issues with other browsers.

Pingdom Tools

Pingdom test your web efficiency just like YSlow in Firefox, Unlike YSlow, it does not tell you what to improve. But with information on which page is rendering slowly, you should be able to improve your site in no time!

W3C CSS Validation

Unfortunately, CleanCSS does not have a validation service built-in for you. Before you use CLEANCSS, it is best to validate your CSS. What place more reliable than the old W3C Offical site CSS validation service?

W3C HTML Markup Validation

The official W3C HTML Markup validation service. When all fail, this is most reliable!

mobiReady

Using mobile phone for surfing purposes is getting more and more common nowadays. Ensuring that your site is also compatible to mobile web browser is equally important nowadays. mobiReady is a testing tool to evaluates mobile-readiness using industry best practices & standards. It provides you with a report and a in-depth analysis on how well your site performs on a mobile device. Want to cater for mobile user? This web based tool is something you cannot miss.

Wave

WAVE is a free web accessibility evaluation tool. It helps you to check any broken link on your page and report back to you. As you know, even humans do not like broken links not to mention search engine spiders. It is important that you ensure that your site is free from broken links! There is also a Firefox addon for WAVE.

Browsershot

Browsershots is a web based tool that makes screen shots of your web design in different browsers. This way you will know whether your website is having problem with other older browsers that user might be using currently. It has many browser support and is able to test your site compatibility with different screen size. Excellent for testing your web development design!

Webwait

WebWait work similar as PingDom, the differences is that webwait allows you to bring up a bookmark icon and benchmark any website you came across. If PingDom doesn't work for you, webwait will definitely serve you unconditionally.

test everything

This is a crazy web based tool. It basically allows you to test EVERYTHING. From SEO to Validation to quality, its everything. If you are not aware of this tool. You should visit them up and play with it. Its really interesting.

TAW

Unlike WAVE which is also a web accessibility testing tool, TAW is like an old man telling you and advicing you what you should not do and what you should have done on your site. In order to improve your site web accessibility.

Geotak Netrender

Ever wonder how will your website looks like when it goes way down to IE4.0? If you have like i do (which scare the hell out of me), you should visit this site. It provides you with various version of Internet explorer for you to test your website. This web based tool helps verify your website compatibility with Internet Explorer.

Net2FTP

Don't have a ftp application on the PC you are using right now? Use this web based ftp instead. It is very easy to use and allows you to ftp anywhere!

Update After initial Post

Total Validator

Total Validator is a free one-stop all-in-one validator comprising a HTML validator, an accessibility validator, a spelling validator, a broken links validator, and the ability to take screenshots with different browsers to see what your web pages really look like. Something impressive that i missed. This is something you must bookmark for your web development.

HTML Tidy

Some company web portal pages are just horrible. Looking at how the HTML is being written all over the place just give me headache. If you are like me, try HTML Tidy and it might just save your time on your web development.

Rockstar Apps

There are two application currently in Rockstar Apps that can definitely assist you on your web development need, Rockstar Optimizer and Web Profiler. RockStar Optimizer helps you optimize your website entirely by compressing, concatenating, rebuilding your CSS and JavaScript. On the other hand, Rockstar Web Profiler give you in deep information on your web application and site. Information such as the duration spend on server and client side, resources being used in a chart and etc. which is of course more powerful than most simple web based application. But you will have to register in order to use. It is a free service by Rockstarapps.com. Credit goes to Bob who suggested this amazing tools.

prettyprinter (27/04/2009)

This is a multi code beautifier! it can beautifier PHP, Java, C++, C, Perl, JavaScript, CSS in one box. This means that if you have multiple different languages in your code, this can be in great help when individual beautifier won't work. An example will be HTML+CSS+JavaScript page.

HTML2PDF converter (29/6/2009)

Tired getting on to website just to take a look at those web cheat sheet? This safe LOT's of time by converting all these cheatsheet on the web into pdf and save them into your local computer. Definitely make your life easier looking at cheat sheet instantly on the wall!

Strip Generator (29/6/2009)

i haven't found my love for this application yet. But this application help you create the perfect strip for your web design. Pretty easy and cool. Most designer will love this site.

URL2jpg (29/06/2009)

JavaScript CSS properties references (08/08/2009)

Don't know which element properties can be used while coding in JavaScript to style your document? This site provides you with all the necessary CSS properties references that can be used in JavaScript!

Don't want to change to pdf format? Change your cheatsheet to jpg format instead! Just place them into the url and convert them to a size selected and your web cheat sheet will instantly become an image for your wallpaper!

Color Suckr

Something necessary for your web designing process. This online tool helps you create a color scheme out of the image you use in your web design!

Aviary Screen Capture

This might be the next cross browser checking tools you will be using in the future. This is a screen capture tool but currently do not have the ability to capture screen with different browser yet. However, it is being implemented. We shall wait and see!

Hurl

Hurl Overview from defunkt on Vimeo.

The video said it all. Other than just sending HTTP Request, there are, of course, other things that can be done with this tool.

Spoon Browser

An interesting web based tool that allows you to run different version of browser on your local disk without the necessary to install the standalone version. However, it does required you to install a plugin in order for all these to work. But you will be able to run different type and version of browser to test your web site. Pretty cool.

HTML Entity Character Lookup

This web based tools allows you to quickly search for any HTML entity character with just a few click. Something both Web developers and designers would really LOVE to have. This tools really help reduce time to search for a particular entity on Google!

Anything Else?

The above materials are arrange according to groups. Hope this is useful for you guys! Any other fine made web based tools that you are using for your web development and i'm not? Inform me about it!

List Of Must Have Addons For Programmers In Web Development

There are many tools developers used during web development and definitely some of these tools i mention here won't be any new to some of the front end developers who has been developing for many years. However, this is the set of tools i used and maintained overtime so that any changes made on my computer, i will still be able to track back all these amazing tools and for some of the newer programmers, this will definitely benefit them. here are a list of fine made tools you can use to help you find those nasty bugs and speed up your own web development.

Firebug

Every developers love Mozilla Firefox for the particular reason that Firebug is there to assist you on your aJax and JavaScript needs. It automatically detect your errors and show a nice error bar below your browser just like this.

Firebug can be use to optimize your codes as it provides you with all the load time of each individual script on the web and many other useful information you used on your script. Firebug also contains a feature that allow you to inspect element changes on the HTML while your code is manipulating the DOM. There are just so many benefits in this application that its a MUST have add-on if you are using Mozilla Firefox for your development.

IE Tab

If you think IE View is not a bad application for testing your site on IE using Mozilla Firefox, you should try IE tab then. It allows you to open a IE browser instead! AWesome! Window update anyone?

Html Validator

Help you debug your HTML structure to check for any error on your HTML. It provides a nice icon to indicate whether your HTML codes are properly written. Furthermore, it also helps validate other pages that you send in via ajax! This is great for WC3 Validation tools! The addons errors indication are shown below

errors: HTML errors that Tidy cannot fix or understand.
warnings: HTML errors that Tidy can fix automatically
(optional) accessibility warnings: HTML warnings for the 3 priority levels defined in W3c WAI

Add N Edit Cookies

If you deal with cookies a lot, this is something you must have! It gives you the ability to edit and add cookies on the fly! Especially when you are dealing with server sided scripting or log in page.

FireFTP

This is one of the important addon you should have if you are dealing with server scripting. Imagine clicking left and right between your browser and ftp client and pile up all the different application during your web development. This help development much faster and cleaner.

YSlow

Ever wonder whether your site is optimized? developed by Yahoo group, this addon tells you your website problems and why it is slow! It grade your website and tell you where to improve so that you won't be lost guessing where to improve on your site to better enhance its peformance. Great stuff for your optimization need.

Live HTTP Headers

another great tool a developer must have. Live HTTP Headers let you view information on the http header LIVE checking out what kind of cookies is being sent to your site, edit request header and even reply an URL! This application usage is as follow

Help debugging web application.
See which kind of web server the remote site is using.
See the cookies sent by remote site.

FirePHP

PHP user must see application! Especially for people who deal with ajax and PHP, this will be useful for you. This will stop you wondering what the heck is happening on your server side when calling on ajax. This small addon of firebug keep a log on firebug console and tell you what is happening on PHP. But this required firebug to be installed and other required too. Nonetheless, this is quite useful. (read up the requirement by clicking on the image of FirePHP above to read it on their development site)

Session Manager

Session Manager saves and restores the state of all windows - either when you want it or automatically at start up and after crashes. Additionally it offers you to reopen (accidentally) closed windows and tabs. If you're afraid of losing data while browsing - this addon allows you to relax. This is most appropriate when dealing with log in web portal and your script just crush up your browser and required you to login again. Speed up your development.

Total Validator

Performs accessibility validation (WCAG, US-508), broken link checking, spell checking (5 languages), and takes screen shots using 32 browsers on Windows, Linux, and OS/X. Like it? i do =D

Console

Update on default console on Mozilla Firefox. It provides a better overall error details compare to the default ones on Firefox. Web development must have upgrade.

XML Developer Toolbar

if you deal with a lot of XML, this is an addon that you might want to have. It just speed up the overall procedure of you dealing with XML.

Library Detector

finally, if you haven't had any chance of dealing with framework library such as dojo, jquery,mootools, etc. i think you should start digging your resources. This addon gives you the information on what library the current view website is using. Quite useful for digging technology!

User Agent Switcher (23/04/2009)

User Agent Switcher is REQUIRED in web development. Especially when your script or deign is catering for different browser. This will definitely help you tons during web development. This means no more switching browser to test your script for cross browser compatibility.

PageDiff (23/04/2009)

What pageDiff does is to compare your pages during web development. You will find this pretty useful when dealing with DOM manipulation. You can save the page and edit all you want then compare with the version you have previously saved. Pretty useful i must say.

CodeBurner (25/4/2009)

Another Addon for Firebug to make it more powerful. This extension allows you to do a lookup on HTML and CSS element in Firebug! Furthermore, it gives you detailed list of the HTML tags, attributes and CSS that are being used by the element you are inspecting, including browser support. It comes very handy when you don't remember what worked in what browser or if you need to refresh your memory about an unusual tag or CSS rule. Including links to get further information about a particular element, attribute or style is welcomed too together with the search feature. Great stuff!

FireCookie (25/04/2009)

Another extension for firebug (who need other extension when everyone is aiming at firebug) . It allows you to manage to view cookies using Firebug. Similar to Add n Edit cookie just that this is for Firebug.

JavaScript Deobfuscator (25/4/2009)

Pissed when you can't view the code being obfuscated by the web master? Try this then! This deobfuscator the code and allow you to view it normally but only activate this when you actually need it as it takes up quite a lot of resources.

FireCookie (19/09/2009)

A very powerful search plugin that allows you to seek for API within second.

Notice i did not provides some of the very famous color detection etc. addon from Firefox. Those will be on other section not under developers. I will place it on web master and designer instead. So that i can maintained all the great plugin i have been currently utilised. The web designer ones is up at List Of Must Have Addons For Designers In Web Development

Tutorial: jQuery Fold Effect Concept And Explanation

In this tutorial, i will explain the concept and ways of making a fold effect in jQuery. Such effect can be apply to different context such as image gallery or even just add on effect for your design work.

Concept

Depending on whether you wish to fold away your content or you wish to fold out your content. Folding in your content will be to pull up the content and slide it outward while folding out your content will be to push your content out and slide it downwards. There are two way of achieving this effect. One is to use the viewport technique which will lengthy your code and complex your stuff but generally give you a better visualize effect than the next effect. The next effect that can achieve this with only few lines of code is typically using CSS and animate function in jQuery.

Coding

On the HTML part, you will most likely will only required the following set of div block

<div class='image' id='box1'></div>
<div class='image' id='box2'></div>
<div class='image' id='box3'></div>
<div class='image' id='box4'></div>

On the CSS coding, you will most likely need the following


body{
margin: 0 auto;                    /*align the header at the center*/
text-align: center;                /*align the header at the center*/
}

div.image
{
width: 600px;                    /* width of each container*/
height: 350px;                    /* height of each container*/
position: absolute;                /* instructure each container to obey the position absolutely*/
float: left;                    /* float all the container so that they overlapped each other*/
left: 27%;                        /* align them to the center of the screen */
z-index: -1;
}

div#box1
{
background: #66A666 url('../images/blue.png');
}
div#box2
{
background: #E37373 url('../images/green.png');
}
div#box3
{
background: #B2B2B2 url('../images/orange.png');
}
div#box4
{
background: #A51515 url('../images/red.png');
}

The above codes are similar to the opening door effect tutorial i did previously.

On the jQuery coding,

$(function(){
var i = -1;
$('div.image').click(function(){
$(this)
.animate({height: 50+'px'}, 500)
.animate({width: 0+'px'}, 500, function(){$(this).css('z-index', i);
$(this).css({height: 350+'px', width: 600+'px'});});
i--;
});
})

this is all you required. What i did is basically add an event handler to each div block and perform an animate function to adjust the height of the effect to a certain visible amount and slide the height to 0 once the height animate has completed which will gives us a nice fold effect. Once the fold effect has been completed, i push the image back to the queue by setting its z-index and return its original size. This way is much better than using a view port which will block the next image and create a not very impressive fold effect.

You can visit the demo site for this fold effect tutorial. The tutorial files can be retrieve from jquery-fold-effect-tutorial

Tutorial: How to make your own opening and closing door effect with jQuery

The kind words from some of you guys really makes me wanted to write more advance tutorial but i really have limited time. Nonetheless, i will try my best to write at least 1 tutorial in the most easiest and detail form as much as i can. In this tutorial, i will show you a more advance trick to perform a opening/closing door effect. This tutorial will deal with viewport to perform such effect and may get a little confusing. The demo is as usual at the bottom of the tutorial. If you would like to view the demo first before reading, please proceed to the bottom of this tutorial instead.

Concept

Imagine you have a sliding door, one left and one right. In order to open/close this particular door, we have to pull or push both door so that it will open or close completely. This is the usual case for a door to open and close which required two image of door left and right. How can this be done? The concept behind this technique is not similar to the zoom tutorial i did previously. But let's just concentrate on what is a viewport. A viewport is just a viewable area on the screen to the user, anything outside the viewport is considered unseen by the user. Using viewport, we will try to hide the two sliding door left and right outside the viewport and when the user clicks on the image, the door will automatically be called in and closed the door to create a nicely done closed door effect. The opening door effect will be exactly the same with the additional step to open the door after the door is closed.

CSS and HTML

I believe the CSS and HTML structure should be the same as the shuffle effect tutorial i wrote previously.

Coding

The coding part may get a bit confusing for the viewport technique. But i will try my best to cover it with simplicity as much as i can. If there is any doubt you may have you can really comment below and i will try to reply you within the day if possible. On the CSS Coding,


body{
margin: 0 auto;                    /*align the header at the center*/
text-align: center;                /*align the header at the center*/
}

div.image
{
width: 600px;                    /* width of each container*/
height: 350px;                    /* height of each container*/
position: absolute;                /* instructure each container to obey the position absolutely*/
float: left;                    /* float all the container so that they overlapped each other*/
left: 27%;                        /* align them to the center of the screen */
z-index: -1;
}

div#box1
{
background: #66A666 url('../images/blue.png');
}
div#box2
{
background: #E37373 url('../images/green.png');
}
div#box3
{
background: #B2B2B2 url('../images/orange.png');
}
div#box4
{
background: #A51515 url('../images/red.png');
}

Notice that everything above are images and if images are not displayed yet, a color will be shown instead. Other important stuff are self explained on the comment i wrote in the code. For the HTML structure,

<div class='image' id='box1'></div>
<div class='image' id='box2'></div>
<div class='image' id='box3'></div>
<div class='image' id='box4'></div>

There will only be the container in the HTML structure similar to the shuffle effect tutorial. Supposely, it should have more than just 4 block of div as we need a viewport for each container. But for simplicity, i will just write 4 block here and leave all the complex stuff with jQuery. On the jQuery side,

//below here preload the image in the simplest form
$(function(){
for(i = 1; i < 5;i++)
{
var img = new Image();
img.src = 'images/images/d_left_'+i+'.png';
$(img).load();
}

var i = -1; //deep of the image
var no = 0; //image number

//attach event handler on each container/image
$('div.image').click(function(){
var Obj = $(this);
no++;
if(no > 4)
no = 1;

// viewport structure
Obj.wrap('
<div id='viewport'></div>
');
Obj.css({left: 0+'px'});
$('#viewport').css('overflow','hidden');
$('#viewport').width(Obj.width());
$('#viewport').height(Obj.height());
$('#viewport').css('left','27%');
$('#viewport').css('position','absolute');

// left door structure
$('#viewport').append('
<div class='GrpEffectDiv' id='doorLeft'/>');
$('#doorLeft').css('position', 'absolute');
$('#doorLeft').css('background', '#000 url('images/images/d_left_'+no+'.png')');
$('#doorLeft').width(Obj.width()/2);
$('#doorLeft').height(Obj.height());
$('#doorLeft').css('left', '-'+300+'px');

//right door structure
$('#viewport').append('
<div class='GrpEffectDiv' id='doorRight'/>');
$('#doorRight').css('position', 'absolute');
$('#doorRight').css('background', '#000 url('images/images/d_right_'+no+'.png')');
$('#doorRight').width(Obj.width()/2);
$('#doorRight').height(Obj.height());
$('#doorRight').css('left', 600+'px');

// left door animation
$('#doorLeft')
.animate({left: 0+'px'},1000,
function(){
Obj.css('z-index', i);
$(this).remove();
});

//right door animation
$('#doorRight')
.animate({left: 300+'px'},1000,
function(){
$(this).remove();
Obj.css({left: '27%'});
$('#viewport').replaceWith(Obj);
});

i--;
});
})

Seriously, looking at the code i am starting to wonder whether i will be able to explain it in a simple term. Anyway, what the above code done is as follow,

create a viewport around the container and became the parent of the container
create the left door and append into the viewport ( doors became neightbour of the container)
create the right door and append into the viewport
animate both left and right door to close the door
remove both door and subsituate the viewport back to the container with the original settings

I have also commented the code above so that you are clear what i am doing on the code itself. So how does the viewport be created by the code above? If you have read my sliding tutorial previously, it is similar to the frame concept, where there is a frame (viewport) to cover the outside of the viewport. If i remove the most important thing for the viewport to work which is

$('#viewport').css('overflow','hidden');

You will see that the left and right box is standing by on the right and left side ready to charge at the container to close the door.

Notice the right and left image which i made? These are the door of the next image, this way we can create a very nice effect as shown in the demo

Improvement

There maybe people who will disagree with this tutorial that all the styling is placed on the jQuery script itself when we can actually just add a class on an external script and give the class to the div block object itself instead. You can definitely do that to simplify the efficiency and flexibility of the code. The purpose why it is done this way is to avoid any complexity on the CSS section. Personally, it will just confuse me going to look up and down on the post to feature out what i am doing. So i place it in a chunk of code indent it nicely for me and everyone to understand.=) The other thing you can do to improve the above code is to apply chaining which i always did in a whole straight line. Imagine if i do it in my tutorial? won't be that nice to read isn't it? Another thing is the preloader in this tutorial, it is just pure load image and may not do as well as other great pre loader but it basically how preloader work in jQuery. Thus, you may see black door on the first time during your loading instead of the image of the door until it cache the image to your browser that it! =X You can do this for gate closing and opening effect as well, we just have to do it on the top and bottom instead of left and right. Anyway, hope you like this tutorial as well =)

File

You can find the tutorial files by saving the page on the demo site. But if you feel lazy, you can download from jquery-closing-opening-door-effect

Tutorial: How to create your own inner fade effect with jQuery

Just when i though i have completely writing all the effect tutorial available, i neglected inner fade effect that has been around for quite some time. Maybe it look exactly like fade effect in jQuery and didn't really notice the differences. Just to explain what does inner fade effect differ from normal fade effect in jQuery, inner fade effect will display the combination of both images when the first image gets fade in. This produces an asynchronous effect of image being displayed together. On the other hand, normal fade effect produces fade in an synchronous way when one fade ended the other fade occurs. The demo can be view at the bottom of this tutorial.

Concept

The concept for an inner fade is much troublesome than a normal fade effect in jQuery. A normal fade effect in jQuery will only required the fadeIn,fadeOut or fadeTo method to be called by the chaining process. Inner fade effect will require an additional step which is to arrange the images into a stack. Similar to the shuffle concept but we will just have to use the built-in feature of jQuery, animate to complete this tutorial. Imagine you have a deck of cards, each touch will make the card slowly fade till disappear and display the next card. So, what happen to the disappeared card? Similarly, we set the displayed index to a lower value and hide it behind of the deck of cards. So when the deck of cards completely disappeared, it will fade to the start card again!

CSS and HTML

Similarly, it will be exactly the same as the shuffling tutorial.

Code

The CSS and HTML code will be pretty much the same as the shuffle effect tutorial. The only differences we will see in this tutorial compare to the shuffle effect tutorial is the jQuery code used to perform the task.


$(function(){
var i = 0;
$('div.card').click(function(){
$(this)
.animate({opacity: 0}, 1000, function(){$(this).css("z-index", i)})
.animate({opacity: 1}, 1000);
i--;
});
});

Notice that i did not use fadeTo method because the z-index command takes longer than the next animation to be display and cause the whole inner fade to fail. Thus, i use animate function instead and instruct jQuery to immediately set the z-index to i depth where i is the variable to keep track of the deepness of the container. This way i won't have to worry about the next animation coming forward quicker than the z-index rule. The other reason is that it seems buggy to use fadeTo function during this tutorial. Since, animate function work perfectly i will just stick to that then. From the demo page, you can notice that sometimes the colors are being combined and turn to some other color although there are only 4 colors available! This is the differences between inner fade and the normal fade. You can download the tutorial file at jquery-inner-fade-effect