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 -__-.


<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:

<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. http://www.multimediaxis.de/images/smilies/old/sm_12.gif