Disable the javascript link on small devices

Question

Disable the javascript link on small devices

I currently have a javascript link (Trustwave) on my desktop website theme that I need to deactivate when viewed on mobile devices:

Located in footer.tpl:

<div style="position:absolute; margin-left:100px; margin-top:50px">  
<script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?style=invert"></script>

I have successfully removed a clickable image link on mobile screens before (Remove image link in mobile screen):

In footer.tpl:

<div class="column">
<a href="http://mywebsite.com/delivery" id="test" class="hide"></a>

In stylesheet.tpl:

@media all and (max-width: 480px) {
    .hide {
      display: none;
    }
}

#test {
  display: block;
  background-image: url('../image/myimage.png');
  background-repeat: no-repeat;
  position: absolute;
  margin-top: 10px;
  margin-left: 20px; 
  width: 75px;
  height: 75px;
}

However, I am unsure how to modify the javascript link to prevent it from appearing on mobile screens. Any assistance is greatly appreciated!

javascript html css

Answer 1

Answer №1

To effectively utilize media queries, consider placing the query at the end to avoid confusion caused by conflicting contexts.

Here's a simpler approach:

@media all and (max-width: 1500px) {
    .hide {
        display: block;
    }
}

@media all and (max-width: 480px) {
    .hide {
        display: none;
    }
}

Alternatively,

You can use window.innerwidth() to determine viewport width and store it in a variable like 'x', then do this:

var m = document.getElementById("column");
if (x > 800) {
    m.style.display='block';
} else {
    m.style.display="none";
}

Answer 2

To effectively utilize media queries, consider placing the query at the end to avoid confusion caused by conflicting contexts.

Here's a simpler approach:

@media all and (max-width: 1500px) {
    .hide {
        display: block;
    }
}

@media all and (max-width: 480px) {
    .hide {
        display: none;
    }
}

Alternatively,

You can use window.innerwidth() to determine viewport width and store it in a variable like 'x', then do this:

var m = document.getElementById("column");
if (x > 800) {
    m.style.display='block';
} else {
    m.style.display="none";
}

Disable the javascript link on small devices

Answer №1

Similar questions

Utilizing a material-ui button within a React application as the trigger for a Popup using MuiThemeProvider

Having trouble with the JavaScript DOM rewrite for aligning text?

Remove an item from a complex JSON structure based on the specified name. The function will then return the

Ways to verify if information is being added to a JSON file or not

Adding a context menu to a Leaflet map

Change the selection so that only the initial one appears in gray

Guide to utilizing a shared route function across various routes in express.js

What is the best way to create a flexible grid that automatically adjusts to either two columns or one column depending on the width of the

Filtering JSON objects in Vue when the API is only returning a limited number of items

Achieve a flat text indentation similar to an ordered list using CSS

Guide on integrating a custom language parser and syntax validation into Monaco editor

What is the appropriate way to incorporate a dash into an object key when working with JavaScript?

Is there a way to verify the presence of data returned by an API?

Ramda represents a distinct alternative to traditional vanilla JavaScript

List of Nodes with five links

Please anticipate the completion of data loading

Creating dynamic select boxes in Django Admin using jQuery

The styling of MUI components adapts when the Navigate component in React Router is initialized

Iterating through a JavaScript object

Select all elements using jQuery that have an id attribute and belong to a specific class