Objekt ausblenden

[Elendil94]

Hallo,
ich hoffe hier kann mir jemand helfen.

Auf meiner Seite soll ein Objekt ausgeblendet werden, sobald das Browserfenster verkleinert wird.

Ich habe leider nur wenig JavaScript-Kenntnisse und habe es mit folgendenm Code versucht:


if (document.body.clientwidth<600) document.getElementById("header").style.visibility = "hidden";


Vielen Dank für die Hilfe

[Xardas der Dunkle]

Am besten schnappst du dir ein Framework wie JQuery: http://jquery.com, da gerade diese Fensterbreiten Geschichte in jedem Browser anders umgesetzt ist -__-.

HTML-Code:

<script type="text/javascript">
// <![CDATA[
window.onresize = function () {
      if (document.body.clientWidth < 600) {
             document.getElementById("header").style.display = "none";
      }
};
// ]]>
</script>

Mit jQuery sehe es btw. so aus:

HTML-Code:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// <![CDATA[
$(window).resize(function () {
     if($(window).width() > 600) {
          $('#header').hide();
     }
});
// ]]>
</script>

[Elendil94]

*freu*

Vielen Dank!!

Die ganze letzte Nacht hab ich daran gesessen. Jetzt funktionierts zum Glück.

Wenn ich es jetzt wieder sichtbar machen will, muss ich dann das

$('#header').hide();

durch

$('#header').show();

ersetzen??

[Jesus_666]

Nebenbei, wenn du Objekte mit Standard-CSS verstecken willst (auf welches JavaScript mit style zugreift), dann geht das über display: none. In JS also foo.display = none.

Allerdings mußt du auch wissen, wie das Objekt normalerweise dargestellt wird, um es wieder anzeigen zu können. Aber ein wenig Kenntnis der HTML-Elemente und ihrer Standarddarstellungen (sowie ein entsprechendes Nachschlagewerk) ist im Webdesign eh extrem nützlich.

[Xardas der Dunkle]

Wenn ich es jetzt wieder sichtbar machen will, muss ich dann das

$('#header').hide();

durch

$('#header').show();

ersetzen??

...

Ja. Kann man auch alles, in der Dokumentation nachlesen: http://docs.jquery.com/Effects

[Elendil94]

Ok. Nochmal vielen Dank für die Hilfe.