Need help with some simple javascript

**farridav** · 03-20-2010, 02:07 PM

Im sort of new to all this, anyway im trying to create a simple notification box (like windows messenger or avast etc.) that pops up to give the user a message, i have it working, moving up, and down and fading in and out etc. but im struggling to make individual instances of it???

if you invoke it again before it has finished fading out and moving down it messes up.. i was trying to think of an object orientated way to do it, so if anyones got any ideas, please help!!!... thanks in advance, heres code.. apoligies for how messy it is

Code:

<html>
<head>
	<title>testing</title>
	<meta http-equiv="Content-Type" content="text/php; charset=UTF-8" />
	
	<!-- CSS -->
	<style type="text/css">
		body {overflow: hidden;}

		.alert{
			clip: auto;
			padding: 10px; 
			border: 4px solid white;
			position: absolute;
			right: 10px; 
			bottom: -208px;
			width: 210px; 
			height: 180px;
			font-size: 16pt;
		}
	</style>
	
	<!-- JAVASCRIPT -->
	<script type="text/javascript">
		//---------------------globals & initialiser functions-----------------//

		var fader, fadeTimer, moveUp, moveDown;
		var alertNo = 0;
		var moveCount = -212;
		var TimeToFade = 500.0;
		var fadeDuration = 500;
		var fadeSteps = 30;
		var i = 0;
		var container;
		
		function newAlert(text){
			container = document.getElementById("all");
			var obj = boxAlert(text);
			container.appendChild(obj);
			fadeIn(obj.id);
			moveUp = setInterval("movement('"+obj.id+"', 'up')", 10);
			setTimeout("fadeOut('"+obj.id+"')", 4500);
		}

		function boxAlert(text){
			var newAlert=document.createElement("div");
			newAlert.className="alert";
			newAlert.id = "alert"+alertNo;
			newAlert.style.backgroundColor="red";
			newAlert.innerHTML = text;
			alertNo++;
			return newAlert;
		}

		//--------------FADER START------------------//

		function setOpacity(obj, level, state){
			var element = document.getElementById(obj);
			element.style.visibility = "visible";
			element.style.opacity = level;
			element.style.MozOpacity = level;
			element.style.KhtmlOpacity = level;
			element.style.filter = "alpha(opacity=" + (level * 100) + ");"; //for old IE
			if (state == "in") {if (element.style.opacity > 0.9 || element.style.MozOpacity > 0.9 || element.style.KhtmlOpacity > 0.9){clearTimeout(fadeTimer);}}
			if (state == "out"){if (element.style.opacity < 0.01 || element.style.MozOpacity < 0.01 || element.style.KhtmlOpacity < 0.01){element.style.visibility = "hidden";clearTimeout(fadeTimer);}}
		}
		function fadeIn(element) {clearTimeout(fadeTimer); for (var i=0; i<=1; i+=(1/fadeSteps)){fadeTimer = setTimeout('setOpacity(\''+element+'\','+i+',"in")', i * fadeDuration);}}

		function fadeOut(element){clearTimeout(fadeTimer); for (var i=0; i<=1; i+=(1/fadeSteps)){fadeTimer = setTimeout('setOpacity(\''+element+'\','+(1-i)+',"out")', i * fadeDuration);}}

		//--------------FADER END------------------//

		//------------MOVEMENT BEGIN---------------//

		function movement(obj, direction){
			var element = document.getElementById(obj);
			if(direction=="up"){
				element.style.bottom = moveCount;
				moveCount+=4;
				if (moveCount == 0){clearInterval(moveUp); setTimeout('moveDown = setInterval(\'movement(\"'+obj+'"\,\"down\")\', 10)', 4000);}
			}
			if(direction=="down"){
				element.style.bottom = moveCount;
				moveCount-=4;
				if (moveCount == -212){clearInterval(moveDown);}
			}
		}
	
	</script>
	
	<!-- HTML -->
</head>
<body>
	<div id="all"><div onclick ='newAlert("testing");'>Make Notification</div></div>
</body>
</html>

**vwphillips** · 03-20-2010, 03:43 PM

nd fading in and out etc. but im struggling to make individual instances of it???

this would be difficult with your code

but

Code:

<html>
<head>
	<title>testing</title>
	<meta http-equiv="Content-Type" content="text/php; charset=UTF-8" />

	<!-- CSS -->
	<style type="text/css">
		body {overflow: hidden;}

		.alert{
			clip: auto;
			padding: 10px;
			border: 4px solid white;
			position: absolute;
			right: 10px;
			bottom: -212px;
			width: 210px;
			height: 180px;
			font-size: 16pt;
            background-Color:red;
		}
	</style>

</head>
<body>
	<div id="all"><div onclick ='a1.Show();'>Make Notification</div></div>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 1 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.neg=srt<0||fin<0;
 this.data=[srt,srt,fin];
 this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcAnimate.prototype.cng=function(){
 var oop=this,ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
 this.apply();
 if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
 }
}

zxcAnimate.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

<script type="text/javascript">
/*<![CDATA[*/
function myAlert(o){
 var obj=document.createElement("div");
 obj.className=o.BoxClass;
 obj.innerHTML =o.BoxHTML;
 document.body.appendChild(obj);
 this.bottom=new zxcAnimate('bottom',obj,o.Bottom);
 this.opacity=new zxcAnimate('opacity',obj,0);
 this.srt=o.Bottom;
 this.ms=o.Duration||1000;
 this.hold=o.Hold||this.ms*4;
 this.to=null;
}

myAlert.prototype.Show=function(){
 var oop=this;
 clearTimeout(this.to);
 this.bottom.animate(this.bottom.data[0],0,this.ms,[this.bottom.data[0],0]);
 this.opacity.animate(this.opacity.data[0],100,this.ms,[0,100]);
 this.to=setTimeout(
  function(){
   oop.bottom.animate(oop.bottom.data[0],-200,oop.ms);
   oop.opacity.animate(oop.opacity.data[0],0,oop.ms,[0,100]);
   },this.hold);
}

var a1=new myAlert({
 BoxClass:'alert',
 BoxHTML:'Testing',
 Bottom:-212,
 Duration:1000,
 Hold:4000
});
/*]]>*/
</script></body>
</html>

**farridav** · 03-20-2010, 09:58 PM

Thanks mate, appreciate it.

that works well, im going to have to read through all the code and make sure i understand it all. Making things object orientated in javascript seems to be a little tricky sometimes..

Thread: Need help with some simple javascript

Thread Tools

Search Thread

Need help with some simple javascript

The Following User Says Thank You to vwphillips For This Useful Post:

Thanks Vic

Bookmarks

Bookmarks

Posting Permissions