Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] using the calendar in my table. Please help!

Expand Messages
  • Brian McSweeney
    Hi Steven, I gave this a shot but unfortunately it didn t seem to work which is a pity because i thought it made sense as a solution. Have you used this method
    Message 1 of 18 , Apr 14, 2006
    • 0 Attachment
      Hi Steven,

      I gave this a shot but unfortunately it didn't seem to work which is a pity because i thought it made sense as a solution. Have you used this method before? If you have, perhaps you could post an example so i can see what I'm doing wrong.

      thanks so much again,
      Brian

      On 4/13/06, Steven Peterson <peterson@...> wrote:

      Brian,

       

      I think you have a positioning issue going on because of the way that the containers for the calendars are nested inside the table(s). I suspect that the positioning that you copied from the example isn't calculating the correct left/top because of the depth of the DOM tree. Try using the DOM utility (also available on YDN with the libraries) to position the calendars instead of the top/left method. For instance:

       

      cal1.outerContainer.style.top = (link1.offsetTop+link1.offsetParent.offsetTop+link1.height-1) + "px";

      cal1.outerContainer.style.left = (link1.offsetLeft+link1.offsetParent.offsetLeft ) + "px";

       

      … would become …

       

            var linkPos = YAHOO.util.Dom.getXY(link1);

            var x = linkPos[0];

            var y = linkPos[1] + link1.offsetHeight;

            YAHOO.util.Dom.setXY (cal1.outerContainer, [x,y]) ;

       

      You can repeat the same thing for cal2. This should more correctly set the positions based on actual pixel positions of the linking elements in the document. Please let me know if this works for you. Hope this helps!

       

      Steven Peterson

      Web Developer, Platform Engineering

      Yahoo!


      From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Brian McSweeney
      Sent: Wednesday, April 12, 2006 4:43 PM


      To: ydn-javascript@yahoogroups.com
      Subject: Re: [ydn-javascript] using the calendar in my table. Please help!

       

      Hi Steven,

      ok, here's the jsp structure:

      4 jsps:

      header.jsp
      headercommon.jsp
      main.jsp
      footer.jsp

      header.jsp contains headercommon.jsp. main.jsp contains header.jsp and footer.jsp

      so here's the code:

      ===== start of header.jsp code =====
      <%@ include file="./taglibs.jsp" %>
      <%@ page import="com.b.util.Constants" %>
      <%@ page import="javax.servlet.http.Cookie " %>
      <%@ page import="java.lang.String" %>
      <%@ page import="java.util.Hashtable" %>
      <%@ include file="./headercommon.jsp" %>

          <tr class=box><td></td><td colspan=4>stuff</td></tr>
          <TR><TD colspan=5><IMG height=10 src="<%=contextPath%>/images/spacer.gif"></TD></TR>

          <!-- horizontal spacer 1 -->
          <TR><TD colspan=5 bgColor="#3064A0"><IMG height=3 src="<%=contextPath%>/images/spacer.gif"></TD></TR>

              <TR class=alpha>
                    <TD colspan=5 align=center>
                      stuff
                  </td>
              </TR>

          <!-- horizontal spacer 2 -->
          <TR><TD colspan=5 bgColor="#3064A0"><IMG height=3 src="<%=contextPath%>/images/spacer.gif"></TD></TR>

      ===== end of header.jsp code  =====


      ===== start of headercommon.jsp code =====
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <% String contextPath = request.getContextPath();%>

      <html>
      <head>
          <link rel="stylesheet" href="<%=contextPath%>/css/calendar.css" type="text/css">
          <link rel="stylesheet" href="<%=contextPath%>/css/examples.css" type="text/css">

          <link rel="stylesheet" type="text/css" href="<%=contextPath%>/css/global.css"/>   

          <script type="text/javascript" src="<%=contextPath%>/scripts/YAHOO.js"></script>
          <script type="text/javascript" src="<%=contextPath%>/scripts/event.js" ></script>
          <script type="text/javascript" src="<%=contextPath%>/scripts/calendar.js"></script>

          <title></title>

      </head>

      <body text="#000000" vlink="#666666" alink="#003366" link="#003366"
          bgcolor="#eeeeee"  topmargin="0" marginheight="0"
          marginwidth="0" onload="init()">
      <center>

      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" border="0">
              <tr>
                  <td colspan=5 width="100%" bgcolor="#eeeeee" align="center" valign="middle">
                      stuff
                  </td>
              </tr>
              <tr>
                  <td width="120">&nbsp;</td>
                  <td align="center">
                      stuff
                  </td>
                  <td width="175">&nbsp;</td>
                  <td width="250">
                      stuff
                  </td>
                  <td width="100">&nbsp;</td>
              </tr>
      ===== end of headercommon.jsp code  =====

      ===== start of main.jsp code =====
      <%@ include file="../../../layout/header.jsp" %>
      <% int pageNumber=2; %>

      <tr>
          <td colspan=5>
            <table border=0 width=100%>
              <tr>
                  <TD bgColor="#3064A0" rowSpan=3 width=3><IMG height=3 src="<%=contextPath%>/images/spacer.gif" width=3></TD>
                  <td valign=top width='15%' background="<%=contextPath%>/images/spacer.gif">stuff</td>
                  <!-- vertical spacer 2 -->
                  <TD bgColor="#3064A0" rowSpan=3 width=3><IMG height=3 src="<%=contextPath%>/images/spacer.gif" width=3></TD>
                <td colspan=5 bgcolor="#ffffff" align="center" valign=middle>

          <script language="javascript">
              var cal1;
              var cal2;

              function init() {
                  this.today = new Date();
                  var thisMonth = this.today.getMonth();
                  var thisDay = this.today.getDate();
                  var thisYear = this.today.getFullYear();

                  this.link1 = document.getElementById('dateLink1');
                  this.link2 = document.getElementById('dateLink2');

                  this.selMonth1 = document.getElementById('selMonth1');
                  this.selDay1 = document.getElementById('selDay1');
                  this.selMonth1.selectedIndex = thisMonth;
                  this.selDay1.selectedIndex = thisDay-1;
                  this.selMonth2 = document.getElementById('selMonth2');
                  this.selDay2 = document.getElementById('selDay2');
                  this.selMonth2.selectedIndex = thisMonth;
                  this.selDay2.selectedIndex = thisDay-1;

                  cal1 = new YAHOO.widget.Calendar2up ("cal1","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
                  cal1.title = "Select your desired departure date:";
                  cal1.setChildFunction("onSelect",setDate1);
                  cal1.render();

                  cal2 = new YAHOO.widget.Calendar2up("cal2","container2",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
                  cal2.title = "Select your desired return date:";
                  cal2.setChildFunction("onSelect",setDate2);
                  cal2.render();
              }

              function showCalendar1() {
                  cal2.hide();
                  cal1.outerContainer.style.top = (link1.offsetTop+link1.offsetParent.offsetTop+link1.height-1) + "px";
                  cal1.outerContainer.style.left = (link1.offsetLeft+link1.offsetParent.offsetLeft ) + "px";
                  cal1.outerContainer.style.display='block';
              }
              function showCalendar2() {
                  cal1.hide();
                  cal2.outerContainer.style.top = (link2.offsetTop+link2.offsetParent.offsetTop+link2.height-1 ) + "px";
                  cal2.outerContainer.style.left = (link2.offsetLeft+link2.offsetParent.offsetLeft) + "px";
                  cal2.outerContainer.style.display='block';
              }
              function setDate1() {
                  var date1 = cal1.getSelectedDates()[0];
                  selMonth1.selectedIndex=date1.getMonth();
                  selDay1.selectedIndex=date1.getDate()-1;
                  cal1.hide();
              }
              function setDate2() {
                  var date2 = cal2.getSelectedDates()[0];
                  selMonth2.selectedIndex=date2.getMonth();
                  selDay2.selectedIndex=date2.getDate()-1;
                  cal2.hide();
              }
              function changeDate1() {
                  var month = this.selMonth1.selectedIndex;
                  var day = this.selDay1.selectedIndex + 1;
                  var year = this.today.getFullYear();
                  cal1.select((month+1) + "/" + day + "/" + year);
                  cal1.setMonth(month);
                  cal1.render();
              }
              function changeDate2() {
                  var month = this.selMonth2.selectedIndex;
                  var day = this.selDay2.selectedIndex + 1;
                  var year = this.today.getFullYear();
                  cal2.select((month+1) + "/" + day + "/" + year);
                  cal2.setMonth(month);
                  cal2.render();
              }
          </script>

      <table border=10>
          <tr>
              <td colspan=5 align="center">
                  <div>
                      <select id="selMonth1" name="selMonth1" onchange="changeDate1()" style="vertical-align:middle">
                          <option value="Jan">Jan</option><option value="Feb">Feb</option><option value="Mar">Mar</option><option value="Apr">Apr</option>
                          <option value="May">May</option><option value="Jun">Jun</option><option value="Jul">Jul</option><option value="Aug">Aug</option>
                          <option value="Sep">Sep</option><option value="Oct">Oct</option><option value="Nov">Nov</option><option value="Dec">Dec</option>
                      </select>
                      <select name="selDay1" id="selDay1" onchange="changeDate1()" style="vertical-align:middle">
                          <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
                          <option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
                          <option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
                          <option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option>
                          <option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
                          <option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option>
                          <option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option>
                          <option value="29">29</option><option value="30">30</option><option value="31">31</option>
                      </select>
                      <a href="javascript:void(null)" onclick="showCalendar1()">
                          <img id="dateLink1" src="<%=contextPath%>/images/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/>
                      </a>
                  </div>
                  <div id="container1" style="position:absolute;display:none"></div>
              </td>
          </tr>
          <tr>
              <td colspan=5 align="center">
                  <div>
                      <select id="selMonth2" name="selMonth2" onchange="changeDate2()" style="vertical-align:middle">
                          <option value="Jan">Jan</option><option value="Feb">Feb</option><option value="Mar">Mar</option><option value="Apr">Apr</option>
                          <option value="May">May</option><option value="Jun">Jun</option><option value="Jul">Jul</option><option value="Aug">Aug</option>
                          <option value="Sep">Sep</option><option value="Oct">Oct</option><option value="Nov">Nov</option><option value="Dec">Dec</option>
                      </select>
                      <select name="selDay2" id="selDay2" onchange="changeDate2()" style="vertical-align:middle">
                          <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
                          <option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
                          <option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
                          <option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option>
                          <option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
                          <option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option>
                          <option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option>
                          <option value="29">29</option><option value="30">30</option><option value="31">31</option>
                      </select>
                      <a href="javascript:void(null)" onclick="showCalendar2()">
                          <img id="dateLink2" src="<%=contextPath%>/images/pdate.gif" border="0" style="vertical-align:middle;margin:5px"/>
                      </a>
                  </div>
                  <div id="container2" style="position:absolute;display:none"></div>
              </td>
          </tr>
      </table>


                </td>
                  <TD bgColor="#3064A0" rowSpan=3 width=3><IMG height=3 src="<%=contextPath%>/images/spacer.gif" width=3></TD>
              </tr>
          </table>
          </td>
      </tr>

      <%@ include file="../../../layout/footer.jsp" %>
      ===== end of main.jsp code  =====

      ===== start of footer.jsp code =====
      <!-- horizontal spacer 3 -->
      <TR><TD colspan=5 bgColor="#3064A0"><IMG height=3 src="<%=contextPath%>/images/spacer.gif"></TD></TR>
      </body>
      </html>
      ===== end of footer.jsp code  =====



      that's about it!

      hope it helps some!

      thanks so much,
      Brian


      On 4/12/06, Brian McSweeney < brian.mcsweeney@...> wrote:

      Hi Steven,

      first off, thanks so much for helping me. I posted the html because the jsps used to generate them have lots of includes, ie, lots of jsps are used to generate the html. I thought it would be easier to just post the html. I'll try to clean up the jsps and post them to you in a little bit. As for the random exclamations, note that the formatting was a bit messed up, but there shouldn't be any exclamations...

      thanks again,
      Brian

      On 4/12/06, Steven Peterson < peterson@...> wrote:

      Brian,

       

      The HTML you pasted is the rendered HTML that's created after the Calendar is already present. Can you send the code for the JSP as well? I notice in this HTML that there are some random exclamation points placed here and there, and I don't know if those are a result of the paste, or if they're actually in the post-processed markup. Being able to see the JSP would be very useful. When you pop the calendar up, how are you positioning it? I suspect that what you're describing may just be a CSS positioning issue, but more information would certainly help.

       

      Steven Peterson

      Web Developer, Platform Engineering

      Yahoo!


      From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Brian McSweeney
      Sent: Wednesday, April 12, 2006 2:10 PM


      To: ydn-javascript@yahoogroups.com
      Subject: Re: [ydn-javascript] using the calendar in my table. Please help!

       

      Hi Steven,



      ok, I'll give that a shot:

      Start of code
      ==================

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html>
      <head>
          <link rel="stylesheet" href="index_files/calendar.css" type="text/css">
          <link rel="stylesheet" href="index_files/examples.css" type="text/css">
          <link rel="stylesheet" type="text/css" href="index_files/global.css">   
          <script type="text/javascript" src="index_files/YAHOO.js"></script>
          <script type="text/javascript" src="index_files/event.js"></script>
          <script type="text/javascript" src="index_files/calendar.js"></script>
      </head>
      <body topmargin="0" onload="init()" alink="#003366" bgcolor="#eeeeee" link="#003366" marginheight="0" marginwidth="0" text="#000000" vlink="#666666">

      <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                  <td colspan="5" align="center" bgcolor="#eeeeee" valign="middle" width="100%">
                      SOME STUFF HERE
                  </td>
              </tr>
              <tr>
                  <td width="120">&nbsp;</td>
                  <td align="center">
                      More Stuff
                  </td>
                  <td width="175">&nbsp;</td>
                  <td width="250">
                      <div id="top" style="background-color: rgb(255, 255, 0); padding-top: 0pt; padding-bottom: 0pt;"><div style="background-color: rgb(255, 255, 255);"><span style="border-style: solid; border-color: rgb(255, 255, 127); border-width: 0px 2px; overflow: hidden; background-color: rgb(255, 255, 0); display: block; height: 1px; font-size: 1px; margin-left: 3px; margin-right: 3px;"></span><span style="border-style: solid; border-color: rgb(255, 255, 127); border-width: 0px! 1px; overflow: hidden; background-color: rgb(255, 255, 0); display: block; height: 1px; font-size: 1px; margin-left: 2px; margin-right: 2px;"></span><span style="border-style: solid; border-color: rgb(255, 255, 127); border-width: 0px 1px; overflow: hidden; background-color: rgb(255, 255, 0); display: block; height: 1px; font-size: 1px; margin-left: 1px; margin-right: 1px;"></span><span style="border-style: solid; border-color: rgb(255, 255, 127); border-width: 0px 1px; overflow: hidden; background-color: rgb(255, 255, 0); display: block; height: 2px; font-size: 1px; margin-left: 0px; margin-right: 0px;"></span></div>

                      <div style="background-color: rgb(255, 255, 255);"><span style="border-style: solid; border-color: rgb(255, 255, 127); border-width: 0px 1px; overflow: hidden; background-color: rgb(255, 255, 0); display: block; height: 2px; font-size: 1px; margin-left: 0px; margin-right: 0px;"></span><span style="border-style: solid; border-color: rgb(255, 255, 127); border-width: 0px 1px; overflow: hidden; background-color: rgb(255, 255, 0); display: block; height: 1px; font-size: 1px; margin-left: 1px; margin-right: 1px;"></span><span style="border-style: solid; border-color: rgb(255, 255, 127); border-width: 0px 1px; overflow: hidden; background-color: rgb(255, 255, 0); display: block; height: 1px; font-size: 1px; margin-left: 2px; margin-right: 2px;"></span><span style="border-style: solid; border-color: rgb(255, 25! 5, 127); border-width: 0px 2px; overflow: hidden; background-color: rgb(255, 255, 0); display: block; height: 1px; font-size: 1px; margin-left: 3px; margin-right: 3px;"></span></div>


                  </td>
                  <td width="100">&nbsp;</td>
              </tr>
              <tr class="box">
                  <td></td>
                  <td colspan="4">   
                      More Stuff
                  </td>
              </tr>
              <tr><td><img src="index_files/spacer.gif" height="10"></td></tr>
              <!-- horizontal spacer 1 -->
              <tr><td colspan="5" bgcolor="#3064a0"><img src="index_files/spacer.gif" height="3"></td></tr>
              <tr class="alpha">
                    <td colspan="5" align="center">
                      More Stuff Here
                  </td>
              </tr>
              <!-- horizontal spacer 2 -->
              <tr><td colspan="5" bgcolor="#3064a0"><img src="index_files/spacer.gif" height="3"></td></tr>

              <tr><td colspan="5">
                  <table border="0" width="100%">
                      <tr>
                          <td rowspan="3" bgcolor="#3064a0" width="3"><img src="index_files/spacer.gif" height="3" width="3"></td>
                          <td background="index_files/spacer.gif" valign="top" width="15%" height=400></td>
                          <!-- vertical spacer 2 -->
                          <td rowspan="3" bgcolor="#3064a0" width="3"><img src="index_files/spacer.gif" height="3" width="3"></td>
                          <td align="center" width="100%">

                              <table border="10">
                                  <tr>
                                      <script language="javascript">
                                          var cal1;
                                          var cal2;

                                          function init() {
                                              this.today = new Date();
                                              var thisMonth = this.today.getMonth();
                                              var thisDay = this.today.getDate();
                                              var thisYear = this.today.getFullYear ();

                                              this.link1 = document.getElementById('dateLink1');
                                              this.link2 = document.getElementById('dateLink2');

                                              this.selMonth1 = document.getElementById('selMonth1');
                                              this.selDay1 = document.getElementById('selDay1');
                                              this.selMonth1.selectedIndex = thisMonth;
                                              this.selDay1.selectedIndex = thisDay-1;
                                              this.selMonth2 = document.getElementById('selMonth2');
                                              this.selDay2 = document.getElementById('selDay2');
                                              this.selMonth2.selectedIndex = thisMonth;
                                              this.selDay2.selectedIndex = thisDay-1;

                                              cal1 = new YAHOO.widget.Calendar2up("cal1","container1",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
                                              cal1.title = "Select your desired departure date:";
                                              cal1.setChildFunction("onSelect",setDate1);
                                              cal1.render();

                                              cal2 = new YAHOO.widget.Calendar2up("cal2","container2",(thisMonth+1)+"/"+thisYear,(thisMonth+1)+"/"+thisDay+"/"+thisYear);
                                              cal2.title = "Select your desired return date:";
                                              cal2.setChildFunction("onSelect",setDate2);
                                              cal2.render();
                                          }

                                          function showCalendar1() {
                                              cal2.hide();
                                              cal1.outerContainer.style.top = (link1.offsetTop+link1.offsetParent.offsetTop+link1.height-1) + "px";
                                             

      (Message over 64 KB, truncated)

    Your message has been successfully submitted and would be delivered to recipients shortly.