Nice Titles

Stuart Langridge Jan 5, 2007

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

Leave a Response

(9 comments)

In the CSS portion, under "div.nicetitle", changing the width size should do it.

Lee Jan 16, 2009

Hi there[br /]This javascript is exactly what I wanted but I'm not having any luck reducing the width size of the background. My client would like the text to wrap around and have the box width shorter. I have tried doing this in the css and the javascript but to no avail. Can you please assist? Thanks very much.

Felicia Forbes Nov 25, 2008

To remove the urls and only show the title of the link in Nicetitles:[br /][br /]In the css file, add 'display:none;' to div.nicetitle p.destination[br /][br /]in js file change 'h_pixels = h*6; t_pixels = t*10;' to[br /]h_pixels = h*1; t_pixels = t*6;[br /][br /]This will shorten the length of the background image.

Sitework6 Jul 20, 2008

Ed,[p]You can have the entire script e-mailed to you, if you like. Just use the box below.

Lee Feb 13, 2007

I was wondering, is there a zip for this where everything can be in it

Ed Feb 12, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details