Javascript won't work inside html Dreamweaver tags

Report · May 31, 2007

I have a hidden thumbnail of an image that appear upon rollover of text within my document. The thumb is supposed to appear in the immediate general area below the text. Within my include file (without html, title, head and body tags), it wrks great! However the minute I open the include within the page (with the tags), the position is random and no where near where it is supposed to be. I have stripped the page of all code piece-by-piece (took a while), and the reason it is having these problems is this code here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

Here are two pages:
http://d17409300.r229.radiowebworks.com/testing00121.php
http://d17409300.r229.radiowebworks.com/testing00122.php

The first contains that code, the second contains this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

The problem is that for whatever reason, with the second code, I lose my css on the links and it alters the page. How can I fix this problem? Please advise asap, as I have wasted WAY to much time trying to figure this out!

Thanks so much, Everyone! I truly appreciate it!

Sincerely-
Charles Carter

Report · May 31, 2007

Mr. Design wrote:
> I lose my css
> on the links and it alters the page. How can I fix this problem?

I don't know whether it will solve your problem, but the link to the
style sheet, must be inside the <head> of the page. You also have no
opening <body> tag.

Always use the W3C validator to check your page for errors. It's the
first, essential step in hunting down problems.

--
David Powers, Adobe Community Expert
Author, "Foundation PHP for Dreamweaver 8" (friends of ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Report · May 31, 2007

http://d17409300.r229.radiowebworks.com/testing00121.php
http://d17409300.r229.radiowebworks.com/testing00122.php

I changed the links, but it makes no difference, if I edit the code below to just <html>, the thumbnail appears as it should, however ALL my text and hyperlink styles from inside my css file are changed! How can I make this work?

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

Report · Jun 01, 2007

Mr. Design wrote:
> I changed the links, but it makes no difference, if I edit the code below to
> just <html>, the thumbnail appears as it should, however ALL my text and
> hyperlink styles from inside my css file are changed! How can I make this work?

Short answer: I don't know how you can make it work.

Slightly longer answer: leaving out the DOCTYPE puts the browser into
quirks mode, which is likely to be the reason your CSS isn't working as
expected. However, I have played around with your two pages by resizing
my browser viewport several times. Both pages give very similar results.
At times, the thumbnail appears where you want it to be. At others, it's
on top of the month name. It looks as though there's something flaky
with the JavaScript functions you're using.

--
David Powers, Adobe Community Expert
Author, "Foundation PHP for Dreamweaver 8" (friends of ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Report · Jun 01, 2007

Do you know of a javascript function I can use for this since mine appears to be beyond salvage. I am just lost..someone pointed me to this page to see if I can see what they're doing, but I was unable to strip it down to see what they're doing differently: http://www.taxidrivermovie.com/archives/archives.php. Here is the javascript, possibly can you see what may be wrong with it? I have looked it over no less than a hundred times, and see nothing that would cause the problems I am having.

Thanks so much, and by the way, I own more than a few of your books!
Sincerely-
Charles Carter

<![CDATA[
function showThumbnail(which,e)
{
var thumb=document.getElementById("thumb");
if( thumb && thumb.style.visibility == 'hidden' )
{
var lLeft=0;
var lTop=0;
if (e.pageX){
// Mozilla
lLeft=pageXOffset + e.clientX + 20;
lTop=pageYOffset + e.clientY;
} else {
// IE
lLeft=document.body.scrollLeft + e.x + 20;
lTop=document.body.scrollTop + e.y;
}
thumb.style.left=lLeft+'px';
thumb.style.top=lTop+'px';
thumb.style.visibility = 'visible';
thumb.innerHTML = '<IMG SRC="' + unescape(which) + '">';
}
}

function closeThumbnail()
{
var thumb=document.getElementById('thumb');
if(thumb) thumb.style.visibility = 'hidden';
}
]]>

Report · Jun 01, 2007

Mr. Design wrote:
> Do you know of a javascript function I can use for this since mine appears to
> be beyond salvage.

No, sorry. But you might want to take a look at this page, which
demonstrates pop-up images using CSS:

http://meyerweb.com/eric/css/edge/popups/demo2.html

--
David Powers, Adobe Community Expert
Author, "Foundation PHP for Dreamweaver 8" (friends of ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/