expertsgerrit
asked on
Make a jscript work in all versions of MS Internet Explorer like it works in Mozilla
Hi this is about a page that works fine in all browsers except versions of MS Internet Explorer.
http://bit.ly/644j9W
Open the page in Chrome or Firefox or Safari and you will see how it should be working in MS Internet Explorer.
there are two issues that do not work in MS IE.
1. the displaying of the yellow address pane when hovering over the orange dots
2. the clickthrough to the contactpage
I have attached a zip with the files in question except for the asp file, the code for that file has been pasted in the code section.
Can you make it work in all versions of MS Internet Explorer?
http://bit.ly/644j9W
Open the page in Chrome or Firefox or Safari and you will see how it should be working in MS Internet Explorer.
there are two issues that do not work in MS IE.
1. the displaying of the yellow address pane when hovering over the orange dots
2. the clickthrough to the contactpage
I have attached a zip with the files in question except for the asp file, the code for that file has been pasted in the code section.
Can you make it work in all versions of MS Internet Explorer?
<!--#include virtual="warmtepomp/cd7.asp"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script type="text/javascript">
function showText() {
if(document.getElementById("txt").style.display=="block") {
document.getElementById("txt").style.display="none";
} else {
document.getElementById("txt").style.display="block";
}
}
</script>
<title>Warmtepomp - prijs, kosten en besparingen - GeoTherma</title>
<meta name="robots" content="index"/>
<meta name="robots" content="archive"/>
<meta name="googlebot" content="archive"/>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="nl" />
<meta name="description" content="GeoTherma berekent samen met u de prijs én de besparingen van de warmtepomp op korte én lange termijn." />
<meta name="keywords" content="warmtepomp, prijs, kosten, besparingen" />
<meta name="verify-v1" content="VIq6zvKQV3q29FvDgVJM5ffyNx0hRhFU5slBdYHRZ18=" />
<%
headCrLf = headCrLf & "<html xmlns=""http://www.w3.org/1999/xhtml"" xml:lang=""" & lingnlfr & """ lang=""" & lingnlfr & """>" & vbCrLf
if inStr(title, "Geotherma") <> 0 then
headCrLf = headCrLf & "<head><title>" & title & "</title>" & vbCrLf
else
headCrLf = headCrLf & "<head><title>" & title & " | GeoTherma</title>" & vbCrLf
end if
headCrLf = headCrLf & "<meta name=""keywords"" lang=""" & lingnlfr & """ content=""" & keywords & """/>" & vbCrLf
headCrLf = headCrLf & "<meta name=""description"" lang=""" & lingnlfr & """ content=""" & content & """/>" & vbCrLf
headCrLf = headCrLf & "<link rel=""shortcut icon"" href=""http://www.geotherma.be/geo/site/2007/favicon1.ico"" type=""image/x-icon"" />" & vbCrLf
verify = "<meta name=""verify-v1"" content=""VIq6zvKQV3q29FvDgVJM5ffyNx0hRhFU5slBdYHRZ18="" />" & vbCrLf
headCrLf = headCrLf & verify
%>
<link href="example.css" type="text/css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="JS/domLib.js"></script>
<script type="text/javascript" language="javascript" src="JS/domTT.js"></script>
<script type="text/javascript" language="javascript">
var domTT_styleClass = 'domTTClassic';
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<![endif]-->
</head>
<body>
<div id="wrapper">
<div class="toppix"></div>
<div id="content_wrapper">
<!-- Mainwindow start -->
<div class="main_container">
<div class="windowpix2"></div>
<div style="background:url(images/main_topall.jpg) bottom center no-repeat; height:27px; float:left; width:962px;"></div>
<div style="background:url(images/rpt_main.jpg) repeat-y; width:965px; height:auto; margin:0;">
<div class="mainwindow">
<div class="mainwindow_top">
<h2>Kostprijs : is er sprake van een meerinvestering?</h2>
</div>
<div class="mainwindow_middle">
<h3>Warmtepompen,</h3>
<div class="main">
<img src="map.jpg" alt="" width="520" height="426" border="0" usemap="#Map" />
<map name="Map">
<!-- spot 1 -->
<area shape="circle" coords="59,114,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot1'), 'type', 'velcro');">
<!-- spot 1 ends -->
<!-- spot 2 -->
<area shape="circle" coords="172,106,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot2'), 'type', 'velcro');">
<!-- spot 2 ends -->
<!-- spot 3 -->
<area shape="circle" coords="217,88,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot3'), 'type', 'velcro');">
<!-- spot 3 ends -->
<!-- spot 4 -->
<area shape="circle" coords="244,96,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot4'), 'type', 'velcro');">
<!-- spot 4 ends -->
<!-- spot 5 -->
<area shape="circle" coords="292,102,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot5'), 'type', 'velcro');">
<!-- spot 5 ends -->
<!-- spot 6 -->
<area shape="circle" coords="309,154,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot6'), 'type', 'velcro');">
<!-- spot 6 ends -->
<!-- spot 7 -->
<area shape="circle" coords="212,143,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot7'), 'type', 'velcro');">
<!-- spot 7 ends -->
<!-- spot 8 -->
<area shape="circle" coords="332,125,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot8'), 'type', 'velcro');">
<!-- spot 6 ends -->
<!-- spot 9 -->
<area shape="circle" coords="381,122,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot9'), 'type', 'velcro');">
<!-- spot 9 ends -->
<!-- spot 10 -->
<area shape="circle" coords="380,84,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot10'), 'type', 'velcro');">
<!-- spot 10 ends -->
<!-- spot 11 -->
<area shape="circle" coords="239,155,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot11'), 'type', 'velcro');">
<!-- spot 11 ends -->
<!-- spot 12 -->
<area shape="circle" coords="368,244,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot12'), 'type', 'velcro');">
<!-- spot 12 ends -->
<!-- spot 13 -->
<area shape="circle" coords="168,186,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot13'), 'type', 'velcro');">
<!-- spot 13 ends -->
</map>
</div>
<div id="container" style="display: none;">
<div id="spot1" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Ecotechnieken';" style="cursor: pointer;">
<p>Ecotechnieken</p>
<p>Predikboomstraat, 25</p>
<p>8650 Diksmuide</p>
<p>0478 622 853</p>
<p>http://www.ecotechnieken.be/</p>
</div>
<div id="spot2" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=E-Advies';" style="cursor: pointer;">
<p>E-Advies</p>
<p>Sasstraat, 36</p>
<p>9050 Gentbrugge</p>
<p>0486 83 29 76</p>
</div>
<div id="spot3" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Integrated Systems';" style="cursor: pointer;">
<p>Integrated Systems</p>
<p>Vrasenestraat, 45</p>
<p>9100 Sint-Niklaas</p>
<p>03 336 59 48</p>
<p>http://www.integrated-systems.be/</p>
</div>
<div id="spot4" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Daisomont';" style="cursor: pointer;">
<p>Daisomont</p>
<p>Baron Van Ertbornstraat, 106B</p>
<p>2630 Aartselaar</p>
<p>03 827 35 97</p>
<p>http://www.daisomontrobert.be/</p>
</div>
<div id="spot5" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Turelinckx Dave';" style="cursor: pointer;">
<p>Turelinckx Dave</p>
<p>2220 Heist-op-den-Berg</p>
<p>0479 360 040</p>
<p>http://www.verwarmingtd.be/</p>
</div>
<div id="spot6" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Jordaan';" style="cursor: pointer;">
<p>Jordaan</p>
<p>Babelomstraat, 35</p>
<p>3320 Hoegaarden</p>
<p>0473 321 264</p>
</div>
<div id="spot7" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Daco-projects';" style="cursor: pointer;">
<p>Daco-projects</p>
<p>Kattemstraat, 62</p>
<p>1760 Roosdaal</p>
<p>053 43 03 98</p>
<p>http://www.daco-projects.be/</p>
</div>
<div id="spot8" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Jaco';" style="cursor: pointer;">
<p>Jaco</p>
<p>Ballaarstraat, 33</p>
<p>3270 Scherpenheuvel</p>
<p>0479 30 94 46</p>
</div>
<div id="spot9" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Hamalco';" style="cursor: pointer;">
<p>Hamalco</p>
<p>Spoorwegstraat, 35</p>
<p>3665 As</p>
<p>0479 41 04 98</p>
<p>http://www.hamalco.be/</p>
</div>
<div id="spot10" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Loenders Marc';" style="cursor: pointer;">
<p>Loenders Marc</p>
<p>Astridlaan, 249</p>
<p>3900 Overpelt</p>
<p>011 61 14 29</p>
<p>http://www.loenders.be/</p>
</div>
<div id="spot11" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Bema sprl';" style="cursor: pointer;">
<p>Bema sprl</p>
<p>Rue Rodenbach, 69</p>
<p>1190 Forest</p>
<p>02 347 10 33</p>
</div>
<div id="spot12" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Leukemans Dave';" style="cursor: pointer;">
<p>Leukemans Dave</p>
<p>Rue du Monument, 22</p>
<p>6940 Grandhan</p>
<p>086 49 94 00</p>
</div>
<div id="spot13" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Aresis sprl';" style="cursor: pointer;">
<p>Aresis sprl</p>
<p>rue du Mont, 126</p>
<p>7812 Mainvault</p>
<p>0495 559 749</p>
</div>
</div>
</div>
</div>
<!-- Mainwindow ends -->
<!--#include virtual="warmtepomp/rightside.asp"-->
<div class="clear"></div>
</div>
<div style="height:10px;"><img src="images/lower_main.jpg" alt="" height="10" width="962" /></div>
<div class="clear"></div>
<div class="windowsmallpix"></div>
<!-- lower container starts -->
<div id="lowercontainer">
<!-- lowerleft window -->
<!--#include virtual="warmtepomp/lwrbox1.asp"-->
<!-- lowerleft window ends -->
<!--#include virtual="warmtepomp/lwrbox2.asp"-->
<!-- lowerwindow center ends -->
<!--#include virtual="warmtepomp/lwrbox3.asp"-->
<!-- lowerright window ends-->
</div>
<div class="clear"></div>
<div class="windowpix"></div>
<!-- lowercontainer ends -->
</div>
<!-- main container ends -->
<!-- upper container starts -->
<!--#include virtual="warmtepomp/upperpart1.asp"-->
<!-- greenbar starts -->
<div class="greenbar">
<div class="greenbar_lft">
<img src="http://www.geotherma.be/newdesign3/images/menu_lft.jpg" alt="" width="21" height="54" /> </div>
<div class="greenbar_center">
<div id="nav_title">
<ul>
<li>
<% response.write homeurl %> </li>
<li>
<% response.write verwarmingurl %> </li>
<li>
<% response.write warmwaterurl %> </li>
<li>
<% response.write koelingurl %> </li>
<li>
<% response.write nieuwbouwurl %> </li>
<li>
<% response.write verwarmingketelurl %> </li>
<li class="current_page_item">
<% response.write besparingurl %> </li>
</ul>
</div>
</div>
<div class="greenbar_rht">
<img src="http://www.geotherma.be/newdesign3/images/menu_rht.jpg" alt="" width="19" height="54" /> </div>
</div>
<!-- greenbar ends -->
<div class="clear"></div>
<div class="windowpix"></div>
<!-- flashwindow start -->
<!--#include virtual="warmtepomp/banner.asp"-->
<!-- flashwindow ends -->
</div>
<!-- content wrapper ends -->
</div>
<!-- wrapper ends -->
</div>
<div class="clear"></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-1590523-2");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>
Badotz
That's a tall order for 20 points, eh?
1. Verify your page validates (http://validator.w3.org/) - there seems to be several unclosed elements, which can cause layout problems in IE and other browsers (the problem will likely be different in each browser)
2. Fix the obvious javascript errors that triggers each time the page is loaded. The google analytics code at the end of the page is broken. Enable the javascript debugger in IE, or check the console or Firebug in Firefox to get those errors and warnings.
Once the page loads without errors and validate correctly, let us know.
You may want to reimplement your tooltip code with a more standard (and especially more up-to-date) library such as, maybe, jQuery, or at least update your current library (domTT) to the latest version.
2. Fix the obvious javascript errors that triggers each time the page is loaded. The google analytics code at the end of the page is broken. Enable the javascript debugger in IE, or check the console or Firebug in Firefox to get those errors and warnings.
Once the page loads without errors and validate correctly, let us know.
You may want to reimplement your tooltip code with a more standard (and especially more up-to-date) library such as, maybe, jQuery, or at least update your current library (domTT) to the latest version.
ASKER
I increased the number of points to 500.
Someone please come up with a working solution, not just tips.
Someone please come up with a working solution, not just tips.
I can (try to) come up with a solution when the validation and javascript errors are fixed. Currently those are preventing me from properly debugging the page.
What I first notice is that the page doesn't have a start tag for the html element.
When I test the page, I get script errors. The script that includes the google analytics script doesn't work properly. Escaping the stript tag doesn't help, so the end tag in the string terminates the script tag before the string ends. Do like this instead:
document.write('<scr'+'ipt
In XHTML the attribute names should be lower case, so the onMouseOver attributes in the map should be onmouseover. The onClick attributes in the spots should be onclick.
When I test the page, I get script errors. The script that includes the google analytics script doesn't work properly. Escaping the stript tag doesn't help, so the end tag in the string terminates the script tag before the string ends. Do like this instead:
document.write('<scr'+'ipt
In XHTML the attribute names should be lower case, so the onMouseOver attributes in the map should be onmouseover. The onClick attributes in the spots should be onclick.
Oops. One less closing parenthesis:
document.write('<scr'+'ipt
document.write('<scr'+'ipt
ASKER
To all, fixed all the errors that stand a "clear view" in the way,
check it here : http://validator.w3.org/check?uri=http://bit.ly/644j9W&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator/1.654
So please provide me with a solution!
Here is the url again: http://bit.ly/644j9W
check it here : http://validator.w3.org/check?uri=http://bit.ly/644j9W&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator/1.654
So please provide me with a solution!
Here is the url again: http://bit.ly/644j9W
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
followed your instructions. look now please.
Works well in IE6, IE7 and in IE8 in compatibility mode, so add this in the head section of your page:
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
This will force IE8 to use IE7 compatibility mode.
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
This will force IE8 to use IE7 compatibility mode.
Sorry, incorrect tag. The right one is:
<meta http-equiv="X-UA-Compatibl
<meta http-equiv="X-UA-Compatibl
ASKER
Just did add that tag.
Nothing changes in IE 8
What do YOU see when you hover over the orange dots?
Nothing changes in IE 8
What do YOU see when you hover over the orange dots?
IE8 fails to register the X-UA-Compatible tag due to its location. I think you must put it at the beginning of the head section, at least before any stylesheet or script, for it to consider the tag.
When I (manually) put IE8 in IE7 compatibility mode, I see the same tooltips I see in IE6 and 7.
When I (manually) put IE8 in IE7 compatibility mode, I see the same tooltips I see in IE6 and 7.
ASKER
Kindly check again, I put right after the <head> tag.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You could also try an updated version of domLib and domTT officially supporting IE8:
http://groups-beta.google.com/group/dom-tooltip/
http://groups-beta.google.com/group/dom-tooltip/
ASKER
Looks good! the replacement in lin 56 seems to have done the trick.
Let me run it through the most unwilling version of IE 8 I encountered on a pc I cannot reach before the morning.
Thanks
Have a good rest;
Talk to you in the morning.
Let me run it through the most unwilling version of IE 8 I encountered on a pc I cannot reach before the morning.
Thanks
Have a good rest;
Talk to you in the morning.