• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 808
  • Last Modified:

change view port on iframe popup open

Hi all.

am creating a responsive website using media queries.
My client has given me a code snippet to embed his appointment / booking system into the website.

This uses an iframe to display a booking button that when clicked opens a popup with the appointment options.

The problem i am trying to get around is:

How can i make this work when the page is viewed on a mobile?
i have added the booking button in the centre of this temporary webpage:
http://www.thesearchengineoptimisationcompany.co.uk/not-b/test

when i tested my self on my mobile: the popup goes of the screen and creates horizontal scrolling.

is there a way of making the website change its zoom level when the user clicks the button so it doesn't go off the screen? or some other way around this?

The button will be on every page.
0
helpchrisplz
Asked:
helpchrisplz
  • 3
  • 2
2 Solutions
 
David S.Commented:
Lightboxes on responsive sites are rather tricky. Throwing an iframe into the mix is just not a good idea. I see two options here. Either you need to remove the iframe so you can make the content in it responsive or you'll need to load that page in a new tab instead of in the iframe.

Here's an article that mentions this issue, I recommend you read it: The State Of Responsive Web Design

As to changing the zoom level, do you really think that would be a solution that would really help the users?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The problem is setmore is using fancybox 1 that was last changed in 2010.  The newer fancybox seems to be more responsive http://fancyapps.com/fancybox/

I think you would be better off making the modal yourself. You don't have to use their embed code.  From your site, we can see the url is http://my.setmore.com/shortBookingPage/c3928d46-15fa-49f6-b805-5ab4cde0c53b.  

Make your own modal using either jquery ui (already installed on your site) https://jqueryui.com/dialog/#modal-form or I prefer bootstrap http://getbootstrap.com/javascript/#modals

Those modals will configure to the page.  The real issue is that url is not responsive.  It looks like setmore can give you more control over the page but perhaps you can tell better.   They have a mobile version and I bet that is probably just a webview meaning there is a responsive page someplace.  See if you can find the mobile version and grab that url for mobile.

Knowing you can just use the url however you want gives you more options.
0
 
helpchrisplzAuthor Commented:
ok i managed to put this together:

http://jsfiddle.net/AqQEL/
what do you think?

i contacted setmore support because i found there booking page had messed up css:
http://my.setmore.com/shortBookingPage/c3928d46-15fa-49f6-b805-5ab4cde0c53b.  

on mobile it was all going off the screen due to some funky css.

They replied back:

We made the responsive layout for the main booking page but it has applied for the short booking page as well, since we use the same controller. We will fix the issue in few hours. Thanks for reporting the issue. We will update you once we make this change.

So this is looking good, just waiting for them to fix it up.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That is great news.
0
 
helpchrisplzAuthor Commented:
This is the best i can do:

http://jsfiddle.net/JZ3fH/show/
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Looks great!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now