{"id":258,"date":"2013-09-05T11:10:50","date_gmt":"2013-09-05T09:10:50","guid":{"rendered":"http:\/\/onbusys.de\/wp101\/?page_id=258"},"modified":"2015-06-27T13:19:20","modified_gmt":"2015-06-27T11:19:20","slug":"jahres-uebersicht-zwei-spalten-variante-2","status":"publish","type":"page","link":"https:\/\/onbusys.de\/wp101\/jahres-uebersicht-vorlage\/jahres-uebersicht-zwei-spalten-variante-2\/","title":{"rendered":"Jahres-\u00dcbersicht &#8211; zwei Spalten &#8211; Variante 2"},"content":{"rendered":"<p>\n\t<script type=\"text\/javascript\" src=\"https:\/\/onbusys.de\/101\/OBS\/obs_lib.js\"><\/script><script type=\"text\/javascript\">\nvar belbuchkal = new belbuchkal(250,0,556,\"background-color:#ffffff;border:0px solid #909090\",true);\nbelbuchkal.erstelle();\n<\/script>\n<\/p>\n<p>\n\t<strong>Jahres-Belegungs&uuml;bersicht im Text vor dem Absatz &#39;Lorem ipsum &#8230;&#39;<\/strong>\n<\/p>\n<p>\n\t<strong>Bei diesem 2-Spalten-Layout passt die Jahres-Belegungs&uuml;bersicht in keine der beiden Spalten. Deshalb muss die Jahres-Belegungs&uuml;bersicht absolut positioniert eingebunden und mit der Funktion &#39;abs_freeOnTop()&#39; Freiraum &uuml;ber den sonst verdeckten Elementen geschaffen werden. Die Monatsnamen der Jahres-Belegungs&uuml;bersicht haben einen Link zum &Ouml;ffnen des Buchungsformulars auf der gleichen Seite.<br \/>\n\tDer zugeh&ouml;rige HTML-Code wird am Ende der Seite angezeigt.<\/strong>\n<\/p>\n<p>\n\t<strong>Objekt Fewo Berg, Strandweg 4, 12345 Urlaubsort<\/strong>\n<\/p>\n<p>\n\t<img decoding=\"async\" loading=\"lazy\" alt=\"\" height=\"150\" src=\"https:\/\/onbusys.de\/101\/OBS\/Demos\/Berg.jpg\" style=\"float:right;margin-left:5px; margin-bottom:3px;\" width=\"200\" \/>\n<\/p>\n<p style=\"margin-bottom:0px;\">\n\tIn diesem Objekt befinden sich zwei Appartements, AppMuschel und AppSeestern.<br \/>\n\tDiese Appartements k&ouml;nnen einzeln gebucht werden, Sie k&ouml;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 \/>\n\t6.8 km vom Meer, an einer Nebenstrasse gelegen. Zur Mitbenutzung: Grundst&uuml;ck, Garten. Im Hause: Zentralheizung. Parkplatz beim Haus. Lebensmittelgesch&auml;ft 250 m, Supermarkt 1.4 km, Restaurant 1.3 km, Cafe 1.2 km, Bushaltestelle 600 m, Bahnstation &#39;Norden&#39; 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&ouml;nnen nach Absprache und gegen Geb&uuml;hr eigene Pferde in Gastboxen untergebracht werden.\n<\/p>\n<div id=\"ypos1\" style=\"height:0px; overflow:hidden;\">\n\t&nbsp;\n<\/div>\n<div>\n\t<script type=\"text\/javascript\">\naddLoadEvent(function(){abs_freeOnTop(\"330px\",\"main\",\"lorem-1\",\"text-3^850px\",\"search-3^110px\");});\nvar yrel=getPos(document.getElementById('main'))[1];\nvar y1=getPos(document.getElementById('ypos1'))[1]-yrel+16;\nvar y1top=\"top:\"+y1+\"px\";\nvar beljahrkal = new abs_beljahr(\"onbusys.de\/101\",\"Berg\",12,10,10,\"ums_taggenau\",2,\"1-2015\",770,\"left:70px\",y1top,\"de-DE\");\nbeljahrkal.erstelle();\n<\/script>\n<\/div>\n<p id=\"lorem-1\">\n\tLorem 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.\n<\/p>\n<h3>\n\tHTML-Code des Content-Bereiches<br \/>\n<\/h3>\n<p>\n\tHinweise zum Einf&uuml;gen der Jahres-Belegungs&uuml;bersicht in Ihre Seite\n<\/p>\n<p>\n\tDie <span style=\"color:#FF8C00;\">farblich markierten Zeilen<\/span> stellen die zur Einbindung der Jahres-Belegungs&uuml;bersicht notwendigen Teile dar, wobei manche &lt;p&gt;- bzw. &lt;div&gt;-Tags und Abst&auml;nde zwischen den Abs&auml;tzen layoutbedingt automatisch eingef&uuml;gt wurden.<br \/>\n\tDiese Zeilen m&uuml;ssen Sie an die entsprechenden Stellen in Ihrer Seite kopieren, die <span style=\"color:#FF0000;\">rot<\/span> markierten Teile m&uuml;ssen Sie durch die Werte Ihrer Installation ersetzen (Pfad zum Ordner OBS, Objektname).<br \/>\n\tDurch <span style=\"color:#FF8C00;\">die ersten Zeilen<\/span> wird die Bibliothek (1. Zeile) und das Buchungsformular (3. und 4. Zeile) unsichtbar ind die Seite eingebunden.<br \/>\n\tIm Bereich der <span style=\"color:#FF8C00;\">weiteren Zeilen<\/span> wird zun&auml;chst ein Hilfs-DIV-Container mit der ID &#39;<span style=\"color:#006400;\">ypos1<\/span>&#39; an der Stelle eingef&uuml;gt, an der die Jahres-Belegungs&uuml;bersicht erscheinen soll.<br \/>\n\tIm folgenden Javascript-Teil wird mit der 2. Zeile mithilfe der Funktion abs_freeOnTop() der notwendige Freiraum f&uuml;r die Jahres-Belegungs&uuml;bersicht erzeugt (siehe Erl&auml;uterung unten) .<br \/>\n\tMit der in der&nbsp;<a href=\"https:\/\/onbusys.de\/101\/demo\/integration\/bibliothek\" target=\"_blank\">OnBuSys-JS-Bibliothek<\/a> vorhandenen Funktion getPos() wird in der 3. Zeile die Position <span style=\"color:#006400;\">yrel<\/span> des DIV-Containers mit der ID &#39;<span style=\"color:#006400;\">main<\/span>&#39;, dann die Position des Hilfs-DIV-Containers bestimmt und mithilfe des Korrekturgliedes <span style=\"color:#006400;\">+16<\/span> die Jahres-Belegungs&uuml;bersicht (6. und 7. Zeile) an dieser Stelle sichtbar eingebunden.<br \/>\n\tDirekt anschlie&szlig;end wird dem &lt;p&gt;-Element, bei dem &#39;Lorem ipsum &#8230;&#39; beginnt, die id &#39;<span style=\"color:#006400;\">lorem-1<\/span>&#39; zugewiesen.<br \/>\n\tEvt. vorhandene Zeilenumbr&uuml;che in diesen Bereichen sind durch das Layout bedingt und sollten vermieden werden.\n<\/p>\n<p>\n\tIn&nbsp;der <a href=\"https:\/\/onbusys.de\/101\/demo\/integration\/bibliothek\" target=\"_blank\">OnBuSys-JS-Bibliothek<\/a> werden die eingef&uuml;gten Teile ausf&uuml;hrlich beschrieben, zus&auml;tzlich erhalten Sie hier Hinweise zu den Parametern der Funktion abs_freeOnTop():\n<\/p>\n<p>\n\tabs_freeOnTop(&quot;330px&quot;,&quot;main&quot;,&quot;lorem-1&quot;,&quot;text-3^850px&quot;,&quot;search-3^110px&quot;);\n<\/p>\n<p>\n\t&quot;330px&quot; ist der Default-Wert der H&ouml;he des Freiraums &uuml;ber den entsprechenden Elementen<br \/>\n\t&quot;main&quot; ist die ID des DIV-Containers, der die Spalten des Layouts umfasst<br \/>\n\t&quot;lorem-1&quot;: Das Element mit dieser ID erh&auml;lt einen Freiraum von 330px (Default-Wert)<br \/>\n\t&quot;text-3^850px&quot;: Das Element mit der ID &#39;text-3&#39; erh&auml;lt einen Freiraum von 850px<br \/>\n\t&quot;search-3^110px&quot;: Das Element mit der ID &#39;search-3&#39; erh&auml;lt einen Freiraum von 110px\n<\/p>\n<p>\n\tBeginn des Quellcodes der Demoseite\n<\/p>\n<p>\n\t&lt;p&gt;<br \/>\n\t<span style=\"color:#FF8C00;\">&lt;script type=&quot;text\/javascript&quot; src=&quot;http:\/\/<\/span><span style=\"color:#FF0000;\">onbusys.de\/101<\/span><span style=\"color:#FF8C00;\">\/OBS\/obs_lib.js&quot;&gt;&lt;\/script&gt;<br \/>\n\t&lt;script type=&quot;text\/javascript&quot;&gt;<br \/>\n\tvar belbuchkal = new belbuchkal(250,0,556,&quot;background-color:#ffffff;border:0px solid #909090&quot;,true);<br \/>\n\tbelbuchkal.erstelle();<br \/>\n\t&lt;\/script&gt;<\/span><br \/>\n\t&lt;\/p&gt;\n<\/p>\n<p>\n\t&lt;p&gt;<br \/>\n\t&nbsp;&nbsp; &nbsp;&lt;strong&gt;Jahres-Belegungs&amp;uuml;bersicht im Text vor dem Absatz &amp;#39;Lorem ipsum &#8230;&amp;#39;&lt;\/strong&gt;<br \/>\n\t&lt;\/p&gt;\n<\/p>\n<p>\n\t&lt;p&gt;<br \/>\n\t&nbsp;&nbsp; &nbsp;&lt;strong&gt;Bei diesem 2-Spalten-Layout passt die Jahres-Belegungs&amp;uuml;bersicht in keine der beiden Spalten. Deshalb muss die Jahres-Belegungs&amp;uuml;bersicht absolut positioniert eingebunden und mit der Funktion &amp;#39;abs_freeOnTop()&amp;#39; Freiraum &amp;uuml;ber den sonst verdeckten Elementen geschaffen werden. Die Monatsnamen der Jahres-Belegungs&amp;uuml;bersicht haben einen Link zum &amp;Ouml;ffnen des Buchungsformulars auf der gleichen Seite.&lt;br \/&gt;<br \/>\n\t&nbsp;&nbsp; &nbsp;Der zugeh&amp;ouml;rige HTML-Code wird am Ende der Seite angezeigt.&lt;\/strong&gt;<br \/>\n\t&lt;\/p&gt;\n<\/p>\n<p>\n\t&lt;p&gt;<br \/>\n\t&nbsp;&nbsp; &nbsp;&lt;strong&gt;Objekt Fewo Berg, Strandweg 4, 12345 Urlaubsort&lt;\/strong&gt;<br \/>\n\t&lt;\/p&gt;\n<\/p>\n<p>\n\t&lt;p&gt;<br \/>\n\t&nbsp;&nbsp; &nbsp;&lt;img alt=&quot;&quot; height=&quot;150&quot; src=&quot;https:\/\/onbusys.de\/101\/OBS\/Demos\/Berg.jpg&quot; style=&quot;float:right;margin-left:5px; margin-bottom:3px;&quot; width=&quot;200&quot; \/&gt;<br \/>\n\t&lt;\/p&gt;\n<\/p>\n<p>\n\t&lt;p style=&quot;margin-bottom:0px;&quot;&gt;<br \/>\n\t&nbsp;&nbsp; &nbsp;In diesem Objekt befinden sich zwei Appartements, AppMuschel und AppSeestern.&lt;br \/&gt;<br \/>\n\t&nbsp;&nbsp; &nbsp;Diese Appartements k&amp;ouml;nnen einzeln gebucht werden, Sie k&amp;ouml;nnen aber auch das ganze Haus buchen, wobei Sie dann einen aus der Preisinfo ersichtlichen Rabatt erhalten. Die Beschreibung der Appartements finden Sie unten.&lt;br \/&gt;<br \/>\n\t&nbsp;&nbsp; &nbsp;6.8 km vom Meer, an einer Nebenstrasse gelegen. Zur Mitbenutzung: Grundst&amp;uuml;ck, Garten. Im Hause: Zentralheizung. Parkplatz beim Haus. Lebensmittelgesch&amp;auml;ft 250 m, Supermarkt 1.4 km, Restaurant 1.3 km, Cafe 1.2 km, Bushaltestelle 600 m, Bahnstation &amp;#39;Norden&amp;#39; 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&amp;ouml;nnen nach Absprache und gegen Geb&amp;uuml;hr eigene Pferde in Gastboxen untergebracht werden.<br \/>\n\t&lt;\/p&gt;\n<\/p>\n<p>\n\t<span style=\"color:#FF8C00;\">&lt;div id=&quot;<\/span><span style=\"color:#006400;\">ypos1<\/span><span style=\"color:#FF8C00;\">&quot; style=&quot;height:0px; overflow:hidden;&quot;&gt;&amp;nbsp;&lt;\/div&gt;<\/span><br \/>\n\t<span style=\"color:#FF8C00;\">&lt;div&gt;<\/span><br \/>\n\t<span style=\"color:#FF8C00;\">&lt;script type=&quot;text\/javascript&quot;&gt;<br \/>\n\taddLoadEvent(function(){abs_freeOnTop(&quot;330px&quot;,&quot;<\/span><span style=\"color:#006400;\">main<\/span><span style=\"color:#FF8C00;\">&quot;,&quot;lorem-1&quot;,&quot;text-3^850px&quot;,&quot;search-3^110px&quot;);});<br \/>\n\tvar <\/span><span style=\"color:#006400;\">yrel<\/span><span style=\"color:#FF8C00;\">=getPos(document.getElementById(&#39;<\/span><span style=\"color:#006400;\">main<\/span><span style=\"color:#FF8C00;\">&#39;))[1];<br \/>\n\tvar y1=getPos(document.getElementById(&#39;ypos1&#39;))[1]-<\/span><span style=\"color:#006400;\">yrel+16<\/span><span style=\"color:#FF8C00;\">;<br \/>\n\tvar <\/span><span style=\"color:#006400;\">y1top<\/span><span style=\"color:#FF8C00;\">=&quot;top:&quot;+y1+&quot;px&quot;;<br \/>\n\tvar beljahrkal = new abs_beljahr(&quot;<\/span><span style=\"color:#FF0000;\">onbusys.de\/101<\/span><span style=\"color:#FF8C00;\">&quot;,&quot;<\/span><span style=\"color:#FF0000;\">Berg<\/span><span style=\"color:#FF8C00;\">&quot;,12,10,10,&quot;ums_taggenau&quot;,2,&quot;1-2015&quot;,770,&quot;left:70px&quot;,<\/span><span style=\"color:#006400;\">y1top<\/span><span style=\"color:#FF8C00;\">,&quot;de-DE&quot;);<br \/>\n\tbeljahrkal.erstelle();<br \/>\n\t&lt;\/script&gt;<\/span><br \/>\n\t<span style=\"color:#FF8C00;\">&lt;\/div&gt;<\/span>\n<\/p>\n<p>\n\t&lt;p <span style=\"color:#FF8C00;\">id=&quot;lorem-1<\/span>&quot;&gt;<br \/>\n\t&nbsp;&nbsp; &nbsp;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.<br \/>\n\t&lt;\/p&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jahres-Belegungs&uuml;bersicht im Text vor dem Absatz &#39;Lorem ipsum &#8230;&#39; Bei diesem 2-Spalten-Layout passt die Jahres-Belegungs&uuml;bersicht in keine der beiden Spalten. Deshalb muss die Jahres-Belegungs&uuml;bersicht absolut positioniert eingebunden und mit der Funktion &#39;abs_freeOnTop()&#39; Freiraum &uuml;ber den sonst verdeckten Elementen geschaffen werden. Die Monatsnamen der Jahres-Belegungs&uuml;bersicht haben einen Link zum &Ouml;ffnen des Buchungsformulars auf der gleichen Seite. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":243,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/onbusys.de\/wp101\/wp-json\/wp\/v2\/pages\/258"}],"collection":[{"href":"https:\/\/onbusys.de\/wp101\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onbusys.de\/wp101\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onbusys.de\/wp101\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onbusys.de\/wp101\/wp-json\/wp\/v2\/comments?post=258"}],"version-history":[{"count":20,"href":"https:\/\/onbusys.de\/wp101\/wp-json\/wp\/v2\/pages\/258\/revisions"}],"predecessor-version":[{"id":387,"href":"https:\/\/onbusys.de\/wp101\/wp-json\/wp\/v2\/pages\/258\/revisions\/387"}],"up":[{"embeddable":true,"href":"https:\/\/onbusys.de\/wp101\/wp-json\/wp\/v2\/pages\/243"}],"wp:attachment":[{"href":"https:\/\/onbusys.de\/wp101\/wp-json\/wp\/v2\/media?parent=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}