...

View Full Version : Printing out bold font in alert



florida
06-07-2004, 02:03 PM
Can you put a strong bold in alert messages?



alert("Here is a <strong>bold word font</strong> that works?">;



It prints out:
Here is a <strong>bold word font</strong> that works?


Please advise if it can be done?

jbot
06-07-2004, 02:06 PM
Can you put a strong bold in alert messages?

no, you can't alter anything in an alert box except the text string which is displays.

but you could create your own alert-style popup using DHTML layers. have you not thot about doing that?
:cool:

florida
06-07-2004, 02:31 PM
No I have not thought of that. Please advise how I can do that?

jbot
06-07-2004, 03:16 PM
No I have not thought of that. Please advise how I can do that?

use hidden div elements, the body content of which is your message. when you call a function which subsequently calls an alert, instead call another function which shows your hidden alert layer.

you'll also need a button in the layer to hide (close) it.

hope that helps.

requestcode
06-07-2004, 03:22 PM
Here is some sample code that you could modify for your needs:


<html>
<head>
<title>Alert and Prompt Test</title>
<STYLE>
/* You can modify these styles to anything you want (or is allowed). */
/* These are used by both browsers. You can set these to your preferences. */
.td1style {font-weight:bold;border:1px solid black;background-color:lightgrey;color:blue;font-size:14px;fontFamily:Verdana;}
.td2style {font-weight:bold;border:1px solid black;background-color:lightyellow;font-size:12px;font-family:Verdana;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
/* The following three variables are for setting the properties of your table containing the tool tip */
var tborder="0"
var cspace="0"
var cpad="0"
var msgtop=50 // Set the top position of the div
var msgleft=50 // Set the left position of the div
var boxt=""
function populate(flag)
{
hidebox()
// alert(boxtype)
if(boxt=="Text")
{
if(document.layers)
{msg=eval("document.formbox."+flag+".txta.value")}
else
{msg=eval(flag+".txta.value")}
}
else
{msg=flag}
document.formbx.result.value=msg
}
function DoFormbox(boxtype,msgtext)
{
boxt=boxtype
theString="<TABLE WIDTH='400' HEIGHT='200' BORDER="+tborder+" CELLSPACING="+cspace+" CELLPADDING="+cpad+"><TR><TD><TABLE BORDER="+tborder+" CELLSPACING="+cspace+" CELLPADDING="+cpad+"><TR VALIGN='top'><TD CLASS='td1style' ALIGN='left'><B>"
if(boxtype=="Confirm")
{theString+=""+boxtype+"</B></TD></TR></TABLE></TD></TR><TR><TD ALIGN='center' CLASS='td2style'>"+msgtext+"<br><A HREF='javascript:populate(\"Yes\")'>Yes</A>&nbsp &nbsp<A HREF='javascript:populate(\"No\")'>No</A></TD></TR></TABLE>"}
if(boxtype=="Alert")
{theString+=""+boxtype+"</B></TD></TR></TABLE></TD></TR><TR><TD ALIGN='center' CLASS='td2style'>"+msgtext+"<br><A HREF='javascript:populate(\"Ok\")'>Ok</A></TD></TR></TABLE>"}
if(boxtype=="Text")
{theString+=""+msgtext+"</B></TD></TR></TABLE></TD></TR><TR><TD ALIGN='center' CLASS='td2style'><form name='myform'><input name='txta' type='text' size='30'></form><A HREF='javascript:populate(\"document.myform\")'>Ok</A></TD></TR></TABLE>"}
if (document.layers) // Netscape 4.0+
{
document.formbox.document.write(theString)
document.formbox.document.close()
document.formbox.left=msgleft
document.formbox.top=msgtop
document.formbox.visibility="show"
}
else
{
if(document.getElementById) // Internet Explorer 5.0+ and Netscape 6.0+
{
elm=document.getElementById("formbox")
elm.innerHTML=theString
elm.style.height=200
elm.style.width=400
elm.style.top=msgtop
elm.style.left=msgleft
elm.style.visibility = "visible"
}
}
}

// This function is for hiding the message box
function hidebox()
{
if (document.layers) // Netscape 4.0+
{document.formbox.visibility="hidden"}
if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
{elm.style.visibility="hidden"}
}

</SCRIPT>
</head>
<body>
<CENTER>
<div id="formbox" style="position:absolute;visibility:hidden;height:200;width:400"></div>
<form name="formbx">
<input type="text" name="result" size=30">
</form>
<A HREF="javascript:DoFormbox('Confirm','Are you sure?')">Click Me for a Confirm Box</A><BR>
<A HREF="javascript:DoFormbox('Alert','This is an alert!')">Click Me for an Alert Box</A><BR>
<A HREF="javascript:DoFormbox('Text','You could enter text here:')">Click Me for a Text Box</A>
</CENTER>
</body>
</html>

florida
06-07-2004, 04:20 PM
Thanks, for some reason it doesnt work in my Netscape 4.77 Browser.

Anything I can add or check tomake it work?

requestcode
06-07-2004, 05:15 PM
It has been so long since I have worked with NS4 version browsers that I can't say why it would not work. If I remember you can type "javascript:" in the address bar (without the double quotes) to see if it is throwing any errors.
Have you tried the example as written or did you apply the code to yours?

Willy Duitt
06-07-2004, 05:31 PM
It's been a long time for me also but you could try changing this line to include IE4: if (document.layers)

if (document.layers || document.all)

requestcode
06-07-2004, 06:29 PM
That won't work because it will still pick up IE4 and above browsers and use the code for NS4. document.all still works for the newer IE browsers.

glenngv
06-08-2004, 04:16 AM
The if-condition

if(document.layers)
{msg=eval("document.formbox."+flag+".txta.value")}
else
{msg=eval(flag+".txta.value")}

can be improved by not using eval.

if(document.layers){
msg = document.layers["formbox"].document.forms[flag].txta.value;
}
else{
msg = document.forms[flag].txta.value;
}

and changing the Ok link in Text boxtype condition to this:

theString+="...<A HREF='javascript:populate(\"myform\")'>Ok</a>..."

It is better to refer to the NS4 layer as document.layers[layerId] not document.layerId as I did above. But AFAIK, it should be name (document.layers[layerName]) not id. Try also putting name="formbox" in the div and see if it now works with NS4.

florida
06-08-2004, 12:55 PM
Thanks I tried as all suggested using just a test page (called testonly.html) with only your script and it still not working in my Netscape 4.77 Browser but does work in Netscape 7 and IE. Any other suggestions??



<html>
<head>
<title>Alert and Prompt Test</title>
<STYLE>
/* You can modify these styles to anything you want (or is allowed). */
/* These are used by both browsers. You can set these to your preferences. */
.td1style {font-weight:bold;border:1px solid black;background-color:lightgrey;color:blue;font-size:14px;fontFamily:Verdana;}
.td2style {font-weight:bold;border:1px solid black;background-color:lightyellow;font-size:12px;font-family:Verdana;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
/* The following three variables are for setting the properties of your table containing the tool tip */
var tborder="0"
var cspace="0"
var cpad="0"
var msgtop=50 // Set the top position of the div
var msgleft=50 // Set the left position of the div
var boxt=""
function populate(flag)
{
hidebox()
// alert(boxtype)
if(boxt=="Text")
{
if(document.layers){
msg = document.layers["formbox"].document.forms[flag].txta.value;
}
else{
msg = document.forms[flag].txta.value;
}
}
else
{msg=flag}
document.testonly.result.value=msg
}
function DoFormbox(boxtype,msgtext)
{
boxt=boxtype
theString="<TABLE WIDTH='400' HEIGHT='200' BORDER="+tborder+" CELLSPACING="+cspace+" CELLPADDING="+cpad+"><TR><TD><TABLE BORDER="+tborder+" CELLSPACING="+cspace+" CELLPADDING="+cpad+"><TR VALIGN='top'><TD CLASS='td1style' ALIGN='left'><B>"
if(boxtype=="Confirm")
{theString+=""+boxtype+"</B></TD></TR></TABLE></TD></TR><TR><TD ALIGN='center' CLASS='td2style'>"+msgtext+"<br><A HREF='javascript:populate(\"Yes\")'>Yes</A>&nbsp &nbsp<A HREF='javascript:populate(\"No\")'>No</A></TD></TR></TABLE>"}
if(boxtype=="Alert")
{theString+=""+boxtype+"</B></TD></TR></TABLE></TD></TR><TR><TD ALIGN='center' CLASS='td2style'>"+msgtext+"<br><A HREF='javascript:populate(\"Ok\")'>Ok</A></TD></TR></TABLE>"}
if(boxtype=="Text")
{theString+=""+msgtext+"</B></TD></TR></TABLE></TD></TR><TR><TD ALIGN='center' CLASS='td2style'><form name='myform'><input name='txta' type='text' size='30'></form><A HREF='javascript:populate(\"document.myform\")'>Ok</A></TD></TR></TABLE>"}
if (document.layers) // Netscape 4.0+
{
document.formbox.document.write(theString)
document.formbox.document.close()
document.formbox.left=msgleft
document.formbox.top=msgtop
document.formbox.visibility="show"
}
else
{
if(document.getElementById) // Internet Explorer 5.0+ and Netscape 6.0+
{
elm=document.getElementById("formbox")
elm.innerHTML=theString
elm.style.height=200
elm.style.width=400
elm.style.top=msgtop
elm.style.left=msgleft
elm.style.visibility = "visible"
}
}
}

// This function is for hiding the message box
function hidebox()
{
if (document.layers) // Netscape 4.0+
{document.formbox.visibility="hidden"}
if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
{elm.style.visibility="hidden"}
}

</SCRIPT>
</head>
<body>
<CENTER>
<div id="formbox" style="position:absolute;visibility:hidden;height:200;wid th:400"></div>
<form name="testonly">
<input type="text" name="result" size=30">
</form>
<A HREF="javascript:DoFormbox('Confirm','Are you sure?')">Click Me for a Confirm Box</A><BR>
<A HREF="javascript:DoFormbox('Alert','This is an alert!')">Click Me for an Alert Box</A><BR>
<A HREF="javascript:DoFormbox('Text','You could enter text here:')">Click Me for a Text Box</A>
</CENTER>
</body>
</html>

jbot
06-08-2004, 02:01 PM
if (document.layers) // Netscape 4.0+
{
document.formbox.document.write(theString)
document.formbox.document.close()
document.formbox.left=msgleft
document.formbox.top=msgtop
document.formbox.visibility="show"
}

should be ...


if (document.layers) // Netscape 4.0+
{
document.formbox.document.open()
document.formbox.document.write(theString)
document.formbox.document.close()
document.formbox.left=msgleft
document.formbox.top=msgtop
document.formbox.visibility="show"
}

florida
06-08-2004, 05:53 PM
Thanks, tried that and still not working in Netscape 4.77

When I click on any of the three lines it doesnt do anything and doesnt give me any Javascript errors even when I type in javascript: in the address bar. Any other advise??

glenngv
06-09-2004, 02:20 AM
The document is automatically opened and the content is discard when document.write method is executed. So it is not necessary to call document.open. The important thing is to call document.close after the write is complete.

florida, I copied your code and I ran it in NS4.78 and I found that the problem is with this line:


<div id="formbox" style="position:absolute;visibility:hidden;height:200;wid th:400"></div>

There is a gap in the width property. Did you have that in your source or you just had a typo in your post?

I removed the space and it worked for me.

florida
06-09-2004, 12:16 PM
Thanks! It works and I appreciate all your responses and time on this!!

Now I need to figure out how it works so I can learn more about JavaScript.

Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum