update browser center?

[snowboardr]

I have this script below that i made many modifications to get it to be cross browser compatible. This script replaces the alert() with a div alert my only problem is right now... is if you scroll down the page the alert is still popping up farther up a couple of inches above the screen, but if you are at the top of the page it works perfectly... The code is as follows:

this is how you call this function

alert('my div alert')

css for the div

<style type="text/css">

.notifier {
	z-index: 100;
	margin: 0px 0px;
	padding: 5px 5px;
	border: 1px solid #CCCCCC;
	background-color:#0066CC;
	color:#FFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
}

</style>

var Notifier=new function(){
	// real alert function placeholder
	this._alert=null;
	// return Notifier object methods
	return {
		// m=message,c=classname
		notify:
			function(m,c){
				// we may consider adding frames support
				var w=this.main;
				// shortcut to document
				var d=this.main.document;
				// canvas, window width and window height
				var r=d.documentElement;
				var ww=w.innerWidth?w.innerWidth+w.pageXOffset:r.clientWidth+r.scrollLeft;
				var wh=w.innerHeight?w.innerHeight+w.pageYOffset:r.clientHeight+r.scrollTop;
				// create a block element
				var b=d.createElement('div');
				b.id='Message';
				b.className=c||'';
				b.style.cssText='top:-9999px;left:-9999px;position:absolute;white-space:nowrap;';
				// classname not passed, set defaults
				if(b.className.length==0){
					b.style.margin='0px 0px';
					b.style.padding='8px 8px';
					b.style.border='1px solid #f00';
					b.style.backgroundColor='#fc0';
				}
				// insert block in to body
				b=d.body.insertBefore(b,d.body.firstChild);
				// write HTML fragment to it
				b.innerHTML=m;
				// save width/height before hiding
				var bw=b.offsetWidth;
				var bh=b.offsetHeight;
				b.style.display='none';
				
				var sbrowser=BrowserDetect.browser;
				if (sbrowser=="Explorer") {
					b.style.top=290+(wh-bh) /2 +'px';// random y position
					b.style.left=510+(ww-bw) /2+'px';// random x position
				} else {
					b.style.top=(wh-bh) /2 +'px';// random y position
					b.style.left=(ww-bw) /2+'px';// random x position		
				}


			b.style.display='block';
				// fadeout block if supported
				setFading(b,100,0,5000,function(){d.body.removeChild(b);});
			},
		// initialize Notifier object
		init:
			function(w,s){
				// save window
				this.main=w;
				this.classname=s||'';
				// if not set yet
				if(this._alert==null){
					// save old alert function
					this._alert=this.main.alert;
					// redefine alert function
					this.main.alert=function(m){
						Notifier.notify(m,s)
					}
				}
			},
		// shutdown Notifier object
		shut:
			function(){
				// if redifine set
				if(this._alert!=null){
					// restore old alert function
					this.main.alert=this._alert;
					// unset placeholder
					this._alert=null;
				}
			}
	};
};

// apply a fading effect to an object
// by applying changes to its style
// @o = object style
// @b = begin opacity
// @e = end opacity
// @d = duration (millisec)
// @f = function (optional)
function setFading(o,b,e,d,f){
	var t=setInterval(
		function(){
			b=stepFX(b,e,2);
			setOpacity(o,b/100);
			if(b==e){
				if(t){clearInterval(t);t=null;}
				if(typeof f=='function'){f();}
			}
		},d/50
	);
}

// set opacity for element
// @e element
// @o opacity
function setOpacity(e,o){
	// for IE
	e.style.filter='alpha(opacity='+o*100+')';
	// for others
	e.style.opacity=o;
}

// increment/decrement value in steps
// checking for begin and end limits
//@b begin
//@e end
//@s step
function stepFX(b,e,s){
	return b>e?b-s>e?b-s:e:b<e?b+s<e?b+s:e:b;
}

var __alert=window.alert;

Notifier.init(window, 'notifier');




var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();

The main point of interest:

			var sbrowser=BrowserDetect.browser;
				if (sbrowser=="Explorer") {
					b.style.top=290+(wh-bh) /2 +'px';// random y position
					b.style.left=510+(ww-bw) /2+'px';// random x position
				} else {
					b.style.top=(wh-bh) /2 +'px';// random y position
					b.style.left=(ww-bw) /2+'px';// random x position		
				}

Jason

[red]Army[/red] : [white]Combat Engineer[/white] : [blue]21B[/blue]

 

[BillyRayPreachersSon]

I had a similar problem last week at work. We tried adding on the scrollTop property of the HTML element, which worked in IE & Fx but not Safari... and found that the scrollTop property of the body worked in Safari but not IE or Fx... so we ended up with this:

var scrolledOffset = Math.max(document.getElementsByTagName('html')[0].scrollTop, document.getElementsByTagName('body')[0].scrollTop);

If you add "scrolledOffset" to the top position of your DIV, it should be always on the screen.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]