The JavaScript Source: Miscellaneous : Nice Titles

General

Display the title of a link in an easy-to-read box. Quick response time and very easy to implement!

Just hover over the links below to see it work.

Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.

Notes

Created by: Stuart Langridge
Web Site: http://www.kryogenix.org/
Posted: January 5, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: nicetitle.js

/* Copyright (c) 1997-2006 Stuart Langridge | MIT licence
http://www.kryogenix.org/

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */

// ================================================

addEvent(window, "load", makeNiceTitles);

var XHTMLNS = "http://www.w3.org/1999/xhtml";
var CURRENT_NICE_TITLE;
var browser = new Browser();

function makeNiceTitles() {
  if (!document.createElement || !document.getElementsByTagName) return;
  // add namespace methods to HTML DOM; this makes the script work in both
  // HTML and XML contexts.
  if(!document.createElementNS) {
    document.createElementNS = function(ns,elt) {
      return document.createElement(elt);
    }
  }

  if( !document.links ) {
    document.links = document.getElementsByTagName("a");
  }
  for (var ti=0;ti<document.links.length;ti++) {
    var lnk = document.links[ti];
    if (lnk.title) {
      lnk.setAttribute("nicetitle",lnk.title);
      lnk.removeAttribute("title");
      addEvent(lnk,"mouseover",showNiceTitle);
      addEvent(lnk,"mouseout",hideNiceTitle);
      addEvent(lnk,"focus",showNiceTitle);
      addEvent(lnk,"blur",hideNiceTitle);
    }
  }
  var instags = document.getElementsByTagName("ins");
  if (instags) {
    for (var ti=0;ti<instags.length;ti++) {
      var instag = instags[ti];
      if (instag.dateTime) {
        var strDate = instag.dateTime;
        var dtIns = new Date(strDate.substring(0,4),parseInt(strDate.substring(4,6)-1),strDate.substring(6,8),strDate.substring(9,11),strDate.substring(11,13),strDate.substring(13,15));
        instag.setAttribute("nicetitle","Added on "+dtIns.toString());
        addEvent(instag,"mouseover",showNiceTitle);
        addEvent(instag,"mouseout",hideNiceTitle);
        addEvent(instag,"focus",showNiceTitle);
        addEvent(instag,"blur",hideNiceTitle);
      }
    }
  }
}

function findPosition( oLink ) {
  if( oLink.offsetParent ) {
    for( var posX = 0, posY = 0; oLink.offsetParent; oLink = oLink.offsetParent ) {
      posX += oLink.offsetLeft;
      posY += oLink.offsetTop;
    }
    return [ posX, posY ];
  } else {
    return [ oLink.x, oLink.y ];
  }
}

function showNiceTitle(e) {
  if (CURRENT_NICE_TITLE) hideNiceTitle(CURRENT_NICE_TITLE);
  if (!document.getElementsByTagName) return;
  if (window.event && window.event.srcElement) {
    lnk = window.event.srcElement
  } else if (e && e.target) {
    lnk = e.target
  }
  if (!lnk) return;
  if (lnk.nodeType == 3) {
    // lnk is a textnode -- ascend parents until we hit a link
    lnk = getParent(lnk,"A");
  }
  if (!lnk) return;
  nicetitle = lnk.getAttribute("nicetitle");
  
  var d = document.createElementNS(XHTMLNS,"div");
  d.className = "nicetitle";
  tnt = document.createTextNode(nicetitle);
  pat = document.createElementNS(XHTMLNS,"p");
  pat.className = "titletext";
  pat.appendChild(tnt);
  d.appendChild(pat);
  if (lnk.href) {
    tnd = document.createTextNode(lnk.href);
    pad = document.createElementNS(XHTMLNS,"p");
    pad.className = "destination";
    pad.appendChild(tnd);
    d.appendChild(pad);
  }
  
  STD_WIDTH = 300;
  if (lnk.href) {
    h = lnk.href.length;
  } else { h = nicetitle.length; }
  if (nicetitle.length) {
    t = nicetitle.length;
  }
  h_pixels = h*6; t_pixels = t*10;
  
  if (h_pixels > STD_WIDTH) {
    w = h_pixels;
  } else if ((STD_WIDTH>t_pixels) && (t_pixels>h_pixels)) {
    w = t_pixels;
  } else if ((STD_WIDTH>t_pixels) && (h_pixels>t_pixels)) {
    w = h_pixels;
  } else {
    w = STD_WIDTH;
  }
      
  d.style.width = w + 'px';    

  /*
  mx = lnk.offsetLeft;
  my = lnk.offsetTop;
  */
  mpos = findPosition(lnk);
  mx = mpos[0];
  my = mpos[1];
  //xy = getMousePosition(e);
  //mx = xy[0]; my = xy[1];
  
  d.style.left = (mx+15) + 'px';
  d.style.top = (my+35) + 'px';
  if (window.innerWidth && ((mx+w) > window.innerWidth)) {
    d.style.left = (window.innerWidth - w - 25) + "px";
  }
  if (document.body.scrollWidth && ((mx+w) > document.body.scrollWidth)) {
    d.style.left = (document.body.scrollWidth - w - 25) + "px";
  }
  
  document.getElementsByTagName("body")[0].appendChild(d);
  
  CURRENT_NICE_TITLE = d;
}

function hideNiceTitle(e) {
  if (!document.getElementsByTagName) return;
  if (CURRENT_NICE_TITLE) {
    document.getElementsByTagName("body")[0].removeChild(CURRENT_NICE_TITLE);
    CURRENT_NICE_TITLE = null;
  }
}

// Add an eventListener to browsers that can do it somehow.
// Originally by the amazing Scott Andrew.
function addEvent(obj, evType, fn){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, false);
    return true;
  } else if (obj.attachEvent){
	var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
	return false;
  }
}

function getParent(el, pTagName) {
	 if (el == null) return null;
	 else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())	// Gecko bug, supposed to be uppercase
		  return el;
 	else
		  return getParent(el.parentNode, pTagName);
}

function getMousePosition(event) {
  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
  return [x,y];
}

// Determine browser and version.

function Browser() {
// blah, browser detect, but mouse-position stuff doesn't work any other way
  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

div.nicetitle {
    position: absolute;
    padding: 4px;
    top: 0px;
    left: 0px;
    color: white;
    font-size: 13px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    width: 25em;
    font-weight: bold;
    background: url(ntbg.png);
    /* Mozilla proprietary */
    -moz-border-radius: 12px;
}
div.nicetitle p {
    margin: 0; padding: 0 3px;
}
div.nicetitle p.destination {
    font-size: 9px;
    text-align: left;
    padding-top: 3px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="nicetitle.js"></script>

Body

Paste this code into the BODY section of your HTML document


<p>
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. <a href="http://www.metoo.com/" title="This is a nice one.">Li nov lingua franca va esser</a> plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un <a href="http://nowhere.com/" title="Here's another one ...">skeptic Cambridge amico</a> dit me que Occidental es.</p>

<ul>
  <li><a href="http://www.javascript.internet.com/" title="This is an excellent Web site for JavaScripts">JavaScript Source</a></li>
  <li><a href="http://www.webreference.com/" title="Learn Web development and design here!">WebReference.com</a></li>
</ul>

Other

Download the images using the URL below:

Download the images here

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

8. From: Felicia Forbes
width control of box
11/25/2008 18:06:56

9. From: Lee (Admin)
01/16/2009 10:39:41

6. From: Lee
02/13/2007 14:25:22

5. From: Ed
02/12/2007 08:23:47

4. From: melanie
01/18/2007 01:34:57

3. From: Sam Slim
01/15/2007 22:32:23

2. From: chris
01/13/2007 04:25:05

1. From: vikas kumar
01/06/2007 00:59:29

7. From: Sitework6
removing urls
07/20/2008 22:28:08

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

8. From: Felicia Forbeswidth control of box11/25/2008 18:06:56

9. From: Lee (Admin)01/16/2009 10:39:41

6. From: Lee02/13/2007 14:25:22

5. From: Ed02/12/2007 08:23:47

4. From: melanie01/18/2007 01:34:57

3. From: Sam Slim01/15/2007 22:32:23

2. From: chris01/13/2007 04:25:05

1. From: vikas kumar01/06/2007 00:59:29

7. From: Sitework6removing urls07/20/2008 22:28:08

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

8. From: Felicia Forbes
width control of box
11/25/2008 18:06:56

9. From: Lee (Admin)
01/16/2009 10:39:41

6. From: Lee
02/13/2007 14:25:22

5. From: Ed
02/12/2007 08:23:47

4. From: melanie
01/18/2007 01:34:57

3. From: Sam Slim
01/15/2007 22:32:23

2. From: chris
01/13/2007 04:25:05

1. From: vikas kumar
01/06/2007 00:59:29

7. From: Sitework6
removing urls
07/20/2008 22:28:08