zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Werbebanner soll immer im Bild sein.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.08.2007, 15:43
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.04.2006
Beiträge: 130
fabske befindet sich auf einem aufstrebenden Ast
Standard Werbebanner soll immer im Bild sein.

Hört sich komisch an, am besten ich erkläre es im konkreten Fall: Hier seht ihr die Webseite um die es geht. In der Seitenleiste ganz unten ist ein hoher Block mit GoogleWerbung. Auf der Seite wird in einzelnen Artikeln viel kommentiert, das heißt die Seiten werden sehr sehr lang.
Nun hätte ich gerne, dass dieser div Container in dem die GoogleWerbung steckt immer mit nach unten läuft, wenn man runterscrollt. Wenn man wieder hoch scrollt dann eben nur soweit mit hochläuft, bis sie oben (an allem was in der Seitenleiste drüber ist) "anstößt".

Ich habe nun mal aus einem Beispiel etwas zusammengebaut, aber es scheint irgendwie nicht zu funktionieren:

Code:
<script type="text/javascript"><!--
function init(){
   document.getElementById("google").style.visibility="visible"
   anim()
}
function anim(){
   if (window.pageYOffset > 600) {
   document.getElementById("google").style.margin-top = window.pageYOffset - 600
   }
   setTimeout("anim()", 100)
}
//--></script>

<div onLoad="init()" id="google" style="text-align:center;">

<script type="text/javascript"><!--
google_ad_client = "pub-3770428004022048";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "F9F9F9";
google_color_bg = "F9F9F9";
google_color_link = "E12D2D";
google_color_text = "333333";
google_color_url = "007CC3";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>
Kann mir jemand sagen warum?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.08.2007, 16:53
Benutzer
neuer user
 
Registriert seit: 11.10.2006
Beiträge: 73
Gizmor befindet sich auf einem aufstrebenden Ast
Standard

Die Browser nutzen unterschiedliche namen dafür wie weit gescrollt worden ist
Mit dem folgenden Script läuft es bei mir aber überall zuverlässig

Code:
function Scroll_Offset() {
	var x,y;
	if (self.pageYOffset) // all except Explorer
	{
		x = self.pageXOffset;
		y = self.pageYOffset;
	}
	else if (document.documentElement && document.documentElement.scrollTop)
		// Explorer 6 Strict
	{
		x = document.documentElement.scrollLeft;
		y = document.documentElement.scrollTop;
	}
	else if (document.body) // all other Explorers
	{
		x = document.body.scrollLeft;
		y = document.body.scrollTop;
	}
	
	return({"x":x, "y":y});	
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.08.2007, 19:49
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.04.2006
Beiträge: 130
fabske befindet sich auf einem aufstrebenden Ast
Standard

Hallo Gizmor. Vielen Dank für deine Antwort
Ich bin leider nicht so der JS Koder, aber ich hab dein Kode mal aufgenommen, allerdings geht es bei mir immer noch nicht


Code:
<script type="text/javascript"><!--

function werbebanner(){
   document.getElementById("googlewerb").style.visibility="visible"

var y;
	if (self.pageYOffset) // all except Explorer
	{
		y = self.pageYOffset;
	}
	else if (document.documentElement && document.documentElement.scrollTop)
		// Explorer 6 Strict
	{
		y = document.documentElement.scrollTop;
	}
	else if (document.body) // all other Explorers
	{
		y = document.body.scrollTop;
	}

   anim_werbebanner()
}

function anim_werbebanner(){
   if (y > 600) {
   document.getElementById("googlewerb").style.margin-top = y - 600
   }
   setTimeout("anim_werbebanner()", 100)
}
//--></script>

<div onLoad="werbebanner()" id="googlewerb" style="text-align:center;">
<script type="text/javascript"><!--
google_ad_client = "pub-3770428004022048";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "F9F9F9";
google_color_bg = "F9F9F9";
google_color_link = "E12D2D";
google_color_text = "333333";
google_color_url = "007CC3";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Hier die Seite.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.08.2007, 22:53
Benutzer
neuer user
 
Registriert seit: 11.10.2006
Beiträge: 73
Gizmor befindet sich auf einem aufstrebenden Ast
Standard

"margin-top" ist im css richtig, in js muss es aber "marginTop" sein.

daher auch die Fehlermeldung:
Code:
invalid assignment left-hand side
[Break on this error] document.getElementById("googlewerb").style.margin-top = y - 600\n
Mit Zitat antworten
  #5 (permalink)  
Alt 16.08.2007, 23:23
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.04.2006
Beiträge: 130
fabske befindet sich auf einem aufstrebenden Ast
Standard

Ich hab es korrigiert, danke, aber es tut sich einfach nichts
Mit Zitat antworten
  #6 (permalink)  
Alt 19.08.2007, 21:51
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.04.2006
Beiträge: 130
fabske befindet sich auf einem aufstrebenden Ast
Standard

Kann mir niemand helfen? Wenn ich das Skript einfach so in eine neue html Datei packe funktioniert es, aber sobald ich es in meine Webseite integriere geht es nicht mehr.
Mit Zitat antworten
  #7 (permalink)  
Alt 19.08.2007, 22:13
Benutzer
neuer user
 
Registriert seit: 11.10.2006
Beiträge: 73
Gizmor befindet sich auf einem aufstrebenden Ast
Standard

bei mir wird immer noch der gleiche fehler angezeigt
Mit Zitat antworten
  #8 (permalink)  
Alt 19.08.2007, 23:02
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.04.2006
Beiträge: 130
fabske befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Gizmor Beitrag anzeigen
bei mir wird immer noch der gleiche fehler angezeigt
Sorry, hatte zwischenzeitig nochmal dran rumprbiert und dann einfach wieder backup gepasted, nun ist es endgültig korrigiert, aber wie bereits gesagt, tut sich nix.
Mit Zitat antworten
  #9 (permalink)  
Alt 29.08.2007, 12:07
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 18.04.2006
Beiträge: 130
fabske befindet sich auf einem aufstrebenden Ast
Standard

Also ich hab das ganze nun nochmal genommen und in eine separate html Datei geschrieben, aber auch da scheint es nicht zu klappen


Code:
<html>
  <head>
    <title>Mitlaufender Werbebannertest</title>
  </head>
  <body>

<div id="langer_inhalt" style="position:absolute; height:1400; width:200; background-color:blue;">langer Inhalt</div>

<div id="seitenleiste" style="position:absolute; height:600; width:200; left:400; background-color:yellow;">seitenleiste</div>

<script type="text/javascript"><!--

function werbebanner(){
   document.getElementById("googlewerb").style.visibility="visible"

var y;
	if (self.pageYOffset) // all except Explorer
	{
		y = self.pageYOffset;
	}
	else if (document.documentElement && document.documentElement.scrollTop)
		// Explorer 6 Strict
	{
		y = document.documentElement.scrollTop;
	}
	else if (document.body) // all other Explorers
	{
		y = document.body.scrollTop;
	}

   anim_werbebanner()
}

function anim_werbebanner(){
   if (y > 600) {
   document.getElementById("googlewerb").style.marginTop = y - 600
   }
   setTimeout("anim_werbebanner()", 100)
}
//--></script>

<div onLoad="werbebanner()" id="googlewerb" style="left:400; top:610; width:200; position:absolute; background-color:red;">Hier steht die mitlaufende Google-Werbung</div>


</body>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.08.2007, 13:52
Benutzer
neuer user
 
Registriert seit: 11.10.2006
Beiträge: 73
Gizmor befindet sich auf einem aufstrebenden Ast
Standard

So, zuerst mal nen paar kritikpunkte bzw. hinweise zu deinem Code:

Postionsangaben, Größen usw. müssen mit einer einheit angegeben werden. z.B. "height: 600px". Ohne wird es meistens nicht funktionieren.

"position: absolute" ist total unnötig da wo du es verwendest. Dafür gibt es float.

html-optionen werden immer alle klein geschrieben. Also "onload" nicht "onLoad". Außerdem gehört das eher in den body, weil nur dort wird es zuverlässig ausgeführt.

Die funktion um die y-verschiebung auszulesen muss natürlich jedes mal neu aufgerufen werden nicht nur beim start. Ansonsten wird sich der y werd logischerweise nie ändern.

Bei Javascript gehört an das ende einer Befehlszeile ein ";", die haben auch mehrfach gefehlt und sowas kann auch zu unerwarteten Fehlern oder Problemen führen.



So, erstmal genug, funktionieren tut das ganze dann so:
Code:
<html>
  <head>
    <title>Mitlaufender Werbebannertest</title>
  </head>
  <body onload="werbebanner()">

<div id="langer_inhalt" style="height:1400px; width:200px; float: left; background-color:blue;">langer Inhalt</div>
<div id="seitenleiste" style="height:600px; width:200px; float: left; background-color:yellow;">seitenleiste</div>

<script type="text/javascript"><!--

function werbebanner(){
   document.getElementById("googlewerb").style.visibility="visible";
   anim_werbebanner();
}

function anim_werbebanner(){
	var y = getY();
	document.getElementById("googlewerb").style.top = y + 10  +"px";
	setTimeout("anim_werbebanner()", 10);
}

function getY() {
	if (self.pageYOffset) // all except Explorer
	{
		y = self.pageYOffset;
	}
	else if (document.documentElement && document.documentElement.scrollTop)
		// Explorer 6 Strict
	{
		y = document.documentElement.scrollTop;
	}
	else if (document.body) // all other Explorers
	{
		y = document.body.scrollTop;
	}
	
	return(y);	
}

//--></script>

<div id="googlewerb" style="left:400px; top:10px; width:200px; position:absolute; background-color:red; visibility: hidden;">Hier steht die mitlaufende Google-Werbung</div>


</body>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild durch Bild ersetzten! (a:hover) Prof. Awesome CSS 11 16.03.2011 15:33
Bild als Active makieren siriussmarty CSS 0 08.07.2010 15:37
Bild über Bild rafa CSS 2 24.01.2010 19:46
Bild über Bild legen mit position: relative (IE6 Problem) naitsab CSS 3 09.06.2009 14:20
Verflixter Rahmen um ein Bild Webelix CSS 6 22.07.2007 13:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:01 Uhr.