Iframe Resizing: Difference between revisions

Jump to navigation Jump to search
No edit summary
No edit summary
Line 6: Line 6:




  This instruction is for an old version of iFrame Resizer. We suggest using the latest version as documented here https://github.com/davidjbradshaw/iframe-resizer
  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




Line 19: Line 19:
Add the following to the menu SETTINGS ->  BOOKING PAGE -> DEVELOPER "Insert in HTML head"
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>  
  <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.
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 27: Line 27:
Refer to the developers web site for a full set of options, instructions and troubleshooting.
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/3.5.3/iframeResizer.min.js
*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.
*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.  
*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.  
Line 40: Line 40:




Make sure to use the same version files on the booking page and your web page. (in this example 3.5.3)
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.
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.
There are many more options available for iframe-resizer, refer to the developer site. This example shows a minimum setup.