Abfragen ob Element im sichtbaren Bereich

S

SuperSonik

Erfahrenes Mitglied
Hallo Leute,
ich habe die Aufgabe ein Werbebanner zu programmieren welches per Javascript immer
auf der rechten Seite im Browserfenster "mitläuft". Spricht das Banner muss sich beim herunter scrollen mitbewegen.
Leider darf ich den Banner nicht einfach mit CSS position:fixed positionieren.
(Für eine Begründung fragt am besten meinen Chef .... :( )
Hat da jemand einen Tipp wie man so etwas macht. Ich bin leider nicht so fit in JS
da ich sonst eigentlich immer in PHP programmiere.
Ich habe vor allem ein Problem mit den Eventhandlern. Irgendwie scheint da keiner so richtig zu passen. Meine Idee ist jetzt das den body-tag mit einem onmouseover zu versehen und
in der Funktion dann abzufragen ob der Banner (bzw. die div-Box des Banners) noch im sichtbaren Bereich ist.
Kann man abfragen ob ein Element noch im sichtbaren Bereich ist. Ich meine damit nicht die
Eigenschaft visibility, wenn ich das richtig verstanden habe gibt die ja nur an ob ein Element
überhaupt angezeigt wird.
Vielen Dank schon mal. Gruß,
SuperSonik
 
Moin,

Dafür gibt es keine Eigenschaft, die du Auslesen kannst, du kannst jedoch die Eigenschaften scrollTop bzw. Scrollleft ermitteln und darüber die benötigte Position des Banners errechnen.

Als Eventhandler würde ich den onscroll-Event empfehlen(dieser muss für window notiert werden, nicht für den body)
 
Ich habe jetzt die ganze zeit rum experimentiert. Im Firefox tut's das jetzt auch, aber weder im IE 6 noch 7.
Hier mal mein Code:

Code: 
		<script type="text/javascript">
			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);	
			}
			function banner_move()
    		{
    			var y = getY();
    			if(y <= (window.outerHeight-100))
    			{
    			document.getElementById("adbanner").style.top = y  +"px";
    			}
    			setTimeout("banner_move()", 20);
    		}
			function init()
    		{
    			window.onscroll= banner_move();
			}
		</script>

Und dann im body Tag noch:
Code: 
 onload="init();"
(dieser muss für window notiert werden, nicht für den body)
Zum Vergrößern anklicken....
Kannst Du mir das noch etwas genauer erklären? Ich glaube das dort der Hund begraben ist.
Danke und Gruß,
Sonik
 
Hi,

sieht doch schon gut aus, was du geschrieben hast. Mit ein paar kleinen Änderungen sollte dein Vorhaben umzusetzen sein.

Zunächst wird eine Funktion ohne Klammern an einen Event zugewiesen.
Code: 
window.onscroll= banner_move;
Die Funktion banner_move muss nicht mehr periodisch aufgerufen werden, da sie durch das onscroll-Ereignis ohnehin aufgerufen wird. Weiterhin ist die if-Bedinung in der Funktion überflüssig.

Mein Vorschlag:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
#adbanner{ position: absolute;
         top: 10px;
         right: 10px;
         border: 5px solid #ccc;
         background: #000;
         color: #efefef;
         padding: 6px;}
 //-->
</style>
<script type="text/javascript">
<!--
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);
}
function banner_move()
  {
    var y = getY();

    document.getElementById("adbanner").style.top = y  +"px";
  }

function init()
  {
    window.onscroll= banner_move;
}
//-->
</script>
</head>
<body onload="init();">
  <div id="adbanner"></div>
  <div style="height: 2000px;">HöhenDiv</div>
</body>
</html>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück