Help - Search - Members - Calendar
Full Version: Birth Month change BG of tooltip
HTMLHelp Forums > Programming > Client-side Scripting
alongside
Sep 26 2008, 06:46 PM
I am attempting to tweak the following code to have it automaticly change the BG of a persons tooltip when it is their birthday month.

CODE
<script type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or
     put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE   ////////////////////
// settings for tooltip
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;    
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 270;
var offX= 20;    // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "10pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip
messages[0] = new Array('4mos.jpg','Me at 4 months old.<br>Birthday: 9/23',"#FFFFFF");
messages[20] = new Array('missingpic.jpg','Here is a duck on a light blue background.',"#FFFFFF");
messages[21] = new Array('missingpic.jpg','Here is a duck on a light blue background.',"#FFFFFF");

////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
    var theImgs = new Array();
    for (var i=0; i<messages.length; i++) {
      theImgs[i] = new Image();
        theImgs[i].src = messages[i][0];
  }
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
//  initTip    - initialization for tooltip.
//        Global variables for tooltip.
//        Set styles
//        Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
    if (nodyn) return;
    tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
    tipcss = tooltip.style;
    if (ie4||ie5||ns5) {    // ns4 would lose all this on rewrites
        tipcss.width = tipWidth+"px";
        tipcss.fontFamily = tipFontFamily;
        tipcss.fontSize = tipFontSize;
        tipcss.color = tipFontColor;
        tipcss.backgroundColor = tipBgColor;
        tipcss.borderColor = tipBorderColor;
        tipcss.borderWidth = tipBorderWidth+"px";
        tipcss.padding = tipPadding+"px";
        tipcss.borderStyle = tipBorderStyle;
    }
    if (tooltip&&tipFollowMouse) {
        document.onmousemove = trackMouse;
    }
}

window.onload = initTip;

/////////////////////////////////////////////////
//  doTooltip function
//            Assembles content for tooltip and writes
//            it to tipDiv
/////////////////////////////////////////////////
var t1,t2;    // for setTimeouts
var tipOn = false;    // check if over tooltip link
function doTooltip(evt,num) {
    if (!tooltip) return;
    if (t1) clearTimeout(t1);    if (t2) clearTimeout(t2);
    tipOn = true;
    // set colors if included in messages array
    if (messages[num][2])    var curBgColor = messages[num][2];
    else curBgColor = tipBgColor;
    if (messages[num][3])    var curFontColor = messages[num][3];
    else curFontColor = tipFontColor;
    if (ie4||ie5||ns5) {
        var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
        tipcss.backgroundColor = curBgColor;
         tooltip.innerHTML = tip;
    }
    if (!tipFollowMouse) positionTip(evt);
    else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
    standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
//  positionTip function
//        If tipFollowMouse set false, so trackMouse function
//        not being used, get position of mouseover event.
//        Calculations use mouseover event position,
//        offset amounts and tooltip width to position
//        tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
    if (!tipFollowMouse) {
        standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
        mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
        mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    }
    // tooltip width and height
    var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
    var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
    // check mouse position against tip and window dimensions
    // and position the tooltip
    if ((mouseX+offX+tpWd)>winWd)
        tipcss.left = mouseX-(tpWd+offX)+"px";
    else tipcss.left = mouseX+offX+"px";
    if ((mouseY+offY+tpHt)>winHt)
        tipcss.top = winHt-(tpHt+offY)+"px";
    else tipcss.top = mouseY+offY+"px";
    if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
    if (!tooltip) return;
    t2=setTimeout("tipcss.visibility='hidden'",100);
    tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>


I am a newbie at javascript but have attempted the following:

For the currMonth:
CODE
var today=new Date();
var currMonth=today.getMonth()+1;


For birthMonth:
CODE
if (birthMonth == currMonth)
            {
             tooltip.style.tipBgColor = '#ff69b4';
            }
        else     {
             tooltip.style.tipBgColor = '#eae3c6';
            }


Any help with this would be appreciated...
Brian Chandler
Sep 26 2008, 11:26 PM
I can't see immediately - how does your bit of javascript find out when the person's birthday is?

It all seems heavy-handed use of javascript for stuff that isn't really dynamic at all. If the user has to (e.g.) type in their birthday month in order to see a particular colour, I don't think most people will bother. If there is actually some server-side processing going on, then just write the appropriate background colour on the server.
alongside
Sep 27 2008, 07:18 AM
QUOTE(Brian Chandler @ Sep 26 2008, 11:26 PM) *

I can't see immediately - how does your bit of javascript find out when the person's birthday is?

It all seems heavy-handed use of javascript for stuff that isn't really dynamic at all. If the user has to (e.g.) type in their birthday month in order to see a particular colour, I don't think most people will bother. If there is actually some server-side processing going on, then just write the appropriate background colour on the server.


Sorry about not being more clear I have already entered in the persons name, picture and birth day and month. Below is the part of the code where all that information is added so it will appear on the tooltip.

CODE
// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip

messages[0] = new Array('4mos.jpg','Me at 4 months old.<br>Birthday: 9/23',"#FFFFFF");


I didn't add all of that as it has everyones names so I added just that one line.
Christian J
Sep 27 2008, 10:42 AM
CODE
tooltip.style.tipBgColor = '#ff69b4';

Without loking too closely it seems "tipBgColor" is variable holding the color value. If so you probably should write

CODE
tooltip.tipBgColor = '#ff69b4';

(assuming the part of the script where the variable is used will be run again).

Another way (that may or may not work) is

CODE
tooltip.style.background = '#ff69b4';

(where "background" is a style property and not a variable).

alongside
Sep 28 2008, 12:15 PM
QUOTE(Christian J @ Sep 27 2008, 10:42 AM) *

CODE
tooltip.style.tipBgColor = '#ff69b4';

Without loking too closely it seems "tipBgColor" is variable holding the color value. If so you probably should write

CODE
tooltip.tipBgColor = '#ff69b4';

(assuming the part of the script where the variable is used will be run again).

Another way (that may or may not work) is

CODE
tooltip.style.background = '#ff69b4';

(where "background" is a style property and not a variable).

ok in the following code that someone created for me but who due to me not thanking them soon enough will not assist in getting it to work correctly. Their coding does address my idea of having part of the tooltip change background when it is a persons birth month but now there is an issue with the tooltip appearing on the page correctly. In the original code the tooltip lines up correctly within a few paces to the right of the persons name but in the edited code it goes to far up to the top.
CODE
<script type="text/javascript">
var tipFollowMouse= true;    

    var origWidth, origHeight;
    var messages = new Array();
    messages[0] = new Array("4mos.jpg","Me at 4 months old.<br>Birthday: 9/23");
messages[1] = new Array("their.jpg","Persons Name <br>Birthday: 10/22");    
messages[2] = new Array("their.jpg","Persons Name <br>Birthday: 1/13");
messages[3] = new Array('their.jpg','Persons Name <br>Birthday: 3/25',"#FFFFFF");

if (document.images) {
    var theImgs = new Array();
    for (var i=0; i<messages.length; i++) {
      theImgs[i] = new Image();
        theImgs[i].src = messages[i][0];
  }
}

// ************** DO NOT EDIT BELOW THIS LINE ****************
    var currMonth = new Date().getMonth()+1;
    var midWindowWidth = 0;
    var midWindowHeight = 0;
    var msgWidth = 0;
    var msgHeight = 0;
    var nContainer = "";    
    var IE = false;
    var offX= 20;    // how far from mouse to show tip
var offY= 12;

    if (navigator.appName == 'Microsoft Internet Explorer'){IE = true}

    function stayHome(m){    
        
        if (IE)
            {
             var currX = event.clientX;
             var currY = event.clientY;
            }
        else    {
             var currX = m.pageX;
             var currY = m.pageY;
            }
        if (document.documentElement)
            {
             var sL = document.documentElement.scrollLeft;    
             var sT = document.documentElement.scrollTop;
            }
        else     {
             var sL = document.body.scrollLeft;    
             var sT = document.body.scrollTop;    
            }
        if (currX > midWindowWidth)
            {            
             if (IE){nContainer.style.left = Number(currX - msgWidth - 10 + sL) + 'px'}
             else {nContainer.style.left = Number(currX - msgWidth - 10) + 'px'}
            }
        else    {
             if (IE){nContainer.style.left = Number(currX + 10 + sL) + 'px'}
             else {nContainer.style.left = Number(currX + 10) + 'px'}
            }        
        if (IE && currY >= midWindowHeight)
            {
             nContainer.style.top = Number(currY + sT - msgHeight) + 'px';            
            }
        if (IE && currY < midWindowHeight)
            {
             nContainer.style.top = Number(currY + sT) + 'px'
            }
        if (!IE && currY - sT >= midWindowHeight)    
            {
             nContainer.style.top = Number(currY - msgHeight) + 'px';
            }    
        if (!IE && currY - sT < midWindowHeight)
            {
             nContainer.style.top = currY + 'px';
            }
    }    

    function hideImage(){

        while (nContainer.lastChild)
            {nContainer.removeChild(nContainer.lastChild)}
        document.getElementById('isFloat').style.display = 'none';
    }

    function showImage(isImg,currCaption,currItem){

        document.getElementById('isFloat').style.display = '';
        var nIMG  = document.createElement('img');
        nContainer.appendChild(nIMG);
        nIMG.setAttribute('src',isImg);
        nIMG.setAttribute('origWidth',origWidth);
        nIMG.setAttribute('origHeight',origHeight);
        var nCaption = document.createElement('div');
        var birthMonth = currCaption.substring(currCaption.lastIndexOf('/'),currCaption.lastIndexOf('/')-2);
        if (birthMonth == currMonth)
            {
             nCaption.style.backgroundColor = '#ff69b4';
            }
        else     {
             nCaption.style.backgroundColor = '#ffffff';
            }
        nCaption.style.textAlign = "center";        
          nCaption.style.padding = '10px';
          nCaption.style.color = '#000000';
          nCaption.style.fontFamily = 'arial';
        nCaption.style.fontSize = '12pt';
        nContainer.appendChild(nCaption);    
        nCaption.innerHTML = currCaption;
        currItem.onmouseout = hideImage;
        msgWidth = nContainer.clientWidth;
        msgHeight = nContainer.clientHeight;
    }

    function getMidWindow(){        
        
        if (document.documentElement)
            {
             midWindowWidth = Math.round(document.documentElement.clientWidth/2);
             midWindowHeight = Math.round(document.documentElement.clientHeight/2);                         
            }
        else     {
             midWindowWidth = Math.round(document.body.clientWidth/2);
             midWindowHeight = Math.round(document.body.clientHeight/2);                                          
            }        
    }

    function initFloatImg(){

        var nBody = document.getElementsByTagName('body')[0];
        var nDiv = document.createElement('div');
        nDiv.id = "isFloat";
        nDiv.style.position = "absolute";
          var jumpAbove= false;
        nDiv.style.top = "0px";
        nDiv.style.left = "0px";
        nDiv.style.border = "4px ridge #000080";
        nDiv.style.padding = "10px";
        nDiv.style.backgroundColor = "#ffffff"
        nBody.appendChild(nDiv);
        nContainer = document.getElementById('isFloat');
        hideImage();
        if (IE){document.onmousemove = stayHome;}
        else {addEventListener("mousemove",stayHome,false);}
        getMidWindow();
        var nMembers = document.getElementsByName('deptMember');
        for (i=0; i<nMembers.length; i++)
            {            
             nMembers[i].parentNode.onmouseover = function(){showImage(messages[this.id][0],messages[this.id][1],this)}
            }
    }
    
    onload = initFloatImg;
    onresize = getMidWindow;
function positionTip(evt) {
    if (tooltip&&tipFollowMouse) {
        document.onmousemove = trackMouse;
    }

    // tooltip width and height
    var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
    var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
    // check mouse position against tip and window dimensions
    // and position the tooltip
    
    if ((mouseX+offX+tpWd)>winWd)
        tipcss.left = mouseX-(tpWd+offX)+"px";
    else tipcss.left = mouseX+offX+"px";
    if ((mouseY+offY+tpHt)>winHt)
        tipcss.top = winHt-(tpHt+offY)+"px";
    else tipcss.top = mouseY+offY+"px";
    if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='hidden'",100);
}
document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')


Below is a portion of the section I have placed the code on the page. (Note: I did take out any identifible information on deptMembers.

CODE
<div id="main">
<table border=0 width="75%">
<td width=880 height=600 bgcolor=#FFF5EE style='border: 1.0pt solid #9d6e34;vertical-align:top;text-align:center;background: #FAEBD7 '>
      <br/><center><h2>Contact List</h2></center><table border="0" width="95%" cellpadding="3">
  <p><tr><td width=40%  colspan="3" align="center">For a picture of an individual move your mouse over their name and their image will appear.</td>
</tr>
    <tr>
    <td width="30%" align="left"><div id="1">Manager: <a href="#" input type="hidden" name="deptMember" class="email">Persons Name</div></a></td>
    <td width="25%" align="right"><a href="mailto:personsname@theiremail.com" class="email">personsname@theiremail.com</a></td>
    <td width="25%"> phone</td>
  </tr>
  <tr>
    <td width="33%" align="left"><div id="2">Supervisor: <a href="#" input type="hidden" name="deptMember" class="email">Persons Name</a></div>
    </td>
    <td width="25%" align="right"><a href="mailto:personsname@theiremail.com" class="email">personsname@theiremail.com</a></td>
    <td width="25%"> phone</td>
  </tr>
<tr>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.