Difference between revisions of "Iframe Resizing"

From Beds24 Wiki
Jump to navigation Jump to search
 
(29 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
[[Category:Booking_Page]]
 
[[Category:Booking_Page]]
 
[[Category:Widgets]]
 
[[Category:Widgets]]
 +
[[Category:Developers]]
 +
<div class="heading">Resize Iframe</div>
 
  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
+
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>'''Requires:'''  Ability to upload a file and add code to the html of your web site
  
 +
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}}  </span> This instruction is for version 4.2.10 of iFrame Resizer. There may be a newer version as documented here https://github.com/davidjbradshaw/iframe-resizer
  
 
== Introduction ==
 
== Introduction ==
 +
This is a third party code project which can be installed on your booking page and your web site to automatically resize the booking page iframe so it shows without using scroll bars.
  
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.
+
Beds24 can not support or answer questions about this code, for help please refer to the developer site: https://github.com/davidjbradshaw/iframe-resizer
 
 
For support using this code please refer to the developer: https://github.com/davidjbradshaw/iframe-resizer
 
  
 +
<span style="color:#fe746c;“ >{{#fas:exclamation-triangle}}  </span> It has been reported that this solution can cause security warnings in some browsers concerning cross domain scripts. A better solution would be to use a proxy so all scripts use the same domain.
  
 
== Beds24.com ==
 
== Beds24.com ==
 +
Add the following to the menu {{#fas:cog}} (SETTINGS) >  BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER "Insert in HTML head"
  
Add the following to the menu Settings  >  Booking Page  > Developer > Insert in HTML head
+
<code><script type="text/javascript" src="include/iframeresizer/4.2.10/iframeResizer.contentWindow.min.js"></script> </code>
 
 
<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.
 
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.
Line 23: Line 25:
 
== Your web page ==
 
== Your web page ==
  
Refer to the develpers web site for full instructions and problem solving.
+
Refer to the developers web site for a full set of options, instructions and troubleshooting.
  
Obtain the file iframeResizer.min.js and copy it to your web server.
+
*Download the iframeResizer.contentWindow.min.js file from the developer site or from https://beds24.com/include/iframeresizer/4.2.10/iframeResizer.min.js
 +
*Upload the file to your web server and place it in the same directory as your web page.
 +
*Remove any height parameter from your booking page iframe and add the script after the iframe, if necessary change the src path to the location of your iframeResizer.min.js file.  
  
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
+
<code> <iframe src="https://beds24.com/booking.php?propid=3103" width="100%" scrolling="no"></iframe></code>
 +
 +
<code> <script type="text/javascript" src="iframeResizer.min.js"></script> </code><code><script type="text/javascript">iFrameResize();</script></code>
  
Remove any height parameter from your iframe and add the script after the plugin, if necessary change the src path to the location of your iframeResizer.min.js file
 
  
 +
Make sure to use the same version files on the booking page and your web page. (in this example 4.2.10)
  
<iframe src="https://beds24.com/booking.php?propid=3103" width="100%" scrolling="no"></iframe>
+
If you prefer, you can set a fixed iframe width in pixels rather than a percentage width.
+
 
<script type="text/javascript" src="iframeResizer.min.js"></script>
+
There are many more options available for iframe-resizer, refer to the developer site. This example shows a minimum setup.
<script type="text/javascript">
 
  iFrameResize();
 
</script>
 

Latest revision as of 15:16, 18 June 2020

Resize Iframe
This page explains how to use the iFrame Resizer 

Requires: Ability to upload a file and add code to the html of your web site

This instruction is for version 4.2.10 of iFrame Resizer. There may be a newer version as documented here https://github.com/davidjbradshaw/iframe-resizer

1 Introduction

This is a third party code project which can be installed on your booking page and your web site to automatically resize the booking page iframe so it shows without using scroll bars.

Beds24 can not support or answer questions about this code, for help please refer to the developer site: https://github.com/davidjbradshaw/iframe-resizer

It has been reported that this solution can cause security warnings in some browsers concerning cross domain scripts. A better solution would be to use a proxy so all scripts use the same domain.

2 Beds24.com

Add the following to the menu (SETTINGS) > BOOKING ENGINE > PROPERTY BOOKING PAGE > DEVELOPER "Insert in HTML head"

<script type="text/javascript" src="include/iframeresizer/4.2.10/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 developers web site for a full set of options, instructions and troubleshooting.

  • Download the iframeResizer.contentWindow.min.js file from the developer site or from https://beds24.com/include/iframeresizer/4.2.10/iframeResizer.min.js
  • Upload the file to your web server and place it in the same directory as your web page.
  • Remove any height parameter from your booking page iframe and add the script after the iframe, if necessary change the src path to the location of your iframeResizer.min.js file.


<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>


Make sure to use the same version files on the booking page and your web page. (in this example 4.2.10)

If you prefer, you can set a fixed iframe width in pixels rather than a percentage width.

There are many more options available for iframe-resizer, refer to the developer site. This example shows a minimum setup.