Need help with script within adaptive sites

[Zeitlbch]

I'm new in creating WEB-Sites and so far it works out well with a site for Holiday Apartments.

I created 3 adaptive sites, one for tablet, one for Smartphone and another for 17" PCs. you can visit on www.atelier-faakersee.at
To see what I'm talking about please select "Buchen" and enlarge/shrink the explorer Window

So far it works and I was satisfied with - until I had to connect to the platform easybooking.com.
I received a Java script and embedded it in a Container in the Body and another line in the Header of the page.

at the iPad (tablet) size Window you reach the easybooking site (this container is the first of the 3 containers for the different views in the HTML code), but on the other 2 window sizes you can't. I estimate that it has something to do with hiding the other views of the window while in iPad mode, but don't have enough know how to find out what to do...

Can somebody please help an tell me what to do and how to enable the other page sizes to show the same as the one does? You can check it by enlarging or shrinking the size of your explorer window and see that the booking "screen" can only bee seen in the medium size, not in the smartphone nor in the PC size.

I was thinking of creating something like an iFrame on each of the 3 page-views and call a centralized html page with the code I received... could this work out - and if yes in which way?

Christian

[siran]

In the placeholder you have some code starting with

<div id="ebFrontEndFrameMobil"></div>
<script type="text/javascript">
function ebFrontendLoadedCheckMobil() {
    if(typeof jQuery != "undefined") {
        if(jQuery.fn.ebFrontEnd) {
            jQuery("#ebFrontEndFrameMobil").ebFrontEnd({
                customerId: 2290,

That code is exactly the same on all three variants. That means you have three elements using the same ID, and that won't work.
You have to replace the ID on two of the variants, for example

<div id="ebFrontEndFrameMobil2"></div>
<script type="text/javascript">
function ebFrontendLoadedCheckMobil() {
    if(typeof jQuery != "undefined") {
        if(jQuery.fn.ebFrontEnd) {
            jQuery("#ebFrontEndFrameMobil2").ebFrontEnd({
                customerId: 2290,

[Zeitlbch]

Hi Siran, a great hint and so simple to implement! hurray it works now in all 3 views!!! Thanks a lot!!!

There is only a small issue: if you change e.G. the date in the smaller window it is not being taken to the larger window. That may happen if somebody opens outlook and decrease the size of the browser window while picking up dates. Then he/she puts in the dates while window is still small and afterwards enlarges the browser-window and gone is the input from before...

Do you please have possibly an additional hint for me?

[siran]

I don't think it will be possible to do that without massive coding.
The three forms are separate objects each included as an IFRAME to the page. One would have to detect a variant switch and copy the content from the previously active form. That surely would take some time to implement and require a lot of testing.
Maybe there is a better solution, but I can't think of one at the moment.

[Zeitlbch]

Thank you Siran, I was afraid of getting such an answer...

I'll get in contact with the people from easybooking, maybe they'll find a solution for this. It will be their fortune being able testing with me, because I think that others will have similar problems with booking sites by using adaptive sites instead of responsive sites...

Thanks and greetings from Vienna/Austria

[siran]

Had an idea in the meantime, but don't have time to test it.
The basics would be to put the form code only once to the page body instead of to a placeholder at each variant. But then the positioning and sizing would have be done manually...