What could be causing my Java-Script website to not function properly on iPad/iPhone devices?

Starting out as a newbie in the realm of java-script/html/css, my inaugural project is this web quiz. I am currently working on it using eclipse on a mac. Thus far, the web quiz functions properly on safari, firefox, and chrome on my desktop computer. Initially, it was also compatible with iPad and iPhone; however, suddenly it stopped working on those devices. While it still operates on my desktop, the iPad/iPhone only displays the "static" html version of the page.

If you click the link provided above, you'll see that the web quiz is divided into two html tables. The first table consists of a 4*3 grid of questions represented by images, while the second table displays an image with four answer options. Java-Script is utilized to toggle between these two tables (show/hide).

Upon opening the webpage on an iPhone/iPad, it appears as though Java-Script is not enabled, causing the tables to be statically positioned one below the other... despite Java-Script being activated on all test browsers!

It would be greatly appreciated if any experienced professionals could take a quick look at the web quiz and point me in the right direction. Thank you!

javascripthtmliphonecssipad

Answer №1

Although your code is functioning properly, the reason for the misalignment of tables is due to the sound files used. By checking the network console in your web browser, you can see that the wav files are taking a significant amount of time to load. This delay prevents the javascript from progressing until all files are fetched. The code itself is correct, but the delay caused by the large file size is what makes the tables appear static. If you observe closely, you will notice that the page is still loading, with it taking 12 seconds for all wav files to be retrieved. As a result, the javascript responsible for formatting your styles will not activate until after this waiting period.

I recommend trying again on your iPad, ensuring that the page has fully loaded before assessing the tables.

Answer №2

There are a few things to consider in this situation. It's possible that the problem lies within referencing (although it can be difficult to ascertain from your description alone). To quickly troubleshoot, insert the following code snippet into your JavaScript file.

$(document).ready(function(){
    alert("Testing if we can access the Javascript");
});

If the alert pops up, then you're on the right track. However, if nothing happens, it indicates that there may be an issue with how you're referencing the files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: Retrieve comments via AJAX (from database) in Laravel 5.2

Currently, I am developing a comments section for posts where users can leave comments without the need to refresh the page. However, I am facing an issue in displaying these comments instantly on the post without any page refresh. This is how I have stru ...

javascriptjqueryajaxlaravellaravel-5

In search of a solution to resolve the data type conflict problem with an HTML input attribute or Bootstrap class

Currently, I am in the process of developing a CodeIgniter web application. My challenge lies in implementing a text limit. Due to the nature of my database table, I am unable to utilize the maxlength="" attribute. This is because the fields defined for th ...

htmlmysqldatabasebootstrap-4codeigniter-3

Addressing the Summer Note Problem within a Bootstrap Popup

I am currently facing an issue with the functionality of the Summernote Text plugin in my project. The text inside the Summernote editor does not display what I am typing until I resize the browser window. Below is the code snippet for reference: <%-- ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Modal dismissed, yet the scroll bar fails to reappear

I am currently facing an issue with a Bootstrap 3 modal in my project. When I close the modal using the 'close button' or the 'x' in the top right corner, the page returns to its proper state with a vertical scroll bar showing. However, ...

htmlajaxtwitter-bootstrap-3scrollbar

Refresh database post drag and drop operation

I am seeking a way to update a "state" SQL row after dragging an element between the "DZ", "WT", and "ZK" divs. Below is a snippet of my code: SQL queries: $sql = "select * from tasks where login = '$user_check' AND state = 1"; $sqlDodane = mys ...

javascriptphpsqlajax

``There was an issue with the connection while fetching data using Nextjs middleware

I've encountered an issue where this code works perfectly fine in dev mode but fails when switched to production mode. Can anyone help me figure out what's causing the fetch failure? export default async function middleware(req: NextRequest) { ...

javascriptnode.jsreactjsnext.jsfetch-api

Oops! The function exercises.slice is causing an error - it seems it's not recognized as a valid function

I am currently working on a fitness website using react js, but I'm encountering difficulties with the .slice() function. It's showing an error stating that exercises.slice is not a function coming from props. import React, { useEffect, useState ...

javascriptreactjsfrontendarray-map

Improving React's onClick Functionality for Better Performance and Reducing Re-render

Can the method of setting the isVisible state impact performance when dealing with two different divs? Specifically, does the ShowDiv approach recreate the function on each render? Is there any advantage to using ShowDiv2 over ShowDiv, or are they essenti ...

javascriptreactjs

Box with negative z-index cannot be clicked

I am currently facing an issue with a textbox in the center of my screen - when I click on it, no actions are registered. This leads me to believe that there may be a CSS Z-Index problem at play here. How can I troubleshoot and correct this issue effective ...

cssz-index

Having trouble with the dropdown menu in Bootstrap?

I'm having trouble creating a responsive dropdown menu. When I click on the dropdown items, nothing happens. Here's the code: <div class="navbar-header"> <button type="button" class="navbar-toggel" data-toggel="collapse" data-target="#m ...

javascripthtmltwitter-bootstrap

Evenly distribute top and bottom padding within a fixed-height border using CSS

I'm facing a challenge with centering the content vertically on an online certificate that users can print out. The main issue lies in aligning the inner wrapper (#wrapper) inside the outer border (#outerBorder), which has a fixed height to ensure pro ...

csspadding

How to Turn Off Depth Testing in Three.js

I am currently using an EffectComposer in my project: renderer = new THREE.WebGLRenderer(); renderer.setDepthTest(false); ... composer = new THREE.EffectComposer( renderer); However, I noticed that when I attempt to disable the depth test with the follow ...

javascriptwebglthree.js

Creating a personalized look for your website using Rails 3.2 Asset Pipeline, a custom theme

Seeking assistance as I am struggling to get my CSS files loaded correctly in production for my 3.2 RoR app. Despite trying various methods, the files either do not appear or result in a 404 error. My application utilizes a combination of a purchased them ...

cssruby-on-railstwitter-bootstrapasset-pipeline

Tips for displaying the XYZ axes on a graph using JavaScript

I am working with a dataset that captures motion data over time, specifically along the XYZ axes. I want to visualize the object's movement using these values on a JavaScript graph. Which type of graph would be most suitable for visualizing this kind ...

javascriptgraphchartsplotgeometry

Swap the image (either the last or first child) within a div when it is hovered over

I have multiple Div's on my webpage and I am looking to change the color and image when a mouse hovers over them. Changing the text color from grey to blue is quite simple. CSS #div1:hover{color:#0000CC} If I want to change an image, I can achieve ...

css

Looking to show an image when a checkbox is ticked and hide it when it is unticked in HTML?

How do I make a specific image appear when a user clicks on a checkbox? I'm unsure if I should use jQuery, Ajax, or another method. What is the best approach for this task? Your assistance would be greatly appreciated. I have successfully created the ...

javascriptjqueryajaxhtml

Utilizing MongoDB arrays for efficient value retrieval within array attributes

I'm currently working with the code below: // Defining my search array var charArray=['a','b','c'] { name: 'object1', myChar: ['a','v','x'] } { name: 'object2&ap ...

javascriptarraysmongodb

Submenu fails to remain expanded

Having a minor issue with my dropdown menu. Whenever I hover over a link, the submenu pops out briefly but doesn't remain open. The issue seems to be related to the "content" div element, as removing it makes the menu functional. However, I can&apo ...

jqueryhtmlcssdrop-down-menu

Troubleshooting a Navigation Styling Issue in HTML and CSS

I'm struggling to position my drop-down menus correctly in my WordPress theme navigation. They are appearing far away from the nav bar and end up near the top left corner of the screen when I hover over a ul li >. Here is the CSS code I am using: ...

htmlcsswordpressthemes

Is there a way to retrieve the filename from a callback in gulp-contains?

Currently, I am utilizing gulp-contains to scan for a specific string. If the target string is found, I intend to trigger an error message stating "String found in file abc." The 'file' parameter holds the entire object comprising filename + Buff ...

javascriptnode.jsgulp