I am a very beginner in the field of java-script/html/css. My first project is this web-quiz. I am currently developing with eclipse on a mac. So far the web-quiz works with safari, firefox and chrome on my desktop puter. Initially it also worked fine on the iPad and iPhone, but all of a sudden it doesn't anymore :-/ On the desktop it still works, but the iPad/iPhone only shows the "static" html version of the webpage.

If you have look on the link above, the web-quiz is structured into two html tables. The first is a 4*3 grid of questions represented by images. The second table shows an image with 4 answer options. Java-Script is used to switch between these two tables (show/hide).

When opening the webpage on the iPhone/iPad, it looks like Java-Script is disabled, e.g. the two tables are statically arranged one below the other... But Java-Script is enabled on all testing browsers!

It would be great if one of you professionals could have a quick look on the web-quiz and direct me into the right direction.

I am a very beginner in the field of java-script/html/css. My first project is this web-quiz. I am currently developing with eclipse on a mac. So far the web-quiz works with safari, firefox and chrome on my desktop puter. Initially it also worked fine on the iPad and iPhone, but all of a sudden it doesn't anymore :-/ On the desktop it still works, but the iPad/iPhone only shows the "static" html version of the webpage.

If you have look on the link above, the web-quiz is structured into two html tables. The first is a 4*3 grid of questions represented by images. The second table shows an image with 4 answer options. Java-Script is used to switch between these two tables (show/hide).

When opening the webpage on the iPhone/iPad, it looks like Java-Script is disabled, e.g. the two tables are statically arranged one below the other... But Java-Script is enabled on all testing browsers!

It would be great if one of you professionals could have a quick look on the web-quiz and direct me into the right direction.

• javascript
• html
• iphone
• css
• ipad

Share Improve this question Follow edited Dec 23, 2013 at 8:02 salocinx asked Dec 23, 2013 at 7:40 salocinxsalocinx 3,8231010 gold badges6363 silver badges115115 bronze badges 6

• Without looking it sounds to me like the path to the JavaScript files is local to your puter. Be sure to check to make sure the paths are valid on your iphone/ipad. – Justin Commented Dec 23, 2013 at 7:43
• I only reference "code.jquery./jquery-1.4.4.min.js". All other java-script code is inside the index.html. – salocinx Commented Dec 23, 2013 at 8:00
• the ment deleted the prefix "http://" somehow... the link is valid with "http://" ... – salocinx Commented Dec 23, 2013 at 8:04
• Testing in my browser revealed that it works exactly the same it just looks very very tiny. When I tested the Iphone I did notice what you were describing, two static tables on top of each other. However, after a moment the javascript loaded and they ended up looking like what I believe to me your desired result. – Justin Commented Dec 23, 2013 at 8:14
• That's strange. I uploaded the new code with the alert box mentioned below. This box appears now on all testing devices. But on my iPhone & iPad it still doesn't work. Seems like the java-script is not executed, altough java-script is enabled and the caches are emptied. Any further ideas ? – salocinx Commented Dec 23, 2013 at 8:26

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 2

Your code works, however the reason that the tables appear out of whack it because of your sound files. If you look at the network console of your web browser you will see that the wav files take a very long time to load. This timing means the javascript cannot progress until these files are fetched. The code itself works, but the reason that you see the tables as static is due to the delay. If you look you can actually see the page still loading, 12 seconds was the time it took for me to get all the wav files. That means that the javascript that formats your style will not load until at least after this time.

Try again on your ipad but this time make sure the page has fully loaded.

Couple things. It may be a reference problem (though its a little hard to tell just based on your writing). To test it quickly, put this in your JavaScript code.

$(document).ready(function(){
    alert("We accessed the Javascript");
});

If you get the alert, then that's a good sign. If it's not working, then you obviously aren't referencing the files correctly.