Solved

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

Posted on 2007-03-25
4
2,268 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to download your full Prezi presentation for offline presenting. Prezi doesn’t have to be viewed and shared in a web browser, even with a free account you can download your full presentation to share with others. Be sure to download any vi…

762 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now