Login   Register  
PHP Classes
elePHPant
Icontem

File: includes/tooltips.js

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Stefan Gabos  >  PHP JavaScript Tooltip Generator Class  >  includes/tooltips.js  >  Download  
File: includes/tooltips.js
Role: Auxiliary data
Content type: text/plain
Description: javascript file
Class: PHP JavaScript Tooltip Generator Class
Open tooltips over HTML page elements
Author: By
Last change:
Date: 8 years ago
Size: 18,703 bytes
 

Contents

Class file image Download
/**
 *  JavaScript Cross-Browser Tooltips
 *
 *  copyright (c) Stefan Gabos
 *
 *  This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.
 *  To view a copy of this license, visit {@link http://creativecommons.org/licenses/by-nc-nd/2.5/} or send a letter to
 *  Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.
 *
 *  For more resources visit {@link http://stefangabos.blogspot.com}
 */

/**
 *  The speed with which a tooltip should fade in.
 *  Can be any value between 1 and 100
 */
var JavaScriptTooltips_fadeInSpeed;

/**
 *  The speed with which a tooltip should fade out.
 *  Can be any value between 1 and 100
 */
var JavaScriptTooltips_fadeOutSpeed;

/**
 *  How long (in milliseconds) should the script wait onmouseout,
 *  before starting to fade out a tooltip
 */
var JavaScriptTooltips_fadeOutDelay;

/**
 *  How long (in milliseconds) should the script wait onmouseover,
 *  before starting to fade in a tooltip
 */
var JavaScriptTooltips_fadeInDelay;

/**
 *  A percentual value representing the maximum opacity a tooltip can get
 */
var JavaScriptTooltips_maximumOpacity;

/**
 *  How far (in pixels), horizontally, should the tooltip be positioned relatively to the mouse cursor
 */
var JavaScriptTooltips_offsetX;

/**
 *  How far (in pixels), vertically, should the tooltip be positioned relatively to the mouse cursor
 */
var JavaScriptTooltips_offsetY;

/**
 *  Array that keeps track of created tooltips
 *
 *  @access private
 */
function dataArray(opacity, timer, context, onmouseoverFunction)
{

    this.opacity = opacity;
    this.timer = timer;
    this.context = context;
    this.onmouseoverFunction = onmouseoverFunction;

}

var tooltipData = new Array();


/**
 *  Displays a tooltip
 *
 *  No onmouseout required. The scripts takes care of fading the tooltip out once you mouseout.
 *
 *  @param  context     context     This MUST always be the <b>this</b> keyword
 *
 *  @param  content     content     The content to be displayed in the tooltip
 *
 *                                  If you are using this script as a stand-alone script (not with it's related PHP class
 *                                  don't forget to delete the "unescape" word in the first row of the function)
 *
 *  @param  event       event       This MUST always be <b>event</b>
 *
 *  @param  string      tooltipID   This is reserved for the script. Do not specify it yourself!!!
 *
 *  @return void
 */
function show(context, content, event, tooltipID)
{

    // unescape the content sent by the related PHP class
    // DELETE THE "unescape" WORD IF YOU'RE USING THIS SCRIPT AS A STAND-ALONE SCRIPT (NOT WITH IT'S RELATED PHP CLASS!)
    content = unescape(content);

    // if tooltipID parameter is not specified
    // means that it wasn't created yet
    if (tooltipID == undefined) {
    
        // generate a 12 characters long random name for use as new tooltip id
        var tooltipID = '';
        var letters = 'abcdefghijklmnopqrstuvwxyz';
        var numbers = '0123456789';
        for (i=0; i<12; i++) {
            tooltipID += Math.floor(Math.random() * 2) == 0 ? letters.charAt(Math.floor(Math.random() * 26)) : numbers.charAt(Math.floor(Math.random() * 10));
        }

        // create a new entry in the tooltipData array
        tooltipData[tooltipID] = new dataArray(0, false, context, context.onmouseover);

        // if browser is Internet Explorer -> note that because Opera identifies itself as Opera we make one more additional check
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1) {
        
            // we create an IFRAME element which will be always positioned behind the tooltip
            // to cover SELECT elements - which, by default in Internet Explorer, are always
            // above all elements in a page
            var newIFrame = document.createElement("iframe");

            // set the IFRAME's default properties
            newIFrame.id = tooltipID + "_iframe";
            newIFrame.src = "about:blank";
            newIFrame.frameBorder = "0";
            newIFrame.scrolling = "no";
            newIFrame.style.position = "absolute";
            newIFrame.style.display = "none";

            // and actually add the element to the body of the document
            document.body.appendChild(newIFrame);
                
        }
        
        // create a new DIV element as a container for the tooltip
        var newTooltip = document.createElement("div");

        // set the DIV's default properties
        newTooltip.id = tooltipID;
        newTooltip.style.position = "absolute";
        newTooltip.style.display = "none";
        newTooltip.style.width = "auto";
        newTooltip.style.height = "auto";

        // and actually add the element to the body of the document
        document.body.appendChild(newTooltip);

        // set the onmouseout event for the caller element to hide the tooltip
        // this is how we handle "automatically" the fade out of the tooltip :)
        context.onmouseout = function() { hide(tooltipID); };
        
        // set the onmouseover function for the caller element
        // this time adding the tooltipID as fourth parameter so if we move out of the element and quicly over again,
        // the script to know not to create a new tooltip but instead to continue fading in the one already created
        context.onmouseover = function() { show(context, content, event, tooltipID); };

        // set some events for the tooltip so that the tooltip will not fade out accidentally
        document.getElementById(tooltipID).onmouseover = function () { show(context, content, event, tooltipID); };
        document.getElementById(tooltipID).onmouseout = function () { hide(tooltipID); };
        document.getElementById(tooltipID).onclick = function () { hide(tooltipID); };

        // if browser is Internet Explorer -> note that because Opera identifies itself as Opera we make one more additional check
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1) {

            // set some events for the IFRAME element so that the tooltip will not fade out accidentally
            document.getElementById(tooltipID + "_iframe").onmouseover = function () { show(context, content, event, tooltipID); };
            document.getElementById(tooltipID + "_iframe").onmouseout = function () { hide(tooltipID); };
            document.getElementById(tooltipID + "_iframe").onclick = function () { hide(tooltipID); };

        }

        // add content to tooltip
        document.getElementById(tooltipID).innerHTML = content;

        // get mouse coordinates
        var posx = 0;
        var posy = 0;

        if (event.pageX || event.pageY) {

        	posx = event.pageX;
        	posy = event.pageY;

        } else if (event.clientX || event.clientY) {

        	posx = event.clientX + document.body.scrollLeft;
        	posy = event.clientY + document.body.scrollTop;

        }

        // move tooltip position relative to mouse cursor by specified offsetX and offsetY
        with (document.getElementById(tooltipID).style) {

            left = posx + JavaScriptTooltips_offsetX;
            top  = posy + JavaScriptTooltips_offsetY;

        }

    // if tooltipID is specified
    } else {
    
        // and only if display is 'none'
        if (document.getElementById(tooltipID).style.display == 'none') {
        
            // get mouse coordinates
            var posx = 0;
            var posy = 0;

            if (event.pageX || event.pageY) {

            	posx = event.pageX;
            	posy = event.pageY;

            } else if (event.clientX || event.clientY) {

            	posx = event.clientX + document.body.scrollLeft;
            	posy = event.clientY + document.body.scrollTop;

            }

            // move tooltip position relative to mouse cursor by specified offsetX and offsetY
            with (document.getElementById(tooltipID).style) {

                left = posx + JavaScriptTooltips_offsetX;
                top  = posy + JavaScriptTooltips_offsetY;

            }
        }
        
    }
    
    // start fading in the tooltip after waiting for JavaScriptTooltips_fadeInDelay milliseconds
    tooltipData[tooltipID].timer = setTimeout(fadeIn(tooltipID), JavaScriptTooltips_fadeInDelay);

}

/**
 *  Hides a tooltip
 *
 *  @access private
 */
function hide(tooltipID)
{

    // if tooltip has reached the maximum allowed opacity
    if (tooltipData[tooltipID].opacity >= JavaScriptTooltips_maximumOpacity) {
    
        // start fading it out - after waiting for JavaScriptTooltips_fadeOutDelay milliseconds
        tooltipData[tooltipID].timer = setTimeout(fadeOut(tooltipID), JavaScriptTooltips_fadeOutDelay);
        
    // if tooltip has not yet reached the maximum allowed opacity
    } else {
    
        // start fading it out right away
        tooltipData[tooltipID].timer = setTimeout(fadeOut(tooltipID), 1);
        
    }
    
}

/**
 *  Enabler function for the _fadeIn method
 *  in order to pass context to the setTimeout function
 *
 *  It is called by the 'show()' function
 *
 *  @access private
 */
function fadeIn(tooltipID)
{

    // clear any previously set timer for this tooltip
    clearTimeout(tooltipData[tooltipID].timer);

    // return prepared string
    return '_fadeIn(\'' + tooltipID + '\')';
    
}

/**
 *  Fades in a tooltip
 *
 *  @access private
 */
function _fadeIn(tooltipID)
{

    // function will be called recursively until the tooltip reaches the maximum allowed opacity
    if (tooltipData[tooltipID].opacity <= JavaScriptTooltips_maximumOpacity) {

        // if browser is Internet Explorer -> note that because Opera identifies itself as Opera we make one more additional check
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1) {

            // set the opacity level for the IFRAME element, too
            setOpacity(tooltipID + "_iframe", tooltipData[tooltipID].opacity);
            
        }
        
        // set the opacity level for the tooltip
        setOpacity(tooltipID, tooltipData[tooltipID].opacity);

        // increase the opacity with the specified amount
        tooltipData[tooltipID].opacity += JavaScriptTooltips_fadeInSpeed;

        // recursively call itself
        tooltipData[tooltipID].timer = setTimeout(fadeIn(tooltipID), 1);

    // if tooltip has reached the maximum allowed opacity
    } else {
    
        // if the browser is Internet Explorer
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1) {
        
            // set the opacity level for the IFRAME element, too
            setOpacity(tooltipID + "_iframe", JavaScriptTooltips_maximumOpacity);
            
        }
        
        // set the opacity level for the tooltip
        setOpacity(tooltipID, JavaScriptTooltips_maximumOpacity);
    
        // clear the timeout
        clearTimeout(tooltipData[tooltipID].timer);
    
    }

    // display the tooltip
    document.getElementById(tooltipID).style.display = 'block';
    
    // we decrease every tooltip's z-index -> this is a hack for Opera
    for (var i in tooltipData) {
    
        document.getElementById(i).style.zIndex -= 1;

    }
    
    // and make the current one have the highest z-index
    document.getElementById(tooltipID).style.zIndex = 9999;

    // we strip "px" from the left and top position of the tooltip
    leftPos = document.getElementById(tooltipID).style.left.replace(/px/g, '');
    topPos = document.getElementById(tooltipID).style.top.replace(/px/g, '');
    
    // get the width and height of the tooltip
    width = document.getElementById(tooltipID).offsetWidth;
    height = document.getElementById(tooltipID).offsetHeight;

    // cross-browser detection of browser's window width and height
    // this code is from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
    // and is written by Mark Wilton-Jones
    if (typeof( window.innerWidth ) == 'number') {
        //Non-IE
        screenWidth = window.innerWidth;
        screenHeight = window.innerHeight;
    } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        screenWidth = document.documentElement.clientWidth;
        screenHeight = document.documentElement.clientHeight;
    } else if(document.body && ( document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        screenWidth = document.body.clientWidth;
        screenHeight = document.body.clientHeight;
    }

    // cross-browser detection of browser's scroll values
    // this code is from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
    // and is written by Mark Wilton-Jones
    if (typeof(window.pageYOffset) == 'number') {
        //Netscape compliant
        scrollY = window.pageYOffset;
        scrollX = window.pageXOffset;
    } else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        //IE6 standards compliant mode
        scrollY = document.documentElement.scrollTop;
        scrollX = document.documentElement.scrollLeft;
    } else {
        //DOM compliant
        scrollY = document.body.scrollTop;
        scrollX = document.body.scrollLeft;
    }
    
    // adjust the tooltip's position so that it is in the visible part of the browser's window
    
    if (eval(leftPos) < eval(scrollX)) {
    
        // add "px" for Firefox compatibility
        document.getElementById(tooltipID).style.left = scrollX + "px";
        
    }
    
    if (eval(topPos) < eval(scrollY)) {
    
        // add "px" for Firefox compatibility
        document.getElementById(tooltipID).style.top = scrollY + "px";
        
    }

    if (eval(leftPos) + eval(width) > eval(screenWidth) + eval(scrollX)) {
        document.getElementById(tooltipID).style.left = eval(screenWidth + scrollX - width) + "px";
    }

    if (eval(topPos) + eval(height) > eval(screenHeight) + eval(scrollY)) {
        document.getElementById(tooltipID).style.top = eval(screenHeight + scrollY - height) + "px";
    }

    // if browser is Internet Explorer -> note that because Opera identifies itself as Opera we make one more additional check
    if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1 && document.getElementById(tooltipID + "_iframe").style.display != 'block') {

        // move the IFRAME behind the tooltip, set it to the same size and show it
        with (document.getElementById(tooltipID + "_iframe").style) {

            left = document.getElementById(tooltipID).style.left;
            top = document.getElementById(tooltipID).style.top;
            width = document.getElementById(tooltipID).offsetWidth;
            height = document.getElementById(tooltipID).offsetHeight;
            display = 'block';

        }
        
    }
    
}

/**
 *  Enabler function for the _fadeOut method
 *  in order to pass context to the setTimeout function
 *
 *  It is called by the 'hide()' function
 *
 *  @access private
 */
function fadeOut(tooltipID)
{

    // clear any previously set timer for this tooltip
    clearTimeout(tooltipData[tooltipID].timer);
    
    // return prepared string
    return '_fadeOut(\'' + tooltipID + '\')';
}

/**
 *  Fades out a tooltip
 *
 *  @access private
 */
function _fadeOut(tooltipID)
{

    // function will be called recursively until the tooltip becomes 0% opaque
    if (tooltipData[tooltipID].opacity >= 0) {

        // if the browser is Internet Explorer
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1) {

            // set the opacity level for the IFRAME element, too
            setOpacity(tooltipID + "_iframe", tooltipData[tooltipID].opacity);

        }

        // set the opacity level for the tooltip
        setOpacity(tooltipID, tooltipData[tooltipID].opacity);

        // decrease the opacity with the specified amount
        tooltipData[tooltipID].opacity -= JavaScriptTooltips_fadeOutSpeed;

        // recursively call itself
        tooltipData[tooltipID].timer = setTimeout(fadeOut(tooltipID), 1);

    // if tooltip becomes 0% opaque (100% transparent)
    } else {

        // clear the timeout
        clearTimeout(tooltipData[tooltipID].timer);
        
        // hide the tooltip
        document.getElementById(tooltipID).style.display = 'none';

        // if the browser is Internet Explorer
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1) {

            // also hide the IFRAME element
            document.getElementById(tooltipID + "_iframe").style.display = "none";
            
        }

    }
    
}

/**
 *  Sets opacity
 *
 *  @param  integer     value   a value between 0-100 indicating the opacity of the layer
 *                              0 is fully transparent, 100 is fully opaque
 *
 *  @return void
 *
 *  @access private
 */
function setOpacity(tooltipID, value)
{

    // if browser is Konqueror
    if (navigator.vendor == "KDE") {

        // set opacity this way
        document.getElementById(tooltipID).style.KHTMLOpacity = value / 100;

    // if browser is a Netscape clone
    } else if (navigator.appName == "Netscape") {

        // set opacity this way
        document.getElementById(tooltipID).style.MozOpacity = value / 100;

    // if browser is Internet Explorer
    } else if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Opera") == -1) {

        // set opacity this way
        document.getElementById(tooltipID).style.filter = "alpha(opacity=" + value + ")";

    // anything else
    } else {

        // set opacity this way
        document.getElementById(tooltipID).style.opacity = value / 100;

    }

}