?
Solved

change view port on iframe popup open

Posted on 2014-02-10
6
Medium Priority
?
765 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 42

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 53

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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
LVL 53

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 53

Expert Comment

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

Featured Post

Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

765 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