CodeCharge Studio
search Register Login  

Web Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Twitter like Flash Notice using Jquery

Print topic Send  topic

Author Message
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.
View profile  Send private message
jjrjr1


Posts: 942
Posted: 09/19/2009, 8:08 AM

Very Cool

_________________
John Real - More CodeCharge Studio Support at - http://CCSElite.com
View profile  Send private message
smokingguns


Posts: 51
Posted: 09/19/2009, 3:24 PM

Forgot to add this. in the Onload event of the page, add the following code
  
var swidth=screen.width; //get the screen width  
document.getElementById("flash").style.width=swidth-40; // Set the width of the 'Flash Notice' div .  
View profile  Send private message
ccsrocks

Posts: 7
Posted: 09/23/2009, 8:05 PM

Could you post a working example of this? I still seem to be having issues trying to make this work properly. Or explain the 'onreadystatechange' property section a bit clearer for newbies.
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

PHP Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.