Solved

AutoHide a Popup Window

Posted on 2002-06-18
11
313 Views
Last Modified: 2008-02-01
I have a calendar control that comes up in a popup window (like Expedia,Orbitz, etc.) and I want to autohide the window when it loses focus (i.e. when the user clicks the main web page). How and where do I do this?
0
Comment
Question by:Xanfere
  • 6
  • 2
  • 2
  • +1
11 Comments
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
it depends on the contents of the calendar page in the popup ... but you could give this a try (in the calendar):

<BODY onBlur='self.close();'>
0
 
LVL 3

Expert Comment

by:tejaspurani
Comment Utility
post code.
T.P.
0
 
LVL 3

Expert Comment

by:tejaspurani
Comment Utility
post code.
T.P.
0
 

Author Comment

by:Xanfere
Comment Utility
Thanks for the reply knightEknight; however, when I tried your suggestion, it worked when you click the main web page but it also closes when you click a date on the control.
0
 

Author Comment

by:Xanfere
Comment Utility
Here is the code that generates the Calendar control:

function show_calendar(str_target, str_datetime) {
      var arr_months = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"];
      var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
      var n_weekstart = 1; // day week starts from (normally 0 or 1)
      
      var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt4(str_datetime));
      var dt_prev_month = new Date(dt_datetime);
      dt_prev_month.setMonth(dt_datetime.getMonth()-1);
      if (dt_datetime.getMonth()%12 != (dt_prev_month.getMonth()+1)%12) {
            dt_prev_month.setMonth(dt_datetime.getMonth());
            dt_prev_month.setDate(0);
      }
      var dt_next_month = new Date(dt_datetime);
      dt_next_month.setMonth(dt_datetime.getMonth()+1);
      if ((dt_datetime.getMonth() + 1)%12 != dt_next_month.getMonth()%12)
            dt_next_month.setDate(0);

      var dt_prev_year = new Date(dt_datetime);
      dt_prev_year.setYear(dt_datetime.getFullYear()-1);

      var dt_next_year = new Date(dt_datetime);
      dt_next_year.setYear(dt_datetime.getFullYear()+1);
      
      var dt_firstday = new Date(dt_datetime);
      dt_firstday.setDate(1);
      dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
      var dt_lastday = new Date(dt_next_month);
      dt_lastday.setDate(0);
      
      // html generation (feel free to tune it for your particular application)
      // print calendar header
      var str_buffer = new String (
            "<html>\n"+
            "<head>\n"+
            "      <title>NCDOT Calendar</title>\n"+
            "</head>\n"+
            "<body  bgcolor=\"White\">\n"+
            "<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
            "<tr><td bgcolor=\"#4682B4\">\n"+
            "<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
            "<tr>\n      <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
            str_target+"', '"+ dt2dtstr4(dt_prev_year)+"');\">"+
            "<img src=\"prev_year.gif\" width=\"16\" height=\"16\" border=\"0\""+
            " alt=\"previous year\"></a></td>\n"+
            
            "      <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
            str_target+"', '"+ dt2dtstr4(dt_prev_month)+"');\">"+
            "<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
            " alt=\"previous month\"></a></td>\n"+
            "      <td bgcolor=\"#4682B4\" colspan=\"3\">"+
            "<font color=\"white\" face=\"tahoma, verdana\" size=\"1\">"
            +arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
            "      <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
            +str_target+"', '"+dt2dtstr4(dt_next_month)+"');\">"+
            "<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+
            " alt=\"next month\"></a></td>\n"+
            "        <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
            +str_target+"', '"+dt2dtstr4(dt_next_year)+"');\">"+
            "<img src=\"next_year.gif\" width=\"16\" height=\"16\" border=\"0\""+
            " alt=\"next year\"></a></td>\n"+
            "</tr>\n");

      var dt_current_day = new Date(dt_firstday);
      // print weekdays titles
      str_buffer += "<tr>\n";
      for (var n=0; n<7; n++)
            str_buffer += "      <td bgcolor=\"#87CEFA\">"+
            "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
            week_days[(n_weekstart+n)%7]+"</font></td>\n";
      // print calendar table
      str_buffer += "</tr>\n";
      while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
            dt_current_day.getMonth() == dt_firstday.getMonth()) {
            // print row heder
            str_buffer += "<tr>\n";
            for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
                        if (dt_current_day.getDate() == dt_datetime.getDate() &&
                              dt_current_day.getMonth() == dt_datetime.getMonth())
                              // print current date
                              str_buffer += "      <td bgcolor=\"#ffffe0\" align=\"right\">";
                        else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
                              // weekend days
                              str_buffer += "      <td bgcolor=\"#DBEAF5\" align=\"right\">";
                        else
                              // print working days of current month
                              str_buffer += "      <td bgcolor=\"white\" align=\"right\">";

                        if (dt_current_day.getMonth() == dt_datetime.getMonth())
                              // print days of current month
                              str_buffer += "<a href=\"javascript:window.opener."+str_target+
                              ".value='"+dt2dtstr4(dt_current_day)+"'; window.close();\">"+
                              "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
                        else
                              // print days of other months
                              str_buffer += "<a href=\"javascript:window.opener."+str_target+
                              ".value='"+dt2dtstr4(dt_current_day)+"'; window.close();\">"+
                              "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
                        str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
                        dt_current_day.setDate(dt_current_day.getDate()+1);
            }
            // print row footer
            str_buffer += "</tr>\n";
      }
      // print calendar footer
      str_buffer +=
            "</table>\n" +
            "</tr>\n</td>\n</table>\n" +
            "</body>\n" +
            "</html>\n";

      var vWinCal = window.open("", "Calendar",
            "width=178,height=174,status=no,resizable=no,top=200,left=425");
      vWinCal.opener = self;
      vWinCal.focus();
      var calc_doc = vWinCal.document;
      calc_doc.write (str_buffer);
      calc_doc.close();
      
      
}

***********
It is called by:

<a ref="javascript:show_calendar 'document.form1.BegDate', document.form1.BegDate.value);"><IMG alt="Click Here to Select Beginning Date." src  ="JS/calendar.gif" border="0" WIDTH="34" HEIGHT="21"></a>

0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:Xanfere
Comment Utility
Here is the code that generates the Calendar control:

function show_calendar(str_target, str_datetime) {
      var arr_months = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"];
      var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
      var n_weekstart = 1; // day week starts from (normally 0 or 1)
      
      var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt4(str_datetime));
      var dt_prev_month = new Date(dt_datetime);
      dt_prev_month.setMonth(dt_datetime.getMonth()-1);
      if (dt_datetime.getMonth()%12 != (dt_prev_month.getMonth()+1)%12) {
            dt_prev_month.setMonth(dt_datetime.getMonth());
            dt_prev_month.setDate(0);
      }
      var dt_next_month = new Date(dt_datetime);
      dt_next_month.setMonth(dt_datetime.getMonth()+1);
      if ((dt_datetime.getMonth() + 1)%12 != dt_next_month.getMonth()%12)
            dt_next_month.setDate(0);

      var dt_prev_year = new Date(dt_datetime);
      dt_prev_year.setYear(dt_datetime.getFullYear()-1);

      var dt_next_year = new Date(dt_datetime);
      dt_next_year.setYear(dt_datetime.getFullYear()+1);
      
      var dt_firstday = new Date(dt_datetime);
      dt_firstday.setDate(1);
      dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
      var dt_lastday = new Date(dt_next_month);
      dt_lastday.setDate(0);
      
      // html generation (feel free to tune it for your particular application)
      // print calendar header
      var str_buffer = new String (
            "<html>\n"+
            "<head>\n"+
            "      <title>NCDOT Calendar</title>\n"+
            "</head>\n"+
            "<body  bgcolor=\"White\">\n"+
            "<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
            "<tr><td bgcolor=\"#4682B4\">\n"+
            "<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
            "<tr>\n      <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
            str_target+"', '"+ dt2dtstr4(dt_prev_year)+"');\">"+
            "<img src=\"prev_year.gif\" width=\"16\" height=\"16\" border=\"0\""+
            " alt=\"previous year\"></a></td>\n"+
            
            "      <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
            str_target+"', '"+ dt2dtstr4(dt_prev_month)+"');\">"+
            "<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
            " alt=\"previous month\"></a></td>\n"+
            "      <td bgcolor=\"#4682B4\" colspan=\"3\">"+
            "<font color=\"white\" face=\"tahoma, verdana\" size=\"1\">"
            +arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
            "      <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
            +str_target+"', '"+dt2dtstr4(dt_next_month)+"');\">"+
            "<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+
            " alt=\"next month\"></a></td>\n"+
            "        <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
            +str_target+"', '"+dt2dtstr4(dt_next_year)+"');\">"+
            "<img src=\"next_year.gif\" width=\"16\" height=\"16\" border=\"0\""+
            " alt=\"next year\"></a></td>\n"+
            "</tr>\n");

      var dt_current_day = new Date(dt_firstday);
      // print weekdays titles
      str_buffer += "<tr>\n";
      for (var n=0; n<7; n++)
            str_buffer += "      <td bgcolor=\"#87CEFA\">"+
            "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
            week_days[(n_weekstart+n)%7]+"</font></td>\n";
      // print calendar table
      str_buffer += "</tr>\n";
      while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
            dt_current_day.getMonth() == dt_firstday.getMonth()) {
            // print row heder
            str_buffer += "<tr>\n";
            for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
                        if (dt_current_day.getDate() == dt_datetime.getDate() &&
                              dt_current_day.getMonth() == dt_datetime.getMonth())
                              // print current date
                              str_buffer += "      <td bgcolor=\"#ffffe0\" align=\"right\">";
                        else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
                              // weekend days
                              str_buffer += "      <td bgcolor=\"#DBEAF5\" align=\"right\">";
                        else
                              // print working days of current month
                              str_buffer += "      <td bgcolor=\"white\" align=\"right\">";

                        if (dt_current_day.getMonth() == dt_datetime.getMonth())
                              // print days of current month
                              str_buffer += "<a href=\"javascript:window.opener."+str_target+
                              ".value='"+dt2dtstr4(dt_current_day)+"'; window.close();\">"+
                              "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
                        else
                              // print days of other months
                              str_buffer += "<a href=\"javascript:window.opener."+str_target+
                              ".value='"+dt2dtstr4(dt_current_day)+"'; window.close();\">"+
                              "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
                        str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
                        dt_current_day.setDate(dt_current_day.getDate()+1);
            }
            // print row footer
            str_buffer += "</tr>\n";
      }
      // print calendar footer
      str_buffer +=
            "</table>\n" +
            "</tr>\n</td>\n</table>\n" +
            "</body>\n" +
            "</html>\n";

      var vWinCal = window.open("", "Calendar",
            "width=178,height=174,status=no,resizable=no,top=200,left=425");
      vWinCal.opener = self;
      vWinCal.focus();
      var calc_doc = vWinCal.document;
      calc_doc.write (str_buffer);
      calc_doc.close();
      
      
}

***********
It is called by:

<a ref="javascript:show_calendar 'document.form1.BegDate', document.form1.BegDate.value);"><IMG alt="Click Here to Select Beginning Date." src  ="JS/calendar.gif" border="0" WIDTH="34" HEIGHT="21"></a>

0
 
LVL 4

Accepted Solution

by:
mberumen earned 100 total points
Comment Utility
Xanfere:

Here's a possible solution, I defined two variables, vWinCal which refers to a window object and isPopUpOpen, a boolean value that refers to whether the popup is open or not.
This simplified code shows you how it might work, when your show_calendar() function is called we set isPopUpOpen to true, when the focus returns to the main window we execute the hidePopUp function that closes the popup if its open.  Give it a try and let me know.  I would try it with your code but I am missing the function dt2dtstr4


regards

MB


<HTML>
<HEAD>
<TITLE></TITLE>
<script>
var vWinCal=this;
var isPopUpOpen=false;
function show_calendar(str_target, str_datetime) {

         var str_buffer = "<HTML></body>Hello<form><input type=button><input type=button></form></body></HTML>";
          //var
          vWinCal = window.open("", "Calendar",
          "width=178,height=174,status=no,resizable=no,top=200,left=425");
           vWinCal.opener = self;
          vWinCal.focus();
          var calc_doc = vWinCal.document;
          calc_doc.write (str_buffer);
          calc_doc.close();
          isPopUpOpen=true;
}
function hidePopUp(){
if (isPopUpOpen==true){
     isPopUpOpen=false;
     vWinCal.close() ;
}
}
</script>

</HEAD>
<BODY onfocus="javascript:hidePopUp();">

***********
It is called by:
<form name=form1>
<input type=text name=BegDate>
</form>

<a href="javascript:show_calendar( 'document.form1.BegDate', document.form1.BegDate.value);"><IMG alt="Click
Here to Select Beginning Date." src  ="JS/calendar.gif" border="0" WIDTH="34" HEIGHT="21"></a>

</BODY>
</HTML>
0
 

Author Comment

by:Xanfere
Comment Utility
Thanks mberumen, I'll let you know if it works out!!
0
 

Author Comment

by:Xanfere
Comment Utility
MB,

I tried your code and I just had to change a couple of minor things to make it work. Your code had the following:

vWinCal = window.open("", "Calendar",
         "width=178,height=174,status=no,resizable=no,top=200,left=425");
          vWinCal.opener = self;
         vWinCal.focus();
         var calc_doc = vWinCal.document;
         calc_doc.write (str_buffer);
         calc_doc.close();
         isPopUpOpen=true;

*******************************

I had to change it to:

     var vWinCalendar = window.open("", "Calendar",
          "width=178,height=200,status=no,resizable=no,top=200,left=425");
     vWinCalendar.opener = self;
     vWinCalendar.focus();
     var calc_doc = vWinCalendar.document;
     calc_doc.write (str_buffer);
     calc_doc.close();
     vWinCal = vWinCalendar;

The reason why I did is that when I tried your code, the main window and not the popup window would close whenever the popup window lost focus. So when I changed the reference of vWinCal to the Calendar popup, it worked!! In any case, you pointed me in the right direction and it was 90% right. Thanks for the help!!
     isPopUpOpen=true;
0
 

Author Comment

by:Xanfere
Comment Utility
See comment posted for question.....
0
 
LVL 4

Expert Comment

by:mberumen
Comment Utility
glad to be of assistance.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

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

6 Experts available now in Live!

Get 1:1 Help Now