Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

I am trying to use an iframe to display a booking calendar from a remote source.
I have been able to create an iframe but it displays the whole page.
I have been trying to figure out what's needed to exclude everything and only display what I need, but it's been very difficult.
Is there some way you could simplify how to create the correct shortcode to display just the required section?
https://www.screencast.com/t/kEXKF473yuj
I ran the tests and the calendar is responsive so I am hoping the iframe can be made to be responsive also so it displays exactly as it is shown on the original website.
If you need the link to the calendar it is
http://www.gulfrealtyinc.com/property-info/327558.html/#availability-title
We are trying to allow our visitors to complete the booking procedure without leaving our site, which is different from the mentioned site.
We have tried to contact the webmaster of the above site to see about an embed code, but they have failed to respond so this is our only option at this time.

You can use the area selector if the content you like is always at the same place on the other webspace.

See http://examples.tinywebgallery.com/configurator/advanced-iframe-area-selector.html.

In your installation on the advanced tab -> "Show only a part of the iframe" you have the one for you.

Best, Michael

Isn't there a way to just grab the div from the other site so if they make edits to their site layout and edit the css for that div it will not effect what my iframe is displaying aside from appearance changes they may make?
I had another issue with my iframe as the calendar opens a modal when someone clicks on a date.
The modal opens but is displayed at the top of the page where I am not displaying.
I am currently working with the developer of the site to find some options for embedding their calendar and booking form but it may not be an easy task.

Or is there some way to make the calendar to where it is not clickable?
This way it will not try to open the modal from the original website.

If you can use the external workaround you can also display only a single div or grab parts of the website:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications

and you can make iframe also read only:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/hide-a-part-of-the-iframe#e21

Best, Michael

I really appreciate the help but I am not an experienced web developer. I am learning though.
Your instructions are very vague, to me anyways.
Is there any way you can include step by step screenshots of what exactly needs to be done for an iframe to set up correctly?
I am not sure what to do with the <script> code.
And I am still not sure if the iframe can be made to be responsive as the content of the iframe is responsive
I understand the shortcodes a little but much of this other stuff needs further explaination.
Step by step videos are a huge help and cut the learning curve down tremendously.
Thanks again

What else do you need?

"Add the following Javascript to the external web page you want to show in the iframe (The optimal place is before the </body> if possible. Otherwise put it in the head section."

Not sure what a video of my web page would help as you need to include it into your page... I don't know your page nor e.g. the system you use there.

Best, Michael