Hallo zusammen,
wieder einmal ein Problem *grummel*
In PHP bin ich es gewohnt, Funktionen problemlos miteinander verbinden zu können. Funzt in JavaScript jedoch nicht so, wie ich es mir vorstelle.
Ich habe 2 Teile, die für sich alleine wunderbar funktionieren. Will ich diese verbinden, geht es nicht.
Hier mal der Code:
Teil 1 - Funktionsbeschreibung:
Die DIV "box2" befindet sich irgendwo im Code. Es werden sämtliche Parameter ausgerechnet, ab wann diese "box2" in den sichtbaren Bereich kommt. Sobald diese DIV im sichtbaren Bereich ist, soll eine Funktion ausgeführt werden. Das funktioniert wunderbar.
Teil 2: Dann habe ich die Funktion "Schleife" ;-) , wo mir an anderer Stelle ja sehr weitergeholfen wurde in diesem Forum - nochmals besten Dank an "kkapsner" ! Dieses Skript funktioniert für sich alleine stehend ebenso wunderbar.
Will ich diese beiden (wie in PHP gewohnt) zusammenfügen, geht gar nichts mehr.
Ich hab schon elendslange gegoogelt und rumprobiert. Ich schaffe es einfach nicht.
Vielleicht gibt es spezielle Syntaxe, die ich beachten müsste ... ich weiß es nicht.
Würde mich feuen, zumindest einen Tipp zu bekommen, wo ich nachschauen könnte.
Besten Dank im Voraus.
Grüße,
Heinz
wieder einmal ein Problem *grummel*
In PHP bin ich es gewohnt, Funktionen problemlos miteinander verbinden zu können. Funzt in JavaScript jedoch nicht so, wie ich es mir vorstelle.
Ich habe 2 Teile, die für sich alleine wunderbar funktionieren. Will ich diese verbinden, geht es nicht.
Hier mal der Code:
Teil 1 - Funktionsbeschreibung:
Die DIV "box2" befindet sich irgendwo im Code. Es werden sämtliche Parameter ausgerechnet, ab wann diese "box2" in den sichtbaren Bereich kommt. Sobald diese DIV im sichtbaren Bereich ist, soll eine Funktion ausgeführt werden. Das funktioniert wunderbar.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Punkte einblenden erst ab sichtbarem Bereich</title>
<link rel="stylesheet" href="dots.css">
<style type="text/css">
body {font-size: 16pt; font-weight: bold; text-align: center;}
#box1 {height: 800px; border: 1px dotted #000000;}
#box2 {height: 400px; background-color: #ff0000;}
#box3 {height: 400px; background-color: #cccccc;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// Browser-Fenster Höhe ermitteln
var FENSTERHOEHE = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
</script>
</head>
<body>
<div id="box1">1. Box
</div>
<div id="box2">Das ist die 2. Box!</div>
<div id="box3">3. Box<br><br>
<script>
//Sichtbare Bildschirmhöhe ermitteln:
document.write("Fensterhöhe: ");
document.write(FENSTERHOEHE);
document.write("<br>");
//Position von box2 ermitteln:
var BOXTOP = document.getElementById('box2').offsetTop;
document.write("Position von box2: ");
document.write(BOXTOP);
document.write("<br>");
//Differenz berechnen:
var DIFFERENZ = BOXTOP - FENSTERHOEHE;
document.write("Differenz: ");
document.write(DIFFERENZ);
document.write(" Pixel<br>");
// 10px über der Differenz errechnen (also 496):
var DIFFERENZ2 = DIFFERENZ + 10;
document.write("Differenz + 10: ");
document.write(DIFFERENZ2);
document.write(" Pixel<br>");
document.write("<br>Die Funktion soll demnach ab einem Scrollpunkt von 111 Pixeln ausgeführt werden");
</script>
</div>
<script>
$(document).ready(function() {
var boxPosY;
$(window).bind( 'scroll', function() {
boxPosY = $(window).scrollTop();
if ( boxPosY >= DIFFERENZ2 ) {
[B][COLOR="#FF0000"]// Hier soll die Schleife (bzw. der 2. Teil) rein !!![/COLOR][/B]
}
else if ( boxPosY < DIFFERENZ2 ) {
// irgendwas
}
});
});
</script>
</body></html>Teil 2: Dann habe ich die Funktion "Schleife" ;-) , wo mir an anderer Stelle ja sehr weitergeholfen wurde in diesem Forum - nochmals besten Dank an "kkapsner" ! Dieses Skript funktioniert für sich alleine stehend ebenso wunderbar.
Code:
for (var i = 1; i <= 30; i += 1){
(function(i){
$(document).ready(function(){
var adot = $("#adot" + i);
adot.css("display","none");
window.setTimeout(
function(){
adot.fadeIn(1000);
},
i * 50
);
});
}(i));
Ausgabe = '<div id="adot' + i + '"><img src="adot01.jpg"><\/div>';
document.write(Ausgabe);Will ich diese beiden (wie in PHP gewohnt) zusammenfügen, geht gar nichts mehr.
Ich hab schon elendslange gegoogelt und rumprobiert. Ich schaffe es einfach nicht.
Vielleicht gibt es spezielle Syntaxe, die ich beachten müsste ... ich weiß es nicht.
Würde mich feuen, zumindest einen Tipp zu bekommen, wo ich nachschauen könnte.
Besten Dank im Voraus.
Grüße,
Heinz
