PDA

View Full Version : Cool DHTML tooltip strange behaviour



fatluke
05-14-2007, 11:04 PM
1) Script Title: Cool DHTML SCRIPT

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

3) Describe problem:

Problematic page can be view here:http://caws.eyetdesigns.com/site/index.htm
If you hover over the small div with the text "TIP OF THE SEASON" under the "Moon Phase" section.

You will see when the tooltip appears and disappers, the page height seems to increase by the height of the tooltip DIV. This becomes very annoying in Firefox and causes the page to "Shake" when the scroll bars appear and disappear. (If you hover close to the edge of the div, you will really see the flicking). I hope you can understand what I mean. It is somewhat confusing to explain. I have not modified the script. Just added a little style to what was already there.

Note: I have tried removing the other scripts from the page, so there is no conflicts between scripts.


Another problem is that the tooltip appears behind the moonphase section. I have did some research and I suspect I need to do the iFrame Shim trick? I am experimenting with it as we speak. IF anyone has this already in place or could point me to the code/scripts, that would be appreciated.


Thanks in advance to anyone who can help.

I would also like to know if it is possible to put the script into a .js file? I have tried but cannot get it to work. (I have no problem displaying the script comments on the html page and the on the .js file. I am not trying to hide the credits to dynamic drive, just want to keep my page as clean as possible (still have some css to move out).

fatluke
05-15-2007, 01:37 AM
Solved the shaky problem by adding

tipobj.style.height=''
tipobj.style.top="-1000px"

to the hideddrivetip function.


function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
tipobj.style.height=''
tipobj.style.top="-1000px"
}
}


now looking into the iframe shim problem.

fatluke
05-15-2007, 01:52 AM
tried one shim solution from here http://www.dynamicdrive.com/forums/showpost.php?p=36004&postcount=5

Did not slove my problem though. I guess that shim does not work to cover flash objects.

Any other suggestions?

jscheuer1
05-15-2007, 05:02 AM
Follow the detailed information at:

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14201

Or, if this short version (good in most cases) fixes it, so much the better! Add in this language to your object/embed tag:

Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

Add the following attribute to the EMBED tag:

wmode="transparent"

If you are using script to generate the tags (as is frequently done to avoid the 'click to activate' feature in some browsers), the wmode transparent must be passed to the script. This is easily accomplished but, varies depending upon the sort of script one uses. Some scripts do it automatically.

fatluke
05-16-2007, 11:42 PM
jscheuer1


THanks...

Figured that one out from my own research though.

I was checking back to see if anyone has answered about moving the code into a .js file. I can't get my page to validate, and would like to move the code to a file, but I can't figure out how to initialize it. I am not to experienced with javascript and I can't figure it out.

Any suggestions would be greatly accepted

jscheuer1
05-17-2007, 05:02 AM
With a script of this nature, it might just be easier to to escape the closing slashes of all tags written by it. For example, if you have something like:


document.write('<div>whatever</div>')

Change that to:


document.write('<div>whatever<\/div>')

Do the same thing for closing tags anywhere within the script and, that will usually validate it for you. However, to answer your question, perhaps:


Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:


<script src="some.js" type="text/javascript"></script>

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:


<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
<script>
<!--and
//-->
</script>and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:


http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:


<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters without which the script won't function.

Oh, and you would initialize it exactly the same way as it currently is initialized. Why would that need to change?

fatluke
05-17-2007, 03:29 PM
Thanks for the help......

By simply moving the script into a js file it would not work.

I found that by changing


var tipobj = document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

to:


var tipobj;

and placing


tipobj =document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

into the function positiontip(e), it works fine now. Not really too sure what the problem was, as I am still kinda new to javascript, but it works.

And I am aware of placing the credits in the script call on the page.. And Ihave done so. and also left the credits in the script itself.


Thanks again for the suggestions.. and a Huge thanks to the great script.....

Luke