Link to home
Start Free TrialLog in
Avatar of p_partha
p_partha

asked on

Custom alert

I was going through an article here:
http://slayeroffice.com/code/custom_alert/

in this , window.alert = function(txt) {
            createCustomAlert(txt);


my question : Is 'txt' that's been passed to the function defined in the alert method, or is it a keyword, If yes then what are the other stuff that we can pass...any inputs ont his highly appreciated

Thanks
Partha

Avatar of Roonaan
Roonaan
Flag of Netherlands image

The method described in the article does not allow any other parameters other than text to be passed.

However, if you'd pass your requirements I think we should be able to adapt the script to them.

-r-
Avatar of p_partha
p_partha

ASKER

I think you got me wrong.

My question was , how does the function know what is the text that is in alert. He just used function(txt), so is txt a keyword which takes the message that's there in alert.,Then are there any other keywords..

Partha
Thats a real good one!
very simple and nice.

yes looking at the code there, i understand that txt is the argument of the alert method

and i do not think there are other arguments because we just have alert("the only one");
we have just passed one argument to that function.

and txt is just the argument and not a keyword

i replaced txt with just someother and it continued to work..

so thats my assumption
ASKER CERTIFIED SOLUTION
Avatar of devic
devic
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Devic
thanks a ton for the reply, but i believe i am not clear in what i am trying to explain:

in this line:

window.alert = function(txt)

alert('partha') - sends partha as value to function parameter
alert('devic') = sends devic as value to functoin parameter
alert('arch') = sends arch as value to functoin parameter

howz that possible?

Partha
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
arch
thanks, but then i tried somkethign like this:


if (confirm("Do you want to continue?"))
{
alert('confirmed')
}

window.confirm = function(txt1,txt2) {
alert(txt1)
}

that doesn't seem to be give me what i expected

Partha
This works:
<BODY>
<script>
function conf()
{
if (confirm("Do you want to continue?"))
{
alert('confirmed')
}
}
window.confirm = function(txt1,txt2) {
alert(txt1)
}
</script>
<input type = "button" onclick = "conf();">
</BODY>
It wud alert the txt1

and also, ur example will not return what u want because the confirm function is called even before u override the window.confirm method
that was just an ex: arch, i knew that i have put it on top..but can i get the yes cancel from the parameter

Partha
yes and cacel are not parameters there, the parameter for confirm is just the text which we write inside

confirm("Do u want to continue")
alert("hi")

there is only one argument there..
Partha,

I think you need add structure with if/else in your custum confirm function.

here is quick example, not perfect :), just as idea:
====================================

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>slayeroffice | code | custom alert demonstration</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">

#modalContainer {
background-color:transparent;
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:2px solid #000;
background-color:#F2F5F6;
background-image:url(alert.png);
background-repeat:no-repeat;
background-position:20px 30px;
visiblity:hidden;
}

#modalContainer > #alertBox {
position:fixed;
}

#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#78919B;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}

#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}

#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:3px;
border:2px solid #000;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#78919B;
text-decoration:none;
}

/* unrelated styles */

#mContainer {
position:relative;
width:600px;
margin:auto;
padding:5px;
border-top:2px solid #000;
border-bottom:2px solid #000;
font:0.7em verdana,arial;
}

h1,h2 {
margin:0;
padding:4px;
font:bold 1.5em verdana;
border-bottom:1px solid #000;
}

code {
font-size:1.2em;
color:#069;
}

#credits {
position:relative;
margin:25px auto 0px auto;
width:350px;
font:0.7em verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
padding-top:4px;
}

#credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
}

.important {
background-color:#F5FCC8;
padding:2px;
}

code span {
color:green;
}
</style>
<script type="text/javascript">

/************************************

Custom Alert Demonstration
version 1.0
last revision: 02.02.2005
steve@slayeroffice.com

Should you improve upon this source please
let me know so that I can update the version
hosted at slayeroffice.

Please leave this notice in tact!

************************************/

var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
var CONF_BUTTON_YES = "Yes";
var CONF_BUTTON_NO = "No";

if(document.getElementById)
{
      window.alert = function(txt)
      {
            createCustomAlert(txt);
      }
      window.confirm = function(txt)
      {
            return createCustomConfirm(txt);
      }

}

function createCustomAlert(txt)
{
      var d = document;

      if(d.getElementById("modalContainer")) return;

      var mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
      mObj.id = "modalContainer";
      mObj.style.height = d.documentElement.scrollHeight + "px";

      var alertObj = mObj.appendChild(d.createElement("div"));
      alertObj.id = "alertBox";
      if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
      alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
      alertObj.style.visiblity="visible";

      var h1 = alertObj.appendChild(d.createElement("h1"));
      h1.appendChild(d.createTextNode(ALERT_TITLE));

      var msg = alertObj.appendChild(d.createElement("p"));
      msg.innerHTML=txt;

      var btn = alertObj.appendChild(d.createElement("a"));
      btn.id = "closeBtn";
      btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
      btn.href = "#";
      btn.onclick = function() { removeCustomAlert("modalContainer");return false; }
}
function createCustomConfirm(txt)
{
      var d = document;

      if(d.getElementById("modalContainer2")) return;

      var mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
      mObj.id = "modalContainer2";
      mObj.style.height = d.documentElement.scrollHeight + "px";

      var alertObj = mObj.appendChild(d.createElement("div"));
      alertObj.id = "alertBox";
      if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
      alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
      alertObj.style.visiblity="visible";

      var h1 = alertObj.appendChild(d.createElement("h1"));
      h1.appendChild(d.createTextNode(ALERT_TITLE));

      var msg = alertObj.appendChild(d.createElement("p"));
      msg.innerHTML=txt;

      var btn = alertObj.appendChild(d.createElement("a"));
      btn.id = "closeBtn";
      btn.appendChild(d.createTextNode(CONF_BUTTON_YES));
      btn.href = "#";
      btn.onclick = function()
      {
            //doSomething()
            alert('deleted')
            removeCustomAlert("modalContainer2");
            return false;
      }
      
      var btn2 = alertObj.appendChild(d.createElement("a"));
      btn2.id = "closeBtn";
      btn2.appendChild(d.createTextNode(CONF_BUTTON_NO));
      btn2.href = "#";
      btn2.onclick = function()
      {
            //doSomethingELSE();
            alert('aborted')
            removeCustomAlert("modalContainer2");
            return false;
      }

}

function removeCustomAlert(mId) {
document.getElementsByTagName("body")[0].removeChild(document.getElementById(mId));
}


</script>
<body>


<button onclick="confirm('Do you want to continue?')">delete</button>

</body>
</html>
wow... tats cool devic

But ok and cancel are not arguments of the confrm method right??
yes archrajan, is not anymore confirm :)


as second parameter can be name of function, that will be executed with eval(), if user choise "Yes"

long way for simple confirm :)

================================================================
<script type="text/javascript">

/************************************

Custom Alert Demonstration
version 1.0
last revision: 02.02.2005
steve@slayeroffice.com

Should you improve upon this source please
let me know so that I can update the version
hosted at slayeroffice.

Please leave this notice in tact!

************************************/

var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
var CONF_BUTTON_YES = "Yes";
var CONF_BUTTON_NO = "No";

if(document.getElementById)
{
      window.alert = function(txt)
      {
            createCustomAlert(txt);
      }
      window.confirm = function(txt,func)
      {
            createCustomConfirm(txt, func);
      }

}

function createCustomAlert(txt)
{
      var d = document;

      if(d.getElementById("modalContainer")) return;

      var mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
      mObj.id = "modalContainer";
      mObj.style.height = d.documentElement.scrollHeight + "px";

      var alertObj = mObj.appendChild(d.createElement("div"));
      alertObj.id = "alertBox";
      if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
      alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
      alertObj.style.visiblity="visible";

      var h1 = alertObj.appendChild(d.createElement("h1"));
      h1.appendChild(d.createTextNode(ALERT_TITLE));

      var msg = alertObj.appendChild(d.createElement("p"));
      msg.innerHTML=txt;

      var btn = alertObj.appendChild(d.createElement("a"));
      btn.id = "closeBtn";
      btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
      btn.href = "#";
      btn.onclick = function() { removeCustomAlert("modalContainer");return false; }
}
function createCustomConfirm(txt,func)
{
      var d = document;

      if(d.getElementById("modalContainer2")) return;

      var mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
      mObj.id = "modalContainer2";
      mObj.style.height = d.documentElement.scrollHeight + "px";

      var alertObj = mObj.appendChild(d.createElement("div"));
      alertObj.id = "alertBox";
      if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
      alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
      alertObj.style.visiblity="visible";

      var h1 = alertObj.appendChild(d.createElement("h1"));
      h1.appendChild(d.createTextNode(ALERT_TITLE));

      var msg = alertObj.appendChild(d.createElement("p"));
      msg.innerHTML=txt;

      var btn = alertObj.appendChild(d.createElement("a"));
      btn.id = "closeBtn";
      btn.appendChild(d.createTextNode(CONF_BUTTON_YES));
      btn.href = "#";
      btn.onclick = function()
      {
            eval(func);
            alert('deleted')
            removeCustomAlert("modalContainer2");
            return false;
      }
      
      var btn2 = alertObj.appendChild(d.createElement("a"));
      btn2.id = "closeBtn";
      btn2.appendChild(d.createTextNode(CONF_BUTTON_NO));
      btn2.href = "#";
      btn2.onclick = function()
      {
            alert('aborted')
            removeCustomAlert("modalContainer2");
            return false;
      }

}

function removeCustomAlert(mId) {
document.getElementsByTagName("body")[0].removeChild(document.getElementById(mId));
}
</script>

<script language="VBScript">
      Sub doSomething1
            MsgBox "doSomething1"
      End Sub
      
      Sub doSomething2
            MsgBox "juhu"
      End Sub

</script>
<body>


<button onclick="confirm('Do you want to continue?','doSomething1()')">delete</button>
<br>
<button onclick="confirm('Do you want to continue?','doSomething2()')">delete2</button>
amazing!

Raised new doubts for me though, will post a separate question!
Devic
How did you know that the second parameter was a function call , sorry if i am sound too dumb

Partha
because I changed the function createCustomConfirm(txt,func)  and as second parameter I send another string "doSomething1()".

now "confirm()" is our function, not standart "confirm" anymore and we can self decide how many and what arguments will be sent.

you can alway look so the function alert(functioname)

e.g. :
<button onclick="alert(confirm)">alert(confirm)</button>