Svetoslav Marinov’s Blog

By a timed effect here I mean do some animation and then redirect the user to a page.
Requirements: jQuery (and Javascript)
Download the file: timed_effect_jquery

Here is how to accomplish that:

Implementation

/*
This function performs some effects on a target_obj and after 2.5 sec redirects to a location defined by ahref_obj
Usage: in shopping carts e.g. when someone adds a product then some animation is perfomed to make the user aware that something is happening.
License: LGPL
Author: Svetoslav Marinov
Site: http://slavi.biz
*/
function my_timed_effect(target_obj, ahref_obj) {
jQuery(target_obj).attr('style', 'font-weight:bold;').fadeOut("slow").fadeIn("slow").show('slow');
setTimeout('document.location="' + ahref_obj.href + '"', 2000);
}

Usage:

<a href="/cart/add/1" onclick="my_timed_effect(jQuery('#my_status_container_id'), this); return false;">Add a product</a> <br />
<a href="http://google.com" onclick="my_timed_effect(jQuery('#my_status_container_id'), this); return false;">Add a product</a> (go to http://google.com after the animation)

This example will perform the animation and then redirect where the link points.

How would you do the same effect ?
Are there any other option(s) ?

Have you ever experienced a situation like this changing/updating a value of a simple hidden field and it doesn't get passed to the script ?

Everything looks simple because it is simple

[code]

 
[/code]

When you focus only on one small portion of the code it makes perfect sense and it works.

There is always a BUT

I would like to quote a very good friend of mine Julian Lishev (http://proscriptum.com/) who once said "Everything is/should be so logical and it cannot be any other way. "

I continued to dig deeper and realized that there was another element with the same ID in another form which was breaking my plan.

Take Care,

Slavi