
----------- Das myPHP Guestbook per IFrame mit automatischer Höhenanpassung in eine Website einbetten: -----------
-----------    Embed the myPHP Guestbook into a website via IFrame with automatic height adjustment:   -----------
            __________________________________________________________________________________________


1.
 Die Javascript-Datei ("iframe.auto-height") auf den Server laden.
 Upload the javascript file ("iframe.auto-height") to the server.

2.
 Legen Sie auf der obersten Ebene Ihres Webspace eine neue Seite an, mit der später das myPHP Guestbook angezeigt werden soll
 und die Sie in Ihre Navigation einbinden, z.B. "guestbook.php". - Die nachfolgend beschriebenen Schritte beziehen sich alle
 auf diese neue Seite.
 
 Wichtig! =>  Damit die Höhenanpassung funktioniert, MUSS der Ordner mit den Gästebuchdateien auf derselben Domain liegen,
              wie die Datei, in der das Iframe eingebettet ist. Subdomains gelten als neue Domain! 


 Create a new page on the top level of your webspace, which will later be used to display the myPHP Guestbook and which you
 will include in your navigation, e.g. "guestbook.php". - The steps described below all refer to this new page.

 Important! => For the height adjustment to work, the folder with the guestbook files MUST be on the same domain,
               as the file in which the iframe is embedded. Subdomains are considered as a new domain! 

3.
 Dann binden Sie die CSS in diese Seite ein, mit der das Gästebuch angezeigt werden soll.
 Hierfür kopieren Sie den Code aus der CSS-Datei und fügen ihn unmittelbar in den Header ein ==>

 Then include the CSS in this page you want the guestbook to be displayed with.
 To do this, copy the code from the CSS file and paste it directly into the header           ==>

    <style>
        iframe.my-gbook{
            height: 3000px;
            width: 100%;
            border: none;
            margin: 0;
            overflow-y: scroll;
        }
	/* Chrome, Safari and Opera */
        iframe.my-gbook::-webkit-scrollbar{
            display: none;
        }
	/* IE, Edge and Firefox */
        iframe.my-gbook{
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>

4.
 Die Tags für das IFrame, das in den "<body>" der Seite kommt, sollten in etwa so aussehen (vergessen Sie nicht die Klasse!):
 The tags for the iframe that goes into the "<body>" of the page, should look something like this (don't forget the Class!):

    <iframe class="my-gbook" src="YOUR PATH TO THE GUESTBOOK FOLDER/index.php" scrolling="no" title="myPHP Guestbook"></iframe>

 HTML5 akzeptiert und verarbeitet keine Anweisung "scrolling='no'", deshalb ergänzend in der CSS noch weitere Anweisungen.
 Es ist sinnvoll, dies zu tun, weil sonst beim Laden oftmals Scrollbalken im IFrame kurz aufflackern, bevor über JS die Höhe
 endgültig ermittelt und angepasst werden kann.
 Für User, die JS in Ihrem Browser abgeschaltet haben, kann das bedeuten, dass sie ggf. nicht den vollen Inhalt der eingebetteten Seite
 sehen. Hier kann in gewissem Umfang abgeholfen werden, indem in der CSS die Höhe großzügig angegeben wird (in obigen Beispiel 3000px).
 Ansonsten arbeitet heute kaum mehr eine Website ohne Javascript. Wer meint, JS dennoch abschalten zu müssen, hat gelernt,
 mit Einschränlungen zu leben und nimmt diese in Kauf.
 --------------
 HTML5 does not accept and process the instruction "scrolling='no'", therefore further instructions are added to the CSS. 
 It makes sense to do this, because otherwise scrollbars often flare up briefly in the IFrame before the height can be
 finally determined and adjusted via JS.
 For users who have JS turned off in their browser, this can mean that they may not see the full content of the embedded page.
 This can be remedied to some extent by specifying a generous height in the CSS (3000px in the above example).
 Apart from that, hardly any website works without Javascript nowadays. Who thinks to switch off JS nevertheless, has learned,
 to live with restrictions and accepts them.


5.
 Am Ende der Seite unmittelbar vor dem schließenden </body>-Tag binden Sie die beigefügte JS-Datei ein ==>
 At the end of the page just before the closing </body> tag, include the attached JS file              ==>

	<script src="YOUR PATH TO THE JS FILE/iframe.auto-height.js"></script>


#######################################################################################################################################################

6.
 Das Ergebnis sieht dann skizziert wie folgt aus:
 The result looks outlined as follows:

 <!DOCTYPE html>
 <html>
 <head>
    ...
    ...
    ...
    <style>
        iframe.my-gbook{
            height: 3000px;
            width: 100%;
            border: none;
            margin: 0;
            overflow-y: scroll;
        }
        iframe.my-gbook::-webkit-scrollbar{
            display: none;
        }
        iframe.my-gbook{
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
 </head>
 <body>
    ...
    ...
    <iframe class="my-gbook" src="YOUR PATH TO THE GUESTBOOK FOLDER/index.php" scrolling="no" title="myPHP Guestbook"></iframe>
    ...
    ...
    <script src="YOUR PATH TO THE JS FILE/iframe.auto-height.js"></script>
 </body>
 </html>

#######################################################################################################################################################

The Javascript "frameResize" is based on an example from: http://www.professorweb.de/

Remscheid (Germany), Mai 2021
https://www.php-guestbook.de/
Wolfgang Leverberg




