Member Avatar for eantz

Hi all,
I just want to ask you a simple question. I can't find the answer anywhere.

How can I change the alert's title in javascript?

  • 3 Contributors
  • 4 Replies
  • 151 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

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

Member Avatar for eantz

thank you Airshow..

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

Member Avatar for devlakki

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

Member Avatar for Airshow

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.