Hello!
My JavaScripting is at novice level - and after completing a tutorial on a 'floating layer' I was proud that I got it working on Firefox, Safari, Camino & even IE5 for mac!!! But not IE7!
The 'floating layer' does not float in IE7... it just sits up at the top of the screen - stuck in one place!! Explorer - why do you mock us?!!! ;(
I have tried everything - but I am at a loss.
I am thinking maybe it's some conflicting CSS or some crazy update in IE7 which perhaps somebody here knows a way around?
Can someone help me please?
There are two parts to the FLOATING LAYER script - Part 1 in the HEAD,
Part 2 just before </body>
My JavaScripting is at novice level - and after completing a tutorial on a 'floating layer' I was proud that I got it working on Firefox, Safari, Camino & even IE5 for mac!!! But not IE7!
The 'floating layer' does not float in IE7... it just sits up at the top of the screen - stuck in one place!! Explorer - why do you mock us?!!! ;(
I have tried everything - but I am at a loss.
I am thinking maybe it's some conflicting CSS or some crazy update in IE7 which perhaps somebody here knows a way around?
Can someone help me please?
There are two parts to the FLOATING LAYER script - Part 1 in the HEAD,
Part 2 just before </body>
Code:
<!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>
<script type="text/javascript" src="javascript/woeru_tooltip.js"></script>
<script type="text/javascript">
<!--
function alignMap() {
document.getElementById("content").scrollLeft = 0;
document.getElementById("content").scrollTop = 300;
}
//-->
</script>
<STYLE TYPE="text/css">
<!--
BODY {margin: 0}
-->
</STYLE>
<!--Here is where Part 1 of the FLOATING LAYER Script starts-->
<SCRIPT LANGUAGE="JavaScript">
<!--
floatX=5;
floatY=5;
layerwidth=20;
layerheight=30;
halign="left";
valign="bottom";
delayspeed=3;
// This script is copyright (c) Henrik Petersen, NetKontoret
// Feel free to use this script on your own pages as long as you do not change it.
// It is illegal to distribute the script as part of a tutorial / script archive.
// Updated version available at: http://www.echoecho.com/toolfloatinglayer.htm
// This comment and the 4 lines above may not be removed from the code.
NS6=false;
IE4=(document.all);
if (!IE4) {NS6=(document.getElementById);}
NS4=(document.layers);
function adjust() {
if ((NS4) || (NS6)) {
if (lastX==-1 || delayspeed==0)
{
lastX=window.pageXOffset + floatX;
lastY=window.pageYOffset + floatY;
}
else
{
var dx=Math.abs(window.pageXOffset+floatX-lastX);
var dy=Math.abs(window.pageYOffset+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
if (NS4){
document.layers['floatlayer'].pageX = lastX;
document.layers['floatlayer'].pageY = lastY;
}
if (NS6){
document.getElementById('floatlayer').style.left=lastX+'px';
document.getElementById('floatlayer').style.top=lastY+'px';
}
}
else if (IE4){
if (lastX==-1 || delayspeed==0)
{
lastX=document.body.scrollLeft + floatX;
lastY=document.body.scrollTop + floatY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
var dy=Math.abs(document.body.scrollTop+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
document.all['floatlayer'].style.posLeft = lastX+'px';
document.all['floatlayer'].style.posTop = lastY+'px';
}
setTimeout('adjust()',50);
}
function define()
{
if ((NS4) || (NS6))
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
}
if (IE4)
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
}
}
//-->
</script>
<!--This is where Part 1 of the FLOATING LAYER Script ends-->
</head>
<body bgcolor="#706d66">
<img src="graphics/oceania.gif" name="image1" width="1296" height="1387" border="0" usemap="#MainMapMap" id="image1" />
<div id="content" onmousemove="positionElement('aj');">
<!-- #### 3. Continent Specific #### --><!-- #### Change both the image source and the starting scroll position #### --></img>
<map name="MainMapMap" id="MainMapMap">
<script type="text/javascript">
<!--
setTimeout("alignMap()",1000);
setTimeout("alignMap()",2000);
//-->
</script>
<!-- #### 4. Ed codes here #### -->
<area onmouseover="setTitle(this)" onmouseout="clearTitle(this)" shape="rect" coords="578,379,587,388"
href="http://www.website.com.au" target="_blank" title="OUTBACK Park - Premium Outback Experience">
<!-- #### 5. End of Ed's code #### -->
</map>
<div id="aj" class="tooltip">
</div>
<!--And here is Part 2 of our FLOATING LAYER Script-->
<script>
if (NS4) {document.write('<'+'layer name="floatlayer" left="'+floatX+'" top="'+floatY+'">');}
if ((IE4) || (NS6)) {document.write('<'+'div id="floatlayer" style="position:absolute; left:'+floatX+'px; top:'+floatY+'px;">');}
</script>
<form name=ee><input name=sd type=text style="color: white; background-color: #706d66" size="8">
</input>
</form>
<!-- Script by hscripts.com -->
<!-- copyright of HIOX INDIA -->
<!-- more scripts @ http://www.hscripts.com -->
<script language=javascript>
window.onload = init;
function init() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getXY;
}
function getXY(e) {
x = (window.Event) ? e.pageX : event.clientX;
y = (window.Event) ? e.pageY : event.clientY;
document.ee.sd.value = x+":"+y;
}
</script>
<script>
if (NS4)
{
document.write('</LAYER>');
}
if ((IE4) || (NS6))
{
document.write('</DIV>');
}
ifloatX=floatX;
ifloatY=floatY;
define();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();
</script>
<!--And this ends Part 2 of the FLOATING LAYER script-->
</body>
</html>
<!--Here is where we position our map!-->
<script>
window.scrollTo(0,300);
</script>
Comment