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

[Acorn]

I have created a separate small page for forms and used the Embed a Website Widget (EaWW) to carry the form entries across all variants.

All you then have to do is set up the displaying EaWW IFRAME width and height to match each variant.

Acorn

[Zeitlbch]

Siran, Acorn,

I like both ideas, because I was thinking myself about the possibility of embedding a dedicated separate page which has the unique connection to easybooking and is linked (iFramed) in my 3 Variants. I tried to create such a page with the WEB Designer, but had no chance to just write a *.htm page and load it up to the WEB Server. When I tried it created a new index file and eliminated the existing file-structure. Then I tried with Dreamweaver, the upload worked, but with my minimalistic knowledge I was unsuccessful wit the correct coding...

Acorn, could you please forward some more details about your solution? How does the form look like, in which way does it work and how did you embed it to the variants? Did you embed it with a Box and declared the box as place-holder for HTML code? I'm not sure if I understand how to create an iFrame with the WEB Designer...

Christian

[siran]

HERE is a draft version of the mentioned idea.
Everything is on the page head and body code. Only an additional dummy text is on the mobile variant to ensure jquery is loaded.
Tried to recreate the variant sizes of your website, but you might have to fine-tune the css...
It doesn't work when started from the local harddisk, you need to preview or upload to a server.

[Ismiseweb]

I have just completed a website using Xara Designer Pro 365 with a client login area. www.n86kerry.com
I used a product called Sentrylogin.com - it has worked perfectly, their support is brilliant, I can't praise them highly enough.
Remember to save the website as a conventional site, not a supersite in web options.