First see Online Demo
A cool look-and-feel wizard for navigation between steps is one of the most precious addin to your pages. I come today with a creative technique, which i have created a month ago, to feature it out.
Let's start out:
1- I have used jquery for its easy ajax support, if you do not know what jquery is I advise you to visit this.
2- CSS filter Apply and Play:
el.style.filter = "progid:DXImageTransform.Microsoft.Wipe(GradientSize=0.2, duration=0.7, wipeStyle=0, motion='forward')";
el.filters[0].Apply();
el.innerHTML = data.toString();
el.filters[0].Play();
Wipe filter creates the feel of gradient transition.
For more about transition filters click here.
-Apply() function saves the current state of the element "el" in the memory
-el.innerHTML = data.toString(); does not change the "el" state.
-Play() function plays the transition effect between the saved state (data before calling apply()) and the new one.
3-AjaxLoader.aspx
Each step is a user control which is loaded dynamically into AjaxLoader.aspx. Jquery $.post() function requests AjaxLoader.aspx and inject the response into "ajaxsite" DIV element.
AjaxLoader.aspx must not contain html, head, body or form tags since it will be loaded into "ajaxsite" div element.
4-AjaxPost():
function AjaxPost(url ,paramz, target , dir)
{
//paramz: parameters to send to the page using POST method
$.post(url ,paramz, function(data){
//Callback after the response of the ajax request
var el = $('#' + target)[0];
var motion = 'forward';
if(dir == "rtl")motion = 'reverse';
el.style.filter = "progid:DXImageTransform.Microsoft.Wipe(GradientSize=0.2, duration=0.7, wipeStyle=0, motion='"+motion+"')";
el.filters[0].Apply();
el.innerHTML = data.toString();
el.filters[0].Play();
});
}
This function call $.post function then updates the data into the target DIV by appying Wipe filter.
motion parameter specifies the direction of the transition.
Pretty cool, isn't it?
Demo with source code is available within the attachment.
jqAjax.rar (176.76 KB)
d4cd635d-b24f-44df-93c0-ce061efdd9a0|0|.0