nicht angemeldet
Media Queries mit iFrames
Hallo,
ich habe von einer Möglichkeit gehört, Content ab einer bestimmten Auflösung anzeigen zu lassen. Das ganze nennt sich Media Queries.
Diese Funktion möchte ich nutzen um iFrames auszublenden. Ich habe 2 davon und ab einer Auflösung von unter 1400px schiebt sich das eine iFrame über meine Menüleisten.
Wie würde denn hier der Code aussehen um ein iFrame ab einer Browserfenstergröße von 1400px oder weniger auszublenden?
Wenn es geht würde ich gerne alles direkt in die .html Datei einfügen wollen.
Danke und Gruß
Cass
-
Moin,
Wie würde denn hier der Code aussehen um ein iFrame ab einer Browserfenstergröße von 1400px oder weniger auszublenden?
@media max-width:1440px { iframe { display:none; } }Grüße Marco
--
Ich spreche Spaghetticode - fließend.-
Moin,
Wie würde denn hier der Code aussehen um ein iFrame ab einer Browserfenstergröße von 1400px oder weniger auszublenden?
@media max-width:1440px {
iframe { display:none; }
}> > Grüße Marco Tach Marco, joah, das klingt schonmal gut. Soweit war ich auch schon. Klingt vielleicht doof, aber wo füge ich da den Link zum iFrame ein?... Gruß Cass-
Moin,
joah, das klingt schonmal gut. Soweit war ich auch schon.
Klingt vielleicht doof, aber wo füge ich da den Link zum iFrame ein?...Dir fehlen offensichtlich ein paar Grundlagen. Dieses Schnipsel ist CSS, welches entweder in das http://de.selfhtml.org/css/formate/einbinden.htm#zentral@title=style-Element oder in <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=eine externe Datei gehört>.
Das iframe wird dann automatisch bei einer Viewport-Größe kleiner als 1400px ausgeblendet. Die Browser-Unterstützung ist zwar recht gut, Probleme kann es aber bei älteren Browser-Versionen geben.
Grüße Marco
--
Ich spreche Spaghetticode - fließend.-
Moin,
joah, das klingt schonmal gut. Soweit war ich auch schon.
Klingt vielleicht doof, aber wo füge ich da den Link zum iFrame ein?...Dir fehlen offensichtlich ein paar Grundlagen. Dieses Schnipsel ist CSS, welches entweder in das http://de.selfhtml.org/css/formate/einbinden.htm#zentral@title=style-Element oder in <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=eine externe Datei gehört>.
Das iframe wird dann automatisch bei einer Viewport-Größe kleiner als 1400px ausgeblendet. Die Browser-Unterstützung ist zwar recht gut, Probleme kann es aber bei älteren Browser-Versionen geben.
Grüße Marco
Hey Marco,
in meinem ersten Post habe ich doch geschrieben, dass ich gerne eine "reine html Lösung" hätte.
Ich habe das Problem, dass eine weitere CSS Datei sehr umständlich für mich wäre.
Gehts nicht anders?...
Wie rufe ich "iframe" denn in der html-Datei auf? Ich bräuchte da eine genauere Erklärung, weil ich noch nie media queries genutzt habe.-
Moin,
in meinem ersten Post habe ich doch geschrieben, dass ich gerne eine "reine html Lösung" hätte.
Das gibt es nicht.
Ich habe das Problem, dass eine weitere CSS Datei sehr umständlich für mich wäre.
Gehts nicht anders?...Doch, indem du das CSS direkt in die HTML einbindest. Über das Style-Element (Link hatte ich oben gegeben).
Wie rufe ich "iframe" denn in der html-Datei auf? Ich bräuchte da eine genauere Erklärung, weil ich noch nie media queries genutzt habe.
Der/die IFrame/s sollte doch schon vorhanden sein, oder nicht?
Es wäre generell gut, etwas mehr Code oder ein Online-Beispiel zu haben, um zu wissen, was du vorhast. IFrames sind allgemein fast immer vermeidbar und sie sollten auch vermieden werden.
Grüße Marco
--
Ich spreche Spaghetticode - fließend.-
Moin,
in meinem ersten Post habe ich doch geschrieben, dass ich gerne eine "reine html Lösung" hätte.
Das gibt es nicht.
Ich habe das Problem, dass eine weitere CSS Datei sehr umständlich für mich wäre.
Gehts nicht anders?...Doch, indem du das CSS direkt in die HTML einbindest. Über das Style-Element (Link hatte ich oben gegeben).
Wie rufe ich "iframe" denn in der html-Datei auf? Ich bräuchte da eine genauere Erklärung, weil ich noch nie media queries genutzt habe.
Der/die IFrame/s sollte doch schon vorhanden sein, oder nicht?
Es wäre generell gut, etwas mehr Code oder ein Online-Beispiel zu haben, um zu wissen, was du vorhast. IFrames sind allgemein fast immer vermeidbar und sie sollten auch vermieden werden.
Grüße Marco
Moin,
wie gesagt, ich schaffe es nur mit reinem html-code. Und ich kann das iframe nicht vermeiden.
ich benutze ein html plugin auf einer intranet seite, habe also kein html dokument wo ich ein css element ansprechen kann.
Aber ich kann per html code meine seite manipulieren.Ich brauche dringend eine html Lösung, ich weiß, dass es sowas gibt! nur nicht, wie man es benutzt!
Hier der Code:
{{html}} <div style="position:absolute; top:15%; left:35%;"> <iframe src="http://index.html" width="625" height="325" scrolling="no" frameborder="0"></iframe> </div> <div align="center"> <iframe src="http://index2.html" width="600" height="825" min-width="450" scrolling="no" frameborder="0"></iframe> </div> {{/html}}-
Moin,
ich benutze ein html plugin auf einer intranet seite, habe also kein html dokument wo ich ein css element ansprechen kann.
Aber ich kann per html code meine seite manipulieren.Wenn du kein Style-Element einbinden kannst, wäre Javascript noch eine Lösung, allerdings die schlechtere.
Ich brauche dringend eine html Lösung, ich weiß, dass es sowas gibt! nur nicht, wie man es benutzt!
Du solltest dir klar machen, was HTML und CSS ist. Eine reine HTML-Lösung gibt es nicht. Bei Media Queries handelt es sich um ein Konzept, welches mit CSS3 eingeführt wurde.
Grüße Marco
--
Ich spreche Spaghetticode - fließend.-
Moin,
ich benutze ein html plugin auf einer intranet seite, habe also kein html dokument wo ich ein css element ansprechen kann.
Aber ich kann per html code meine seite manipulieren.Wenn du kein Style-Element einbinden kannst, wäre Javascript noch eine Lösung, allerdings die schlechtere.
Ich brauche dringend eine html Lösung, ich weiß, dass es sowas gibt! nur nicht, wie man es benutzt!
Du solltest dir klar machen, was HTML und CSS ist. Eine reine HTML-Lösung gibt es nicht. Bei Media Queries handelt es sich um ein Konzept, welches mit CSS3 eingeführt wurde.
Grüße Marco
Hey,
Javascript wäre vollkommen in Ordnung.
Marco, ich weiß was das ist :D Es gibt aber die Möglichkeit z.b. styles or javascript direkt im html festzulegen, sowas meinte ich.
Weißt du eine javascript lösung?Gruß
Cass-
Moin,
Javascript wäre vollkommen in Ordnung.
Marco, ich weiß was das ist :D Es gibt aber die Möglichkeit z.b. styles or javascript direkt im html festzulegen, sowas meinte ich.Ja, ich habe dir anfangs 2 Links geschrieben. Beide beschreiben das Einbinden von Styles.
Weißt du eine javascript lösung?
Ja. Mit Javascript kann man <http://de.selfhtml.org/javascript/objekte/window.htm@title=die Viewport-Breite> auslesen und dann das Element ausblenden, http://de.selfhtml.org/javascript/sprache/bedingt.htm@title=sofern die Breite kleiner 1400px ist..
Grüße Marco
--
Ich spreche Spaghetticode - fließend.-
Moin,
Javascript wäre vollkommen in Ordnung.
Marco, ich weiß was das ist :D Es gibt aber die Möglichkeit z.b. styles or javascript direkt im html festzulegen, sowas meinte ich.Ja, ich habe dir anfangs 2 Links geschrieben. Beide beschreiben das Einbinden von Styles.
Weißt du eine javascript lösung?
Ja. Mit Javascript kann man <http://de.selfhtml.org/javascript/objekte/window.htm@title=die Viewport-Breite> auslesen und dann das Element ausblenden, http://de.selfhtml.org/javascript/sprache/bedingt.htm@title=sofern die Breite kleiner 1400px ist..
Grüße Marco
Um Gottes Willen Marco,
ich komm nicht klar...
kannst du mir nicht einmal ein Beispiel geben???z.b. es gibt 2 bilder und ab einer browserfensterbreite von 1440px soll erst das 2.,rechte bild geladen werden...
Das würde alle Probleme lösen.
Danke.-
Moin,
jetzt muss ich mich doch auch mal hier einmischen ...!
@Castiral:
Bitte zitiere nicht immer das komplette Posting, sondern entweder gar nichts davon, oder nur die relevanten Teile auf die du antwortest.Um Gottes Willen Marco,
ich komm nicht klar...
Ja, ich auch nicht (mit deinen Erklärungen und Fragen).
kannst du mir nicht einmal ein Beispiel geben???
Und kannst du nicht mal deine gegebene Situation genauer erläutern.
Erst hast du geschrieben:Diese Funktion möchte ich nutzen um iFrames auszublenden. Ich habe 2 davon und ab einer Auflösung von unter 1400px schiebt sich das eine iFrame über meine Menüleisten.
Dann kam raus:
ich benutze ein html plugin auf einer intranet seite, habe also kein html dokument wo ich ein css element ansprechen kann.
Aber ich kann per html code meine seite manipulieren.Und jetzt redest du auf einmal von:
z.b. es gibt 2 bilder und ab einer browserfensterbreite von 1440px soll erst das 2.,rechte bild geladen werden...
Wenn du uns evt. mal schildern könntest, um was für eine Intranet Anwendung es sich da handelt und welche Möglichkeiten dieses besagte HTML Plugin bietet ...
Das würde alle Probleme lösen.
Das vielleicht nicht, aber zumindest den Lesern eine Chance geben, zu verstehen, um was es eigentlich geht und was genau jetzt letztendlich eigentlich erreicht werden soll.
Ansonsten hat Marco dir bereits die in Frage kommenden Möglichkeiten genannt.
Was beinhalten denn bspw. jeweils die Dateien index.html und index2.html (die per iframe eingebunden werden)?
Hast du Zugriff auf den Quelltext dieser Dateien?Gruß Gunther
-
Hallo Gunther,
das mit dem Zitieren macht Sinn
Trotzdem finde ich hier gerade die Hilfestellung ziemlich fragwürdig.
Das einzige was ich möchte ist ein gottverdammtes Beispiel für Media Queries mit iFrame.
Ich möchte mir NICHT anschauen, wie man css in html einbindet.
Ich möchte NICHT wissen wie, wo, was, warum, wozu, es nicht möglich ist ein Beispiel zu posten (du schaffst es ja wohl auch nicht)...Dann möchte ich noch freundlichst anmerken, dass es scheißegal ist, was in dem iFrame steht, weil ein iframe ein iframe ist und der Inhalt völlig Banane ist. Das sollte dir doch klar sein.
Damit du es verstehst,
hier ist mein Code, der den Viewport ausgibt (ja, so weit bin ich alleine schon gekommen):<script type="text/javascript"> var viewportwidth; var viewportheight; if (typeof window.innerWidth != 'undefined') { viewportwidth = window.innerWidth, viewportheight = window.innerHeight } else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight } else { viewportwidth = document.getElementsByTagName('body')[0].clientWidth, viewportheight = document.getElementsByTagName('body')[0].clientHeight } document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>'); </script>Und dann mein Versuch überhaupt irgendetwas mit html/eingebettetem css auszublenden:
<style> #container { background: green; width: 500px; height: 200px; } @media screen and (min-width: 1440px ) { #container {background: blue; } } </style> <div id="container"></div>Dieser html-Versuch funktioniert in normalen html-Seiten, aber nicht in meinem Intranet (xWiki).
Den Viewport auslesen klappt wunderbar auf der xWiki-Seite.
Javascript würde also auf jeden Fall funktionieren, weshalb ich um ein BEISPIEL bitte, das ich verstehen und abändern kann.
Ich möchte aber nicht wie im Beispiel einen Kasten ab einem bestimmten viewport abändern, sondern ein iframe ab einer bestimmten Fenstergröße erst einblenden lassen.
Das ganze lässt sich schwer erklären, weshalb du wahrscheinlich mit meinen Erklärungen nicht klargekommen bist.
Ich bitte doch einfach nur um ein Beispiel, es kann doch nicht so schwer sein, oder?Hier meine iframes. index.html (oberes iframe) soll ab einem viewport von 1440px oder höher zu sehen sein:
<div id="container" style="position:absolute; top:15%; left:35%;"> <iframe src="http://index.html"></iframe> </div> <div align="center"> <iframe src="http://index2.html"></iframe> </div>Kann mir jemand eine Javascript Lösung geben. Oder ein ähnliches Beispiel???
Danke und sorry für die Fehler etc. :/
Gruß
Cass-
Hallo!
Die Entsprechung von CSS Media Queries in Javascript ist 'window.matchMedia' (funktioniert in allen aktuellen Browsern - sprich im IE erst ab Version 10).
Also könntest du so etwas probieren wie:
<div id="container" style="position:absolute; top:15%; left:35%;"> <iframe src="http://index.html"></iframe> </div> <div align="center"> <iframe src="http://index2.html"></iframe> </div> <script type="text/javascript"> if (window.matchMedia("(min-width: 1440px)").matches) { document.getElementById("container").style.display="block"; } else { document.getElementById("container").style.display="none"; } </script>Aufgrund deiner ausgesprochen "zuvorkommenden" Art, habe ich aber keine Lust, mich weiter mit *deinem* Problem zu beschäftigen.
Viel Erfolg!
Gruß Gunther
-
Hallo Gunther,
genau danach habe ich gesucht!
Mir wurde nicht gesagt, wie die CSS Version entsprechend in java script heißt.
Dank kann ich endlich weitermachen.
Auch wenn ich ziemlich ungehalten war, bin ich dir trotzdem sehr dankbar ;)Ich bin nur nicht sehr angetan von unnötigen Kommentaren, von Personen, die mir sagen wollen, wie ich doch bitte meine Beiträge zu gestalten habe und dann die wirklich hilfreichen Informationen zurückhalten.
Diese Klugscheißerei gehört meiner Meinung nach nicht in ein Forum, sondern darf gerne für sich behalten werden.Trotzdem vielen Dank und schönes Wochenende!
Cass-
Hallo Cass!
genau danach habe ich gesucht!
Na prima - das freut mich.
Ich bin nur nicht sehr angetan von unnötigen Kommentaren, von Personen, die mir sagen wollen, wie ich doch bitte meine Beiträge zu gestalten habe und dann die wirklich hilfreichen Informationen zurückhalten.
Diese Klugscheißerei gehört meiner Meinung nach nicht in ein Forum, sondern darf gerne für sich behalten werden.Na ja, wenn sich jeder an:"Zum Mitmachen im SELFHTML Forum haben wir einige grundsätzliche Verhaltensregeln, die du in der Forums-Hilfe nachlesen kannst. Wir erwarten, dass du die Charta des Forums kennst und die dort genannten Regeln einhältst." halten würde, wäre das sicherlich auch nicht nicht erforderlich.
Trotzdem vielen Dank und schönes Wochenende!
Danke, dir auch.
Gruß Gunther
-
-
-
-
-
-
-
-
-
-
-
-
-
-