Go Back   CodingForums.com > :: Client side development > JavaScript programming > Ajax and Design

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-22-2010, 06:53 PM   PM User | #1
randy270
New to the CF scene

 
Join Date: Jul 2010
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
randy270 is an unknown quantity at this point
Ajax Tooltip 1.2 issues

Well, I have little hope of a response given the level of activity here, but here goes...

I have this otherwise neat script installed in my web pages. However, it does two things that make it unacceptable.

1. If the page is within an iFrame (we have no choice at this point. We have to use an iFrame), the tooltips pop up outside of the frame and are therefore unreadable.

2. Sometimes the tooltips get stuck open and end up behind another tooltip, creating confusion for the visitor.

I can solve #1 by not allowing the tooltip to float around, but I can't solve 2. Is there a way to tune up this script so it's more responsive.

Please help. My only alternative to this is to go to Flash, and I hate Flash more than I hate iFrames.

Thanks.

Randy
randy270 is offline   Reply With Quote
Old 07-22-2010, 10:17 PM   PM User | #2
Rowsdower!
Senior Coder

 
Rowsdower!'s Avatar
 
Join Date: Oct 2008
Location: Some say it's everything.
Posts: 2,007
Thanks: 5
Thanked 395 Times in 388 Posts
Rowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura about
Well, you have to expect someone to ask... Why is it that you have to go with iframes?

Are the tooltips being generated from code in the iframe or the parent page? Are the parent page and the iframe on the same domain?

You can set a timer to close each tooltip. You would use setTimeout to create a timer for each tooltip when it is created. You would then need to create a function that checks to see if the tooltip 1) still exists, and 2) is no longer being hovered over -- if both are true, then kill the tooltip. Then set the timer to call that function on that tooltip in "x" seconds.

But we might not have to dig into the script if we can figure a better way to display your content in the first place. Iframes are almost never the answer.
__________________
The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
Seek and you shall find... basically:
validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
Rowsdower! is offline   Reply With Quote
Old 11-13-2011, 04:33 PM   PM User | #3
dankarlan
New to the CF scene

 
Join Date: Nov 2011
Posts: 2
Thanks: 1
Thanked 0 Times in 0 Posts
dankarlan is an unknown quantity at this point
Persistent tooltip

I have experienced the same problem, and I have determined it happens when the cursor moves off the hyperlinnk BEFORE the tootiip appears. It seems that in that case, the end of the mouseover event is lost, so the tooltip persists.

I can reproduce this behavior on the example page, http://www.javascriptkit.com/script/...xtooltip.shtml

Just move the cursor quickly over either the sample hyperlink or the box below it -- or both.

I would like to know if there is any way to reduce the chances of this happening. It can happen rather often if the user's Internet connection is slowed, for any reason.
dankarlan is offline   Reply With Quote
Old 11-14-2011, 04:11 PM   PM User | #4
Rowsdower!
Senior Coder

 
Rowsdower!'s Avatar
 
Join Date: Oct 2008
Location: Some say it's everything.
Posts: 2,007
Thanks: 5
Thanked 395 Times in 388 Posts
Rowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura aboutRowsdower! has a spectacular aura about
I think this link roughly explains the basic idea of my earlier response to this thread:

http://stackoverflow.com/questions/1...ment-in-jquery

That solution won't fit your exact needs without some adjustment. It is written for jquery (which I assume is OK for you if you're using the script from javascriptkit that you linked to) but the principles are the same even for javascript not based on a framework.

You just use a named setTimeout (in other words, you assign it as a variable rather than simply starting the setTimeout - see below this post for a clarification) and a mouseover event on the tooltip to destroy that setTimeout if we ever get our mouse over the tooltip before the setTimeout actually fires (which we would not have done in the quick-pass situations you are seeing a problem with). You just need to make sure your setTimeout variable has global scope (in other words, declare it - even without any value - outside of any functions so that it is accessible to all other page functions).

Does that make sense?

Code:
//Simply calling a setTimeout:
setTimeout('do_something',50);

//Setting a setTimeout call as a variable so we can access it later in order to cancel it:
var my_timeout = setTimeout('do_something',50);

//And then to actually cancel the named timeout you can do something like this:
clearTimeout(my_timeout);
You can brush up on setTimeout and clearTimeout use here, if it helps:
http://www.w3schools.com/jsref/met_win_cleartimeout.asp
__________________
The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
Seek and you shall find... basically:
validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
Rowsdower! is offline   Reply With Quote
Users who have thanked Rowsdower! for this post:
dankarlan (11-15-2011)
Old 11-16-2011, 11:37 PM   PM User | #5
dankarlan
New to the CF scene

 
Join Date: Nov 2011
Posts: 2
Thanks: 1
Thanked 0 Times in 0 Posts
dankarlan is an unknown quantity at this point
I thought I saw enough to make the additions myself, but apparently I'm simply too new to java to know how to do this on my own. For example: do I put the additional code in the ajaxtooltip.js, in the file jquery-1.2.2.pack, in the <script> portion of my home page, or somewhere else? If this is the only javascript in my site, do I need to provide for the cancellation with clearTimeout?

I would like to have several different links each with an associated tooltip (and different tooltip files opened and displayed at run time), but so only one displays at a time.

Is there any text I can consult that would fill in the pieces that I'm missing?

I can open ajaxtooltip.js with Notepad++, but when I try that with jquery-1.2.2.pack, everything is on one extremely long line. Is there another editor that can display that file in a more usable form -- if it turns out I need to modify that file?
dankarlan is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:27 PM.


Advertisement
Log in to turn off these ads.