JavaScript Einzelne Objekte ausblenden

[xtrars]

Hallo CB'ler.
Ich habe eine eigene Website. Dort habe ich verschiedene Boxen mittels css hingezaubert und in der Mitte ein Flashgame plaziert. Allerdings soll die Flashanwendung ausgeblendet werden, wenn das Browserfenster eine gewisse Größe erreicht hat.

Also angenommen wenn das Browserfenster in der Breite 600 Pixel unterschreitet soll das Flashgame verschwinden.

Danke im Voraus

 

[mercsen]

?? Jetzt willst du das dir hier jemand das ding programmiert oder was?

Frechheit, hast du auch eine konkrete frage?

Was hast du bisher versucht? Was für CSS, hast mal anzeige beispiele? Was funktioniert bei dir nicht? JavaScript erfahrung? Was ist für dich das Browserfenster? Der Browser oder der anzeige bereich?

Hast dir überhaupt auch nur irgendein gedanken gemacht außer was du haben willst?

Ansonsten rate ich dir zu jQuery und dem resize() event! http://api.jquery.com/resize/

 

[xtrars]

Ja ich denke ich hätte es mehr als Frage formulieren müssen.

Hier einer meiner Anlaufpunkte:
http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm

Da ist dann auch abgebildet, dass ich den Innenbereich meine. JavaScript-Erfahrung hab ich kaum welche aber deswegen frag' ich ja auch hier nach.

 

[mercsen]

und wo genau ist da nun dein problem? steht doch alles ziemlich ausführlich beschrieben.
auch wennn das mal eben super kompliziert ist, mit jQuery wäre das schnell gemacht:

$.ready(function() {
   $(window).resize(function(evt) {
        if($(window).outerWidth() < 600) {
            $('#ID_DES_FLASH_OBJEKTS').fadeOut(); // oder was auch immer
        }
   });
});

fehlt natürlich noch der teil um es wieder sichtbar zu machen

 

[DasBoeseLebt]

Und wenn man es ohne JQuery machen will, dann rufst ca. so

function hide() {
    document.getElementById("DeinElement").style.visibility = "hidden";
}

Alternativ anstatt visibility display verwenden, dann fällt auch der Platzhalter weg.


http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

 

[palace4d]

In neueren Browsern über die neue Match Media API.

var hide = document.getElementById('flash');
if(window.matchMedia("(min-width: 600px)").matches){
	hide.style.display = "block";
}
else {
	hide.style.display = 'none';
}

 

[xtrars]

Danke für die super Anworten. Ich probiere es gleich mal aus. Achja: Wie bekomm ich die ID der Flashanwendung raus?

 

[mercsen]

eieieieieie ^^"

ich rate dir dich mal mit dem Thema DOM zu beschäftigen. und allgemein mal die w3cschools durch zu arbeiten.

Ich nehme mal an dein Flashobjekt steckt in einem <object> Tag ?
Da müsste dann irgendwo was stehen wie: <object id="flash_xyz">.......</object>
Die id ist dann flash_xyz

Vermutlich ist dieses Object aber in einem DIV o.ä. das hat auch ein ID attribut.
Wenn nicht setzt du eben eines

<div id="abc">

und schon kannst du das DIV mit abc eindeutig identifizieren.

 

[palace4d]

Müsste doch im HTML stehen, wenn nicht einfach ein div Block drum und selber definieren.
Mit CSS3 geht dein vorhaben übrigens auch:

#flash {display: block;}
@media screen and (max-width: 600px) {
	#flash {
		display:none;
	}
}

 

[xtrars]

Boar! Übelst geil!!! Hat geklappt. Ich freue mich so kompetente Antworten bekommen zu haben. Vielen lieben Dank, ihr seit super.

 

[mercsen]

Mit CSS3 hast du aber noch schlechtere abwärts kompatibilität als mit JavaScript, mit dem man vieles auch noch kompensieren kann.