Source Code

for file /controls/AJAXPopUp.js

// controls/popup.js
// Javascript Behaviour for the popup control
// Copyright (c) by Matthias Hertel, http://www.mathertel.de
// This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx
// ----- 
// 03.06.2005 created by Matthias Hertel
// 21.12.2007 buttonbackpushed imaged replaced by topContent image.
// 14.02.2016 shadow simplified to CSS3 shadow.

var AJAXPopUpBehaviour = {

  // --- attributes

  _obj: null, /// <summary>The current hovered object.</summary>
  _popobj: null, /// <summary>A reference to the current popup object.</summary>

  infomethod: null, /// <summary>The specified attribute with the name of the webservice and method used for retrieving the information.</summary>

  // ----- Events -----

  init: function () {
    /// <summary>Initialze the JavaScript control. Setup the AJAX call and finish method.</summary>
    if (this.infomethod != null)
      AJAXPopUpBehaviour.action.call = this.infomethod;

    // attach the event handlers to the document element to check all elements on the page
    jcl.AttachEvent(document, "onmouseover", AJAXPopUpBehaviour._onmouseover);
    jcl.AttachEvent(document, "onmouseout", AJAXPopUpBehaviour._onmouseout);
  },


  term: function () {
    /// <summary>Terminate the JavaScript control.
    /// Unlink all HTML elements and event handlers to avoid memory leaks.</summary>
    jcl.DetachEvent(document, "onmouseover", AJAXPopUpBehaviour._onmouseover);
    jcl.DetachEvent(document, "onmouseout", AJAXPopUpBehaviour._onmouseout);
    AJAXPopUpBehaviour._obj = null;
    AJAXPopUpBehaviour._popobj = null;
  },


  _onmouseover: function (evt) {
    /// <summary>Event handler attached to the onmouseover event on document level.
    /// Set a timer to show the popUp information in a moment.</summary>
    var t = evt.target || evt.srcElement;
    if ((t != null) && (t.tagName == "A") && (t.href != null) && (t.href != "")) {
      ajax.Start(AJAXPopUpBehaviour.action, t);
    } // if
  }, // onmouseover


  show: function (value, obj) {
    /// <summary>Now show the popUp information.</summary>
    if (obj != null) {
      var pos = AJAXPopUpBehaviour._absolutePosition(obj);
      AJAXPopUpBehaviour._popobj = AJAXPopUpBehaviour._create(value, pos);
    } // if
  }, // show


  _onmouseout: function (evt) {
    /// <summary>Event handler attached to the onmouseout event on document level.
    /// Hide the popUp information.</summary>
    if (AJAXPopUpBehaviour._popobj != null) {
      AJAXPopUpBehaviour._popobj.style.display = "none";
    } // if
  }, // onmouseout

  // --- private methods ---


  action: {
    /// <summary>Ajax action that is used to retrieve the information of the popUp.</summary>
    delay: 300,
    queueMultiple: false,
    prepare: function (obj) { return (obj.href); },
    call: "proxies.ServerInfo.GetDetails",
    finish: "AJAXPopUpBehaviour.show",
    onException: proxies.alertException
  },

  _create: function (text, pos) {
    /// <summary>Create or reuse the popUp element. Move it next to the given position and
    /// add a new text.</summary>
    var oPop = document.getElementById("VEPopUp");
    var oPoint;

    if (oPop == null) {
      // create a popUp object for the first time
      oPop = document.createElement("div");
      oPop.id = "VEPopUp";
      oPop.style.position = "absolute";
      oPop.style.width = "240px";
      var htm = "<img src='/controls/images/point.gif' style='position:relative;display:block;top:1px;z-index:1'>";
      htm += "<div class='VEBoxShadow' style='position:relative;border: solid #203050 1px; padding: 4px; background-color:#eaeef7;'></div></div>";
      oPop.innerHTML = htm;
      document.body.appendChild(oPop);
    } // if

    // adjust tht position and choos the right point gif file
    oPoint = oPop.firstChild; // point gif file

    oPop.style.display = "block";
    oPop.style.top = (pos.top + pos.height) + "px";
    var leftPos = pos.left + pos.width / 2 - 40;

    if (leftPos < 8) {
      oPop.style.left = "8px";
      oPoint.src = String(oPoint.src).replace(/pointleft.gif/i, "point.gif");
      oPoint.style.marginLeft = "12px";
    } else if (leftPos + 240 < document.documentElement.clientWidth) {
      oPop.style.left = leftPos + "px";
      oPoint.src = String(oPoint.src).replace(/pointleft.gif/i, "point.gif");
      oPoint.style.marginLeft = "40px";
    } else {
      leftPos = pos.left + pos.width / 2 - 200;
      if (leftPos + 250 > document.documentElement.clientWidth)
        leftPos = document.documentElement.clientWidth - 250;
      oPop.style.left = leftPos + "px";
      oPoint.src = String(oPoint.src).replace(/point.gif/i, "pointleft.gif");
      oPoint.style.marginLeft = "180px";
    } // if

    // add the text
    oPop.firstChild.nextSibling.innerHTML = text;
    return (oPop);
  }, // _create


  _absolutePosition: function (obj) {
    /// <summary>Calculate the absolute position of a html object.</summary>
    var pos = null;

    if (obj != null) {
      pos = new Object();
      pos.top = obj.offsetTop;
      pos.left = obj.offsetLeft;
      pos.width = obj.offsetWidth;
      pos.height = obj.offsetHeight;

      obj = obj.offsetParent;
      while (obj != null) {
        pos.top += obj.offsetTop;
        pos.left += obj.offsetLeft;
        obj = obj.offsetParent;
      } // while
    }
    return (pos);
  } // _absolutePosition
}; // AJAXPopUpBehaviour

This page is part of the http://www.mathertel.de/ web site.

For updates and discussions see http://ajaxaspects.blogspot.com/.