Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    362
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Printing out bold font in alert

    Can you put a strong bold in alert messages?

    Code:
    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?

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by florida
    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?

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    362
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No I have not thought of that. Please advise how I can do that?

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by florida
    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.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is some sample code that you could modify for your needs:
    Code:
    <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>

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Posts
    362
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, for some reason it doesnt work in my Netscape 4.77 Browser.

    Anything I can add or check tomake it work?

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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.

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Posts
    362
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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??

    Code:
    <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>

  • #12
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow you need to open the layer for N4.x

    PHP Code:
    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 ...

    Code:
    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"
    }

  • #13
    Regular Coder
    Join Date
    Jul 2002
    Posts
    362
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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??

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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:
    Code:
    <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.

  • #15
    Regular Coder
    Join Date
    Jul 2002
    Posts
    362
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •