Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

JavaScript Alerts: color control: text color & background color control

Posted on 2007-03-25
4
2,271 Views
Last Modified: 2009-08-29
I am working with JavaScript programming... (as opposed to "Java", a Sun Microsystems product).
I've found that JavaScript ALERTS, are possibly the only means for doing what I want to do.
I want to create an ALERT with white color text that will be unviewable against a white background.
I've already tried "#0XFFFFFF" (in HTML) and Font Color="WHITE"--but neither works!  It appears un-doable.

Obviously, I'm not a JavaScript expert. Perhaps I'm trying to do something that's axiomatically impossible to do? I'm using AutoIT v.3 to see HTML behind web pages I'm working on, but it's not helping me find the solution.  When I use plainvanilla JavaScript messages, vs, plainvanilla JavaScript Alerts, I can totally control and see what's happening in HTML-- or not-- depending which I'm working on.  But I am trying to build a smooth transition where an alert is invisibly colored.

Or Plan B...Perhaps maybe there is a form of JavaScript Alert (or other) Message Type-- that's "Alert like", in its features & functions? If so, is it usable/configurable to do what I want--obtain the interactive immediacy characteristic to a standard "plainvanilla" JavaScript ALERT?
I can go into further detail if it is needed for fully understanding what I am trying to do.
0
Comment
Question by:mauimaumau
4 Comments
 
LVL 9

Accepted Solution

by:
under_dog earned 168 total points
ID: 18788725
There is no way to change the appearance of the javascript alert() popup since this is controlled by the user's browser and not by the html code itself.

You could use a popup DIV for instance ... which would be customisable, but I'm not sure if it would meet your requirements since it's not really "alert like". What "alert like" behaviour are you looking for?
0
 
LVL 5

Assisted Solution

by:Devario Johnson
Devario Johnson earned 166 total points
ID: 18791214
If you want to do an actual JavaScript Alert, this, to my knowlege, is not possible.

But if you want to utilize JavaScript to make that kind of effect, similar to what under_dog said.

u can use a <Div> and then set it to a Z-index higher than that of your page.  Then make it look like an alert would...basically, utilizing any photoshop skill you may have.  you can then after a onmouseclick event, set the div's visibility to none.

That would make it look how you want and acheive the desired effect.
0
 
LVL 2

Assisted Solution

by:jhshen
jhshen earned 166 total points
ID: 18793951
you may try the code below:
It works for both IE 7 and Firefox, but behavior is different from default Alert function.

<html>
      <head>
      </head>
      <body>
                  <input type="button" value="Click Me" onclick="sAlert('This is the alert');" />
            
             <script type="text/javascript" language="javascript">

                  function sAlert(str){
                  var msgw,msgh,bordercolor;
                  msgw=400;
                  msgh=100;
                  titleheight=25 //
                  bordercolor="#336699";
                  titlecolor="#99CCFF";
                  
                  var sWidth,sHeight;
                  sWidth=document.body.offsetWidth;
                  sHeight=screen.height;

                  var bgObj=document.createElement("div");
                  bgObj.setAttribute('id','bgDiv');
                  bgObj.style.position="absolute";
                  bgObj.style.top="0";
                  bgObj.style.background="#777";
                  bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
                  bgObj.style.opacity="0.6";
                  bgObj.style.left="0";
                  bgObj.style.width=sWidth + "px";
                  bgObj.style.height=sHeight + "px";
                  bgObj.style.zIndex = "10000";
                  document.body.appendChild(bgObj);
                  
                  var msgObj=document.createElement("div")
                  msgObj.setAttribute("id","msgDiv");
                  msgObj.setAttribute("align","center");
                  msgObj.style.background="white";
                  msgObj.style.border="1px solid " + bordercolor;
                msgObj.style.position = "absolute";
            msgObj.style.left = "50%";
            msgObj.style.top = "50%";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.marginLeft = "-225px" ;
            msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
            msgObj.style.width = msgw + "px";
            msgObj.style.height =msgh + "px";
            msgObj.style.textAlign = "center";
            msgObj.style.lineHeight ="25px";
            msgObj.style.zIndex = "10001";
   
               var title=document.createElement("h4");
               title.setAttribute("id","msgTitle");
               title.setAttribute("align","right");
               title.style.margin="0";
               title.style.padding="3px";
               title.style.background=bordercolor;
               title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
               title.style.opacity="0.75";
               title.style.border="1px solid " + bordercolor;
               title.style.height="18px";
               title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
               title.style.color="white";
               title.style.cursor="pointer";
               title.innerHTML="Close";
               title.onclick=function(){
                    document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
               document.body.appendChild(msgObj);
               document.getElementById("msgDiv").appendChild(title);
               var txt=document.createElement("p");
               txt.style.margin="1em 0"
               txt.setAttribute("id","msgTxt");
               txt.innerHTML=str;
           document.getElementById("msgDiv").appendChild(txt);
            }
            </script>
      </body>
</html>
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question