SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Colored text in alert box

    how do I get the text in an alert box to be red?

  2. #2
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    impossible with standard alert boxes ..
    make your own box ...
    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nouvelle page 1</title>
    <style type="text/css">
    .titlebar{font-size:11px;
    		  font-family:verdana;
    		  color:white;
    		  font-weight:bold;
    		  width:100%;
    		  background-color:Darkslateblue;
    		  padding:2px;
    		  text-align:left;
    		  }
    		  
    .msgbox{border:outset 2px white;
    		 background-color:gainsboro;
    		 width:300px;
    		 height:180px;
    		 color:black;
    		 padding-left:1px;
    		 padding-right:2px;
    		 padding-top:1px;
    		 font-family: verdana;
    		 font-size:11px;
    		 text-align:center
    			 }
    .cross{border:outset 2px white;
    		 background-color:gainsboro;
    		 left:2px;
    		 width:18px;
    		 color:black;
     	     font-family:tahoma;
     	     float:right;
     	     margin-top:0px;
     	     padding-left:4px;
     	     padding-bottom:2px;
     	     padding-top:1px;
     	     top:0px;
     	     line-height:10px;
     	     cursor:pointer;
     	     }
    .bouton{width:80px;
    		 height:25px;
    		 border:oustet 2px silver;
    		 position:relative;
    		 font-size:11px;
    		 font-family: tahoma;
    		 }
    
    .innerText{width:100%;
    			padding-left:30px;
    			text-align:left;
    			color:red;
    			}		 
    
    #testzone {position:absolute;
               top:100px;
               left:200px;
               }
    </style>
    
    
    </head>
    
    <body>
    <input type="button" onclick="document.getElementById('testzone').style.display='block';" value="alert"/>
    <div id='testzone' class="msgbox" style="display:none;" > 
     <div class="titlebar">
      <div class="cross" onclick="document.getElementById('testzone').style.display='none';">X</div> Title
     </div>
    
    <br/>
    <br/>
    <br/>
    <div class='innerText'>
    Pour poursuivre veuillez répondre à cette question: 
    Avez vous une toute petite boite ?
    </div>
    <br/>
    <br/>
    <br/>
    <div>
    <input type="button" id="trap" value="OUI" class="bouton" onclick="document.getElementById('testzone').style.display='none';" style="left:0px;"/>
    
    <input type="button" id="trap" value="NON" class="bouton" style="left:5px;"/>
    </div>
    
    </div>
    
    </body>
    
    </html>

  3. #3
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for the helpful script advice. Is this cross browser compatible? And will it work if called as an alert to multiple fields for form validation?

  4. #4
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tested with IE and firefox...
    in fact it is just a div that you toggle from visible to invisible...
    It can work if called from anywhere, you would only have to change message in alertbox
    you could actually make a function passing the alert message as a parameter ...

  5. #5
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much I will give it a go over the weekend and let you know how it worked.

  6. #6
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the script and it works very well. However when I tried to get the message to change according to each form field's validation message, I am getting the error that 'msg' is undefined in the body of the page. Here is the script for the test page, with only 2 form fields for brevity. Unfortunately I don't know how to link the msg in the body to the definitions in the head. ( I also don't know how to put a code box into this message like you did, sorry)
    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" language="javascript">
    function validate()
    {
    //Check name field is not empty
    var oNv=document.orderform.Name.value;
    var msg="Please enter your name";
    if (oNv=='') {
    document.getElementById('testzone').style.display='block';
    event.returnValue=false;
    }

    //Check address field is not empty
    var oAv=document.orderform.Address.value;
    var msg="Please enter your address";
    if (oAv=='') {
    document.getElementById('testzone').style.display='block';
    event.returnValue=false;
    }
    }
    </script>
    <style type="text/css">
    .titlebar{font-size:10pt;
    font-family:verdana;
    color:white;
    font-weight:bold;
    width:100%;
    background-color:Red;
    padding:2px;
    text-align:left;
    }

    .msgbox{borderutset 2px white;
    background-color:#ffffff;
    width:250px;
    color:black;
    padding-left:1px;
    padding-right:2px;
    padding-top:1px;
    font-family: verdana;
    font-size:10pt;
    text-align:center
    }
    .cross{borderutset 2px white;
    background-color:#ECE9D8;
    left:2px;
    width:18px;
    color:black;
    font-family:tahoma;
    float:right;
    margin-top:0px;
    padding-left:4px;
    padding-bottom:2px;
    padding-top:1px;
    top:0px;
    line-height:10px;
    cursorointer;
    }
    .innerText{width:100%;
    padding-left:30px;
    text-align:left;
    color:red;
    }
    #testzone {position:absolute;
    top:100px;
    left:200px;
    }
    </style>
    </head>
    <body>
    <div id='testzone' class="msgbox" style="display:none;" >
    <div class="titlebar">
    <div class="cross" onclick="document.getElementById('testzone').style.display='none';">X</div> Warning !
    </div>
    <br/>
    <div class='innerText'>
    <script language="javascript" type="text/javascript">
    document.write(msg);
    </script>
    <br>
    </div>
    <div>
    <input type="button" id="trap" value="ok" class="bouton" onclick="document.getElementById('testzone').style.display='none';" style="left:0px; padding:0px 1px; margin: 5px 0px;"/>
    </div>
    </div>
    <br>
    <br><form name="orderform" onSubmit="return validate();">
    <input type="text" size="40" name="Name" value="">
    <br>
    <br><input type="text" size="40" name="Address" value="">
    <br>
    <br><input type="submit" name="Submit" value="Submit" >
    </form>
    </body></html>

  7. #7
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know how those little faces got into my code, I didn't put them there on purpose.

  8. #8
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The forum software picked up some if the code that looked like the smilies code... if you use the code button (#) above the text box you type your message into you wont have that problem... highlight the script then click the code button it will appear in the post like this:

    Code:
    fpo hj  
    g sg d
     gd
    g dg
     dg fdg
    and you dont have to worry about a smily attack!

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can only use document.write() when the page is loading.

    You can use document.getElementById('testzone').innerHTML, which is not part of the W3C DOM but is supported by several browsers for cross-browser compatibility.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that advice, where do I put this line, in the head or in the body, and how do I connect it to the message that I want to display?

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    event.returnValue is IE only. There is no reason to use it here anyway.

    Try this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled</title>
    <style type="text/css">
    .titlebar {
          color: #fff;
          font-weight:bold;
          background-color: #ff0000;
          padding:2px;
          text-align:left;
    }			 
    .msgbox {
          border:outset 2px #fff;
    			background-color: #fff;
    			width:250px;
    			color: #000;
    			font-family: verdana,tahoma,arial,helvetica,sans-serif;
    			font-size:10pt;
    			text-align:center;
    }
    .cross {
    			color: #000;
          border:outset 2px #fff;
          background-color:#ccc;
          float:right;
          margin:0;
          width: 1.2em;
          line-height: .8em;
          padding-bottom: .2em;
          cursor:pointer;
          text-align:center;
    }
    .innerText{
    			padding-left:30px;
    			text-align:left;
    			color: #ff0000;
    }			
    #testzone {
          position:absolute;
          top:100px;
          left:200px;
    }
    #trap {
          padding:0px 1px;
          margin: 5px 0px;
    }
    </style>
    <script type="text/javascript"><!--
     function validate()
    {
    var msg = '';
    //Check name field is not empty
    var oNv=document.orderform.Name.value;
    msg +="Please enter your name<br />";
    if (oNv=='') {
    document.getElementById('testzone').style.display='block';
    }
    
    //Check address field is not empty
    var oAv=document.orderform.Address.value;
    msg +="Please enter your address<br />";
    if (oAv=='') {
    document.getElementById('testzone').style.display='block';
    }
    document.getElementById('testzoneMsg').innerHTML=msg;
    if(msg == '') return true;
    else return false;
    }
    // -->
    </script>
    </head>
    <body>
    <div id='testzone' class="msgbox" style="display:none;" >
     <div class="titlebar">
      <div class="cross" onclick="document.getElementById('testzone').style.display='none';">x</div> Warning !
     </div>
    <div class='innerText' id="testzoneMsg">
    </div>
    <div>
    <input type="button" id="trap" value="ok" class="button" onclick="document.getElementById('testzone').style.display='none';" />
    </div>
    </div>
    <br>
    <br><form name="orderform" method="post" onSubmit="return validate();">
    <input type="text" size="40" name="Name" value="">
    <br>
    <br><input type="text" size="40" name="Address" value="">
    <br>
    <br><input type="submit" name="Submit" value="Submit" >
    </form>
    </body>
    </html>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your help. Unfortunately, when I tried your code, it brought all the messages up in the alert box at the same time. I tried giving the messages numbers, but that created a whole heap of other errors. I don't know enough about javascript to see what I am doing wrong.

  13. #13
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing surprising there as you are assigning msg before testing fields ...
    message should be assigned in the if !!!
    Code:
     <script type="text/javascript">
     function validate() {
      var msg = ''; 
      //Check name field is not empty
      var oNv=document.orderform.Name.value;
      
      if (oNv=='') { msg +="Please enter your name<br />"
      				  } 
         
      //Check address field is not empty
       var oAv=document.orderform.Address.value; 
    
       if (oAv=='') {   msg +="Please enter your address<br />"; 
       					} 
    
       document.getElementById('testzoneMsg').innerHTML=msg;
       if(msg == '') {return true};
       else { document.getElementById('testzone').style.display='block';
              return false; }
      } 
      </script>

  14. #14
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yay! That works. Thank you so much. Now to add 25 other validation type of messages without messing it up again.

    Cheers Cheryl

  15. #15
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, I guess I should have tested it by actually putting text in the fields.

    Yet more proof that I'm great at making silly mistakes.

    Anyway, you're welcome, I'm glad I could help.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  16. #16
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoops I spoke too soon. It doesn't work in firefox for me on XP, only in IE. Is the innerHTML tag just a proprietary one? If so, I don't think I will be allowed to use it.

    Here's my brief. I have to have all these form field validations and the warning message must be written in red text. It has to be crossbrowser compliant in later browsers and the code must validate according to standards. I have the form validation working perfectly in IE 6, firefox and netscape but I have used alert box messages and after all my effort, I then found I couldn't make the text red. That is where I came in here. Does anyone have any idea on a solution?

  17. #17
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would us a switch that would make your code more leagible...
    hold on a sec I'll be right back with an example ...

    hul well the switch would only allow you to make one correction at a time this means if there are three empty fields it would show one alert box at each validation...

    here is the simplest I hav found:
    Code:
     <script type="text/javascript">
     function validate() {
      var msg = ''; 
      
      var oNv=document.orderform.Name.value;
      var oAv=document.orderform.Address.value; 
      
      
    	if(oNv==''){ msg +="Please enter your name<br />";}
    	if(oAv==''){ msg +="Please enter your address<br />";} 
    				                
    
       
       if(msg == '') {return true};
       else { document.getElementById('testzoneMsg').innerHTML=msg;
              document.getElementById('testzone').style.display='block';
              return false; }
      } 
      </script>

  18. #18
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code works fine for me in Firefox 1.0.1.

    In a sense, innerHTML is IE propritary, however, even though it is not part of any W3C standard Opera 7+, Netscape 6+, and Mozilla/Firefox support it.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  19. #19
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Colored text in alert box

    I am still not getting this to work in firefox. I would like to show all the code I am using, but the smilies get in the way and I cannot find the place where it says to 'add code'. I have tried the quick reply and the advanced reply and neither give me the option to 'add code'. What am I doing wrong?

  20. #20
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You see the "#" image in advanced reply?

    Copy and paste your text into the textarea select it and then click that image.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  21. #21
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or put code tags around your code:
    [ code ] here your code [ /code ]
    (without the spaces)

  22. #22
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Colored text in alert box

    Sorry couldn't respond yesterday.

    Here is my code which is not working in Firefox or netscape, but working fine in IE


    [code]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled</title>
    <style type="text/css">
    .titlebar {
    color: #fff;
    font-weight:bold;
    background-color: #ff0000;
    padding:2px;
    text-align:left;
    }
    .msgbox {
    borderutset 2px #fff;
    background-color: #fff;
    width:250px;
    color: #000;
    font-family: verdana,tahoma,arial,helvetica,sans-serif;
    font-size:10pt;
    text-align:center;
    }
    .cross {
    color: #000;
    borderutset 2px #fff;
    background-color:#ccc;
    float:right;
    margin:0;
    width: 1.2em;
    line-height: .8em;
    padding-bottom: .2em;
    cursorointer;
    text-align:center;
    }
    .innerText{
    padding-left:30px;
    text-align:left;
    color: #ff0000;
    }
    #testzone {
    position:absolute;
    top:100px;
    left:200px;
    }
    #trap {
    padding:0px 1px;
    margin: 5px 0px;
    }
    </style>
    <script type="text/javascript">
    function validate() {
    var msg = '';

    var oNv=document.orderform.Name.value;
    var oAv=document.orderform.Address.value;


    if(oNv==''){ msg +="Please enter your name<br />";}
    if(oAv==''){ msg +="Please enter your address<br />";}



    if(msg == '') {return true};
    else { document.getElementById('testzoneMsg').innerHTML=msg;
    document.getElementById('testzone').style.display='block';
    return false; }
    }
    </script>
    </head>
    <body>
    <div id='testzone' class="msgbox" style="display:none;" >
    <div class="titlebar">
    <div class="cross" onclick="document.getElementById('testzone').style.display='none';">x</div> Warning !
    </div>
    <div class='innerText' id="testzoneMsg">
    </div>
    <div>
    <input type="button" id="trap" value="ok" class="button" onclick="document.getElementById('testzone').style.display='none';" />
    </div>
    </div>
    <br>
    <br><form name="orderform" method="post" onSubmit="return validate();">
    <input type="text" size="40" name="Name" value="">
    <br>
    <br><input type="text" size="40" name="Address" value="">
    <br>
    <br><input type="submit" name="Submit" value="Submit" >
    </form>
    </body>
    </html>
    [code]

    By the way, I cannot find a # anywhere on this page at this moment and I am in advanced reply. Is it a setting that I have to select somewhere?

    Cheryl

  23. #23
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're probably using the Basic Editor (as I am). Just wrap with the BBcode and you'll be all good.

    BTW, you need a slash in your BBtag up there. The last one should be [/code].

  24. #24
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I forgot you could turn that off. Mine's set to standard which is the default.

    It's working in IE but not Firefox or Netscape because you have an error that IE just ignores.

    Code:
     if(msg == '') {return true};
    should be
    Code:
     if(msg == '') {return true;}
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  25. #25
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Esperance Western Australia
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much kravvitz, now it does work. I am so naive I thought that the semicolon had to go after everything in javascript. I guess I will never get a proper handle on it.

    Cheers Cheryl


Bookmarks

Posting Permissions

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