?
Solved

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

Posted on 2007-03-25
4
Medium Priority
?
2,276 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
[X]
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
4 Comments
 
LVL 9

Accepted Solution

by:
under_dog earned 672 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 664 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 664 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

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the fileā€¦
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

770 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