Solved

change view port on iframe popup open

Posted on 2014-02-10
6
737 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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now