Seite 1 von 1

DIV anzeigen erst ab 1024* Auflösung

Verfasst: 31.01.2009, 12:17
von gustoo
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 () {
 var box = new Object();
 box.x = 1024;
 box.y = 768;
 if (self.innerHeight) {
  box.x = self.innerWidth;
  box.y = self.innerHeight;
 } else if (document.documentElement && document.documentElement.clientHeight) {
  box.x = document.documentElement.clientWidth;
  box.y = document.documentElement.clientHeight;
 } else if (document.body) {
  box.x = document.body.clientWidth;
  box.y = document.body.clientHeight;
 }
 return box;
}
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

Verfasst:
von
Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:
  • einzigartige Texte
  • suchmaschinenoptimierte Inhalte
  • eine sinnvolle Content-Strategie
  • Beratung und Umsetzung
Jetzt anfragen: 0511 / 300325-0

Re: DIV anzeigen erst ab 1024* Auflösung

Verfasst: 31.01.2009, 13:17
von Mork vom Ork
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.

Verfasst: 31.01.2009, 13:44
von gustoo
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

Verfasst:
von
SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002
  • persönliche Betreuung
  • individuelle Beratung
  • kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.


Verfasst: 31.01.2009, 14:56
von ins0

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

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

grüße ins0

Verfasst: 31.01.2009, 17:13
von Mork vom Ork
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.

Verfasst: 31.01.2009, 17:15
von Mork vom Ork
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?

Verfasst: 31.01.2009, 17:32
von ins0
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 :roll:

Verfasst: 31.01.2009, 17:54
von gustoo
Vielen Dank für Eure Antworten. Ich werd´s gleich mal versuchen.

Verfasst: 31.01.2009, 18:04
von [btk]tobi
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 :D

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

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

Verfasst: 31.01.2009, 18:15
von ins0
hätt ich bei längeren nachdenken ja eigentlich selbst drauf kommen können :D aber bei dem Beispiel mit dem TFTs hats klick gemacht ^^

dank dir

grüße ins0

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