PDA

View Full Version : Cool DHTML Tooltip II, external files



damien_thiriet
07-01-2008, 02:28 PM
1) Script Title: Cool DHTML Tooltip II


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

3) Describe problem: Is it possible to use external files to make this script working ? I pasted the css (step 1) in my .css, then i created a cooldhtml.js file
with the step 2 (without the script lines), and wrote a

<script type="text/javascript" scr="cooldhtml.js">
</noscript>
I made a

<span onmouseover="ddrivetip('on y arrive', 300)";
onmouseout="hideddrivetip()">voievodie</span>
and nothing. I am using FF 2.0. and strict xhtml, and I would like to avoid pasting so many lines in every file...

allahverdi
07-01-2008, 02:34 PM
Can you post link to your site?

ddadmin
07-02-2008, 02:55 AM
Well, you shouldn't have any problems moving the script to an external .js file, and referencing that on your page. The key is to reference that file in the BODY of your page, not the HEAD. I've included tooltip.js below. Download that, and also, add the following reference to the BODY of your page:


<body>

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

/***********************************************
* Cool DHTML tooltip script II- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

damien_thiriet
07-02-2008, 09:40 AM
Unfortunately, my site is not yet on the web...:(

damien_thiriet
07-02-2008, 12:33 PM
Well, you shouldn't have any problems moving the script to an external .js file, and referencing that on your page. The key is to reference that file in the BODY of your page, not the HEAD. I've included tooltip.js below. Download that, and also, add the following reference to the BODY of your page:


<body>

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

/***********************************************
* Cool DHTML tooltip script II- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
I tried with this tooltip.js, but it doesn't work, even if I create a new page only following instructions of http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm.

I wrote this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<script></script>
<meta content="text/html; charset=UTF-8"
http-equiv="content-type" />
<title>test</title>
<meta content="damien thiriet" name="author" />
<style type="text/css">
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
</style>
</head>
<body style="direction: ltr;">
<script src="tooltip.js" type="text/javascript">
/***********************************************
* Cool DHTML tooltip script II- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<a href="voila.xhtml"
onmouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials', 300)"
onmouseout="hideddrivetip()">voila</a>
</body>
</html>

And it doesn't work :(. But the net's demo is working :confused:...

ddadmin
07-02-2008, 06:56 PM
Works for me. Here's a skeleton page I tested Cool DHTML Tooltip that now is accessed via an external file:


<html>

<style type="text/css">

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

</style>

<body>

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

/***********************************************
* Cool DHTML tooltip script II- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
onMouseout="hideddrivetip()">Search Engine</a>

</body>

</html>

damien_thiriet
07-04-2008, 12:36 PM
Unfortunately, this skeleton page doesn't work neither. Maybe is it a browser problem ? My problem is FF 2.0.1.15 :(

ddadmin
07-05-2008, 12:28 AM
Can you upload the skeleton page to your site, and post the URL? There must be something amiss with your version...

damien_thiriet
07-08-2008, 11:35 AM
Here si the skeleton page, I haven't got web pages yet (I am waiting to have everything running well...)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>test</title>


<meta content="damien thiriet" name="author" />

<style type="text/css">
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
</style>
</head>

<body style="direction: ltr;">

<script src="tooltip.js" type="text/javascript">
/***********************************************
* Cool DHTML tooltip script II- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<a href="voila.xhtml" onmouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials', 300)" onmouseout="hideddrivetip()">voila</a>
</body>

</html>

codeexploiter
07-08-2008, 11:46 AM
1. Any errors? when you load the page. If you have firebug installed you can check it out easily.

2. Make sure that you have enabled JavaScript in your browser.

3. Check with IE.