Changing alert's title

Airshow 416 WiFi Lounge Lizard Team Colleague · 2009-08-20T18:16:17+00:00

Eantz,

Sorry, I'm not sure I fully understand but here's my best guess ..... alert is a native javascript function and as such doesn't have a title (as do some HTML elements).

The appearance/format of a javascript alert popup is browser-dependant and is not under programmatic control (except for the alert message itself).

A way to exert control over the appearance of an alert is to write your own myAlert(message){...} function which displays an absolutely positioned div, with message inserted using DHTLM/DOM techniques.

Airshow

eantz 0 Light Poster · 2009-08-21T07:39:22+00:00

thank you Airshow..

I did understand..
Maybe, I will use jQuery to solve the problem..

devlakki 0 Newbie Poster · 2009-12-03T18:48:49+00:00

I'm new in Xhtml/javascript coding.
How to coding title bar in an alert dialog box?
Anybody can help!

Airshow 416 WiFi Lounge Lizard Team Colleague · 2009-12-04T01:32:42+00:00

Nice effect Chandru but the code contains angled single and double quotes which need to be changed to stright single and double quotes. Some (most?) browsers baulk at angled quotes.

Also the code is not fiully cross-browser and doesn't take h/v scroll into account.

Here's my version[/URL] based on the one posted by Chandru above:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#CustomAlert {
visibility: hidden;
position: absolute;
z-index: 999;
top: 200px;
left: 200px;
width: 100px;
height: 50px;
border-style: groove;
border-width: 5px;
border-color: #FFFFFF;
cursor: default;
filter: alpha(opacity=90);
background-color: silver;
text-align: center;
}
#CustomAlertSampleokButton {
background-color: silver;
font-color: #000000;
font-size: 9pt;
font-family: arial;
width: 70px;
height: 20px; 
}
#CustomAlertTitle {
background-color: dimgray;
font-family: arial;
font-size: 9pt;
color: #FFFFFF;
font-weight: bold;
}
#CustomAlertMessage {
font-family: arial;
font-size: 11pt;
color: #000000;
font-weight: normal;
}
</style>
<script>
var CUSTOM_ALERT = function(){//Namespace pattern
	var alertBox = null, titleEl = null, messageEl = null;
	return {
		hide : function(){
			alertBox.style.visibility = 'hidden';
		},
		alert : function(aTitle, aMessage){
			if(!alertBox) alertBox = document.getElementById("CustomAlert");
			if(!titleEl) titleEl = document.getElementById("CustomAlertTitle");
			if(!messageEl) messageEl = document.getElementById("CustomAlertMessage");
			titleEl.innerHTML = aTitle;
			messageEl.innerHTML = aMessage;
			thisText = aMessage.length;
			if (aTitle.length > aMessage.length){ thisText = aTitle.length;}
			aWidth = Math.min(Math.max(thisText*5+80, 150), 350);
			aHeight = (thisText>610) ? 290 : (thisText>550) ? 270 : (thisText > 490) ? 250 : (thisText > 420) ? 230 : (thisText > 360) ? 210 : (thisText > 300) ? 190 : (thisText > 240) ? 170 : (thisText > 180) ? 150 : (thisText > 120) ? 130 : (thisText > 60)? 110 : 100;
			alertBox.style.width = aWidth + 'px';
			alertBox.style.height = aHeight + 'px';
			var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			var hScroll = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
			var vScroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
			alertBox.style.left = hScroll + (left - aWidth)/2 + 'px';
			alertBox.style.top =  vScroll + (top - aHeight)/2 + 'px';
			alertBox.style.visibility = 'visible';
		}
	};
}();
</script>
</head>

<body>
<div id="CustomAlert">
	<table border="0" width="100%" height="100%">
	<tr height="5"><td colspan="4" id="CustomAlertTitle"></td></tr>
	<tr height="5"><td width="5"></td></tr>
	<tr><td width="5"></td><td width="20" align="left"><img src="alert.gif"></td><td align="center" id="CustomAlertMessage"></td><td width="5"></td></tr>
	<tr height="5"><td width="5"></td></tr>
	<tr><td width="5"></td><td colspan="2" align="center"><input type="button" value="OK" onClick="CUSTOM_ALERT.hide();" id="CustomAlertSampleokButton"></td><td width="5"></td></tr>
	<tr height="5"><td width="5"></td></tr>
	</table>
</div>

<center>

<input type="button" value="Click Here For A Normal JavaScript Alert" onClick="alert('A Standard Boring JavaScript Alert');">
<br><br>
<input type="button" value="Click Here For A More Attractive Alert" onClick="CUSTOM_ALERT.alert('Your Alert Title','Your Alert Message Goes Here<br>This script is very easy to use and<br>can easily be customised using CSS');">
</center>
</body>
</html>

It's still not perfect. The algorithm for calculating an appropriate aHeight could be better (in FF).

I'm sure someone knows of better code. In one of the productivity libs (or a pluguin) maybe.

Airshow