[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2238
  • Last Modified:

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

0
p_partha
Asked:
p_partha
  • 7
  • 5
  • 4
  • +1
2 Solutions
 
RoonaanCommented:
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-
0
 
p_parthaAuthor Commented:
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
0
 
archrajanCommented:
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
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
devicCommented:
change line below:
=================
msg.appendChild(d.createTextNode(txt));

to:
=================
msg.innerHTML=txt;

and then txt can be html what you want;


example:
====================
<INPUT onclick="alert('<b>hello world</b> <img src=http://oldlook.experts-exchange.com:8080/images/logoWhiteSmall.gif>');" type=button value="Test the alert">
0
 
p_parthaAuthor Commented:
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
0
 
archrajanCommented:
because it is the argument, the only one argument of the native alert method
0
 
p_parthaAuthor Commented:
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
0
 
archrajanCommented:
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>
0
 
archrajanCommented:
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
0
 
p_parthaAuthor Commented:
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
0
 
archrajanCommented:
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..
0
 
devicCommented:
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>
0
 
archrajanCommented:
wow... tats cool devic

But ok and cancel are not arguments of the confrm method right??
0
 
devicCommented:
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>
0
 
archrajanCommented:
amazing!

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

Partha
0
 
devicCommented:
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>


0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 7
  • 5
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now