The site I was creating it had a problem with rendering the web page in IE 10.
The Menu which I used for navigation where missing.
It was working in IE 9, IE 8 and IE 7 (Chrome and Firefox any way works :-) ).
Now when I open it in IE 10 Menu items are gone.
There was no fancy thing that I have created. But still it shows the compatibility warning in IE 10 and no news of the Menu
The sample code that I was using is given below
So to force Internet Explorer 10 to use IE 9
We need to add the following meta tag inside the Head tag
And doctype i was using is for HTML 5
The Menu which I used for navigation where missing.
It was working in IE 9, IE 8 and IE 7 (Chrome and Firefox any way works :-) ).
Now when I open it in IE 10 Menu items are gone.
There was no fancy thing that I have created. But still it shows the compatibility warning in IE 10 and no news of the Menu
The sample code that I was using is given below
createNavigator is<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta http-equiv="keywords" content="modellflug,bokel,schleswig-holstein,dmfv,freizeit,lutzhorn,hobby,freizeitnaherholung,mfv73,modellflugverein,große,heide,73"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link href="assets/Themes/current/panes.css" rel="stylesheet" type="text/css" /> <link href="assets/Themes/current/tablet.css" rel="stylesheet" type="text/css" /> <title>Modellflugverein Große Heide 73 e.V. Bokel</title> <link href="assets/Themes/current/main.css" rel="stylesheet" type="text/css"> <script src="assets/Themes/current/js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="assets/Themes/current/js/main.js" type="text/javascript"></script> </head> <body> <div class="header row center"> * * * Modellflugverein Große Heide 73 e.V. </div> <div class="left col"> <div class="navigator row scroll-y"></div> <div class="row footer"> Unsere Partner : <br> <p> <a href="http://www.neuershop.jamara.com/index.php?s=3" target="_blank"> <img border="0" src="assets/Themes/current/images/Jamara_Logo_skaliert.png" ALT="Jamara" ></a> </p> </div> </div> <div class="right col"> <div class="body row scroll-y"> <iframe id="tree" name="tree" src="seiten/startseite.htm" frameborder="0" onload="load();return true;"></iframe> </div> </div> <script src="assets/Themes/current/js/iemobile-fix.js" type="text/javascript"></script> <script> $('.navigator').createNavigator(); </script> <!-- Touch scrolling --> <!--[if !IE]><!--> <script src="assets/Themes/current/js/iscroll.js" type="text/javascript"></script> <script type="text/javascript"> if (typeof document.body.style.webkitOverflowScrolling === "undefined") { var xScrollers = document.getElementsByClassName("scroll-x"); for (var i = 0; i < xScrollers.length; i++) new iScroll(xScrollers[i], { vScroll: false }); var yScrollers = document.getElementsByClassName("scroll-y"); for (var i = 0; i < yScrollers.length; i++) new iScroll(yScrollers[i], { hScroll: false }); } </script> <!--<![endif]--> </body> </html>
(function( $ ){
$.fn.createNavigator = function( isSecondFolder ) {
return this.each(function() {
var $this = $(this);
var homepath = isSecondFolder?"../":"";
var pagepath = isSecondFolder?"":"pages/";
$this.append('<ul>\
<li><a href="'+homepath+'index.html" id="Startseite" title="Startseite">Startseite</a></li>\
<li><a href="'+pagepath+'wir_ueber_uns.html" id="Wir" title="Wir über uns">Wir über uns</a></li>\
<li><a href="'+pagepath+'Umwelt.html" id="Umwelt" title="Umwelt">Umwelt</a></li>\
<li><a href="'+pagepath+'Termine.html" id="Termine" title="Termine">Termine</a></li>\
<li><a href="'+pagepath+'Gastflieger.html" id="Gastflieger" title="Gastflieger">Gastflieger</a></li>\
<li><a href="'+pagepath+'Flugplatz.html" id="Flugplatz" title="Flugplatz">Flugplatz</a></li>\
<li><a href="'+pagepath+'Anfahrt.html" id="Anfahrt" title="Anfahrt">Anfahrt</a></li>\
<li><a href="'+pagepath+'Bildergalerie MFV73/index_jAlbum.html" target="_blank" id="Bildergalerie" title="Bildergalerie">Bildergalerie<img src="'+homepath+'bilddateien/logosymbolkarte/neu.gif" width="31" height="12" border="0"></a></li>\
<li><a href="'+pagepath+'Kontakt.html" id="Kontakt" title="Kontakt">Kontakt</a></li>\
<li><a href="'+pagepath+'Links.html" id="Link" title="Links u. Recht">Links u. Recht</a></li>\
<li><a href="'+pagepath+'Downloads.html" id="Downloads" title="Downloads">Downloads</a></li>\
<li><a href="'+pagepath+'Flohmarkt.html" id="Flohmarkt" title="Flohmarkt">Flohmarkt</a></li>\
<li><a href="'+pagepath+'Seglerschlepp.html" id="Seglerschlepp" title="Seglerschlepp">Seglerschlepp<img src="'+homepath+'bilddateien/logosymbolkarte/neu.gif" width="31" height="12" border="0"></a></li>\
<li><a href="'+pagepath+'Bauberichte.html" id="bauberichte" title="bauberichte">Bauberichte<img src="'+homepath+'bilddateien/logosymbolkarte/neu.gif" width="31" height="12" border="0"></a></li>\
<li><a href="'+pagepath+'Stand.html" id="Stand" title="Stand">Stand: 31.08.2012</a></li>\
<li><a href="'+pagepath+'Hilfe.html" id="Hilfe" title="Hilfe">Hilfe</a></li>\
<li><a href="'+pagepath+'Login.html" id="Login" title="Login Flohmarkt">Login Flohmarkt <img src="'+homepath+'bilddateien/logosymbolkarte/User-Login-32.png" align="left" width="31" height="30" border="0"></a></li>\
<div class="tinc">\
<a href="http://www.facebook.com/pages/Modellflugverein-Gro%C3%9Fe-Heide-73-eV/385042608218899" target="_blank"><img src="'+homepath+'bilddateien/logosymbolkarte/gefaellt.png" border="0"></a>\
<img src="/tinc?key=vHeKwlBb"/>\
</div>\
</ul>');
});
};
})( jQuery );
$(document).ready(function(){
$('iframe#tree').load(function(){
var d = $(this).attr('src');
d = d.match(/[\w_.-]*?(?=[\?\#])|[\w_.-]*$/)[0].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
switch (d)
{
case "startseite.htm":
$("#Startseite").addClass("selected");
break;
case "wir_ueber_uns.htm":
$("#Wir").addClass("selected");
break;
case "Umwelt_MFV73.htm":
$("#Umwelt").addClass("selected");
break;
case "termine.htm":
$("#Termine").addClass("selected");
break;
case "gastfliegererklaerung.htm":
$("#Gastflieger").addClass("selected");
break;
case "flugplatz.htm":
$("#Flugplatz").addClass("selected");
break;
case "anfahrtsbeschreibung_goggle.html":
$("#Anfahrt").addClass("selected");
break;
case "vorstand.htm":
$("#Kontakt").addClass("selected");
break;
case "links_und_recht.htm":
$("#Link").addClass("selected");
break;
case "downloads.htm":
$("#Downloads").addClass("selected");
break;
case "flohmarkt.htm":
$("#Flohmarkt").addClass("selected");
break;
case "anzeigebereich_seglerschlepp.php":
$("#Seglerschlepp").addClass("selected");
break;
case "bauberichte_auswahl.htm":
$("#bauberichte").addClass("selected");
break;
case "revisionsverfolgung.htm":
$("#Stand").addClass("selected");
break;
case "hilfe.htm":
$("#Hilfe").addClass("selected");
break;
case "info_flohmarkt.htm":
$("#Login").addClass("selected");
break;
}
});
});
From the IE 10 development tool (Key <F12>) I could see that if i change the Document to IE 9 Standard, Menu appeared.So to force Internet Explorer 10 to use IE 9
We need to add the following meta tag inside the Head tag
<meta http-equiv="x-ua-compatible" content="IE=9" >
This will ensure that it will be rendered using IE 9.And doctype i was using is for HTML 5
<!doctype html>
My personal advice is to not to use IE at all. It will help lots of web developers. _ Find Me on Google+
No comments:
Post a Comment