Image w/ description tooltip - Description hidden

**Lady Rogue** · 01-23-2010, 03:54 PM

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?

**jscheuer1** · 01-23-2010, 05:41 PM

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.

**Lady Rogue** · 01-23-2010, 06:37 PM

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 "".

**jscheuer1** · 01-24-2010, 01:06 AM

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.

**Lady Rogue** · 01-24-2010, 07:50 AM

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?

**jscheuer1** · 01-24-2010, 04:10 PM

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

**Lady Rogue** · 01-25-2010, 06:13 AM

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.

**Lady Rogue** · 01-25-2010, 03:27 PM

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

**jscheuer1** · 01-25-2010, 05:11 PM

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.

**Lady Rogue** · 01-25-2010, 05:39 PM

You are a Coding God amoung men. Thank you.

Thread: Image w/ description tooltip - Description hidden

Thread Tools

Search Thread

Image w/ description tooltip - Description hidden

Bookmarks

Bookmarks

Posting Permissions