Page 1 of 5 123 ... LastLast
Results 1 to 10 of 41

Thread: Auto size for: Fixed Tooltip script and Show Hint script needed

  1. #1
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Auto size for: Fixed Tooltip script and Show Hint script needed

    Hi,

    I believe this request is for both scripts, cause they work in a similar way.

    You can set a default width for the Tooltip;
    Code:
    width: 150px; (default)
    but you can also set the width manualy for each tip like;
    Code:
    , this, event, '200px'
    Well I am lazy and I dont want to set all tooltips manualy, this can be solved by leaving it empty like;
    Code:
     , this, event, ''
    The default width will be used now.

    Well this causes a problem. Cause if I have a tip like: "Hello" The tooltip width will be 150 px, leaving a wide empty space after "Hello".

    Is it possible to autosize this? Using the default width as a max width. If a shorter tip is given, the tooltip will be smaller...

    Think this is possible, but I don't know how to accomplish this. Any ideas?

    Thx,
    Null

  2. #2
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Any ideas?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, for the Fixed ToolTip script, set this in the configuration:

    Code:
    var tipwidth='' //default tooltip width
    Find this line:

    Code:
    dropmenuobj.widthobj.width=tipwidth
    Change it to:

    Code:
    dropmenuobj.widthobj.width=''
    Use this syntax for a tip:

    Code:
    onMouseover="fixedtooltip('Comprehensive JavaScript tutorials and over 400+ <b>free</b> scripts.', this, event)"
    However, any line breaks that you want within the tip will need to be created using the <br> tag or some other HTML convention, <br> is simplest:

    Code:
    onMouseover="fixedtooltip('Comprehensive JavaScript tutorials<br> and over 400+ <b>free</b> scripts.', this, event)"
    - John
    ________________________

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

  4. #4
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thx for the reply, but this is not what I need. This takes away the whole default witdh and I still need to manualy fix all tooltips using brakes.

    I want to autosize the tooltip. Using the default width as a max width. If a shorter tip is given, like "Hello" the tooltip will be smaller. Fitting the word.

    If a lot of text is given, the tooltip will stretch to the size needed, but not wider as the default px given. If the default width is reached it will fill the tooltip as it would do normaly (so whithout giving manual brakes)

    Hope it is more clear now of what i mean...

    Thx
    Null

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's a bit more complex, but only because, unlike other browsers, IE does not recognize the max-width property. I used that for all other browsers and some fudge for IE, notice that the style has an added selector and that in the script configuration, tipwidth is now set as just a number, no units or quotes, other script changes too numerous to mention:

    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>Fixed ToolTip script, Max Width - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    #fixedtipdiv, #fix{
    position:absolute;
    padding: 2px;
    border:1px solid black;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    </style>
    </head>
    <body>
    <script type="text/javascript">
    
    /***********************************************
    * Fixed ToolTip script-  Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    * Modified here to use max tooltip width by
    * jscheuer1 in http://www.dynamicdrive.com/forums
    ***********************************************/
    		
    var tipwidth=150 //max tooltip width
    var tipbgcolor='lightyellow'  //tooltip bgcolor
    var disappeardelay=250  //tooltip disappear speed onMouseout (in miliseconds)
    var vertical_offset="0px" //horizontal offset of tooltip from anchor link
    var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link
    
    /////No further editting needed
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    if (ie4||ns6)
    document.write('<div id="fixedtipdiv" style="visibility:hidden;max-width:'+tipwidth+'px;background-color:'+tipbgcolor+'" ></div>')
    if (ie4&&fixedtipdiv.filters){
    document.write("<style type='text/css'>\n\
    #fixedtipdiv {width:expression(Math.min(fix.offsetWidth, "+tipwidth+")+'px');}\n\
    <\/style>")
    document.write('<span id="fix" style="border:none;padding:0;margin:0;visibility:hidden;position:absolute;z-index:-1;"></span>')
    }
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function showhide(obj, e, visible, hidden){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500+'px'
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    }
    return edgeoffset
    }
    
    function fixedtooltip(menucontents, obj, e){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidetip()
    dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv
    dropmenuobj.innerHTML=menucontents
    if (dropmenuobj.filters)
    fix.innerHTML=menucontents
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden")
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    }
    }
    
    function hidetip(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    
    function delayhidetip(){
    if (ie4||ns6)
    delayhide=setTimeout("hidetip()",disappeardelay)
    }
    
    function clearhidetip(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    </script>
    
    <a href="http://www.javascriptkit.com" onMouseover="fixedtooltip('Comprehensive JavaScript tutorials and over 400+ <b>free</b> scripts.', this, event)" onMouseout="delayhidetip()">JavaScript Kit</a> |
    
    <a href="http://www.codingforums.com" onMouseover="fixedtooltip('I\'m here.', this, event)" onMouseout="delayhidetip()">CodingForums.com</a>
    </body>
    </html>
    - John
    ________________________

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

  6. #6
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    Great it works, but how to use this in the show hint script?

    Thx

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The two scripts are so similar that, you can take my mod of the Fixed Tooltip script and add this function to the end of it:

    Code:
    function showhint(hint, obj, e){
    fixedtooltip(hint, obj, e);
    obj.onmouseout=delayhidetip;
    obj.onclick=function(){return false;};
    }
    Add the:

    .hintanchor{ /*CSS for link that shows hint onmouseover*/
    font-weight: bold;
    color: navy;
    margin: 3px 8px;
    }

    class to the style section, and configure these options:

    Code:
    var vertical_offset="0px" //horizontal offset of tooltip from anchor link
    var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link
    to your liking, and you have a max width version of the hint script.

    Notes: The #fixedtipdiv, #fix selectors will now configure the hint's appearance. Syntax for invoking the hint is now:

    HTML Code:
    <a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event)">[?]</a>
    with no width specified.
    - John
    ________________________

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

  8. #8
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    Thx for your time of trying to help me out. The bad news: the scripts aren't as similar as I thought. The adapted code doesnt work. So I give you the code I have now of the Show hint script. Perhaps you see in an instance: Hey here must come this and this in order to make it work
    Code:
    /***********************************************
    * Show Hint script- &#169; Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    		
    var horizontal_offset="9px" //horizontal offset of hint box from anchor link
    
    /////No further editting needed
    
    var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
    if (whichedge=="rightedge"){
    var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
    }
    else{
    var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    }
    return edgeoffset
    }
    
    function showhint(menucontents, obj, e, tipwidth){
    if ((ie||ns6) && document.getElementById("hintbox")){
    dropmenuobj=document.getElementById("hintbox")
    dropmenuobj.innerHTML=menucontents
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (tipwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=tipwidth
    }
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    dropmenuobj.style.visibility="visible"
    obj.onmouseout=hidetip
    }
    }
    
    function hidetip(e){
    dropmenuobj.style.visibility="hidden"
    dropmenuobj.style.left="-500px"
    }
    
    function createhintbox(){
    var divblock=document.createElement("div")
    divblock.setAttribute("id", "hintbox")
    document.body.appendChild(divblock)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", createhintbox, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createhintbox)
    else if (document.getElementById)
    window.onload=createhintbox
    Hope you can help me out.

    ps. IE7 final proberbly is going to support max/min-witdh, if it does, what part of code can I leave out then? (so in the feature I can clean up the script and don't have to ask this again )

    Many thx

    Null
    Last edited by Null; 03-02-2006 at 12:02 PM.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Worked here.
    - John
    ________________________

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

  10. #10
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    Worked here.
    Okay I am doing something wrong then.

    I even tried finding the differences between the sctipt you gave and the one I gave above, trying to make it work.

    Sorry to say, it didn't work. Need it more for the Show HInt. For the fixed tooltip it works great.

    Null

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
  •