Invinite TextblockScroll
Scripte > Text- & Tabellenobjekte
jQuery Invinite Textblock Scroll
Verwende jQuery Infinite Text Scroll, um Webseiten Textblöcke / -Bereiche mit unendlichem Bildlauf hinzuzufügen. Das Plugin lädt automatisch Webinhalte, wenn der Benutzer einen Textlauf zur Seite durchführt (endlose Paginierung im Facebook-Stil).
Es können beliebig viele Texte hinterlegt werden, diese werden nacheinander geladen, entweder automatisch oder manuell durch den Benutzer. Unterscheiden tun sich die Varianten im autoLoad: false, oder autoLoad:true,. Beide Möglichkeiten sind hier aufgeführt. Das Plugin wird über eine Frame-Datei angezeigt. die auch entsprechend inhaltlich bearbeitet werden muss, wobei der Frame-Container in der Beite größer sein sollte als der Div-Container, da sonst die vertikalen Scrollleisten erscheinen, Aber wer es mag, kann ein wenig probieren.
Die Anpassung des Style an die Webseite erfolgt in der Datei "load_style,css".
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann nicht durch einen Doppelklick ausgeführt werden, da einige Voraussetzungen vom Webserver lokal nicht vorhanden sind.
x runter geladen
Code für den <BODY> Bereich
<div style="width: 800px; margin: 0 auto; overflow: hidden;">
<iframe src="wsX5Obj/Obj196_0/load_btn.html" style="width: 1000px; height: 300px; border: none;"></iframe>
</div>
Code Datei "load_btn.html"
<!doctype html>
<html><head>
<meta charset="utf-8"><title>jQuery Infinite TextblockScroll</title><link href="InfiniteScroll.css" rel="stylesheet"><link href="load_style.css" rel="stylesheet"><script src="jquery-1.7.min.js"></script><script src="jquery.InfiniteScroll.js"></script><script>
$(function () {
$(".container").x5_InfiniteScroll({
autoLoad: false, // 'true' lädt automatischurl: "ajax.php?type=data"
});
});
</script>
</head><body>
<div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div><div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div><div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div><div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div><div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div>
</body>
</html>
Code für den <BODY> Bereich
<div style="width: 800px; margin: 0 auto; overflow: hidden;">
<iframe src="wsX5Obj/Obj196_0/load_auto.html" style="width: 900px; height: 300px; border: none;"></iframe>
</div>
Code Datei "load_auto.html"
<!doctype html>
<html><head>
<meta charset="utf-8"><title>jQuery Infinite TextblockScroll</title><link href="InfiniteScroll.css" rel="stylesheet"><link href="load_style.css" rel="stylesheet"><script src="jquery-1.7.min.js"></script><script src="jquery.InfiniteScroll.js"></script><script>
$(function () {
$(".container").x5_InfiniteScroll({
autoLoad: true, // 'false' lädt durch Benutzer-Klickurl: "ajax.php?type=data"
});
});
</script>
</head><body>
<div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div><div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div><div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div><div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div><div class="row-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum velit consectetur nunc faucibus pellentesque eu vel dui. Sed accumsan libero eu magna pretium facilisis. Morbi enim sem, eleifend eget urna eu, ornare lobortis odio. Aenean eu mi ut ipsum laoreet dictum a dapibus mauris. Donec malesuada commodo turpis nec iaculis. Sed interdum elit leo, ac eleifend nibh cursus nec. Donec sagittis vel orci sit amet rhoncus. Etiam non ante est. Cras convallis rhoncus posuere. Mauris ultrices accumsan diam sit amet tincidunt. Pellentesque vulputate, arcu vitae gravida molestie, magna enim posuere lectus, nec euismod elit orci vel libero. Sed pharetra, nulla non eleifend tincidunt, sem eros bibendum quam, non egestas odio mi in lacus.
</div>
</body>
</html>
» nach oben «