Results 1 to 10 of 10

Thread: Image w/ description tooltip - Description hidden

  1. #1
    Join Date
    Jan 2010
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image w/ description tooltip - Description hidden

    1) Script Title: Image w/ description tooltip

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agetooltip.htm

    3) Describe problem:

    The script seems to work in notebook good, but for some reason the description is sliding under the post on my test site : http://ebtptest.blogspot.com/

    How can I make it so that it is above where it can be seen?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,188 Times in 3,152 Posts
    Blog Entries
    12

    Default

    From the demo page (emphasis added):

    Step 1: Insert the below script into the <head> section of your page:
    They're not kidding about that part. The javascript script part (not the HTML markup part (Step 2 from the demo page), that part should remain where it is) of this cannot go where you have it. If you have trouble putting it in the head, it can come as either the very first thing after the opening <body> tag or the very last thing before the closing </body> tag.

    In any case, after moving the script, you are probably going to want to restore the default offsets here or even increase them over the defaults (you currently have them set at 1, which will be too little once the script is moved):

    Code:
    ///////////////////////  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;
    Note: Be sure to clear the browser's cache after changes and before viewing the result.
    - John
    ________________________

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

  3. #3
    Join Date
    Jan 2010
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I changed the width back to default and attempted to place the script before the closing of the body tag, but I get the following message"

    We were unable to save your template

    Please correct the error below, and submit your template again.

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The element type "script" must be terminated by the matching end-tag "".

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,188 Times in 3,152 Posts
    Blog Entries
    12

    Default

    Some scripts just cannot be run on some sites for reasons like this. But, however you put it in the template before, when it was the script and markup together, you should be able to find a way to do that in two separate insertions. Make sure the script is being inserted with its opening <script type="text/javascript"> and closing </script> tags. Try putting it in the head first. If that doesn't work/can't be done, right after the opening <body> tag second. Before the closing </body> tag would be my last choice. Also make sure that the script portion we are talking about (Step 1 from the demo page) is the only thing you are trying to insert in these places, and that it is only being inserted once to the page. The markup portion (as I already mentioned) should remain where it is, but without the script part. They are two separate components of this effect.

    I wish I could be more specific than that. But as I have no blog site like what you have, this is the best I can advise at the moment.

    Feel free to return here with further questions. I or others will answer them to the best of our ability.
    - John
    ________________________

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

  5. #5
    Join Date
    Jan 2010
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I got it to work, but is there a way to make the description to be closer to the cursor and the image I am scrolling over?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,188 Times in 3,152 Posts
    Blog Entries
    12

    Default

    Unless you haven't uploaded the solution to your main page there yet, no you haven't, at least not in IE, which was the only browser that had this problem to begin with. Not only that, some change(s) that you did make now leaves large gaps in the layout.

    I've discovered another workaround for this. Here's a demo:

    http://home.comcast.net/~jscheuer1/side/romance_h.htm

    First you should revert to what you had at the start of this thread. Second, remove the highlighted form your stylesheet:

    Code:
    /* -----   MIDDLE ADS   ----- Blogger template design by Ourblogtemplates.com */
    #middleads-wrapper {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 980px;
    position: relative;
    text-align: center;
    }
    Finally, adjust the offX setting in the script to the negative value shown:

    Code:
    ///////////////////////  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= 175;
    var offX= -175;	// how far from mouse to show tip
    var offY= 1; 
    var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
    var tipFontSize= "8pt";
    // set default text color and backg . . .
    - John
    ________________________

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

  7. #7
    Join Date
    Jan 2010
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I think I got the code to work in my trial page :http://ebtptest.blogspot.com/
    At least it looks to be working on two seperate computers. That being said, when I go to copy and paste it to the original blog : http://escapebetweenthepages.blogspot.com
    I have a couple of problems. 1st , if I try to place it where it is located on my test blogger, I am reverted back to the previous issues. I went to the html and looked for the position: relative; but I don't seem to have it. Is there another thing I can do to make it work?

    I should note, that whenI placed the code above the blog it actually works, although, I am not sure that is relevant.

    On an off topic note, I am not sure how you can do this day in and day out. I would be pulling my hair out. I really do appreciate you helping. Thank you.

  8. #8
    Join Date
    Jan 2010
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I don't think it is a problem with your coding...I think it is the images being seperated by some invisible divider. I am not sure where it is coming from. But when I took out the script and just left the images, I noticed it. Is there a way you can tell me how to remove that and then I can place the code in and see it works like on the test blog?

    Test Blog:http://ebtptest.blogspot.com/
    Actual Blog: http://escapebetweenthepages.blogspot.com

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,188 Times in 3,152 Posts
    Blog Entries
    12

    Default

    Add these styles (highlighted) at the end of your on page styles:

    Code:
     . . . F CSS STYLING ************ */
    /** Page structure tweaks for layout editor wireframe */
    body#layout #main,
    body#layout #sidebar {
    padding: 0;
    }
    
    -->
    
    .marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}#marq_kill_marg_bord{border:none!important;margin:0!important;}
    #outer-wrapper, #blog-wrapper, #linkbar {position: static;}
    #linkbar a.toggleopacity {padding: 0!important;}
    That will work for most browsers. For IE we may need to add a bit more.
    - John
    ________________________

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

  10. #10
    Join Date
    Jan 2010
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You are a Coding God amoung men. Thank you.

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
  •