Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating a Popup Generator in a Web Application.

Author: DevASP
Download Source Code : 606_PopupCreater.zip

This article is about how you can create an application that will generate the code for a popup window for you. You can use that code in any of your web application.

Steps you will do.

 

Start visual studio and create a new web application. Open the HTML design of your web page and add the following JavaScript code before closing the head tag.

 

 

 

<script language="JavaScript">

 

function generate(form){

page = document.inputForm.page.value;

toolbars = document.inputForm.toolbars.checked;

scrollprops = document.inputForm.scrollit.checked;

locations = document.inputForm.locations.checked;

statusbars = document.inputForm.statusbars.checked;

menubars = document.inputForm.menubars.checked;

resizeable = document.inputForm.resizeable.checked;

width = document.inputForm.width.value;

if (!width) width = screen.width;

height = document.inputForm.height.value;

if (!height) height = screen.height;

howto = document.inputForm.howtoopen.options[document.inputForm.howtoopen.selectedIndex].value;

center = document.inputForm.center.checked;

 

start = "<";

 

if(howto == 'body') {

otherOutput = start + "!-- Paste this onLoad event handler into the BODY tag -->\n\n" + start + "BODY onLoad=\"javascript:popUp('" + page + "')\">";

}

if(howto == 'link') {

otherOutput = start + "!-- Use the following link to open the new window -->\n\n" + start + "A HREF=\"javascript:popUp('" + page + "')\">Open the Popup Window" + start + "/A>";

}

if(howto == 'button') {

otherOutput = start + "!-- Use the following button code for the new window -->\n\n" + start + "form>\n" + start + "input type=button value=\"Open the Popup Window\" onClick=\"javascript:popUp('" + page + "')\">\n" + start + "/form>";

}

 

scriptOutput = '<!-- Copy this code into the HEAD of your HTML document  -->\r\n\r\n'

+ start + 'SCRIPT LANGUAGE="JavaScript">\r\n'

+ 'function pop' + 'Up(URL) {\nday = new Date();\nid = day.getTime();\n';

 

scriptOutput += "eval(\"page\" + id + \" = window.open(URL, '\" + id + \"', '" +

 

((toolbars) ? "toolbar=1," : "toolbar=0,") +

((scrollprops) ? "scrollbars=1," : "scrollbars=0,") +

((locations) ? "location=1," : "location=0,") +

((statusbars) ? "statusbar=1," : "statusbar=0,") +

((menubars) ? "menubar=1," : "menubar=0,") +

((resizeable) ? "resizable=1" : "resizable=0") +

((width) ? ",width=" + width : "") +

((height) ? ",height=" + height : "") +

((center) ? ",left = " + ((screen.width - width) / 2) : "") +

((center) ? ",top = " + ((screen.height - height) / 2) : "") +

"');\");}\n" + start + "/sc" + "ript>\n";

 

output = scriptOutput + "\n\n" + otherOutput;

 

document.mail.source.value = output;

document.mail.source2.value = output;

 

uncode();

}

 

</script> 

 

 

 Now add the following HTML code which has JavaScript functions and HTML to design the layout of your web page.

 

<BODY vLink="#0000ff" bgColor="#ffffff">

<P>

<CENTER>                     

                        <BR>

<BR>

<TABLE cellSpacing="0" cellPadding="0" width="100%" border="0">

<TBODY>

<TR>

<TD align="center" width="99%"><BASEFONT>

<CENTER>

<FORM name="inputForm">

     <P> </P>

      <P>

      <TABLE id=Table1 cellSpacing=2 cellPadding=8 width="50%" border=1>

        <TR>

          <TD colSpan=2>This machine will make a script that will pop up and

            optionally center the popup window for you. Fill in the values below

            and click Make Code.</TD></TR>

        <TR>

          <TD width=400>What filename should be opened?</TD>

          <TD><INPUT size=10 name=page><BR>(filename or http://....)</TD></TR>

        <TR>

          <TD>Would you like it to have toolbars?</TD>

          <TD><INPUT type=checkbox name=toolbars></TD></TR>

        <TR>

          <TD>Would you like the window to have scrollbars?</TD>

          <TD><INPUT type=checkbox name=scrollit></TD></TR>

        <TR>

          <TD>Would you like it to have the location bar?</TD>

          <TD><INPUT type=checkbox name=locations></TD></TR>

        <TR>

          <TD>Would you like it to have a status bar?</TD>

          <TD><INPUT type=checkbox name=statusbars></TD></TR>

        <TR>

          <TD>Would you like it to have a menu bar?</TD>

          <TD><INPUT type=checkbox name=menubars></TD></TR>

        <TR>

          <TD>Would you like it to be resizeable?</TD>

          <TD><INPUT type=checkbox name=resizeable></TD></TR>

        <TR>

          <TD>How wide would you like it to be?</TD>

          <TD><INPUT size=4 name=width> (in pixels)</TD></TR>

        <TR>

          <TD>How high would you like it to be?</TD>

          <TD><INPUT size=4 name=height> (in pixels)</TD></TR>

        <TR>

          <TD>How should the window be opened?</TD>

          <TD><SELECT name=howtoopen> <OPTION value=button selected>by a

              button<OPTION value=link>by a link<OPTION

              value=body>automatically</OPTION></SELECT> </TD></TR>

        <TR>

          <TD>Should we center the window on screen?</TD>

          <TD><INPUT type=checkbox name=center></TD></TR>

        <TR>

          <TD colSpan=2>

<CENTER><INPUT id=Button1 onclick=javascript:generate(); type=button value="Make Code!" name=Button1></CENTER></TD></TR></TABLE></P>

</FORM>

<P>

<CENTER>

 

<FORM name="mail" onSubmit="return checkCodeMail()" action="/cgi-bin/code-mail.cgi" method="post">

 

<TABLE cellPadding="4" width="400" bgColor="#dedfdf" border="2">

<TBODY>

<TR>

<TD align="center"><TEXTAREA name="source" rows="12" cols="80"></TEXTAREA><BR>                                     

<BR>

<BR>

<BR>

</TD>

<P></P>

</TR>

</TBODY></TABLE>

</FORM>

</CENTER>

<P></P>

</CENTER>

</BASEFONT></TD>                                     

</TR>

</TBODY></TABLE>

 

<SCRIPT language="JavaScript">

function getCookieVal (offset) {

var endstr = document.cookie.indexOf(";", offset);

if (endstr == -1)

endstr = document.cookie.length;

return unescape(document.cookie.substring(offset, endstr));

}

function GetCookie (name) {

var arg = name + "=";

var alen = arg.length;

var clen = document.cookie.length;

var i = 0;

while (i < clen) {

var j = i + alen;

if (document.cookie.substring(i, j) == arg)

return getCookieVal (j);

i = document.cookie.indexOf(" ", i) + 1;

if (i == 0)

break;

}

return null;

}

function SetCookie (name, value) {

var argv = SetCookie.arguments;

var argc = SetCookie.arguments.length;

var expires = (argc > 2) ? argv[2] : null;

var path = "/";

var domain = (argc > 4) ? argv[4] : null;

var secure = (argc > 5) ? argv[5] : false;

document.cookie = name + "=" + escape (value) +

((expires == null) ? "" : ("; expires=" +

expires.toGMTString())) +

((path == null) ? "" : ("; path=" + path)) +

((domain == null) ? "" : ("; domain=" + domain)) +

((secure == true) ? "; secure" : "");

}

 

var emailcookie = GetCookie('email_address');

if (emailcookie == null) {

emailcookie = 'your email here';

}

 

function chk(email, formname)

{

invalid = "";

 

if (!email)

invalid = "No email address found!  Try reloading the page then use the 'email a script' feature again.";

 

else {

 

if ( (email.indexOf("@") == -1) || (email.indexOf(".") == -1) )

invalid += "\n\nInvalid email address.  Your email address is missing an '@' sign and a '.' in the domain name (like '.com').  Please check your address then submit again.";

 

if (email.indexOf("youremailhere") > -1)

invalid += "\n\nInvalid email address.  Make sure your email address included your username, the '@' sign, and the domain name (like '.com').";

 

if (email.indexOf("\\") > -1)

invalid += "\n\nEmail address contains an invalid back-slash (\\) character.  Remove the character and submit again.";

 

if (email.indexOf("/") > -1)

invalid += "\n\nEmail address contains an invalid forward-slash (/) character.  Remove the character and submit again.";

 

if (email.indexOf("'") > -1)

invalid += "\n\nEmail address contains an invalid apostrophe (') character.  Remove the character and submit again.";

 

if (email.indexOf("zaz.com.br") > -1)

invalid += "\n\nPlease do not use an email address that has an autoresponder set up for it.  Thanks.";

 

if (email.indexOf("!") > -1)

invalid += "\n\nEmail address contains an invalid exclamation point (!) character.  Remove the character or correct the email address then submit again.";

 

if ( (email.indexOf(",") > -1) || (email.indexOf(";") > -1) )

invalid += "\n\nPlease only enter one email address in the box at a time.  Remove the extra addresses and submit again.";

 

if (email.indexOf("?subject") > -1)

invalid += "\n\nPlease do not add '?subject=...' to your email address.  Scriptbot will send you the script with a pre-defined subject already.  Please remove the '?subject=...' from your email address and submit again.";

}

 

if (invalid == "")

   {

   var largeExpDate = new Date();

   largeExpDate.setTime(largeExpDate.getTime() + (31 * 24 * 3600 * 1000));

   SetCookie('email_address', email, largeExpDate);

   if (formname == "scriptbot")

      {

      page = "http://javascript.internet.com/sent.html?" + email;

      window.open(page, "AdWindow", "width=650,height=200");

      }

   return true;

}

else

   {

   alert("Oops, something is wrong...." + invalid);

   return false;

   }

}

 

function updateNewsletters() {

with (document.forms["newslettersignup"]) {

emailStr = email.value;

var emailPat=/^(.+)@(.+)$/;

var specialChars="\\(\\)<>@,;:\\\\\\\"\\.\\[\\]";

var validChars="\[^\\s" + specialChars + "\]";

var quotedUser="(\"[^\"]*\")";

var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;

var atom=validChars + '+';

var word="(" + atom + "|" + quotedUser + ")";

var userPat=new RegExp("^" + word + "(\\." + word + ")*$");

var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");

var matchArray=emailStr.match(emailPat);

if (matchArray==null) {

alert("Email address seems incorrect (check @ and .'s)");

return false;;

}

var user=matchArray[1];

var domain=matchArray[2];

if (user.match(userPat)==null) {

alert("The username doesn't seem to be valid.");

return false;

}

var IPArray=domain.match(ipDomainPat);

if (IPArray!=null) {

for (var i=1;i<=4;i++) {

if (IPArray[i]>255) {

alert("Destination IP address is invalid!");

return false;

      }

   }

}

var domainArray=domain.match(domainPat);

if (domainArray==null) {

alert("The domain name doesn't seem to be valid.");

return false;

}

var atomPat=new RegExp(atom,"g");

var domArr=domain.match(atomPat);

var len=domArr.length;

if (domArr[domArr.length-1].length<2 || domArr[domArr.length-1].length>3) {

alert("The address must end in a three-letter domain, or two letter country.");

return false;

}

if (len<2) {

var errStr="This address is missing a hostname!";

alert(errStr);

return false;

}

List_Name.value = newsletter.options[newsletter.selectedIndex].value

            + nltype.options[nltype.selectedIndex].value;

 

   var largeExpDate = new Date();

   largeExpDate.setTime(largeExpDate.getTime() + (31 * 24 * 3600 * 1000));

   SetCookie('email_address', emailStr, largeExpDate);

 

return true;

   }

}

 

</script>

<P>

<CENTER>

      <BR clear="all">

      <CENTER>

      Dont forget to visist devasp<br>

<a href="http://www.devasp.com">www.devasp.com</a>

      </CENTER>

</CENTER>

</CENTER>

</BODY>

 

 

 

 

Run your application. Fill the required fields and click the button to generate the code for popup window.

Article Comments
excellent article

Posted on 2/7/2007 1:42:50 AM by kapil

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Changing Menu Location over web page on double click.

Disclaimer - Privacy
© 2002-2017 DevASP.net