469,081 Members | 1,515 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,081 developers. It's quick & easy.

IE7 conflicting with JavaScript that works on EVERY other browser! Help!

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>

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <title>Untitled Document</title>
  6.  
  7. <script type="text/javascript" src="javascript/woeru_tooltip.js"></script>
  8.  
  9.     <script type="text/javascript">
  10.     <!--
  11.     function alignMap() {
  12.         document.getElementById("content").scrollLeft = 0;
  13.         document.getElementById("content").scrollTop = 300;      
  14.     } 
  15.     //-->
  16.     </script>
  17. <STYLE TYPE="text/css">
  18. <!--
  19. BODY {margin: 0}
  20. -->
  21. </STYLE>
  22.  
  23. <!--Here is where Part 1 of the FLOATING LAYER Script starts-->
  24. <SCRIPT LANGUAGE="JavaScript">
  25. <!--
  26. floatX=5;
  27. floatY=5;
  28. layerwidth=20;
  29. layerheight=30;
  30. halign="left";
  31. valign="bottom";
  32. delayspeed=3;
  33.  
  34. // This script is copyright (c) Henrik Petersen, NetKontoret
  35. // Feel free to use this script on your own pages as long as you do not change it.
  36. // It is illegal to distribute the script as part of a tutorial / script archive.
  37. // Updated version available at: http://www.echoecho.com/toolfloatinglayer.htm
  38. // This comment and the 4 lines above may not be removed from the code.
  39.  
  40. NS6=false;
  41. IE4=(document.all);
  42. if (!IE4) {NS6=(document.getElementById);}
  43. NS4=(document.layers);
  44.  
  45. function adjust() {
  46. if ((NS4) || (NS6)) {
  47. if (lastX==-1 || delayspeed==0)
  48. {
  49. lastX=window.pageXOffset + floatX;
  50. lastY=window.pageYOffset + floatY;
  51. }
  52. else
  53. {
  54. var dx=Math.abs(window.pageXOffset+floatX-lastX);
  55. var dy=Math.abs(window.pageYOffset+floatY-lastY);
  56. var d=Math.sqrt(dx*dx+dy*dy);
  57. var c=Math.round(d/10);
  58. if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
  59. if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
  60. if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
  61. if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
  62. }
  63. if (NS4){
  64. document.layers['floatlayer'].pageX = lastX;
  65. document.layers['floatlayer'].pageY = lastY;
  66. }
  67. if (NS6){
  68. document.getElementById('floatlayer').style.left=lastX+'px';
  69. document.getElementById('floatlayer').style.top=lastY+'px';
  70. }
  71. }
  72. else if (IE4){
  73. if (lastX==-1 || delayspeed==0)
  74. {
  75. lastX=document.body.scrollLeft + floatX;
  76. lastY=document.body.scrollTop + floatY;
  77. }
  78. else
  79. {
  80. var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
  81. var dy=Math.abs(document.body.scrollTop+floatY-lastY);
  82. var d=Math.sqrt(dx*dx+dy*dy);
  83. var c=Math.round(d/10);
  84. if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
  85. if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
  86. if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
  87. if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
  88. }
  89. document.all['floatlayer'].style.posLeft = lastX+'px';
  90. document.all['floatlayer'].style.posTop = lastY+'px';
  91. }
  92. setTimeout('adjust()',50);
  93. }
  94.  
  95. function define()
  96. {
  97. if ((NS4) || (NS6))
  98. {
  99. if (halign=="left") {floatX=ifloatX};
  100. if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
  101. if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
  102. if (valign=="top") {floatY=ifloatY};
  103. if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
  104. if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};
  105. }
  106. if (IE4)
  107. {
  108. if (halign=="left") {floatX=ifloatX};
  109. if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
  110. if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
  111. if (valign=="top") {floatY=ifloatY};
  112. if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
  113. if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}
  114. }
  115. }
  116. //-->
  117. </script>
  118. <!--This is where Part 1 of the FLOATING LAYER Script ends-->
  119. </head>
  120.  
  121. <body bgcolor="#706d66">
  122.  
  123.  
  124. <img src="graphics/oceania.gif" name="image1" width="1296" height="1387" border="0" usemap="#MainMapMap" id="image1" />
  125. <div id="content" onmousemove="positionElement('aj');">
  126.  
  127.     <!-- #### 3. Continent Specific #### --><!-- #### Change both the image source and the starting scroll position #### --></img>
  128.  
  129.     <map name="MainMapMap" id="MainMapMap">
  130.  
  131.     <script type="text/javascript">
  132.     <!--
  133.         setTimeout("alignMap()",1000);
  134.         setTimeout("alignMap()",2000);
  135.     //-->
  136.     </script>
  137.  
  138.  
  139.     <!-- #### 4. Ed codes here #### -->
  140.  
  141.     <area onmouseover="setTitle(this)" onmouseout="clearTitle(this)" shape="rect" coords="578,379,587,388" 
  142.         href="http://www.website.com.au" target="_blank" title="OUTBACK Park - Premium Outback Experience">
  143.  
  144.     <!-- #### 5. End of Ed's code #### -->
  145.  
  146. </map>
  147. <div id="aj" class="tooltip"> 
  148. </div>
  149.  
  150. <!--And here is Part 2 of our FLOATING LAYER Script-->
  151.  
  152. <script>
  153. if (NS4) {document.write('<'+'layer name="floatlayer" left="'+floatX+'" top="'+floatY+'">');}
  154. if ((IE4) || (NS6)) {document.write('<'+'div id="floatlayer" style="position:absolute; left:'+floatX+'px; top:'+floatY+'px;">');}
  155. </script>
  156. <form name=ee><input name=sd type=text style="color: white; background-color: #706d66" size="8"> 
  157. </input>
  158. </form>
  159.  
  160. <!--        Script by hscripts.com          -->
  161. <!--        copyright of HIOX INDIA         -->
  162. <!-- more scripts @ http://www.hscripts.com -->
  163.  
  164.  
  165. <script language=javascript>
  166. window.onload = init;
  167. function init() {
  168.   if (window.Event) {
  169.     document.captureEvents(Event.MOUSEMOVE);
  170.   }
  171.   document.onmousemove = getXY;
  172. }
  173.  
  174. function getXY(e) {
  175.   x = (window.Event) ? e.pageX : event.clientX;
  176.   y = (window.Event) ? e.pageY : event.clientY;
  177.  
  178.   document.ee.sd.value = x+":"+y;
  179. }
  180. </script>
  181. <script>
  182. if (NS4)
  183. {
  184. document.write('</LAYER>');
  185. }
  186. if ((IE4) || (NS6))
  187. {
  188. document.write('</DIV>');
  189. }
  190. ifloatX=floatX;
  191. ifloatY=floatY;
  192. define();
  193. window.onresize=define;
  194. lastX=-1;
  195. lastY=-1;
  196. adjust();
  197. </script>
  198.  
  199. <!--And this ends Part 2 of the FLOATING LAYER script-->
  200.  
  201.  
  202.  
  203. </body>
  204. </html>
  205.  
  206. <!--Here is where we position our map!-->
  207. <script>
  208. window.scrollTo(0,300);
  209. </script>
  210.  
Mar 20 '07 #1
2 5146
Hey?!
C'mon - surely someone else out there has encountered something similar with IE7... or is everyone here an Explorer secret agent/cult member? ;P

Please?
Mar 20 '07 #2
acoder
16,027 Expert Mod 8TB
See compatibiity tables for the browsers on mouse position.

Also, see this link.
Mar 20 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Gowhera Hussain | last post: by
72 posts views Thread by Stephen Poley | last post: by
6 posts views Thread by Andy Fish | last post: by
136 posts views Thread by Matt Kruse | last post: by
1 post views Thread by Guadala Harry | last post: by
1 post views Thread by Neo Geshel | last post: by
12 posts views Thread by pantagruel | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.