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

Re: [ydn-javascript] Calendar bounces around screen

Expand Messages
  • Jing Ceawlin
    Your layout caused a bug in IE 6. Change the page element s position style to something other than absolute, you will be fine. I don t quite remember the
    Message 1 of 3 , Dec 26, 2007
      Your layout caused a bug in IE 6. Change the page element's position style to something other than absolute, you will be fine.
      I don't quite remember the detail about this bug, and I have no time to dig into it. If you are interested, please tell me when you find out.

      Hope this helps

      On Dec 27, 2007 3:11 PM, John Baldwin <jgilmorebaldwin@...> wrote:

      I'm still trying to figure this one out. Here's the sample of a page where I can reproduce a calendar jumping around the page.


      Load the page in IE6, then make the window smaller than the form (so there's a vertical scroll bar). Then click the button to reveal the calendar, and start clicking dates on the calendar. That should make the calendar jump around (at least it does for me).

      I've gotten around it this time, but I'd like to have a better understanding of why this happens. The problem seems tied to the #page css (position: relative). But still, why would the calendar change positions on the page with each click?

      John


      <html>
      <head>
      <title>Calendar Bug</title>
      </head>
      <body>
      <!-- Get Yahoo code to build calendar -->
      <script type="text/javascript" src="/yui/build/yahoo/yahoo.js"></script>
      <script type="text/javascript" src="/yui/build/event/event.js" ></script>
      <script type="text/javascript" src="/yui/build/dom/dom.js" ></script>
      <script type="text/javascript" src="/yui/build/calendar/calendar.js"></script>

      <script type="text/javascript" src="/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript" src="/yui/build/animation/animation.js"></script>
      <link type="text/css" rel="stylesheet" href="/yui/build/calendar/assets/skins/sam/calendar.css" />

      <!-- End Yahoo includes -->
      <style type="text/css">

      body { background-color: #E5E5E5; }


      #main {
      width: 700px;
      margin: auto;
      float: left;
      text-align: center;
      }

      #main table {
      margin-left: auto;
      margin-right: auto;
      }

      #sidebar {
      width: 170px;
      left: 750px;
      float: left;
      }

      #footer {
      width: 700px;
      bottom: 0;
      }

      #page {
      position: relative;
      }

      form#edit_form fieldset {
        margin-bottom: 10px;
      }
      form#edit_form legend {
        padding: 0 2px;
        font-weight: bold;
      }
      form#edit_form label {
        display: block;
        vertical-align: top;
        width: 110px;
        float: left;
        text-align: right;
        margin-right: 5px;
      }
      form#edit_form fieldset ol {
        margin: 0;
        padding: 0;
      }
      form#edit_form fieldset li {
        list-style: none;
        padding: 5px;
        margin: 0;
        text-align: left;
      }

      #startDateCalendarContainer {
      display: none;
      width: 200px;
      z-index: 1;
      position: absolute;
      top: 17px;
      _top: -200px;
      _left: 200px;
      _height: 1%;
      }

      #startDateExternalContainer {
      display: inline;
      position: relative;
      top: 1px;
      /* _left: -250px; */
      width: 200px;
      /* border: 6px solid black; */
      float: left;
      }

      #startDateText {
      display: inline;
      vertical-align: top;
      }

      </style>


      <script language="JavaScript" type="text/javascript">
      function refresh()
      {
      startDates = YAHOO.test.calendar.startCalendar.getSelectedDates();
      startDate = startDates[0];
      startDateMonth = startDate.getMonth()  + 1;
      startDateDay = startDate.getDate();
      startDateYear = startDate.getYear();
      if (startDateYear < 1900)
      {
      startDateYear += 1900;
      }
      var startDateString = startDateMonth + '/' + startDateDay + '/' + startDateYear;
      var formStartDate = document.getElementById('start_date');
      formStartDate.value = startDateString;

      return false;
      window.opener.refresh();
      form.target = window.parent;
      form.submit();
      window.close();
      }
      YAHOO.namespace("test.calendar");

      YAHOO.test.calendar.initStart = function() {
      YAHOO.test.calendar.startCalendar = new YAHOO.widget.Calendar("startDateCalendar","startDateCalendarContainer");
      YAHOO.test.calendar.startCalendar.render();
      YAHOO.util.Event.addListener("showStartDateCalendar","click",showStartCalendar,YAHOO.test.calendar.startCalendar ,true);
      YAHOO.test.calendar.startCalendar.selectEvent.subscribe(handleStartDateSelect, YAHOO.test.calendar.startCalendar, true);
      }

      YAHOO.util.Event.onDOMReady(YAHOO.test.calendar.initStart);
      endDateSelectedByFunction = false;
      function showStartCalendar(e)
      {
      YAHOO.test.calendar.startCalendar.show(e);
      YAHOO.util.Event.preventDefault(e);
      }
      function handleStartDateSelect(type, args, obj)
      {
      var dateText = handleDateSelect(args, "startDateText");
      var startDates = YAHOO.test.calendar.startCalendar.getSelectedDates();
      var startDate = startDates[0];
      }
      function handleDateSelect(args, textObject)
      {
      var dates = args[0];
      var date = dates[0];
      var year = date[0], month = date[1], day = date[2];
      var textObj = document.getElementById(textObject);
      var dateString = month + "/" + day + "/" + year;
      textObj.innerHTML = dateString;
      return dateString;
      }

      </script>

      <div id="page">
      <div id="main">
      <h1>
      Watch The Bouncing Calendar
      </h1>
      <div id="event_form" class="yui-skin-sam">
      <form id="edit_form" action="save_event.php" method="post">
      <fieldset style="height: 100px;">
      <legend>
      Extra Stuff
      </legend>
      <ol>
      <li>
      XXX
      </li>
      <li>
      YYY
      </li>
      </ol>
      </fieldset>
      <fieldset style="height: 100px;">
      <legend>
      Extra Stuff
      </legend>
      <ol>
      <li>
      XXX
      </li>
      <li>
      YYY
      </li>
      </ol>
      </fieldset>
      <fieldset style="height: 100px;">
      <legend>
      Extra Stuff
      </legend>
      <ol>
      <li>
      XXX
      </li>
      <li>
      YYY
      </li>
      </ol>
      </fieldset>
      <fieldset>
      <legend>
      Date Information
      </legend>
      <ol>
      <li>
      <label for="startDateCalendarContainer">
      Event Date
      </label>
      <div id="startDateText">12/19/2007</div>
      <button id="showStartDateCalendar">Select Date</button>
      <div id="startDateExternalContainer">
      <div id="startDateCalendarContainer"></div>
      </div>
      </li>
      </ol>
      </fieldset>
      <fieldset style="height: 100px;">
      <legend>
      Extra Stuff
      </legend>
      <ol>
      <li>
      XXX
      </li>
      <li>
      YYY
      </li>
      </ol>
      </fieldset> <fieldset style="height: 100px;">
      <legend>
      Extra Stuff
      </legend>
      <ol>
      <li>
      XXX
      </li>
      <li>
      YYY
      </li>
      </ol>
      </fieldset>
      </form>
      </div>
      </div>
      <div id="footer">
      FOOTER
      </div>
      </div>
      </body>
      </html>



      On Friday Dec 21, 2007 10:22 PM, at 10:22 PM, John Baldwin wrote:

      I had a problem with a site recently where a calendar would jump to a  
      new location when a date was clicked. Of course, this only happened in 
      IE6.



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