Utilize javascript specifically for mobile or desktop platforms

Looking for help with implementing two scripts that are specifically designed for different screen widths. Unfortunately, these scripts can only be tested on the actual domain they are intended for.

Here are the provided scripts:

For mobile:

<script>
    (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/accordionchart/nfaccordion";
        t.parentNode.insertBefore(s, t);
    })();
    </script>

For desktop:

<script>
    (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/spottableextended/nfspotextended";
        t.parentNode.insertBefore(s, t);
    })();
    </script>

I attempted to implement the desktop script but it seems like something is not quite right.

Updated code based on feedback:

<script>
if ($(window).width() > 990) {
    (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); 
        s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jackhunt/widget/module/spottableextended/nfspotextended";
        t.parentNode.insertBefore(s, t);
    })();
} else {
    (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); 
        s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jackhunt/widget/module/accordionchart/nfaccordion";
        t.parentNode.insertBefore(s, t);
    })();
}
</script>

Answer №1

For those who opt out of utilizing jQuery, it is not feasible to employ a jQuery method. Instead, consider the subsequent condition:

if (window.innerWidth > 900) { // code for large screens

Answer №2

If you need to adapt your code based on screen size, consider using the following approach:

if ( $(window).width() > 990) {     
  // Add code for larger screens here
}
else {
  // Add code for smaller screens here
}

Note: If jQuery is not an option, you can also use:

window.innerWidth

Keep in mind that this method might be affected by window resizing!

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

Convert the JSON data received from a jQuery AJAX call into a visually appealing HTML table

Utilizing AJAX as the action, I have created a search form. In the success of the AJAX request, I am seeking a way to update a specific div without refreshing the entire page. Below is my form: <?php $properties = array('id' => &ap ...

Linking two directives in AngularJS to the scope models of a parent controller

In my form controller, I have 2 object models: model1 - {name:"foo"} and model2 - {name:"model2"}. To implement this, I created 2 directives with isolated scopes. One directive binds only to elements and uses model1, while the other binds only to attribute ...

Adding and adjusting the size of different DIV elements within a shared area

Looking to create a dynamic bar with the ability to add multiple child DIVs (similar to this: https://i.stack.imgur.com/tdWsq.jpg). Utilizing jQuery, jQuery UI, Bootstrap, and various plugins. The structure for the div (or span) system could be structured ...

What is the process for transforming raw text data into json format?

After receiving a response from the API mentioned below, I have been attempting to transform the data into a JSON array without much success. found=100 items[0].Detail.Address=192.168.1.4 items[0].Detail.Type=CGI items[0].Device= items[0].Level=0 items[0]. ...

Django view receiving incorrect AJAX data

I am currently learning Django and AJAX through a project I have been working on. In this project, I have implemented two buttons - one to add a marker and another to delete a marker. Below is the code snippet from views.py @csrf_exempt def save(request) ...

Regular expressions are effective tools, but they may not be as functional within an

Trying to validate URLs using a regex has been tricky. The regex I have works perfectly fine on regex101.com, but for some reason it keeps failing validation when implemented in my Angular field. I'm at a loss as to how to tweak it so that Angular wil ...

Graphql requests are failing to retrieve any data from the API

Currently delving into Next.js and GraphQL, I've come across the following code snippet. My goal is to retrieve the specified query: export async function getStaticProps() { const client = new ApolloClient({ uri: "https://data.objkt.com ...

Tips for converting mobile numbers into clickable links using JavaScript

I am working on an HTML page where data is being dynamically loaded, including some mobile numbers. I'm looking for a way to wrap all these mobile numbers in anchor tags using JavaScript. For example: <a href="tel:+91 9999999999">+91 9999999999 ...

Utilizing jQuery TableSorter Scroller: How to Achieve Scrolling with Keydown Focus

Apologies for any language barriers. I am currently utilizing tablesorter 2.0 along with scroller functionality. On my page, the table scrolling function works when I interact with the table directly. However, I want the scrolling to happen automatically ...

Unleashing a cascade of infinite promises

When it comes to handling an expensive computation within a function that is called frequently and needs to return quickly, my approach involves chaining promises together with this. This method seems to be effective in ensuring that computations occur seq ...

Is it possible to retrieve data using a POST request?

An organization has assigned me an Angular task. They have given the following guidelines, however, the API URL is not functioning: Develop a single-page Angular application using the provided API to fetch sports results and organize them in a displayed ta ...

Querying Firebase by the value of a child node

Here is how my structure looks like: 2017511 UcQefEaHJG6fteGsbsiaWjQ60d9Q62 value1: 50 value2: 1200 value3: "blabla" AcQefEaHJG6fteGsbsiaWjQ60d9Q62 value1: 55 value2: 2200 value3: "balabla" BcQefEaHJG6fteGsbsiaWjQ6 ...

The Bootstrap/Angular tab list items are generated dynamically based on the API response, leading to issues with the DOM

In one of my Angular templates, I have the following snippet. It consists of Bootstrap 3 tabs, but the tab list items (links) are generated dynamically after receiving a response from the API. <ul class="nav nav-tabs pull-right" role="tablist"> &l ...

Easily Implement Geocoding Functionality with jQuery

Can anyone provide guidance on creating a simple map using Jquery that plots only one location defined by longitude and latitude? The current code I have is set up to plot an array of locations, but I specifically need assistance with plotting a single poi ...

The route you are trying to access is currently unavailable

I've successfully developed a web app, and now I need to replicate the same HTML page with a slightly different controller. Despite my attempts to utilize ngRoute, it's not functioning as expected, and I'm uncertain if my route setup will yi ...

Is it possible in Angular.js to limit the visibility of a service to only one module or to a specific group of modules?

When working with Angular.js, the services declared on a module are typically accessible to all other modules. However, is there a way to restrict the visibility of a service to only one specific module or a selected group of modules? I have some service ...

Is it recommended to differentiate between users and usersList in node.js?

Exploring the world of Node.js and Express, I find myself in the process of constructing a server after completing most of the frontend work with React for a complex application. Within the app structure, I decided to segregate mock data into users and use ...

Notifying users with a jQuery or Javascript alert when they click the back

I am trying to create an alert or redirection for users when they press the back button, but so far, all the solutions I have attempted only trigger the alert after a form is submitted. Here is the current ineffective code I am using: $(function() { i ...

How can you enable scrolling on overflow in a Bootstrap column?

<body class='container-fluid mx-auto' style='width: 95%'> <div class='row'> <div id='video_container' class=' embed-responsive embed-responsive-16by9 card card-bod ...

"Encountered an issue with undefined path when uploading a file using multer through a

My RESTapi built using express includes multer for file uploads. Creating a new item or post functions correctly. However, I am facing an issue with the put route and the function responsible for saving and updating the post/gear. If the product image fie ...