Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

change view port on iframe popup open

Posted on 2014-02-10
6
Medium Priority
?
774 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 43

Assisted Solution

by:David S.
David S. earned 600 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1400 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 54

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 54

Expert Comment

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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

636 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