Results 1 to 5 of 5

Thread: Need Help with Textual tooltip II

  1. #1
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default Need Help with Textual tooltip II

    1) Script Title: Textual tooltip II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htm

    3) Describe problem: Currently, the script fades to #ffffff(white) onmouseout. I would like to possibly fade to transparent or invisible on mouseout. Can anyone help?


    Thanks!
    Last edited by Snookerman; 04-23-2009 at 05:32 PM. Reason: added “Resolved” prefix

  2. #2
    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 script fades to the color set in the configuration:

    Code:
    FadingText('fade1', 10,"FFFFFF");
    Set this to the color of the background that you want the text to fade into.

    If you are fading into an image or an unknown color, this script (without a fairly major rewrite) is not for you.

    Fading via opacity may be a better option. However, in IE 7 and recent Opera versions, this will distort the text. I have had some success in fading in an image or color over the text though. This looks the same to the user, without the distortion. It would depend to a degree upon your page's overall layout and upon where and when on it you want this effect to occur, as to how best to go about it:

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  3. #3
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Here is the link to the page:

    http://www.geocities.com/bigalo1/tooltiptest


    Description: Click on the "Click here" link inside Title 1 portlet accordian. You will see the tooltip show to the right of "Title 1" when you mouseout, it fades out. But when you callapse "Title 1" the header changes to a lighter blue and you still see the tooltip in that darker color of the expanded header. I would like it to completely go away or if possible fade transparent.

  4. #4
    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

    Sometimes a simpler solution is best. Try adding this rule to your stylesheet as shown:

    Code:
     . . .
    .opendiv{ /*header in open state*/
    background: #D3DCEE;
    font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#2A3E53; font-weight:normal;
    }
    
    .closeddiv{  /*header in closed state*/
    color: #6688A4;
    font-size:11px; font-weight:normal; font-family:Arial, Helvetica, sans-serif; text-decoration:none;
    }
    
    .closeddiv span * {
    color:#EAEFF9!important;
    }
    
    .divcontent1 {padding:2px 5px; border-col . . .
    I tested this out locally in Opera, FF and IE with good results. The key is in turning the text (color property) of all the span in question's children to the background color of the parent division, when the parent division has the .closeddiv (signifying that it is collapsed and has its lighter bg color) class applied to it (below is just a color coded illustration of the elements involved, no code change is required there):

    Code:
    <div class="maindiv1" title="">Title 1
    <span style="width:300px; margin-left:20px;">
    <script language="JavaScript1.2">//Tooltip Definition area
    if (document.layers){
    document.write('<ilayer name="nscontainer" width="100%" height="18">')
    document.write('<layer name="fade1" width="100%" height="18">')
    document.write('</layer></ilayer>')
    }
    else
    document.write('<span ID="fade1"></span>')
    </script>
    </span>
    </div>
    - John
    ________________________

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

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    bigalo (03-18-2008)

  6. #5
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks jscheuer1! I guess I was looking a bit deeper than I had to. That solution was so much simpler! I've applied the change and it works great!!!

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
  •