By hakeem on

Hello,

I want to use Javascript to make popup description of something. THe following file popup.htm works prettily when it runs as an independent file.

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

 
//   ##############  SIMPLE  BROWSER SNIFFER
if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"}

overdiv="0";
//  #########  CREATES POP UP BOXES 
function popLayer(text){
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";}
else {pad="1"; bord="0";}
desc = 	"<table cellspacing=0 cellpadding="+pad+" border="+bord+"  bgcolor=000000><tr><td>\n"
	+"<table cellspacing=0 cellpadding=3 border=0 width=100%><tr><td bgcolor=ffffdd><center><font size=-1>\n"
	+text
	+"\n</td></tr></table>\n"
	+"</td></tr></table>";
if(navigator.family =="nn4") {
	document.object1.document.write(desc);
	document.object1.document.close();
	document.object1.left=x+15;
	document.object1.top=y-5;
	}
else if(navigator.family =="ie4"){
	object1.innerHTML=desc;
	object1.style.pixelLeft=x+15;
	object1.style.pixelTop=y-5;
	}
else if(navigator.family =="gecko"){
	document.getElementById("object1").innerHTML=desc;
	document.getElementById("object1").style.left=x+15;
	document.getElementById("object1").style.top=y-5;
	}
}
function hideLayer(){
if (overdiv == "0") {
	if(navigator.family =="nn4") {eval(document.object1.top="-500");}
	else if(navigator.family =="ie4"){object1.innerHTML="";}
	else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";}
	}
}

//  ########  TRACKS MOUSE POSITION FOR POPUP PLACEMENT
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;
}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
//  End -->
</script>

</HEAD>

 
<BODY>

<div id="object1" style="position:absolute; background-color:FFFF00;color:red;border-color:black;border-width:200; visibility:show; left:25px; top:-100px; z-index:+1" onmouseover="overdiv=1;"  onmouseout="overdiv=0; setTimeout('hideLayer()',1000)">
pop up description layer
</div>

<a href="#" onMouseOver="popLayer('some text')" onMouseOut="hideLayer()">move here</a>


</BODY>

I tried to put the script in the and of page.tpl.php but it doesn't work. The Javascript Console error mesages are something like:

Error in parsing value for property 'top'.  Declaration dropped.

I have no expereice about how do I runs such a simple scrpit in Drupal 4.7.3. What is worng? Should I use some Drupal Javascript functions?

Thanks

⋅ Categories: Drupal 4.7.x

Comments

rkendall’s picture

rkendall commented

While you don't always have to, it is usually best to put javascript in the <head> section of the web page. You can easily do this by editing the page.tpl.php of your theme.

Even better would be to put the javascript into a seperate '.js' and then include it in the <head> with a line something like this:
<script type="text/javascript" src="/themes/mytheme/myscript.js">
That way the visiting web browser can cache the script, and doesn't have to download it as part of every web page.

That said, I think pop-ups are a really bad idea!

--
Ross Kendall
UK based Web and IT consultant specialising in Free and Open Source Software technologies.
http://rosskendall.com

white-raven’s picture

white-raven commented

I agree on both points.

EDIT: upon further inspection of your code, I misunderstood the use of the term "popup" in responding with my previous comment. I'd still recommend a fixed sidebar location for the descriptions though so that things don't get cluttered.

-- White Raven

cinderella-1’s picture

cinderella-1 commented

Hakeem,

Did you solve this problem? I have just run into this. Anyone that tells you to solve this by not trying to do it obviously has no idea about the wonderful uses it provides. If you have worked this out I would appreciate knowing how you worked around Drupal to solve it, or through Drupal if I must.

Thanks.

cinderella-1’s picture

cinderella-1 commented

I have figured out the problem here. The problem is that the browser really wants a text string for the properties such as top or left. What I did was to convert my number values to text strings as follows:

tempy = posy + "px";
tempx = posx + "px";
document.getElementById(box).style.top = tempy;
document.getElementById(box).style.left = tempx;

And then things work again. Can't tell you why this becomes necessary when pushing content through Drupal. I never really had to do this for scripts setting the top or left properties outside of the drupal way...

for more on this check out quirksmode. QUIRKSMODE IS A GREAT RESOURCE, although he did not say it was necessary to add the 'px', this page told me that it was actually the proper format.
http://www.quirksmode.org/js/cross_dhtml.html

[LATER EDIT: I DID NOT CHECK - BUT THIS IS POSSIBLY A doctypte ISSUE ... SO POSSIBLY IT IS NECESSARY TO DO THIS FOR PAGES THAT ASSIGN A doctype OF xhtml/strict ... or some such]