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!

javascripthtmlcss

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";
}

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

Angular $resource encounters a 400 Bad Request error when attempting a PUT request, triggering the $resolve and $promise

My service is structured as follows (with variables removed): angular .module('app') .factory('Employee', function($resource) { return $resource("https://api.mongolab.com/api/1/databases/:dbName/collections/:collectionN ...

javascriptjsonangularjsresourcesbad-request

Use the double data type in MySQL to handle null values when blank form fields are submitted

Currently, I am facing an issue with a form that I have created to update a mysql database using PHP and HTML. In my MySQL database, I have set the data type as double (3,1). The problem arises when I submit data to the database and leave some form input f ...

htmlmysqlformsnulldouble

Exploring Best Practices for Coding in node.js

Method 1: Constructor and Prototype Objects function Database(url) { this.url = url; } Database.prototype.info = function (callback) { http.get(this.url + '/info', callback); }; Method 2: Closures Approach function Database(url) { ...

javascriptperformancenode.jssyntaxcoding-style

I'm encountering a type error stating that children are not defined when attempting to establish parent-child relationships from a flat array. What

Trying to establish a parent-child relationship between modules based on their IDs. Ran into an issue with the function I used, as it returned an error stating that children were not defined. const data = [ { module_id: "96ac027b-b5ce-4326-b5db- ...

javascriptnode.jsreactjsarraysjson

Increasing the ID of a select input using Jquery

Is there a way to modify the identification of my select field? This select option is dynamically created using PHP. The select input can be accessed through var indirectSelect Despite its simplicity, I am facing difficulty in changing it. I attempted th ...

javascriptjquery

How to link AngularJS controller from a different module in routing

My current project involves creating a complex app with a structured design: Each module is organized in its own folder structure, including controllers, directives, and more. Within each folder, there is an index.js file along with other files for separ ...

javascriptangularjsnode.jsroutes

I am receiving an undefined value when using document.getElementsByClassName

<canvas id="can" height="500px" width="1200px"></canvas> <div class="name"> <h1>LEONARDO</h1> </div> <script> var name=['WATSON','LEONARDO',"SMITH","EMILY"] var counter=0 var dat ...

javascript

Create a JavaScript button that redirects to a different page within a React application

I am creating a div element using a for-loop and I want to link each div to the "/campaign" page with its respective id. When a div is clicked, I want it to navigate to the "/campaign/id" page and pass the id to the Campaign component. class Home extends ...

javascripthtmlreactjsreact-router

The dynamic JavaScript in Bootstrap 4 seems to be malfunctioning, despite working perfectly in Bootstrap 3

I am currently implementing a dynamic modal feature using the code snippet below: // Show Ajax modal with content $(document).on('click', '[data-modal]', function (event) { event.preventDefault(); $.get($(this).data('moda ...

javascriptjqueryajaxtwitter-bootstrap

The search functionality in react-native-google-places-autocomplete seems to be experiencing issues as it is not displaying

I am currently working on a React Native component that incorporates a Google search feature for locations. To achieve this, I have utilized the Google Places API in hopes of enabling autocomplete functionality when users begin typing a city or address. I ...

javascriptreactjsreact-nativegoogle-cloud-platform

Route creation unsuccessful while attempting to both download a file and send a response message, resulting in the error "Headers cannot be set after they have been sent to the client."

I'm currently working on setting up a route that will allow users to download a file and receive a response message in the HTML. I attempted to use the download function from express JS, but encountered some issues. Here is the code I am using: route ...

javascriptnode.jsexpressroutes

Determine the date and time based on the number of days passed

Hey there! I have a dataset structured like this: let events = { "KOTH Airship": ["EVERY 19:00"], "KOTH Castle": ["EVERY 20:00"], Totem: ["EVERY 17:00", "EVERY 23:00"], Jum ...

javascripttypescriptdatetimedays

Encountering a problem while trying to launch the development server for a React application using the npm-start

I followed the steps to create a react application using npx create-react-app myapp, but when I use npm start, it fails to start a developer server. Even after trying to reinstall the node_modules, the issue persists. I am using the latest versions of Reac ...

javascriptreactjsnpmnpm-start

How to implement dynamic color for classes in a v-for loop using Vue.js?

Struggling with a seemingly simple issue that may be easy for VueJS pros. In my data, I have JSON objects with an attribute that can take values of 10, 20, 30, or 40. Depending on this value, I want to change the color of a v-btn. I've attempted mul ...

javascriptvue.jsclassvuejs2colors

Why does the event fail to trigger in an Angular 5 Kendo grid when the last character is deleted from the input box?

I have implemented a multi-filter in my Kendo Grid for an Angular 5 application. However, I am facing an issue where the event is not firing when the last character is deleted from the input box. How can I resolve this issue? For example, if I type ' ...

javascriptangularkendo-uikendo-gridangular5

Waiting for a response from an API with the help of nodejs

I'm new to exploring Node.js and I'm interested in making API calls where the result is awaited before proceeding with any further actions. // defining endpoint function function getListMarket() { var deferred = Q.defer(); deferred.resolve(Q ...

javascriptnode.jsq

Even in the face of errors, Selenium with Node.js continues to run seamlessly. The challenge arises specifically with the 107.xx version of the Chrome browser and Chrome driver

Currently, I am employed in a project involving NODE JS (javascript) with selenium webdriver. Package.json- “chai”: “^4.3.6”, “chromedriver”: “^107.0.3”, “geckodriver”: “^3.2.0”, “mocha”: “^10.0.0”, “mochawesome”: “^7. ...

javascriptnode.jsseleniumselenium-webdriverselenium-chromedriver

Arrange containers into a tower?

Currently, I am exploring the concept of stacking boxes. While I have a solid grasp on how to stack them vertically from top to bottom, I find myself puzzled about how to stack them horizontally. Check out my vertical stacking method here See how I a ...

htmlcss

Expanding the capabilities of search and replace in Javascript is imperative for enhancing its

I have developed a search and replace function. How can I enhance it by adding a comment or alert to describe the pattern and incorporating a functional input box? Any suggestions are welcome! <html> <head> <title> Search & Replace ...

javascriptregex

Unable to resize react-split-pane dimensions

I recently integrated the react-split-pane plugin into my project, but I am encountering some issues with its functionality. Even though I have tested react-split-pane versions 0.1.68, 0.1.66, and 0.1.64, none of them seem to work as expected in my applic ...

javascriptreactjs