Difference between revisions of "Iframe Resizing"
Markkinchin (talk | contribs) |
|||
| Line 2: | Line 2: | ||
[[Category:Booking_Page]] | [[Category:Booking_Page]] | ||
[[Category:Widgets]] | [[Category:Widgets]] | ||
| − | This page explains how to use the iFrame Resizer | + | This page explains how to use the iFrame Resizer |
'''Requires:''' Ability to add code to the html of your web site | '''Requires:''' Ability to add code to the html of your web site | ||
| + | |||
| + | |||
| + | == Introduction == | ||
| + | |||
| + | This is a third party code project which can be installed on your booking page and your web site to autocratically resize the iframe containing your booking page to fir the content. | ||
| + | |||
| + | For support using this code please refer to the developer: https://github.com/davidjbradshaw/iframe-resizer | ||
| + | |||
| + | |||
| + | == Beds24.com == | ||
| + | |||
| + | Add the following to the menu Settings > Booking Page > Developer > Insert in HTML head | ||
| + | |||
| + | <script type="text/javascript" src="include/iframeresizer/3.5.3/iframeResizer.contentWindow.min.js"></script> | ||
| + | |||
| + | If you want to use a more recent version, you can host the file externally and include it with a full URL, make sure to use https:// to avoid insecure content warnings. | ||
| + | |||
| + | == Your web page == | ||
| + | |||
| + | Refer to the develpers web site for full instructions and problem solving. | ||
| + | |||
| + | Obtain the file iframeResizer.min.js and copy it to your web server. | ||
| + | |||
| + | Make sure to use the same version number as the iframeResizer.contentWindow.min.js which has been added to the booking page | ||
| + | |||
| + | The file can be downloaded from github or from https://beds24.com/include/iframeresizer/3.5.3/iframeResizer.min.js | ||
| + | |||
| + | Remove any height parameter from your iframe and add the script after the plugin, if necessary change the path to point to your copy of iframeResizer.min.js | ||
| + | |||
| + | |||
| + | <iframe src="https://beds24.com/booking.php?propid=3103" width="100%" scrolling="no"></iframe> | ||
| + | |||
| + | <script type="text/javascript" src="iframeResizer.min.js"></script> | ||
| + | <script type="text/javascript"> | ||
| + | iFrameResize(); | ||
| + | </script> | ||
Revision as of 10:57, 11 March 2016
This page explains how to use the iFrame Resizer
Requires: Ability to add code to the html of your web site
1 Introduction
This is a third party code project which can be installed on your booking page and your web site to autocratically resize the iframe containing your booking page to fir the content.
For support using this code please refer to the developer: https://github.com/davidjbradshaw/iframe-resizer
2 Beds24.com
Add the following to the menu Settings > Booking Page > Developer > Insert in HTML head
<script type="text/javascript" src="include/iframeresizer/3.5.3/iframeResizer.contentWindow.min.js"></script>
If you want to use a more recent version, you can host the file externally and include it with a full URL, make sure to use https:// to avoid insecure content warnings.
3 Your web page
Refer to the develpers web site for full instructions and problem solving.
Obtain the file iframeResizer.min.js and copy it to your web server.
Make sure to use the same version number as the iframeResizer.contentWindow.min.js which has been added to the booking page
The file can be downloaded from github or from https://beds24.com/include/iframeresizer/3.5.3/iframeResizer.min.js
Remove any height parameter from your iframe and add the script after the plugin, if necessary change the path to point to your copy of iframeResizer.min.js
<iframe src="https://beds24.com/booking.php?propid=3103" width="100%" scrolling="no"></iframe> <script type="text/javascript" src="iframeResizer.min.js"></script> <script type="text/javascript"> iFrameResize(); </script>
