Page 1 of 8 123 ... LastLast
Results 1 to 10 of 75

Thread: reducing script size with a reference

  1. #1
    Join Date
    May 2006
    Posts
    98
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default reducing script size with a reference

    Image w/description tooltip by sharon paine

    http://www.dynamicdrive.com/dynamici...agetooltip.htm

    I am actually using sharon paines most recent version of this tooltip.

    I have many tips on a page, and want to reduce page size.
    Does anyone know if it is possible to put all the

    onmouseover="doTooltip(event,t1)" onmouseout="hideTip()">

    code in one place and reference each individual tip. It seems a lot of code to repeat everytime???
    I have the tooltip .js file as an external file.
    Any ideas would be greatly appreciated.
    Thanks in advance
    Richard

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    You can, but you've got to have something that all those elements have in common. For example, a common class name, a common name, or if you want all of that type of tag to have the tooltip.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    May 2006
    Posts
    98
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Dear Twey,
    Thanks for the reply. The hrefs are not in common and the events are different, so I suppose its not possible. I was trying to reduce the amount of onmouseover and out. I was imagining you could have a single letter reference like in css to the mouse over and out to reduce the text memory size.


    <a href="http://www.thinkprint.com" onmouseover="doTooltip(event,t1)" onmouseout="hideTip()">text</a>&nbsp;
    <a href="http://www.mysite.com" onmouseover="doTooltip(event,t6)" onmouseout="hideTip()">text</a>&nbsp;
    <a href="http://www.sydney.com" onmouseover="doTooltip(event,t2)" onmouseout="hideTip()">text</a>

    Thanks again,
    Richard

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    You can't use that script like you have here:

    Code:
    <a href="http://www.thinkprint.com" onmouseover="doTooltip(event,t1)" onmouseout="hideTip()">text</a>&nbsp;
    <a href="http://www.mysite.com" onmouseover="doTooltip(event,t6)" onmouseout="hideTip()">text</a>&nbsp;
    <a href="http://www.sydney.com" onmouseover="doTooltip(event,t2)" onmouseout="hideTip()">text</a>
    At least not with the way the script is written, those need to be numbers only, not letter/number combos.

    This could still be worked out, but it would be better if you could do something like so:

    Code:
    <a href="http://www.thinkprint.com" id="tip1">text</a>&nbsp;
    <a href="http://www.mysite.com" id="tip6">text</a>&nbsp;
    <a href="http://www.sydney.com" id="tip2">text</a>
    Then there would be a way to get everything set up onload with a single function.

    Alternatively, you could just get rid of the onmouseout attribute by assigning it during the onmouseover event phase of the script.

    Either of these approaches require the script to be modified. With the first method, you couldn't have any other links (not using tips) with an id that starts with 'tip', or it would make things too complicated.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    Here is a working demo of my first idea:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>Image w/ description tooltip - Tag Initialization - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    
    /*
    Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
    Copyright 2002 by Sharon Paine
    Visit http://www.dynamicdrive.com for this script
    Modified in http://www.dynamicdrive.com/forums by jscheuer1
    for Opera and for DTD compatibility + auto tag initialization based upon ID
    */
    
    /* IMPORTANT: Put script after tooltip div or 
    	 put tooltip div just before </BODY>. */
    
    var dom = (document.getElementById) ? true : false;
    var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom)||window.opera&&dom ? true: false;
    var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    var ns4 = (document.layers && !dom) ? true : false;
    var ie4 = (document.all && !dom) ? true : false;
    var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
    
    // resize fix for ns4
    var origWidth, origHeight;
    if (ns4) {
    	origWidth = window.innerWidth; origHeight = window.innerHeight;
    	window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
    }
    
    // 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= 160;
    var offX= 20;	// how far from mouse to show tip
    var offY= 12; 
    var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
    var tipFontSize= "8pt";
    // 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('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
    messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
    messages[2] = new Array('test.gif','Test description','black','white');
    
    ////////////////////  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 for all but ns4. 
    //		Set up mousemove capture if tipFollowMouse set true.
    ////////////////////////////////////////////////////////////
    var tooltip, tipcss;
    function initTip() {
    	if (nodyn) return;
    	tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
    	tipcss = (ns4)? document.tipDiv: 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) {
    		if (ns4) document.captureEvents(Event.MOUSEMOVE);
    		document.onmousemove = trackMouse;
    	}
    }
    
    
    /////////////////////////////////////////////////
    //  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(num, e) {
    	var e=e? e : window.event;
    	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 (ns4) {
    		var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>';
    		tooltip.write(tip);
    		tooltip.close();
    	} else 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(e);
    	else t1=setTimeout("tipcss.visibility='visible'",100);
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    var mouseX, mouseY;
    function trackMouse(evt) {
    	mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + iecompattest().scrollLeft;
    	mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + iecompattest().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) {
    		mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + iecompattest().scrollLeft;
    		mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + iecompattest().scrollTop;
    	}
    	// tooltip width and height
    	var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    	var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    	// document area in view (subtract scrollbar width for ns)
    	var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: iecompattest().clientWidth+iecompattest().scrollLeft;
    	var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: iecompattest().clientHeight+iecompattest().scrollTop;
    	// check mouse position against tip and window dimensions
    	// and position the tooltip 
    	if ((mouseX+offX+tpWd)>winWd) 
    		tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
    	else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
    	if ((mouseY+offY+tpHt)>winHt) 
    		tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
    	else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
    	if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
    }
    
    function hideTip() {
    	if (!tooltip) return;
    	t2=setTimeout("tipcss.visibility='hidden'",100);
    	tipOn = false;
    }
    onload=function(){
    initTip();
    for (var i_tem = 0; i_tem < document.links.length; i_tem++)
    if (document.links[i_tem].id&&document.links[i_tem].id.indexOf('tip')==0){
    document.links[i_tem].onmouseover=function(){doTooltip(parseInt(this.id.replace(/tip/,'')))}
    document.links[i_tem].onmouseout=hideTip;
    }
    }
    </script>
    </head>
    <body>
    <a href="#" id="tip0">Link 1</a><br>
    <a href="#" id="tip1">Link 2</a>
    <div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    May 2006
    Posts
    98
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Dear John, Thanks for the help. I think I will look into the assigning of onmouseout to save memory, prob easier.
    Thanks very much
    Richard

  7. #7
    Join Date
    May 2006
    Posts
    98
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Dear John, Just recieved your demo. That is amazing I set it up staightaway and it works perfectly
    http://www.richardrubbra.com/TESTING.htm
    basically eliminating all those mouseovers.

    I have however been using sharon paines latest version here

    http://www.dyn-web.com/dhtml/tooltips/tip-txt-img.html
    one with three external .js files.. event, tooltip and viewport.

    Is it possible to do the same magic to this one. I would happily pay whatever you charge. To go to this effort for free seems a bit much.
    Thanks very much for your time and energy.
    Richard

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    I'm not sure if I want to get involved with this project at this time. I want to consider the ethical implications and technically difficulty of the project further. Also, I would like to know if you are using the 'linkware' version or have purchased a license, and if you have purchased, at what level.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    May 2006
    Posts
    98
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Dear John, I do have a licence, I have the multi domain licence. I wrote to sharon asking if she knew how to do it but she said that although she thought it was theoretically possible she didnt have a way. I have been led to believe from her licencing prerequisites that one is allowed to alter the code to suit. I am sorry if I appeared to jump the gun. The changes you made to the original tooltip were great. I was just interested to know if it was possible- and you proved that it was - and also how much that might be to alter the later version. If after consideration you do feel that you can do it, I would be most grateful if you could give me a quote. Anyway I thank you again for the time you have spent.
    Thanks
    Richard

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    Turns out I already did most of the work on this one. At least for her free demo, this works:

    Code:
    <html>
    <head>
    <title>DHTML Tooltip</title>
    <style type="text/css">
    body { font-family: verdana, arial, helvetica, sans-serif;
      font-size: 14px; }
    h1 { font-size:18px }	
    a:link { color:#33c }	
    a:visited { color:#339 }	
    
    /* This is where you can customize the appearance of the tooltip */
    div#tipDiv {
      position:absolute; visibility:hidden; left:0; top:0; z-index:10000;
      background-color:#dee7f7; border:1px solid #336; 
      width:250px; padding:4px;
      color:#000; font-size:11px; line-height:1.2;
    }
    /* These are optional. They demonstrate how you can individually format tooltip content  */
    div.tp1 { font-size:12px; color:#336; font-style:italic }
    div.tp2 { font-weight:bolder; color:#337; padding-top:4px }
    </style>
    <script src="js/dw_event.js" type="text/javascript"></script>
    <script src="js/dw_viewport.js" type="text/javascript"></script>
    <script src="js/dw_tooltip.js" type="text/javascript"></script>
    <script type="text/javascript">
    /*************************************************************************
      This code is from Dynamic Web Coding at dyn-web.com
      Copyright 2003-5 by Sharon Paine 
      See Terms of Use at http://www.dyn-web.com/bus/terms.html
      regarding conditions under which you may use this code.
      This notice must be retained in the code as is!
    *************************************************************************/
    
    function doTooltip(e, msg) {
      if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
      Tooltip.show(e, msg);
    }
    
    function hideTip() {
      if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;
      Tooltip.hide();
    }
    	
    // variables for tooltip content 
    var tipRich = '<div class="tp1">This text is in a div with it\'s own class for different style specifications than the tooltip. </div>';
    var tipImg = '<div style="text-align:center"><img src="images/dot-com-btn.gif" width="176" height="30" alt="" border="0"></div>';
    var tipImgTxt = '<img src="images/sm-duck.gif" width="90" height="44" alt="" border="0"><div class="tp2">Images and text can go together in a tooltip.</div>';
    var tipTerms = "If you plan to use our code, please follow our terms. Thank you.";
    
    
    onload=function(){
    Tooltip.init();
    for (var i_tem = 0; i_tem < document.links.length; i_tem++)
    if (document.links[i_tem].id&&document.links[i_tem].id.indexOf('tip')==0){
    document.links[i_tem].onmouseover=new Function("e", "var e=e? e : window.event;doTooltip(e, "+document.links[i_tem].id+");");
    document.links[i_tem].onmouseout=hideTip;
    }
    }
    
    </script>
    </head>
    <body>
    
    <h1>Tooltip</h1>
    
    <p>The tooltip can contain 
    <a href="your.html" onmouseover="doTooltip(event,'Content for the tooltip can be placed in the link attribute or in a variable.')" onmouseout="hideTip()">plain text</a>, 
    <a href="some.html" id="tipRich">rich html</a>, 
    <a href="#" id="tipImg">images</a>, or 
    <a href="javascript: //" id="tipImgTxt">images and text</a>. 
    </p>
    
    <p><a href="http://www.dyn-web.com" onmouseover="doTooltip(event,'An image can have a tooltip too, of course.')" onmouseout="hideTip()"><img src="images/dot-com-btn.gif" width="176" height="30" alt="" border="0"></a></p>
    
    <p>Please read dyn-web's <a href="http://www.dyn-web.com/bus/terms.html" id="tipTerms">Terms of Use</a>.</p>
    
    <p><!-- link for free use -->
    <p>The Tooltip code used on this page is from <a id="dw_link" href="http://www.dyn-web.com">dyn-web.com</a></p>
    <script src="js/tooltip_inf.js" type="text/javascript"></script>
    <!-- end required link components --></p>
    
    </body>
    </html>
    Notes: Don't forget to remove the onload attribute from the body tag. If you prefer, this function:

    Code:
    onload=function(){
    Tooltip.init();
    for (var i_tem = 0; i_tem < document.links.length; i_tem++)
    if (document.links[i_tem].id&&document.links[i_tem].id.indexOf('tip')==0){
    document.links[i_tem].onmouseover=new Function("e", "var e=e? e : window.event;doTooltip(e, "+document.links[i_tem].id+");");
    document.links[i_tem].onmouseout=hideTip;
    }
    }
    Can go after everything else in the file dw_tooltip.js

    Very Important! all tip variables and id's used must begin with 'tip', as with my previous modification but, numbers are no longer required (see above example page's code for examples).
    Last edited by jscheuer1; 07-03-2006 at 03:50 AM. Reason: Improve assigned function
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •