Darstellung im Internet Explorer
Julius
- javascript
Hallo liebes Forum,
ich habe für eine Seite folgenden Code gebaut.
3 iFrames, eine Navigation an der linken Seite, sonst eigentlich nichts...
Nun die Frage: Warum wird das im Firefox perfekt dargestellt und im Internet Explorer nicht.
Es geht darum, dass das eine iFrame (1) die anderen beiden überlagert und wenn der viewport zu klein ist, diese aufgeblendet werden (dazu nutzte ich ein Script, dass die Seite automatisch aktualisert.
<div style="position:absolute; top:250px; left:230px; z-index:3;">
<iframe src="index.html" width="600" height="825" min-width="450"scrolling="no" frameborder="0"></iframe>
</div>
<div style="position:absolute; top:230px; right:175px; z-index:2;" id="container">
<iframe src="index2.html" width="625" height="325" scrolling="no" frameborder="0"></iframe>
</div>
<div style="position:absolute; top:550px; right:250px; z-index:2;" id="accordion">
<iframe src="index3.html" width="650" height="400" scrolling="no" frameborder="0"></iframe>
</div>
<!--Script for displaying Tag Cloud -->
<script type="text/javascript">
if (window.matchMedia("(min-width: 1440px)").matches) {
document.getElementById("container").style.display="block";
document.getElementById("accordion").style.display="block";
}
else {
document.getElementById("container").style.display="none";
document.getElementById("accordion").style.display="none";
}
</script>
Weiß jemand Rat?
Viele Grüße
Julius
Hallo!
Warum wird das im Firefox perfekt dargestellt und im Internet Explorer nicht.
Von welcher IE-Version sprichst du?
if (window.matchMedia("(min-width: 1440px)").matches) {
document.getElementById("container").style.display="block";
document.getElementById("accordion").style.display="block";
}
else {
document.getElementById("container").style.display="none";
document.getElementById("accordion").style.display="none";
}
matchMedia ist erst am IE 10 verfügbar.
Warum schreibst du diese Logik in JavaScript? Du kannst dasselbe doch mit CSS @media erreichen. Das ist dann auch kompatibler. Solche CSS-Media-Queries werden ab IE 9 unterstützt.
Grüße,
Mathias
Hallo!
Solche CSS-Media-Queries werden ab IE 9 unterstützt.
Und per Polyfill sogar ab IE 6.
Gruß Gunther
Von welcher IE-Version sprichst du?
Von Version 9.
matchMedia ist erst am IE 10 verfügbar.
Okay, dann macht es ja Sinn.
Warum schreibst du diese Logik in JavaScript? Du kannst dasselbe doch mit CSS @media erreichen. Das ist dann auch kompatibler. Solche CSS-Media-Queries werden ab IE 9 unterstützt.
Das geht leider nicht :( ich brauche eine javascript-Lösung für mein Problem.
Leider bin ich in javascript nicht besonders gut, wie man wahrscheinlich merkt.
Den kleinen Code habe ich aus einem anderen Beitrag aus diesem Forum.
Vielleicht gibt es eine javascript-Lösung, die der Internet Explorer 9 auch darstellen kann?
Ich bin für jede Hilfe sehr dankbar :)
Hi!
Das geht leider nicht :( ich brauche eine javascript-Lösung für mein Problem.
Du kannst keinen CSS-Code in die Seite einfügen, aber JavaScript-Code…? Kurios.
Vielleicht gibt es eine javascript-Lösung, die der Internet Explorer 9 auch darstellen kann?
Du könntest mit JavaScript ein style-Element erzeugen, was die Media Query in ganz normalem CSS enthält.
<script>
[code lang=javascript]// Selbstausführende namenlose Funktion, damit unsere Variablen nicht global sind
(function () {
// Der CSS-Code in einem JavaScript-String
var css = "@media screen and (min-width: 1440px) { #container, #accordion { display: block; } } /* usw. */";
// Erzeuge style-Element
var style = document.[ref:self812;javascript/objekte/document.htm#create_element@title=createElement]('style');
// Hänge Textknoten mit dem CSS-Code an
style.[ref:self812;javascript/objekte/node.htm#append_child@title=appendChild](document.[ref:self812;javascript/objekte/document.htm#create_text_node@title=createTextNode](css));
// Hänge style-Element ins head-Element ein
var head = document.[ref:self812;javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName]('head')[0];
head.appendChild(style);
})();
</script>[/code]
(Ungetestet)
Es geht auch etwas komplizierter über die Schnittstelle document.styleSheets, die das Ändern und Erweitern der bestehenden Stylesheets erlaubt (ob mit <style> oder <link rel="stylesheet"> eingebunden).
Viele Grüße
Mathias