Cuatom alert box

freddyw · April 23, 2010

Hi there.

Im doing a research poster on the effects of internet addiction. Rather than having boring white boxes I decided to craete alert boxes (custom so I can title each box). then I'll do a print screen and drop it onto the poster. My problem is the text is longer than the search box. The width is fine its just the length. Is there a way to auto adjust the length so the alert box is the correct height.

<HTML>
<BODY>
<STYLE type="text/css">
.okButton {
background-color: #D4D4D4;
font-color: #000000;
font-size: 9pt;
font-family: arial;
width: 70px;
height:	20px;  
}
.alertTitle {
background-color: #3C56FF;
font-family: arial;
font-size: 9pt;
color: #FFFFFF;
font-weight: bold;
}
.alertMessage {
font-family: arial;
font-size: 9pt;
color: #000000;
font-weight: normal;
}
.alertBoxStyle {
cursor: default;
filter: alpha(opacity=90);
background-color: #E4E4E4;
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 50px;
visibility:hidden; z-index: 999;
border-style: groove;
border-width: 5px;
border-color: #FFFFFF;
text-align: center;
}
</STYLE>
<div id="alertLayer" class=alertBoxStyle></div>
<SCRIPT LANGUAGE="JavaScript">
function BrowserCheck() {
var b = navigator.appName;
if (b == "Netscape") this.b = "NS";
else if (b == "Microsoft Internet Explorer") this.b = "IE";
else this.b = b;
this.v = parseInt(navigator.appVersion);
this.NS = (this.b == "NS" && this.v>=4);
this.NS4 = (this.b == "NS" && this.v == 4);
this.NS5 = (this.b == "NS" && this.v == 5);
this.IE = (this.b == "IE" && this.v>=4);
this.IE4 = (navigator.userAgent.indexOf('MSIE 4')>0);
this.IE5 = (navigator.userAgent.indexOf('MSIE 5')>0);
if (this.IE5 || this.NS5) this.VER5 = true;
if (this.IE4 || this.NS4) this.VER4 = true;
this.OLD = (! this.VER5 && ! this.VER4) ? true : false;
this.min = (this.NS||this.IE);
}
is = new BrowserCheck();
alertBox = (is.VER5) ? document.getElementById("alertLayer").style
: (is.NS) ? document.layers["alertLayer"]
: document.all["alertLayer"].style;

function hideAlert(){
alertBox.visibility = "hidden";}

function makeAlert(aTitle,aMessage){
document.all.alertLayer.innerHTML = "<table border=0 width=100% height=100%>" +
"<tr height=5><td colspan=4 class=alertTitle>" + " " + aTitle + "</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 class=alertMessage>" + aMessage + "<BR></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='hideAlert()' class=okButton><BR></td><td width=5></td></tr>" +
"<tr height=5><td width=5></td></tr></table>";
thisText = aMessage.length;
if (aTitle.length > aMessage.length){ thisText = aTitle.length; }

aWidth = (thisText * 5) + 80;
aHeight = 100;
if (aWidth < 150){ aWidth = 200; }
if (aWidth > 350){ aWidth = 350; }
if (thisText > 60){ aHeight = 110; }
if (thisText > 120){ aHeight = 130; }
if (thisText > 180){ aHeight = 150; }
if (thisText > 240){ aHeight = 170; }
if (thisText > 300){ aHeight = 190; }
if (thisText > 360){ aHeight = 210; }
if (thisText > 420){ aHeight = 230; }
if (thisText > 490){ aHeight = 250; }
if (thisText > 550){ aHeight = 270; }
if (thisText > 610){ aHeight = 290; }

alertBox.width = aWidth;
alertBox.height = aHeight;
alertBox.left = (document.body.clientWidth - aWidth)/2;
alertBox.top = (document.body.clientHeight - aHeight)/2;

alertBox.visibility = "visible";
}

</SCRIPT>

<INPUT TYPE=button value="Alert" onClick="makeAlert('Abstract','This poster looks at the cause an reasoning for compulsive surfing. A trend has appeared over recent years and it seems more people are surfing simply due to Internet Addiction Disorder (IAD). There are many theories whether or not IAD is a real disorder. There is currently a debate whether to include IAD in 2012\’s Diagnostic and Statistical Manual of Mental Disorders (DSM).<br/><br/>“Many people are convinced that \‘Internet addiction\’ does exist, but it is possible that some of these advocates might be making money from promoting Internet addiction as an actual disorder.\” <br/>(Johnson, 2009, 10)<br/>People go online, usually with one objective in mind and become distracted by the opportunities online. It appears that wherever your interests lie, you will find something in that area online to distract you. Whether it be downloading the latest movie, catching the newest music video, chatting with friends, looking up guitar tabs, the list is endless. This poster uncovers why people become so distracted when they go online. If IAD is causing people to miss out on real life, neglect family, friend and their own needs such as sleep. It will also look at whether there is a link between IAD and depression.');">

</BODY>
</HTML>

Philip · April 23, 2010

Remove the height from .alertBoxStyle and don't set one via JS. It should automatically go to the correct height.

Psycho · April 24, 2010

As he ^^ said

Remove the lines I have commented here

.alertBoxStyle {
cursor: default;
filter: alpha(opacity=90);
background-color: #E4E4E4;
position: absolute;
top: 200px;
left: 200px;
width: 100px;
/* height: 50px; */
visibility:hidden; z-index: 999;
border-style: groove;
border-width: 5px;
border-color: #FFFFFF;
text-align: center;
}

and here

aWidth = (thisText * 5) + 80;
//aHeight = 100;
if (aWidth < 150){ aWidth = 200; }
if (aWidth > 350){ aWidth = 350; }
//if (thisText > 60){ aHeight = 110; }
//if (thisText > 120){ aHeight = 130; }
//if (thisText > 180){ aHeight = 150; }
//if (thisText > 240){ aHeight = 170; }
//if (thisText > 300){ aHeight = 190; }
//if (thisText > 360){ aHeight = 210; }
//if (thisText > 420){ aHeight = 230; }
//if (thisText > 490){ aHeight = 250; }
//if (thisText > 550){ aHeight = 270; }
//if (thisText > 610){ aHeight = 290; }

alertBox.width = aWidth;
//alertBox.height = aHeight;
alertBox.left = (document.body.clientWidth - aWidth)/2;
alertBox.top = (document.body.clientHeight - aHeight)/2;

Sign In

Cuatom alert box

Recommended Posts

freddyw

Link to comment

Share on other sites

Philip

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information