Jahres-Belegungsübersicht im Text vor dem Absatz 'Lorem ipsum …'
Bei diesem 2-Spalten-Layout passt die Jahres-Belegungsübersicht in keine der beiden Spalten. Deshalb muss die Jahres-Belegungsübersicht absolut positioniert eingebunden und mit der Funktion 'abs_freeOnTop()' Freiraum über den sonst verdeckten Elementen geschaffen werden. Die Monatsnamen der Jahres-Belegungsübersicht haben einen Link zum Öffnen des Buchungsformulars auf der gleichen Seite.
Der zugehörige HTML-Code wird am Ende der Seite angezeigt.
Objekt Fewo Berg, Strandweg 4, 12345 Urlaubsort
In diesem Objekt befinden sich zwei Appartements, AppMuschel und AppSeestern.
Diese Appartements können einzeln gebucht werden, Sie können aber auch das ganze Haus buchen, wobei Sie dann einen aus der Preisinfo ersichtlichen Rabatt erhalten. Die Beschreibung der Appartements finden Sie unten.
6.8 km vom Meer, an einer Nebenstrasse gelegen. Zur Mitbenutzung: Grundstück, Garten. Im Hause: Zentralheizung. Parkplatz beim Haus. Lebensmittelgeschäft 250 m, Supermarkt 1.4 km, Restaurant 1.3 km, Cafe 1.2 km, Bushaltestelle 600 m, Bahnstation 'Norden' 1.5 km. Freibad 6.8 km, Hallenbad 4 km, Sandstrand, Strandbad 6.8 km, Tennis, Tennishalle 4.7 km, Reitstall 200 m. Im 200 m entfernten Reitstall (mit gepflegtem Reitplatz) können nach Absprache und gegen Gebühr eigene Pferde in Gastboxen untergebracht werden.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
HTML-Code des Content-Bereiches
Hinweise zum Einfügen der Jahres-Belegungsübersicht in Ihre Seite
Die farblich markierten Zeilen stellen die zur Einbindung der Jahres-Belegungsübersicht notwendigen Teile dar, wobei manche <p>- bzw. <div>-Tags und Abstände zwischen den Absätzen layoutbedingt automatisch eingefügt wurden.
Diese Zeilen müssen Sie an die entsprechenden Stellen in Ihrer Seite kopieren, die rot markierten Teile müssen Sie durch die Werte Ihrer Installation ersetzen (Pfad zum Ordner OBS, Objektname).
Durch die ersten Zeilen wird die Bibliothek (1. Zeile) und das Buchungsformular (3. und 4. Zeile) unsichtbar ind die Seite eingebunden.
Im Bereich der weiteren Zeilen wird zunächst ein Hilfs-DIV-Container mit der ID 'ypos1' an der Stelle eingefügt, an der die Jahres-Belegungsübersicht erscheinen soll.
Im folgenden Javascript-Teil wird mit der 2. Zeile mithilfe der Funktion abs_freeOnTop() der notwendige Freiraum für die Jahres-Belegungsübersicht erzeugt (siehe Erläuterung unten) .
Mit der in der OnBuSys-JS-Bibliothek vorhandenen Funktion getPos() wird in der 3. Zeile die Position yrel des DIV-Containers mit der ID 'main', dann die Position des Hilfs-DIV-Containers bestimmt und mithilfe des Korrekturgliedes +16 die Jahres-Belegungsübersicht (6. und 7. Zeile) an dieser Stelle sichtbar eingebunden.
Direkt anschließend wird dem <p>-Element, bei dem 'Lorem ipsum …' beginnt, die id 'lorem-1' zugewiesen.
Evt. vorhandene Zeilenumbrüche in diesen Bereichen sind durch das Layout bedingt und sollten vermieden werden.
In der OnBuSys-JS-Bibliothek werden die eingefügten Teile ausführlich beschrieben, zusätzlich erhalten Sie hier Hinweise zu den Parametern der Funktion abs_freeOnTop():
abs_freeOnTop("330px","main","lorem-1","text-3^850px","search-3^110px");
"330px" ist der Default-Wert der Höhe des Freiraums über den entsprechenden Elementen
"main" ist die ID des DIV-Containers, der die Spalten des Layouts umfasst
"lorem-1": Das Element mit dieser ID erhält einen Freiraum von 330px (Default-Wert)
"text-3^850px": Das Element mit der ID 'text-3' erhält einen Freiraum von 850px
"search-3^110px": Das Element mit der ID 'search-3' erhält einen Freiraum von 110px
Beginn des Quellcodes der Demoseite
<p>
<script type="text/javascript" src="http://onbusys.de/101/OBS/obs_lib.js"></script>
<script type="text/javascript">
var belbuchkal = new belbuchkal(250,0,556,"background-color:#ffffff;border:0px solid #909090",true);
belbuchkal.erstelle();
</script>
</p>
<p>
<strong>Jahres-Belegungsübersicht im Text vor dem Absatz 'Lorem ipsum …'</strong>
</p>
<p>
<strong>Bei diesem 2-Spalten-Layout passt die Jahres-Belegungsübersicht in keine der beiden Spalten. Deshalb muss die Jahres-Belegungsübersicht absolut positioniert eingebunden und mit der Funktion 'abs_freeOnTop()' Freiraum über den sonst verdeckten Elementen geschaffen werden. Die Monatsnamen der Jahres-Belegungsübersicht haben einen Link zum Öffnen des Buchungsformulars auf der gleichen Seite.<br />
Der zugehörige HTML-Code wird am Ende der Seite angezeigt.</strong>
</p>
<p>
<strong>Objekt Fewo Berg, Strandweg 4, 12345 Urlaubsort</strong>
</p>
<p>
<img alt="" height="150" src="https://onbusys.de/101/OBS/Demos/Berg.jpg" style="float:right;margin-left:5px; margin-bottom:3px;" width="200" />
</p>
<p style="margin-bottom:0px;">
In diesem Objekt befinden sich zwei Appartements, AppMuschel und AppSeestern.<br />
Diese Appartements können einzeln gebucht werden, Sie können aber auch das ganze Haus buchen, wobei Sie dann einen aus der Preisinfo ersichtlichen Rabatt erhalten. Die Beschreibung der Appartements finden Sie unten.<br />
6.8 km vom Meer, an einer Nebenstrasse gelegen. Zur Mitbenutzung: Grundstück, Garten. Im Hause: Zentralheizung. Parkplatz beim Haus. Lebensmittelgeschäft 250 m, Supermarkt 1.4 km, Restaurant 1.3 km, Cafe 1.2 km, Bushaltestelle 600 m, Bahnstation 'Norden' 1.5 km. Freibad 6.8 km, Hallenbad 4 km, Sandstrand, Strandbad 6.8 km, Tennis, Tennishalle 4.7 km, Reitstall 200 m. Im 200 m entfernten Reitstall (mit gepflegtem Reitplatz) können nach Absprache und gegen Gebühr eigene Pferde in Gastboxen untergebracht werden.
</p>
<div id="ypos1" style="height:0px; overflow:hidden;"> </div>
<div>
<script type="text/javascript">
addLoadEvent(function(){abs_freeOnTop("330px","main","lorem-1","text-3^850px","search-3^110px");});
var yrel=getPos(document.getElementById('main'))[1];
var y1=getPos(document.getElementById('ypos1'))[1]-yrel+16;
var y1top="top:"+y1+"px";
var beljahrkal = new abs_beljahr("onbusys.de/101","Berg",12,10,10,"ums_taggenau",2,"1-2015",770,"left:70px",y1top,"de-DE");
beljahrkal.erstelle();
</script>
</div>
<p id="lorem-1">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>