Recently I have seen a nice effect that makes HTML elements to fade from one color to another.
You can see what I mean here, just click the next link:

CLICK HERE TO SEE WHAT I MEAN!

The solution:
1) Searching on Internet I found that there is a technique called Yellow Fade technique that makes this effect.

2) But there is another improved technique called Fade Anything Technique that is better. It lets you fade from any color, decide how many frames per second you want and choose the duration of the effect.

2.1) Simple use of Fade Anything Technique:

Download the fat.js script and include it in your website:

<script type="text/javascript" src=" fat.js"></script>

Choose an element like a DIV and give it the class “fade“:

<div id="mydiv" class="fade">Fade it!</div>

The DIV element will fade from the default yellow color #FFFF33 to its original background color.

2.2) Advanced use of Fade Anything Technique:

- Change the default fade from color:

<div id="mydiv" class="fade-0066FF">Blue fade</div>

- Fade an element using the function Fat.fade_element() :

The Fat.fade_element() function accepts some arguments: target ID, frames per second, fade duration, fade color, final color.

Example: fade DIV from red to green at 60 frames per second for 5 seconds:

<a href="javascript:Fat.fade_element('mydiv', 60, 5000, '#FF0000', '#00CC00')">CLICK HERE</a>

CLICK HERE TO FADE FROM RED TO GREEN!

As you see is easy to make your own fade effects with this nice script!

Links:

- For more detailed information visit the Fade Anything Technique website

- For the original fade technique visit Yellow Fade Technique website

- And I have also found an improved Fade Anything Technique that says to work well in Safari, but I could not test it.

Some days ago i recommended the FlashObject in the post Eolas Fix for Flash: FlashObject

Due to legal problems with Adobe, Geoff Stearns has to change the name of FlashObject to SWFObject, you can read the whole story here: FlashObject to become SWFObject

And now you can download a new version with some small changes:

SWFObject, née FlashObject 1.4 released

When a user clicks on a link to a JPG file, PDF file and other kind of files from a website, the web browser normally open the file inside it. This sometimes is annoying, for example, when the browser opens a PDF file this make the computer works slowly while the PDF loads. Another reason this is annoying is that maybe you want to store the files on your computer and use or read later.

Some webmasters try to avoid this problem and force download using .zip files, but this is not an elegant solution.

There is a better method to achieve this with the help of PHP using HEADER and READFILE commands.

Here you have an example:

Example

The PHP code that process all is:

<?
$file = $_GET['file'];
header ("Content-type: octet/stream");
header ("Content-disposition: attachment; filename=".$file.";");
header("Content-Length: ".filesize($file));
readfile($file);
exit;
?>

And the HTML link is:

<a href="process.php?file=picture.jpg">Download JPG image</a>

As you see, the only thing you must do is upload the PHP file to your site and then call it and add the file name to the PHP URL.
Note: the JPG file must be on the same folder as the PHP file.

This trick is usefull for any kind of file: JPG, GIF, PDF, etc. and work in almost all web browsers.

If you want to download the example files, just do it HERE

Simple, but effective!

Some news appeared a couple of years ago about the Eolas-Microsoft patent issue: W3C sides with Microsoft against Eolas patent

On April 11, 2006 Microsoft was finally forced to update how ActiveX plug-ins behave in Internet Explorer via Windows Update.

So now if you use Internet Explorer and go to a website that has ActiveX elements (like Flash) inside you will see a tooltip that says: “Click to activate and use this control”.
Now ActiveX elements will not be initially allowed to interact with the user until he/she enables the ActiveX clicking the ActiveX element or pressing Spacebar or Enter.

Fortunately there are some fixes that use Javascript to show the ActiveX information directly. I strongly recommed to use the FlashObject library of Geoff Stearns.
It fix the problem in a nice way and also has other good features:

• The script can detect the Flash plug-in in all major web browsers (on Mac and PC).
• Is designed to make embedding Flash movies as easy as possible.
• It is also very search engine friendly and can be used in valid HTML and XHTML 1.0 documents.

How to use:

1. Include in your website the flashobject.js Javascript file that you can download HERE.
2. Then write some Javascript on your page to embed your Flash movie.

   Example:

   <script type="text/javascript" src="flashobject.js"></script>
   <div id="flashcontent">
     This text is replaced by the Flash movie.
   </div>
   <script type="text/javascript">
      var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
      fo.write("flashcontent");
   </script>

3. The parameters are simple:

   swf: the file path and name to your swf file.
   id: the ID of your object or embed tag.
   width: width of your Flash movie.
   height- height of your Flash movie.
   version: required player version for your Flash content.
   background color: the hex value of the background color of your Flash movie.

And that’s all!
Now your flash movies will show in the same way as before and users don’t have to make any extra click or activation.

If you need more information just visit the author’s website: FlashObject: Javascript Flash detection and embed script

So I recommend webmasters to fix their websites to work well on Internet Explorer.

And for normal users and web surfers I strongly recommend to download Firefox because this web browser doesn’t have this annoying problem.
Another good reason to use Firefox.

You can download Firefox at the link below: