Menu

calendar position

Help
2009-05-09
2013-06-03
  • Walter de Milly

    Walter de Milly - 2009-05-09

    I've redesigned the form substantially.  Everything works, but the calendar appears several hundred px too high on the page. 

    I've tried to comprehend the js documentation and get a feeling that I need to go to the calendar.js file, below (but I don't know what to do)!   (below is pasted from the js file):

    /**
    *  Shows the calendar at a given absolute position (beware that, depending on
    *  the calendar element style -- position property -- this might be relative
    *  to the parent's containing rectangle).
    */
    Calendar.prototype.showAt = function (x, y) {
        var s = this.element.style;
        s.left = x + "px";
        s.top = y + "px";
        this.show();
    };

    /** Shows the calendar near a given element. */
    Calendar.prototype.showAtElement = function (el, opts) {
        var self = this;
        var p = Calendar.getAbsolutePos(el);
        if (!opts || typeof opts != "string") {
            this.showAt(p.x, p.y + el.offsetHeight);
            return true;
        }
        function fixPosition(box) {
            if (box.x < 0)
                box.x = 0;
            if (box.y < 0)
                box.y = 0;
            var cp = document.createElement("div");
            var s = cp.style;
            s.position = "absolute";
            s.right = s.bottom = s.width = s.height = "0px";
            document.body.appendChild(cp);
            var br = Calendar.getAbsolutePos(cp);
            document.body.removeChild(cp);
            if (Calendar.is_ie) {
                br.y += document.body.scrollTop;
                br.x += document.body.scrollLeft;
            } else {
                br.y += window.scrollY;
                br.x += window.scrollX;
            }
            var tmp = box.x + box.width - br.x;
            if (tmp > 0) box.x -= tmp;
            tmp = box.y + box.height - br.y;
            if (tmp > 0) box.y -= tmp;
        };
        this.element.style.display = "block";
        Calendar.continuation_for_the_fucking_khtml_browser = function() {
            var w = self.element.offsetWidth;
            var h = self.element.offsetHeight;
            self.element.style.display = "none";
            var valign = opts.substr(0, 1);
            var halign = "l";
            if (opts.length > 1) {
                halign = opts.substr(1, 1);
            }
            // vertical alignment
            switch (valign) {
                case "T": p.y -= h; break;
                case "B": p.y += el.offsetHeight; break;
                case "C": p.y += (el.offsetHeight - h) / 2; break;
                case "t": p.y += el.offsetHeight - h; break;
                case "b": break; // already there
            }
            // horizontal alignment
            switch (halign) {
                case "L": p.x -= w; break;
                case "R": p.x += el.offsetWidth; break;
                case "C": p.x += (el.offsetWidth - w) / 2; break;
                case "l": p.x += el.offsetWidth - w; break;
                case "r": break; // already there
            }
            p.width = w;
            p.height = h + 40;
            self.monthsCombo.style.display = "none";
            fixPosition(p);
            self.showAt(p.x, p.y);
        };
        if (Calendar.is_khtml)
            setTimeout("Calendar.continuation_for_the_fucking_khtml_browser()", 10);
        else
            Calendar.continuation_for_the_fucking_khtml_browser();
    };

     
    • Walter de Milly

      Walter de Milly - 2009-05-09

      I solved the problem.  I simply created a <div title="form1"> at the beginning of the form (them closed it after the form, with </div>.

      Then replaced the word "string" with "form1" in the js file:

      (code below is from the calendar.js file) about halfway down.)

      /** Shows the calendar near a given element. */
      Calendar.prototype.showAtElement = function (el, opts) {
      var self = this;
      var p = Calendar.getAbsolutePos(el);
      if (!opts || typeof opts != "form1") {
      this.showAt(p.x, p.y + el.offsetHeight);
      return true;
      }

      Now the calendar pops up immediately to the right of the date button in my forms.

       

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.