DIV anzeigen erst ab 1024* Auflösung

Beitrag von **gustoo** » 31.01.2009, 12:17

Hallo,

ich habe folgendes Problem: Ich möchte rechts neben meinem Content einen Skyscraper (Banner) platzieren, der aber erst ab einer Auflösung angezeigt wird, die größer ist als 1024. Bei selfhtml hab ich folgendes javascript gefunden:

Code: Alles auswählen

function getViewportSize &#40;&#41; &#123;
 var box = new Object&#40;&#41;;
 box.x = 1024;
 box.y = 768;
 if &#40;self.innerHeight&#41; &#123;
  box.x = self.innerWidth;
  box.y = self.innerHeight;
 &#125; else if &#40;document.documentElement && document.documentElement.clientHeight&#41; &#123;
  box.x = document.documentElement.clientWidth;
  box.y = document.documentElement.clientHeight;
 &#125; else if &#40;document.body&#41; &#123;
  box.x = document.body.clientWidth;
  box.y = document.body.clientHeight;
 &#125;
 return box;
&#125;

Nach dem Einbau hats aber trotzdem nicht geklappt, was hab ich falsch gemacht? Muß ich den div (#teaser) innerhalb dieses Scripts noch irgendwie benennen?

Vielen Dank,

Chris

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **Mork vom Ork** » 31.01.2009, 13:17

gustoo hat geschrieben:Nach dem Einbau hats aber trotzdem nicht geklappt, was hab ich falsch gemacht? Muß ich den div (#teaser) innerhalb dieses Scripts noch irgendwie benennen?

Wenn du dir den Namen der Funktion mal zu Gemüte führst, solltest du feststellen, dass da lediglich von der Größe des Anzeigebereichs die Rede ist: getViewportSize() = get viewport size = hole Anzeigebereichsgröße. Auch im Code sollte das ins Auge stechen, dort ist immer wieder die Rede von box.x = … width bzw. height, und am Ende wird box zurückgegeben. Nirgends steht etwas von „größer als 1024“.

Die Funktion liefert die lediglich die aktuellen Ausmaße des Bereichs, den der Browser einem HTML-Dokument zur Verfügung stellt; es liegt an dir, was du damit anstellst, namentlich ob du ab einer bestimmten Breite ein Element einfügst.

Auf die Breite müsstest du übrigens mit direkt getViewportSize().x zugreifen können, so dass du dir den in anderen Sprachen üblichen / notwendigen Umweg über eine zusätzliche Variable sparen kannst. Sprich, statt

var maße = getViewportSize();
if (maße.x >= 1024) { blafasel(…); }

sollte auch

if (getViewportSize().x >= 1024) { blafasel(…); }

funktionieren.

Beitrag von **gustoo** » 31.01.2009, 13:44

Hallo Mork,

vielen Dank für Deine Antwort. Vielleicht hab ich vergessen zu erwähnen, dass ich von javacript keine Ahnung hab.

Meinst Du es funktioniert, wenn ich in die Box x + y 1024 bzw 768 eintrage, oder wie müßte der Code aussehen? Muß ich darauf achten, dass der Code innerhalb eines bestimmten tags steht?

1000 Dank,

Chris

von **Anzeige von ABAKUS** »

Beitrag von **ins0** » 31.01.2009, 14:56

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="ins0schaf" />

	<title>Ohne Titel 22</title>
	
<style>
	#banner
	&#123;
		display&#58;expression&#40;document.body.clientWidth < 1024 ? "none" &#58; ""&#41;;
		border&#58; 1px solid red;
	&#125;
</style>
<script>

	function check_width&#40;&#41;&#123;

		if&#40;document.body.clientWidth < 1024&#41;
			document.getElementById&#40;'banner'&#41;.style.display = 'none';
		else
			document.getElementById&#40;'banner'&#41;.style.display = '';
	&#125;
</script>


</head>
 
<body onload="check_width&#40;&#41;;">

	<div style="width&#58;1000px;border&#58;1px solid red;float&#58;left;">
		content
	</div>
	<div id="banner">
		banner
	</div>
	<div style="clear&#58;both;"></div>

</body>
</html>

würde mir so spontan da einfallen :/ich mir eher gerade frage wieso jemand evt. für einen Banner bezahlt der erst ab einer Auflösung von 1024 angezeigt wird

find ich gut ^^ nach dem Motto:

"Ihr Banner wird geschaltet wenn der Besucher den Mozilla FireFox installiert, hat eine Auflösung von min 1680x1280 besitzt, die Farbqualität der Aufösung höchstens 16Bit erreicht und Cookies und Javascript aktiviert hat.

!!! achtung übertreibung

grüße ins0

Beitrag von **Mork vom Ork** » 31.01.2009, 17:13

gustoo hat geschrieben:Vielleicht hab ich vergessen zu erwähnen, dass ich von javacript keine Ahnung hab.

Das dachte ich mir schon, aber der Name getViewportSize() sollte trotzdem weitestgehend selbsterklärend sein. Wenn du nun gesagt hättest, dass du kein Englisch kannst, wäre das was anderes - obwohl ich mir bei SELFHTML auch nicht recht vorstellen kann, dass die Code völlig ohne begleitende Worte veröffentlichen.

Meinst Du es funktioniert, wenn ich in die Box x + y 1024 bzw 768 eintrage

Äh, nein, du hast meine erste Antwort wirklich gelesen oder nur überflogen und mit Kann-ich-nicht zu den Akten gelegt? Wie ich schon geschrieben hatte, „die Funktion liefert lediglich die aktuellen Ausmaße des [Anzeige]bereichs“ des Browsers.
Die Funktion ist der Zollstock, mit dem du dein Gemüsebeet ausmisst. Wo und wie du den Grünkohl sähst, kann dir dein Zollstock nicht verraten, das musst du selber machen, mit anderem Werkzeug.

Die simpelste Methode für dein Problem wäre folgende:

Code: Alles auswählen

<script type="text/javascript">
  if &#40;getViewportSize&#40;&#41;.x >= 1024&#41; &#123; 
      document.write&#40;'<div><a href="pornos.rund.um.die.uhr.html"><img src="werbung.jpg" alt="Heiße Schnecken"><' + '/a><' + '/div>';
  &#125;
</script>

Diesen Schnippsel setzt du dahin, wo dein Skyscraper erscheinen soll; der HTML-Code, der mit document.write() in die Seite geschrieben wird, muss logischerweise entsprechend deinem Bedarf angepasst werden.
Die Funktion getViewportSize() muss vorher im <head><script>-Bereich definiert werden, damit du sie benutzen kannst.

Beitrag von **Mork vom Ork** » 31.01.2009, 17:15

ins0 hat geschrieben:ich mir eher gerade frage wieso jemand evt. für einen Banner bezahlt der erst ab einer Auflösung von 1024 angezeigt wird :D

Ich mache das auf meinen Seiten, je nach Platzangebot kommt ein Skyscraper rechts oder eine horizontale Standardfläche unten auf die Seite. Damit werden auf kleinen Anzeigen die Inhalte vom Skyscraper nicht unschön zusammengequetscht, auf großen Anzeigen bleibt aber auch keine leere Fläche übrig.

display:expression(document.body.clientWidth < 1024 ? "none" : "");

Auch hübsch, aber in welchen Browsern funktioniert das denn? Auch im IE?

Beitrag von **ins0** » 31.01.2009, 17:32

Mork vom Ork hat geschrieben:
ins0 hat geschrieben:display:expression(document.body.clientWidth < 1024 ? "none" : "");
Auch hübsch, aber in welchen Browsern funktioniert das denn? Auch im IE?

expression müsste im ie gehen und im ff nidde ... aber iwer muss ja immer aus der reihe tanzen

Beitrag von **gustoo** » 31.01.2009, 17:54

Vielen Dank für Eure Antworten. Ich werd´s gleich mal versuchen.

Beitrag von **[btk]tobi** » 31.01.2009, 18:04

ins0 hat geschrieben:würde mir so spontan da einfallen :/ich mir eher gerade frage wieso jemand evt. für einen Banner bezahlt der erst ab einer Auflösung von 1024 angezeigt wird

find ich gut ^^ nach dem Motto:

"Ihr Banner wird geschaltet wenn der Besucher den Mozilla FireFox installiert, hat eine Auflösung von min 1680x1280 besitzt, die Farbqualität der Aufösung höchstens 16Bit erreicht und Cookies und Javascript aktiviert hat.

!!! achtung übertreibung

grüße ins0

Das nennt man Zielgruppen gerechte Werbung, wenn du 22" Widescreen Bildschirme verkaufst kannst du so die Werbung nur Usern anzeigen die einen kleinen Bildschirn, bzw. eine kleine Auflösung haben. Der Rest bekommt Porno Werbung angezeigt

Gruß Tobi

Beitrag von **ins0** » 31.01.2009, 18:15

hätt ich bei längeren nachdenken ja eigentlich selbst drauf kommen können

aber bei dem Beispiel mit dem TFTs hats klick gemacht ^^

dank dir

grüße ins0

Beitrag von **Cajuul** » 31.01.2009, 18:18

wenn du ahnung von css hast, dann vielleicht mit: https://fortes.com/projects/dynamiclayout/