Website quiz not working on iOS (working on Android)

dabug80
dabug80 used Ask the Experts™
on
Hi,

A website quiz is being developed here

After a user enters their profile details on the splash screen (no email required), they are taken to the quiz. The quiz question appears at the top of the screen. It appears to work fine on PC and Android, but for iOS devices the question does not appear at the top. Troubleshooting indicates that iOS users must tap the top bar for the question to appear.

Is there an easy fix to ensure that the question shows up on iOS devices without the user having to tap the top bar?

Thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Issue is just after login,

Your id="panel" is just hidden. It should be "display:block"
Please check it, if anywhere it is "display:none" just after login...

I cannot see question coming in opera and chrome for first time after login. It works for second question...

Author

Commented:
Thanks for the reply. I sent your reply to my developer and he said:

"Yes, all right. This panel is hide by default - then it shows. Why does it not work...
Works at 4s. I don`t know what to do.."
Please check out console for errors while online.
In offline, page works fine without issues.

shows 3 errors.

1. Fancybox - no element in page.
2. map error, function error
3. Facebook - timeout
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

Author

Commented:
OK. I have more detail about the problem after some more troubleshooting.

1. The site loads correctly when visiting from the submitted link (http://maphover.com/world-map-quiz/)

2. However if a user visits from the Facebook iOS app, the questions are not visible.
@dabug80, Hope facebook code is creating a timeout.
Might be the issue!

When you enter details from login page without a delay and login;
You cannot see first question.

But when you wait for sometime and login:
You can see the question.

In console, time out issue in facebook code.
From bottom of the page..Need to change path from:
js.src = "//connect.facebook.net/en_US/all.js";

to

js.src="https://connect.facebook.net/en_US/all.js";

Hope it will work fine now! Try it.

Author

Commented:
Hi Sajay,

js.src="https://connect.facebook.net/en_US/all.js";

Open in new window


OK, I've added the above code, but the issue still remains.

But when you wait for sometime and login:
You can see the question.

OK, is there some way to add a delay to the code? I can add some more instruction screens to the website so users can view these while the delay is ticking down.
Otherwise you can download that file by pasting that from browser URL.
"https://connect.facebook.net/en_US/all.js"

And access from your server.

js.src="http://maphover.com/world-map-quiz/js/all.js";

Open in new window


Try it..It might work.

Author

Commented:
Otherwise you can download that file by pasting that from browser URL.
"https://connect.facebook.net/en_US/all.js"

Sorry, can you please explain this to me a bit more. What should I do with this link?
Paste the URL without quotes in browser url or right click and "save as" that js file to save in your js folder.
"https://connect.facebook.net/en_US/all.js"

Author

Commented:
Great. Thanks. I have done this. I will test over the next day (when I can get an iPhone - I have to borrow one).

Author

Commented:
Sorry for the delayed response sajayj2009.

I have made the changes you suggested and have had other people test the links from the Facebook iOS app. Unfortunately, the problem has not been fixed. The questions still don't pop up after users enter their details.
There is one more function in code which is not required...Fancybox init code. Related object is  not found in page.

Author

Commented:
OK. Can you please tell me which line to delete?
line no. 1021
<script type="text/javascript">
var $footer = jQuery.noConflict();

// FANCYBOX INLINE MODE START
$footer(".various").fancybox({
	maxWidth	: 400,
	maxHeight	: 200,
	fitToView	: false,
	width		: '70%',
	height		: 'auto',
	autoSize	: false,
	closeClick	: false,
	openEffect	: 'none',
	closeEffect	: 'none'
});
// FANCYBOX INLINE MODE END

</script>

Open in new window

just after fb.init code in your page, line 587;
window.fbAsyncInit = function() {
        FB.init({
            appId: '1506782072955057',
            status: true,
            xfbml: true,
            cookie: true
        });
    };

Open in new window

you can replace that with below.
// Hide login till fb is done.
$("#dialog").hide();

// listen to an Event
$(document).bind('fbInit',function(){
    $("#dialog").show();
});

// FB Async
window.fbAsyncInit = function() {
    FB.init({
            appId: '1506782072955057',
            status: true,
            xfbml: true,
            cookie: true
        });

    $(document).trigger('fbInit'); // trigger event
};

Open in new window

Author

Commented:
Thanks for your help

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial