Web development: Zobrazování vlastní nápovědy u libovolného elementu

Zobrazit obsah

Zobrazit komentáře | Zobrazit pouze komentáře

Dalším trikem, který by se někdy mohl hodit, je zobrazování vlastní nápovědy u libovolného (X)HTML elemetu v dokumentu. Bude se jednat o skrytý div, který se budu objevovat přibližně v místě kurzoru, pokud bude kurzor nad elementem, v opačném případě nebude nápověda vidět. Pro implementaci bude použito (X)HTML, JavaScript a CSS. Odkaz na ukázkový kód, jedná se o text generovaný Lorem ipsum generátorem.

elementHints-page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  <title>KAVALEK.NET - Hints</title>
  <script type="text/javascript" src="elementHints.js">
  </script>
  <script type="text/javascript">
    // Create all hints accord element id
    function initHints() {
      createHint("malesuada", "<b>MALESUADA<\/b><br />To je podivné slovo...");
    }
  </script>
  <style type="text/css">
    DIV.hint {
      font-size: 10pt;
      color: #000000;
      font-style: normal;
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      text-decoration: none;
      position: absolute;
      border: 2px solid #C0C0C0;
      padding: 5px;
      display: none;
      background-color: #1177DD;
    }
    
    SPAN.hint {
      border-bottom: 1px dotted #1177DD;
      font-weight: bold;
      cursor: help;
    }
  </style>
 </head>
<body onload="initHints();">
 <p>
  Lorem ipsum dolor sit amet consectetuer Curabitur Integer ac sed orci. 
  Vitae mauris ac sed eget faucibus enim vitae interdum nibh vitae. Pretium 
  consectetuer nulla vitae faucibus quis In amet eget Vestibulum ipsum. 
  Ipsum congue porttitor lacus Cras tellus neque urna Lorem Nulla quis. 
  Enim ut non <span id="malesuada">malesuada</span> at massa congue molestie tellus.
 </p>  
 </body>
</html>

elementHints.js

// Different functionality in MSIE 7 - Thanks to Miro [smreko AT szm DOT com] 
function documentElementAccordingMsie() {
  return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}

function showHint(browserEvent, pageElement) {
  // Mouse coordinates
  var coordX = 0;
  var coordY = 0;
  // Check the browser - based on MSIE or other
  // The only MSIE is different
  msieElement = documentElementAccordingMsie();
  if(navigator.appName.indexOf("Microsoft Internet Explorer") >= 0) {
    coordX = msieElement.scrollLeft + event.clientX;
    coordY = msieElement.scrollTop  + event.clientY
  } else {
    coordX = browserEvent.pageX;
    coordY = browserEvent.pageY;
  }
  // Show hint
  document.getElementById(pageElement).style.display = "inline";
  document.getElementById(pageElement).style.top  = eval(coordY + 15) + "px";
  document.getElementById(pageElement).style.left = eval(coordX + 15) + "px";
}

function hideHint(pageElement) {
  document.getElementById(pageElement).style.display = "none";
}

function createHint(elementId, hintText) {
  var hintId = elementId + "_hint";
  // Add simple DIV element with defined ID and HINT
  var hint = document.createElement("div");
  hint.id = hintId;
  hint.className = "hint";
  hint.innerHTML = hintText;
  document.body.appendChild(hint);
  // Modify element for showing hint
  var element = document.getElementById(elementId);
  // Check the browser - based on MSIE or other
  // The only MSIE is different
  if(navigator.appName.indexOf("Microsoft Internet Explorer") >= 0) {
    element.onmousemove = function() {showHint(event, hintId);};
    element.onmouseout  = function() {hideHint(hintId);};
  } else {
    element.setAttribute("onmousemove", "showHint(event, '" + hintId + "');");
    element.setAttribute("onmouseout", "hideHint('" + hintId + "');");
  }
  element.className = "hint";
}

Jak to funguje

Nápovědné hinty definujeme pomocí funkce createHint(), jak je vidět na výpisu kódu. Máme-li takovýchto hintů na stránce více, je vhodné hinty definovat např. ve funkci initHints() a tu pak volat při načtení dokumentu, tedy událost unload, čímž nám jedna funkce načte všechny hinty. Funkce createHint() vyžaduje dva parametry, jako první paramatr je očekáváno id elementu, ke kterému bude hint přidružen, druhým parametrem je nápovědný text, který může obsahovat (X)HTML tagy. Pozor však na pravidla JavaScriptu, aby byl dodržen validní dokument, např. "escapování" lomítek (viz <\/b> v souboru elementHints-page.html). Tento kód je pouze ukázkový, jak lze tuto funkci implementovat, a neřeší případné kontroly, jako např. kontrolu existence elementu s daným id pro právě vytvářený hint.

MSIE

Pro MSIE je jako obvykle nutné udělat několik kliček. První je použita ve funkci showHint(), která řeší odlišné zpracování pozice myši v MSIE a jiných prohlížečích. Druhá klička je ve funkci createHint(), protože MSIE korektně nepodporuje (viz JavaScript setAttribute vs IE) parametr setAttribute, pokud mu chceme předat funkci. V této fázi by měla být funkce bezproblémová - testováno v Microsoft Internet Explorer, Mozilla Firefox a Opera (Windows) a v Mozilla Firefox a Konqueror (Linux).

MSIE 7

Pro MSIE 7 je nutné zakličkovat ještě více. Chybu objevil a sám opravil Miro (e-mail v kódu), za což mu upřimně děkuji. Zdrojový kód byl rozšířen o funkci documentElementAccordingMsie(), která je dále použita ve funkci showHint(). Použité názvy funkcí a jejich zápis se přímo neshoduje s kódem od Mira, podstata je však zachována. Šlo mi o to, abych dodržel stejný programátorský styl v celém skriptu. Takže ještě jednou díky.

27.09.2007 23:10:11 - 1491x

Hodnocení (212)