Anomalous Link Behavior on iOS

I am encountering a strange issue with links on the provided website in iOS:

When I try to tap on the links under the "Galleries" menu, such as "Benny," nothing happens. It appears that Safari is trying to load the new page, but then it fails to do so.

However, if I tap and hold on the link, I am able to open it in a new tab, which works fine as expected.

The website functions properly on desktop computers without any issues.

The DIVs containing the links are set to absolute positioning rather than fixed.

Any suggestions on how to resolve this?

javascripthtmlioscss

Answer №1

Replace javascript with CSS to create a dropdown menu for a cleaner code and better compatibility on browsers without javascript support.

To achieve this, utilize the :hover selector in CSS.

1) Create a list of menu items or a div containing sub-divs.

2) Initially hide the submenus in CSS using: display: none;

3) Use the hover selector to show them upon hover. For example:

   .menu .menubutton .submenubutton{
      /* targets the div or li within the class menubutton within the class menu */
      display: none;    
   }  
   .menu .menubutton:hover .submenubutton{
      /* when hovering over menubutton, display its submenu */
      display: block;    
   }

For more detailed information, refer to this article on csswizardry or search for "css dropdown menu":

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

Tips for displaying a slideshow within a div using JavaScript

When the HTML loads for the first time, the div slideshow remains hidden until a button is clicked. Any suggestions on how to display the first div without requiring a button click? var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { s ...

javascriptvue.jsslideshow

Removing the empty option in a select element with ng-model

There's a situation I'm dealing with that involves a select dropdown along with a refresh button and a plus button. The issue arises when clicking the refresh button sets the model to null, while clicking the plus button displays the dropdown wit ...

javascriptangularjs

Turn off jQuery on certain pages while keeping the styling intact?

Hey there, I'm currently in the process of developing a mobile website using jquery. I was wondering if it's possible to disable jQuery on certain pages while still retaining the styles, such as the navigation bar. The reason for wanting to disab ...

jqueryhtmlnavbar

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

I'm currently utilizing intern.js for testing a web application. It allows me to run tests and generate screenshots in case of failures. My goal is to capture a screenshot of a specific element for conducting CSS regression testing with tools like res ...

cssseleniumscreenshotinternregression-testing

Is it possible that the font-family attribute is not passed down to the input fields within a

Do the html form input elements like text fields or select boxes automatically inherit the font-family property from the body? For instance: body { font-family: 'Lucida Casual', 'Comic Sans MS'; } The above font will not be applied t ...

htmlcssformsfontsinput

Sending the most recent result to each dynamically created div

In my WordPress project, I have an event panel that displays upcoming event details and shows the remaining time until the next event. The countdown dynamically gets values from the database and calculates the time left based on the user's input in th ...

javascriptjqueryhtmldomjquery-traversing

Choose particular content enclosed by two strings (across multiple lines)

Looking to use regex to extract specific text between two strings. For example: foo I have four toys bar //single line foo //multiline I have four toys bar foo I have three pets bar foo I have three pets bar How can I extract the text between & ...

javascriptregexregex-lookaroundsregex-greedy

concealing directory titles within HTML and AJAX

What are the potential security risks associated with exposing PHP folder names? If there are risks, what methods can be used to conceal the folder names within html hyperlinks and ajax code? ...

phpajaxhtml

"Incorporating date and time information into the database

I am attempting to set up an automatic SMS system that sends a reminder 24 hours before our residents' appointments. My challenge lies in extracting the date and time from the datetime row in my MySQL database. While I could create an input field, my ...

phphtmlmysqljscript

Demonstrating the transformation of child elements into parent elements through angular 6 ngFor

I have a JSON array dataset where each object may contain nested arrays. In order to display the inner nested array elements as part of the parent array using Angular's NgFor, I need to format the input like this: [{ 'id': 1, 'tit ...

javascripthtmlangular

Use jQuery to assign a value of "true" when a checkbox is

Can you guide me on how to use jQuery to implement a click function that sets the status value to 'true' if a checkbox is checked, and 'false' if it's not checked? If Checkbox 1 is checked, Status 1 should be set to true. Similarl ...

javascriptjquery

Eliminate forward slashes from the telephone number

I am trying to figure out how to format a USA phone number by removing slashes and brackets. I have searched on Google, but I cannot find the answer. I would like to use regex to achieve this, while keeping the plus sign at the start intact. For example, ...

javascriptphp

Encountered a RunTime Error when attempting to Lazy Load a module

When attempting to lazy-load a component separately, an unexpected run-time error is occurring. This issue is specifically related to writing loadChildren within the routing module of another component in Angular 6. Any assistance with resolving this error ...

javascriptangularlazy-loading

Steady Navigation Bar in Javascript without Bouncing

While experimenting with a fixed navigation bar, I've encountered an issue where the content below jumps up on the page when the navigation bar "fixes" itself to the top of the screen. You can check out the JSFiddle I've been working on for refer ...

javascriptjqueryhtmlcssnav

What is the process for updating the h1 header with text entered into an input field?

I'm working on an assignment that requires me to change the h1 heading to reflect whatever is entered into the input field. To accomplish this, I need to create a function using getElementByID. Here's what I've done so far: <!DOCTYPE htm ...

javascripthtmlinputgetelementbyid

Issue encountered while compiling ReactJs: Unexpected token error found in App.js

I executed the commands below. npx create-react-app github-first-app npm install --save react-tabs npm i styled-components npm install git-state --save using the following code files App.js import React from "react"; import Layout from " ...

javascriptreactjs

Decoding JavaScript content with Python

Currently, I am dissecting this specific portion of HTML <script type="text/javascript"> var spConfig = new Product.Config({"attributes":{"150":{"id":"150","code":"size_shoe","label":"Schuhgr\u00f6\u00dfe","options":[{"id":"494","label ...

javascriptpythonhtmlparsingbeautifulsoup

Empty area beneath the body in Chrome Device Mode

Can anyone explain why there is a strange blank space under the body tag in mobile view on Chrome (other browsers like Firefox and Internet Explorer display it correctly)? Here is the simple code that I am using: <html> <meta name="viewport" con ...

javascripthtmlcss

Tips for keeping your button fixed in place

I am encountering an issue where my button moves below the select dropdown list when I try to make a selection. Is there a way to keep the button in place even when the dropdown list from the select box is visible? For reference, here is the current outp ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

The AngularJS $rootscope $destroy event is not being triggered, resulting in timeouts not being cancelled

Below is the code snippet that I am currently working with: function initialize() { var defer = $q.defer(); var deferTimer = $q.defer(); var cancelTimeout = $timeout(function() { if (defer !== null) { ctrlr.setProcessingParameters('X ...

javascriptangularjstimeoutdestroy