What is the best way to disable a JavaScript code based on a specific screen width?

Question

What is the best way to disable a JavaScript code based on a specific screen width?

When I click on a specific link, it triggers an alert using jQuery.

Here is the HTML code for the link:

<a class="link" href="www.example.com">link</a>

The JavaScript code attached to the link is as follows:

$(".link").click(function() {
    alert('clicked');
    return false;
});

In the CSS code snippet below, a condition is set for when the user's screen width is at least 980px:

@media (min-width: 980px)
{
  // When the link is clicked within this width range,
  // I want it to open www.example.com
}

How can I determine whether the client's device width is less than or greater than 980 pixels?

javascript jquery html css

Answer 1

Answer №1

Utilize the following code snippet: $(window).width()

$(".link").click(function() {
    if($(window).width() >= 980){  
       alert('clicked');
       return false;
     }
});

Answer 2

Utilize the following code snippet: $(window).width()

$(".link").click(function() {
    if($(window).width() >= 980){  
       alert('clicked');
       return false;
     }
});

Answer 3

Answer №2

I'm not exactly sure what you're looking to achieve, but if I understand correctly, you want a piece of JavaScript code to execute based on the client's screen width crossing a specific pixel threshold.

If this is indeed what you're aiming for, you'll need to include a check in the click event callback function to determine whether the client's screen size exceeds or falls below 980 pixels.

$(".link").click(function () {
  if (window.innerWidth > 980) {
    alert('Clicked');
    return false;
  }
});

Answer 4

I'm not exactly sure what you're looking to achieve, but if I understand correctly, you want a piece of JavaScript code to execute based on the client's screen width crossing a specific pixel threshold.

If this is indeed what you're aiming for, you'll need to include a check in the click event callback function to determine whether the client's screen size exceeds or falls below 980 pixels.

$(".link").click(function () {
  if (window.innerWidth > 980) {
    alert('Clicked');
    return false;
  }
});

Answer 5

Answer №3

Disabling JavaScript through CSS is not possible; instead, you would need to utilize JavaScript to determine the width by using $(window).width()

$(".link").click(function() {
    if ($(window).width() >= 980) {
        alert('clicked');
        return false;
    }
});

Answer 6

Disabling JavaScript through CSS is not possible; instead, you would need to utilize JavaScript to determine the width by using $(window).width()

$(".link").click(function() {
    if ($(window).width() >= 980) {
        alert('clicked');
        return false;
    }
});

Answer 7

Answer №4

Personally, I find match media to be quite useful:

var mq = window.matchMedia('@media (min-width: 980px)');
var link = document.querySelector('.link');
link.href = mq.matches ? "http://www.example.com" : "";

UPDATE:

Just a heads up, as pointed out by @Oscar: If you're concerned about the combined ~16% market share of IE8/IE9 as of October 2015, it may be best to go with the jquery method outlined in the selected answer.

Answer 8

Personally, I find match media to be quite useful:

var mq = window.matchMedia('@media (min-width: 980px)');
var link = document.querySelector('.link');
link.href = mq.matches ? "http://www.example.com" : "";

UPDATE:

Just a heads up, as pointed out by @Oscar: If you're concerned about the combined ~16% market share of IE8/IE9 as of October 2015, it may be best to go with the jquery method outlined in the selected answer.

What is the best way to disable a JavaScript code based on a specific screen width?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Avoiding the display of file picker dialog - Selenium GeckoDriver

Instead of returning an object, the underscore groupBy function now returns an array

html transparent div element

The content of xmlhttp.responseText is not being displayed in the innerHTML

Why is the code able to execute following the setState hook without any listener declared in the useEffect hook?

Creating a custom JavaScript function to manipulate arrays

flex child moves outside parent when available space shifts

Establishing MQTT Connection in Ionic 3

Getting an image from a NodeJS backend to a React frontend

What is the limitation of including a string constant with "</script>" inside a <script> block?

Webpack has issues with loading HTML files

Implementing GRIDFS for mp3 storage in a meteor application

Receiving "Illegal Invocation" error when attempting to submit form using ajax

Validation of check boxes in AngularJS group

Obtain data attributes using JQuery's click event handler

Linking URLs in an Android TextView with the <a href> tag

Naming variables in JavaScript with parentheses()

Automate your workflow with Apps Script: Save time by appending a row and seamlessly including additional details to the

What are some ways to access Angular's form array within HTML code?

Incorrect input