The button is functioning properly on desktops using bootstrap, but is unresponsive on mobile devices

I have successfully created a bootstrap button with an embedded link. Here is how it appears:

Upon hovering over the button:

This is the code snippet for the button:

<div class="s-8"><button type="button" onClick="javascript:location.href = 'administration.php';">Administration</button></div>

As for the logout button:

<div class="s-4"><button type="button" onClick="javascript:location.href = 'logout.php';">Logout</button></div>

The administration button functions perfectly on desktop browsers (IE, Safari, Firefox, Chrome, Opera) and redirects to the respective page. However, I am facing issues with its functionality on mobile devices.

In contrast, the logout button performs seamlessly across all platforms. This discrepancy has left me perplexed.

javascriptjqueryhtmlcsstwitter-bootstrap-3

Answer №1

The problem might be that you're utilizing the onClick event, which may not activate on a mobile device (since you tap instead of click).

This solution provides instructions on how to utilize the "touchstart" event to make it work on mobile devices.

https://example.com/article54321

Answer №2

It may sound odd, but in certain situations mobile click events won't trigger unless you include the style: cursor:pointer; on your button.

Mobile devices handle click events differently, sometimes registering the initial "click" or "tap" as a hover instead of the intended click action.

To ensure proper functionality, consider adding the CSS style to your button: cursor:pointer;

Answer №3

It was disappointing that neither specifying cursor:pointer; nor adding a touchstart event listener had the desired effect.

$(document).ready(function() {
  $('#button_id').on('click touchstart', function() {
    window.location.href = "/url";
  });
});

Despite suggestions from @noa-dev and @GitPauls, none of their solutions worked for me. Upon testing on my iPhone7 (iOS11.4 and Safari), I realized what did work: setting a high z-index for the button.

#button_id{
  z-index: 99;
}

Credit goes to Daniel Acree for this workaround . It's uncertain if this solution is applicable to all iPhone/mobile devices.

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

Adjust the stroke color of an SVG element in HTML

I've hit a roadblock with my current project. I'm attempting to create an SVG for Formula 1 tracks that will highlight different sectors of the track when the mouse hovers over them. The sectors are neatly separated in the SVG as Sector_1, Sector ...

htmlsvghover

Transferring contacts from Gmail, Yahoo, Hotmail, Facebook, and Twitter

Looking to streamline the process of importing contacts from various platforms like gmail, yahoo, hotmail, and facebook using Google API's. Are there any libraries available that can handle this task or should I dive into writing code for all the diff ...

javascriptjqueryemailyahoo

Transform Client - Server command-line interface Node.js application into a Docker container

My Node.js application consists of two separate components: an Express.js server and a CLI built with vanilla JavaScript and inquirer.js. These components communicate with each other through a REST API. The main reason for this setup is to adhere to the SO ...

javascriptdockerexpresscommand-line-interface

AngularJS mouse event is triggered repetitively within a loop

My goal is to activate the function setHighlight when a li element is hovered over with a mouse. The ng-mouseover event is employed within an ng-repeat loop. The problem arises when hovering over a li element: the ng-mouseover event gets triggered multipl ...

javascriptangularjs

Having trouble getting my image to appear at the top of the website, could it be an alignment issue?

Here is a screenshot showing the issue: https://i.stack.imgur.com/kSVQj.png. The quote on my website does not align to the top as expected. Can anyone provide a solution for this? Below is the corresponding code: <body> <div id="container"> ...

htmlcss

What could be causing some videos not to load on a Chrome page?

Make sure to click on the link using a webkit browser. Upon loading, you should see a 4x4 grid of videos, but in Chrome, only 1-3 videos tend to load. Interestingly, it works perfectly fine on Safari. Why is this discrepancy happening even though they a ...

htmlvideo

What is the best way to include a context in a JavaScript promise?

Figuring out JS Promises has always been a challenge for me. I'm aware this might be a basic question, but please bear with me. =) Looking at the code snippet below, my goal is to modify a property within the class containing this function (essentiall ...

javascriptes6-promise

Creating a Task Manager with useReducer and MongoDB - Issue: "Error message: todo.map is not a function"

Recently, I attempted to create a basic Todolist application using nodejs and MongoDB. To simplify the actions and enhance my understanding of it, I utilized useReducer. Unfortunately, I encountered an error stating 'todos.map is not a function' ...

javascriptnode.jsreactjsmongodbuse-reducer

Upon initial login, React fails to retrieve notes

I developed a note-taking React app using the MERN stack with React Router DOM v6. When I initially visit the website, I am directed to the login page as intended. However, upon logging in, the page refreshes but does not redirect to the home page. This is ...

javascriptnode.jsreactjs

Website Design: Logo and Banner Alignment Issue, Navigation Bar Not Responsive

Struggling with my responsive website, I am facing two issues. Firstly, the banner is wrapping below the logo, creating an undesirable layout. I aspire for a design similar to the St. Louis Zoo website, where the logo and banner image stay aligned even on ...

htmlcssresponsive-designnavbanner

fetching indexeddb information using the equivalent of a "WHERE IN (a,b)" query

I've been working on transitioning from websql to indexeddb, but I'm struggling to recreate the SELECT query: "SELECT * FROM tableA WHERE cid ='"+cid+"' AND hid IN("+hid+",1) ORDER BY hid DESC LIMIT 1"; function getMyData(e) { var ...

javascriptselectindexeddb

Struggling to grasp the concept of nested scope within AngularJs

I found myself puzzled while reading an article on this particular website (pitfall #5): My query is: Does this situation resemble having two variables with the same name in plain JavaScript, where one is locally defined (e.g. within a nested function ...

javascriptangularjsscope

Is it possible to create a CSS checkbox without using an ID or "for" attribute

Is it possible to create a CSS checkbox with label without using id and for attributes? I have tried the following method, but it doesn't seem to work. I know that I can create a CSS checkbox with id and for attributes like this: <div class="chec ...

htmlcss

ways to manipulate href using JavaScript

Apologies for any grammatical errors in my English. With the use of jQuery, I am trying to achieve the functionality where pressing the arrow keys on the keyboard will redirect to a URL with the #g tag. Specifically, when the down arrow key is pressed, h ...

javascriptjquerykeyboardarrow-keyslocation-href

What is preventing me from adjusting the height of this DIV element?

I'm completely stumped by what's happening here. I've been trying to increase the height of a DIV element with an id of #titleStrip, but it just won't budge. It's beyond frustrating. I thought I knew my way around this kind of thin ...

htmlcss

Modify one individual css style / tag

Currently, I have a large React application that is utilizing Material UI 4.3.0. I attempted to remove the margin-top style of label + .MuiInput-formControl within a select Mui component. To achieve this, I used the 'overrides' tag in my App.js ...

javascriptcssreactjsmaterial-ui

Implementing momentLocalizer with moment.js in react-big-calendar alongside fullcalendar.js

I'm currently working with react-big-calendar and I require assistance in setting up localization as per the example provided on GitHub. import BigCalendar from 'react-big-calendar'; import moment from 'moment'; BigCalendar.setLo ...

javascriptreactjsmomentjs

What flaws are present in this authentication system?

As a developer with a passion for coding, rather than a security expert, I came across The definitive guide to form-based website authentication, which highlighted the importance of SSL or complex algorithms in safeguarding login data from eavesdropping. D ...

javascriptauthenticationclient-side

Unable to retrieve the chosen option from the datalist

I am encountering an issue with a datalist where I can't seem to retrieve the value that is currently selected when a button is clicked. Despite following recommendations from various posts on Stack Overflow, my code still returns undefined. Interesti ...

javascriptjqueryhtmlreactjs

Make the div fill the entire width and height of its parent element

Here is the code I am working with: <div> <div class="inner"></div <img src="blabla" /> </div> My goal is to make the .inner div 100% width and 100% height of its parent div, which is dependent on the dimensions of th ...

htmlcss