Identifying the Operating System and Applying the Appropriate Stylesheet

Question

Identifying the Operating System and Applying the Appropriate Stylesheet

I am trying to detect the Windows operating system and assign a specific stylesheet for Windows only. Below is the code snippet I have been using:

$(function() {
        if (navigator.appVersion.indexOf("Win")!=-1)
            {
                $(document.body).append("<link rel='stylesheet' href='../assets/scss/ts-v2-window-style.css'>");
            }
        });

The code works as expected by excluding Mac users and applying the styles to Windows users, however, I am encountering an issue where it does not recognize $. Can anyone spot what might be wrong with this code and provide guidance on how to fix it?

Your help would be greatly appreciated. Thank you.

javascript jquery css

Answer 1

Answer №1

Ensure you load jQuery before your script to successfully use the $ symbol. The $ symbol is a part of the jQuery library, and it may not be available when your script runs. Include the following code in your HTML:

<script src="path_to_jquery_lib"></script>
<script>
//your script as in question
</script>

The order of these scripts is crucial. Additionally, $(function() {}) is a jQuery construct used to check for the DOM loaded event.

Answer 2

Ensure you load jQuery before your script to successfully use the $ symbol. The $ symbol is a part of the jQuery library, and it may not be available when your script runs. Include the following code in your HTML:

<script src="path_to_jquery_lib"></script>
<script>
//your script as in question
</script>

The order of these scripts is crucial. Additionally, $(function() {}) is a jQuery construct used to check for the DOM loaded event.

Identifying the Operating System and Applying the Appropriate Stylesheet

Answer №1

Similar questions

Obtain information from Firebase and display it in a list

Filtering Key Presses in Quasar: A Comprehensive Guide

Flipping json stringify safety

Any suggestions on how to secure my socket connection following user authentication in redux?

Enhancing the appearance of text in an article by using hover effects, while ensuring the link is attached to the

Float over a specific line in a drawing

Utilizing Local Storage in Vuex Store with Vue.js

Using Redux to Implement Conditional Headers in ReactJS

What steps can I take to avoid page displacement when implementing jQuery ajax tabs?

Using the Google Chrome console, execute a command on each page within a specified website

Create a filter system using a MERN stack that incorporates regex, a search box,

Dropzone.js: Creating a personalized file explorer to include files that have already been uploaded

Setting up webpack encore for async and await in a Symfony 4 and VueJs project

Streamlined approach to triggering ng-change on a single textbox

Change the hover effects on the desktop to be more mobile-friendly

Is using parameterized routes in Node.js a recommended practice or a mistake?

Overlay displayed on top of a single div element

Updating the content on your website is similar to how Facebook updates their news feed. By regularly

Text in Angular vanishes upon reopening

How to Safely Merge Data from Several Excel Files into a Single Worksheet in Google Sheets using ExcelJS without Overwriting Existing Data