Solved

change view port on iframe popup open

Posted on 2014-02-10
6
747 Views
Last Modified: 2014-02-13
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
Comment
Question by:helpchrisplz
  • 3
  • 2
6 Comments
 
LVL 42

Assisted Solution

by:David S.
David S. earned 150 total points
ID: 39849111
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 350 total points
ID: 39849493
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
 
LVL 1

Author Comment

by:helpchrisplz
ID: 39849782
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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39850495
That is great news.
0
 
LVL 1

Author Comment

by:helpchrisplz
ID: 39857752
This is the best i can do:

http://jsfiddle.net/JZ3fH/show/
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39857754
Looks great!
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to delete "dots" above Bootstrap 3 navbar 4 62
ajax jquery 3 25
HTML Anchor Link Problem 3 36
social media icons disappear on small screens 4 12
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question