The Jquery click menu is functional, but appears completely translucent in Safari and the majority of mobile browsers

I have implemented a link that, when clicked, should reveal a menu on the website. This feature is specifically optimized for smaller browser windows with a breakpoint set at 965px. However, I am encountering some varied behaviors across different browsers:

Positive feedback from Firefox (desktop), Opera (desktop), and Puffin (mobile):

  • The menu works perfectly as intended.

Negative response from Safari (desktop & mobile), Opera Mini, Google Chrome (mobile), Dolphin (mobile), Mercury (mobile), and Coast by Opera (mobile):

  • The menu does not show up at all. Interestingly though, clicking or tapping where the dropdown menu should be triggers the links, suggesting that the menu is present but completely transparent.

A peculiar issue with Google Chrome (desktop):

  • The same transparent behavior occurs as described above, but only when the menu overlays an image gallery at the top of the page. Once scrolled past the gallery, the menu appears and functions normally.

This discrepancy seems to point towards a CSS problem, although pinpointing the exact cause has proven challenging. Despite experimenting with disabling/enabling the image gallery, the issue remains unresolved.

You can access the current state of the site here:

Below are snippets of the relevant code related to the click menu functionality:

HTML:

<div id="hammenushowbio" class="viewmenu">MENU</div>
        <div id="hammenu">
            <div class="hammenulinks">
                <ul>
                    <li data-slide="2" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">FIRM PROFILE</div></li>
                    <li data-slide="3" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CLIENT SERVICES</div></li>
                    ... // Code continuation
                </ul>
            </div>
        </div>
</div>

CSS:

... // CSS code block ...

Jquery section elaborating on potential JS issues:

... // Jquery code block

Mediaq section defining responsive design breakpoints:

... // Mediaq code block
javascriptjqueryhtmlcsscross-browser

Answer №1

I believe that the "click" event only works for left-clicks with a mouse and may not respond on touch-based devices like tablets or smartphones. However, you can achieve similar functionality by using JavaScript coded in the href attribute of an anchor tag. For example:

<a href="javascript:ShowMenu();"><div class="viewmenu">MENU</div></a>

An alternative approach could be utilizing the jQuery Mobile plugin to cater to both desktop and mobile users. Instead of wrapping the MENU div in an anchor tag, you can directly bind the TAP event to the DIV itself:

$('div.viewmenu').on('tap', function() {
    var $slider = $(this).next("#hammenu");
    if (!$slider.length){
        $slider = $(this).closest("#hammenu");
    }
    $slides.not($slider).stop(true, true).slideUp();
    $slider.stop(true, true).slideToggle(0);
});

It is important to note that mobile devices typically have lower resources compared to desktops (CPU, Memory, etc). When using the jQuery Mobile plugin, it's advisable to only download the necessary components to optimize the size of your javascript file. The downloads section of their website offers a helpful resource for this purpose. Make sure to leverage it wisely. :)

Answer №2

Success! The issue has been resolved and now everything is functioning correctly.

I want to extend my gratitude to fastsol from codingforums.com for their assistance.

The problem was caused by a leftover CSS property overflow:hidden; in my .navigation div... whoops...

This remnant code was originally from an experiment with the drop-down menu.

This serves as a lesson for me to always clean up after myself properly!

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

Unable to load more than one controller in a single partial view using AngularJS

I am having trouble loading a second controller to populate a select in my view. Despite my efforts, it just won't cooperate. This is the code snippet I'm using: app.js (function() { 'use strict'; angular .module('app.lazylo ...

javascriptangularjs

Utilizing CSS3Pie on a Wordpress website... Following all the best practices, yet still facing functionality issues

Seeking assistance with rounding the corners of navigation tabs in IE8 on my slider at csr.steelcase.com, including tabs like "Our Vision" and "Note from our CEO." Using WordPress for the site and have correctly installed CSS3PIE based on various articles ...

cssinternet-explorer-8css3pie

React Native: A guide to triggering a modal or action sheet when a button tab is clicked using Wix React Native navigation

Is it possible to trigger a modal or actionsheet by clicking on a specific bottom tab in a tab-based application using wix react native v2 navigation? These are the current packages and versions I am working with: react-native : "0.59.8" react : "16.8. ...

javascriptreactjsreact-nativewix-react-native-navigation

Troubleshooting a ForwardRef issue in a TypeScript and React Native project

Encountering a ts error while using forwardRef. // [ts] Property 'forwardRef' does not exist on type 'typeof React'. const MyComponent = React.forwardRef((props: Props, ref: any) => ... An issue arises in React Native when the pare ...

javascripttypescriptreact-native

Issues with the disappearance of elements when using the Toggle() function

I've created a toggle feature for displaying a sub menu (.li-one) when clicking on the main menu (.ul-one). The issue arises when you click on another menu item, as the previous one does not disappear unless you click outside of the .main-nav div. Is ...

jqueryhtmlcsstoggle

What is preventing me from merging font sub properties?

When working with CSS, you have the option to combine sub-properties. For example, instead of defining a border like this: border-style: solid; border-width: 1px; border-color: #555; You can use a single declaration for the border property as a shorthand ...

css

Events triggered when the mouse hovers over an element and then moves

After spending hours reading articles and watching YouTube videos, I am completely lost. No matter what code I try, it seems like I can never get it right. It's frustrating how such a simple task can be so confusing. I just can't seem to wrap my ...

javascriptjquerymouseentermouseout

Adjust the font size to fit within the container

My webpage features a bootstrap 4 container with three columns that adjust on screen sizes above the md breakpoint (col-md-4). Each column contains an img with the class img-fluid, and when hovered over, text description appears. I want this hover text to ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Utilizing ng For in a personalized directive to fill a selection menu

I encountered an issue while trying to populate a selected dropdown using ngRepeat inside a custom directive. I came across this example that seemed similar to what I wanted to achieve here. Although it worked for the example, it didn't work for me. ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

When I switch fields or lose focus, react-select unfortunately erases the value I have typed

As a newcomer to React, I am currently developing a typeahead component using the react-select library. The main functionality involves asynchronously fetching suggested options based on the user's input. However, I encountered an issue where if I typ ...

javascriptreactjsreduxes6-classreact-select

Tips for placing a checkbox above a DIV element when generating checkboxes within a foreach loop

This is the output I have generated This HTML code belongs to me <td class="category" colspan ="2" id="tdcategory1"> <div id="category1" style="border:none !important; overflow:hidden; width:auto; height:auto"> </div& ...

jquerycssarrays

Enhance the efficiency of synchronized horizontal scrolling using React/Redux to boost overall performance

I'm currently working on creating a grid with synchronized horizontal scrolling across different sections (such as a header and multiple table sections below). Each section should scroll together horizontally, maintaining synchronization using a redux ...

javascriptreactjsredux

What is the most efficient way to print multiple JSON arrays simultaneously?

When looping through a database using an array, the following code snippet is used: $checkedProducts = $request->input('products'); $p = null; foreach($checkedProducts as $checkedProduct){ $p .= DB::table('products')->where( ...

htmlarraysjsonlaravel

Sliding elements horizontally with jQuery from right to left

I recently purchased a WordPress theme and I'm looking to customize the JavaScript behavior when the page loads. Currently, my titles animate from top to bottom but I want to change this behavior dynamically. You can view it in action here: I have ...

javascriptjquery

Creating smooth transitions with CSS in React by fading text in when a user clicks a button

Within this presentational component: const HowToControls = props => { return ( <div className="col-md-6 how-to"> {props.isOpen ? <p className={`text ${props.isOpen ? 'visible' : ''}`}> lorem ...

cssreactjscss-transitions

Uploading images using PHP and renaming them

I am in the process of creating a PHP code that will allow me to upload a file name to a database. My goal is to initially upload just the file name so that I can easily retrieve it later on. Below is the code snippet that I have been working on: HTML code ...

phphtmldatabaseuploadweb

Is there a way to configure this code to automatically start upon page refresh?

Recently, I had someone help with this code but now they are nowhere to be found to complete it. Despite my efforts to search online and ask around, I am unable to determine how to make this code automatically start after refreshing the page. It's im ...

jquery

Tips for utilizing comment tags efficiently

I have encountered an issue with IE7 where my CSS is not functioning properly. In an attempt to target IE7 and lower versions specifically, I inserted IE comment tags into the HTML code. However, despite my efforts, it does not seem to be effective. Initia ...

htmlcssinternet-explorer

AngularJS confirmation directive for deleting items

I am currently utilizing this directive for a confirmation prompt when deleting an app. However, regardless of whether I click cancel or yes, the app still gets deleted. <small class="btn" ng-click="delete_app(app.app_id)" ng-show="app.app_id" ng-con ...

javascripthtmlangularjs

Remove the space gap between the header and card in Bootstrap

I'm in the process of creating a sleek landing/login page for my web application using Bootstrap. The current layout includes a header with text and an image, followed by a login form within a card. Looking at the image provided, it's clear that ...

htmlcssbootstrap-5