Switching the custom cursor depending on the operating system

I am faced with a challenge of customizing the cursor for my application. The issue is that cursors appear differently in OSX compared to Windows; black in OSX and white in Windows.

I am considering creating two different cursors, one in white and one in black. How can I dynamically switch between these cursors based on the user's operating system using CSS?

.custom-cursor-windows {
    cursor: url('windows-cursor.svg') 0 0, auto;
}

.custom-cursor-mac {
    cursor: url('mac-cursor.svg') 0 0, auto;
}
javascriptcss

Answer №1

For this particular situation, the involvement of javascript is absolutely necessary. By utilizing the User Agent string within a javascript if statement, you can decide on which CSS class to display or apply using javascript.

Answer №2

It seems unlikely that you can achieve this using only CSS, but one workaround is to identify the operating system through JavaScript.

Take a look at this simple code snippet:

if (navigator.appVersion.indexOf("Win")!=-1){
    //apply Windows cursor style
}
if (navigator.appVersion.indexOf("Mac")!=-1) {
    //apply Mac cursor style
}

Answer №3

Detecting the operating system (OS) without using JavaScript is impossible. One common method is to use the window.navigator.platform property to differentiate between Windows and Mac systems. By performing a simple string search using IndexOf for "Mac," you can determine if the user is on a Mac or Windows system, while defaulting to Windows for other systems like Linux.

Answer №4

Check out this JS Fiddle: https://jsfiddle.net/v08gg9ep/4/

$( document ).ready(function() {
    var operatingSystem = getOS();
    if(operatingSystem == "Windows"){
        alert("White Cursor");
      $("html").css("cursor: url('windows-cursor.svg') 0 0, auto");
    }else if(operatingSystem == "iOS" || operatingSystem == "Mac OS"){
        alert("White Cursor");
      $("html").css("cursor: url('mac-cursor.svg') 0 0, auto");
    }
});

function getOS() {
  var userAgent = window.navigator.userAgent,
      platform = window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }
  return os;
}

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

Having trouble using the elementIsNotVisible method in Selenium WebDriver with JavaScript

I'm struggling to detect the absence of an element using the elementIsNotVisible condition in the Selenium JavaScript Webdriver. This condition requires a webdriver.WebElement object, which is problematic because the element may have already disappear ...

javascriptseleniumselenium-webdriverwebdriverpromise

Responsive design is key in ensuring that Bootstrap columns adjust accordingly

I am attempting to create a responsive block in the center of my webpage with the help of Bootstrap. However, I am having trouble getting the columns to respond correctly to my bootstrap setup. Can anyone point out what I might be doing wrong? <lin ...

htmlcssbootstrap-4

Issue with Bootstrap navbar failing to collapse on iOS devices

I have been working on a website using Bootstrap and everything seems to be running smoothly. However, I've encountered an issue where the navbar doesn't collapse when viewing the site on my iPhone. It works perfectly fine when viewed on my Windo ...

htmlioscssiphonetwitter-bootstrap

The onmouseout event seems to be malfunctioning, whereas onmouseover is functioning properly

Forgive me if you're viewing this post twice, I believe I could have clarified things better. Essentially, I am designing a page that contains numerous elements. When the mouse hovers over an element, a "status" box should overlay on top of it. This ...

javascripthtmljqueryonmouseoveronmouseout

Rotate image in Vue3 using @click

I have a dashboard with a refresh button that I want to rotate 360 degrees every time it is clicked. How can I achieve this rotation effect on the image with each click of the refresh button? Below is the code snippet I have been working on, but it only r ...

javascriptcssvue.jsvuejs2

I am currently having issues with the mustache syntax in vuejs, as it is not functioning properly

Having an issue with Vue.js where the mustache syntax isn't working properly. <!DOCTYPE html> <html> <head> <title>index</title> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cg ...

javascriptvue.js

Tips for utilizing a nested Map in a React component using the provided dataset

There is data being retrieved from an API [ { title: "Lesson 1", topics: [ "Topic 1", "Topic 2", "Topic 3" ] }, { title: "Lesson 2", topics: ...

javascriptreactjsarraylistmaterial-ui

Flex layout clips shadow when overflow-hidden or overflow-auto is applied

Exploring the given markup with Bootstrap classes: The layout showcases two cards aligned left and right using flex-row. These cards are adjusted to fit the available vertical space using flex-fill. Although the cards occupy the vertical space, their cont ...

cssflexboxbootstrap-5

Is it possible to utilize AJAX requests within Web Workers?

Ensuring that the latest changes made by the user on my web application are saved to the database is crucial. To achieve this, I have a function that sends the data to the database when the user closes the page: window.onbeforeunload = sendData; However, ...

javascriptajax

Dynamic styling with jQuery input focus animation

Whenever I interact with the input field, I want my border colors to animate in and fade out smoothly. But I'm facing some challenges. Here is how I've set it up: HTML <input type="text" id="search-input" placeholder=&quo ...

jquerycss

Create a seamless transition between point X,Y and point X1,Y1 through animated movements

Is there a way to smoothly move an image (or element) from its current X, Y position to X1, Y1? If the difference between X and X1 is equal to the difference between Y and Y1, it's straightforward. But what if the X difference is 100px and the Y diff ...

javascriptimageanimationsmoothing

Conflicting directives are canceling each other out

I am facing an issue with my two directives. One directive is responsible for checking the file size, while the other ensures that the uploaded file format is valid. When both directives are assigned to an input=file element separately, they work fine. How ...

javascriptangularjs

Determine the upcoming Saturday's date by utilizing a stored procedure in Snowflake

Looking for assistance in retrieving the upcoming Saturday date based on a date field in a table using a Snowflake JavaScript stored procedure. Any suggestions would be greatly appreciated. Running the following query in the Snowflake console provides the ...

javascriptazurestored-proceduressnowflake-cloud-data-platformsnowflake-stage

Adjusting jQuery Button Width with input type of "button"

Currently, I am working with jQuery Mobile to develop a straightforward Golf Score Card App. To calculate the total at the end of a form submission, I've implemented the following code. <input id="total" type="text" name="total" value="" readonly= ...

jqueryhtmlcssinputsize

Unable to display PHP response in a div using AJAX - issue persisting

Hey there! I'm currently working on a project where I want the form submission to load a response into a div without refreshing the page. I've looked at various examples of ajax forms with PHP online, but haven't been able to solve my issue ...

javascriptphpjqueryhtmlajax

Turkish text is not appearing correctly on the UIWebview when embedded in HTML

One of the challenges I encountered in my iOS project involved programming a UIWebView to load content in both English and Turkish from a web service. To accomplish this, I formatted the HTML string with the necessary headers and saved it locally before pr ...

javascripthtmliosobjective-cuiwebview

Using pagination with tables in HTML: A beginner's guide

I attempted to implement a paging system within a table following the instructions in this article, but unfortunately, it doesn't seem to be functioning correctly. Expected Output: https://i.sstatic.net/4ODNf.png Current Output: https://i.sstatic. ...

javascripthtmlcsstwitter-bootstraphtml-table

Creating the correct JSON structureHere is how you can format JSON

I have a snippet of javascript code that I'm utilizing with casperjs to iterate through links and retrieve data in json format. Below is the code snippet: casper.each(links, function (self, link) { this.thenOpen(link, function () { // obtain w ...

javascriptjsoncasperjs

The jQuery keyup filter is functioning properly when the content is displayed in columns, but it is not working as expected when the

Encountering an issue where the boxes do not reset properly to a 2x4 layout after typing something into the input field (for example, "spore") and then deleting it. It seems to work when the boxes are placed into 4 columns, but when using float: left on #s ...

javascriptjqueryhtmlcss

Display the data labels for the spiderweb graph only when hovering over the line or corresponding legend

I'm currently working on creating a spiderweb chart using the Highcharts guide. One challenge I'm facing is that the data labels are currently enabled by default. I would like to hide the data on load and only display it when the user hovers over ...

javascriptjqueryhighcharts