smokingguns
Posts: 51
|
| Posted: 09/18/2009, 9:55 AM |
|
Hey all,
Just wanted to share this trick with CCS community. Twitter users must be familiar with the notices("Thanks, your settings have been saved" for eg) that slide-down and slide-up after a few seconds.
Hope this trick enriches your users' web-experience.
Scenario: You are sending a response from the server back to the client and want to display the response formatted nicely as a notice. The notice slides downwards and after a delay slides back upwards.
Add the following HTML mark-up after the '<body>' tag
<p align="left"><div class="flashNotice" id="flash"></div></p>
Add the following in the head section:
<style>
.flashNotice{
display:none;
position: absolute;
background-color: #EEE;
border: 1px solid gray;
height:80px;
font-weight:bold;
font-size:14px;
z-index: 9001;
}
</style>
The response sent from the server can be retrieved with the responseText property.
Now add the following code in the function that handles the server responses(function you call using the onreadystatechange property).
document.getElementById("flash").innerHTML="Hello, this div is gonna slide down now"; // Put your server response
JSFX_FloatDiv("flash", 10,0).floatIt();
jQuery("#flash").slideDown("slow"); // slides the div downwards
document.getElementById("flash").style.display="block";
setTimeout(function(){
jQuery("#flash").slideUp("slow", function () {
document.getElementById("flash").style.display="none";
document.getElementById("flash").innerHTML="";
}); }, 3000); // slides the div upwards
The next thing you need to do is add this function in your head section.The script keeps the flash notice DIV element always in view as the browser window is scrolled. I didnt write this function.The credits go to http://www.javascript-fx.com . I just plugged it in to suit my needs.
<!-- *********************************************************
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Floating Div from http://www.javascript-fx.com
******************************************************** -->
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;
}
I'm using the minified version of jquery.
|
