|
|||
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> |
Sponsored Links |
|
|||
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}); } |
Sponsored Links |
|
|||
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> |
|
|||
"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 |
|
|||
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.
|
|
|||
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.
|
|
|||
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> |
Sponsored Links |
|
|||
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> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |