✔ jQuery: Prüfen ob Div im sichtbaren Bereich ist

strukturart

strukturart

Erfahrenes Mitglied
Hallo,

ich möchte gerne prüfen ob ein Div im sichtbaren Bereich des Bildschirmes ist.

Hab folgendes probiert das prüft ab nur ob das Objekt besteht.

HTML: 
if($('.content:visible'))
{
	alert("sichtbar")
}

Wie muss ich das denn machen?
 
Das wird so direkt gar nicht gehen.

Um das herauszufinden, wirst du die Position des DIVs mit der aktuellen Scroll-Position innerhalb der Seite vergleichen müssen.


Wie ich gerade gesehen habe, hast du die Frage im JAVA-Bereich und nicht im Javascript-Bereich gestellt. Deshalb ist die Aussage nur unter Vorbehalt!
 
Zuletzt bearbeitet:
Verschieben kann ich es leider nicht, muss einer der Moderatoren machen.

Ich hätte dafür aber ein Beispiel wie es aussehen könnte:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.div1{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 1500px;
	left: 1500px;
	background-color: red;
}
.div2{
	width: 5000px;
	height: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: green;
}
.div3{
	width: 10px;
	height: 3000px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: blue;
}
</style>
<div id="div1" class="div1">&nbsp;</div>
<div class="div2">&nbsp;</div>
<div class="div3">&nbsp;</div>
Javascript: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {

$(window).scroll(function (){
var left = false, right = false, up = false, down = false;
// prüfen ob DIV1 rechts außerhalb der Seite ist
if (parseInt($("#div1").css("left")) > ($(window).width() + $(document).scrollLeft())) {
  	right = false;
} else {
	right = true;
}
// prüfen ob DIV1 links außerhalb der Seite ist
if ((parseInt($("#div1").css("left")) + parseInt($("#div1").css("width"))) <= $(document).scrollLeft()) {
	left = false;
} else {
 	left = true;
}
// prüfen ob DIV1 oben außerhalb der Seite ist
if ((parseInt($("#div1").css("top")) + parseInt($("#div1").css("height"))) <= $(document).scrollTop()) {
	up = false;
} else {
	up = true;

}
// prüfen ob DIV1 unten außerhalb der Seite ist
if (parseInt($("#div1").css("top")) > ($(window).height() + $(document).scrollTop())) {
	down = false;
} else {
	down = true;

}

if (left == true && right == true && up == true && down == true) {
	document.title = "Jetzt ist es sichtbar!";
} else {
	document.title = "Rechts " + right + " Links " + left + " Oben " + up + " Unten " + down;
}

});

});
</script>

DIV1 ist außerhalb des sichtbaren Bereichs (zur Not eben die CSS Angaben entsprechend anpassen). Scrollt man dann rauf und runter bzw. nach rechts oder links bis der Container sichtbar wird, erscheint in der Titelleiste eine entsprechende Meldung.

DIV2 und DIV3 ist nur um die Seite so groß zu machen das es Scrollbalken gibt.

WICHTIG: ohne die Doctype Angaben arbeitet scheinbar die $(window).height() Anweisung nicht korrekt!
 
Na wenn ich mir obiges Beispiel anschaue, dann ist mein Vorschlag gar nicht mal so schlecht.

Finde ich!
 
Hallo tombe,

Danke für deinen Code.

Habe es mittler weilen so gelöst:

Code: 
$(document).ready( function () {
			
var windowHeight = $(window).height();
if(windowHeight < 800)

{
	//alert("600");


	
	if ($('.content').length) 
	{
		
			 $('html, body').animate({
			     scrollTop: 400
			 }, 1000);
				 
		 }
		
			
		}				 


	  });


Ist zwar keine direkt Lösung für die von mir gestellte Frage aber funktioniert auch.

Ist für diese Webseite: cantinemobile.ch


Danke

Gruss John
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück