What is the best way to eliminate the data-toggle="modal" function for a particular window size?

As a beginner in JavaScript, I am looking for a way to remove the data-toggle attribute when the screen size is less than 760px and have the href attribute work. Unfortunately, I am unsure of how to achieve this. Below is the code snippet that I am working with:

<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
    <div class="portfolio-wrapper">                     
        <a data-toggle="modal" data-target="#myModal1" href="http://www.example.com/main/includes/onepager/business_service/example/index.php" class="b-link-stripe b-animate-go thickbox">
            <img class="p-img" src="http://www.example.com/theme/mobile-page-files/web/images/small-portfolio/example.JPG" />
            <div class="b-wrapper">
                <h2 class="b-animate b-from-left b-delay03">
                    <img src="http://www.example.com/theme/mobile-page-files/web/images/link-ico.png" alt=""/>
                </h2>
            </div>
        </a>
    </div>
    <div class="port-info">
        <h4>
            <a href="http://www.example.com/main/includes/onepager/business_service/example/index.php"> Example</a>
        </h4>
    </div>
</div
javascripthtmlcss

Answer №1

Before closing the </body> tag on your webpage, insert this code snippet at the bottom: 

if(window.innerWidth > 1024){
    document.getElementsByTagName("a")[1].setAttribute("data-toggle", "modal");
}

Answer №2

No one has considered the scenario where the screen width exceeds 760 pixels again. In such cases, the data attribute needs to be re-added.

window.addEventListener("resize", resizeHandler);

function resizeHandler() {
  var winWidth  = window.innerWidth,
      threshold = 760,
      els       = document.getElementsByClassName('thickbox');

  [].forEach.call(els, function (el) {   
    if (winWidth < threshold) {
      el.removeAttribute("data-toggle");
    } else {
      el.setAttribute("data-toggle", "bar");
    }  
  });
}

Take a look at this small demonstration to observe it in action. http://codepen.io/antibland/pen/reZNNO

Answer №3

Utilizing jQuery can help with this task. Remember to modify the selector ELEMENTID

if($(window).width() < 760){
     $('#ELEMENTID').find('a').removeAttr('data-toggle');
}

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

Improving the mobile responsiveness of certain sections of my website and optimizing for various screen resolutions

I am currently facing some challenges with a resume website I am developing. While most elements resize well for mobile using bootstrap, there are specific sections of code that need optimization for better compatibility with different screen sizes. Altho ...

jqueryhtmlcssbootstrap-4responsive-design

Tap on the div nested within another div

Here is the scenario I am dealing with: <div id="main"> <div id="a"></div> <div id="b"></div> </div> On my website, element B is positioned below element A. How can I attach a click event only to those A elements t ...

javascriptjquery

Inspect each page to confirm that the user has verified that they are of legal age

I'm currently developing a website (tobacco-related) that imposes an age validation requirement on all visitors before granting access to the site. I've implemented a form for age verification, but I'm stuck at how to store a cookie upon pas ...

javascriptvalidation

The harmonious combination of Opera and XMLHttpRequest creates a

Coming from Russia, please excuse any mistakes in my English. I am trying to dynamically load the main page of my website using JavaScript, and I have written this script: <script type="text/javascript"> function httpGet(theUrl) { var xmlHt ...

javascriptajaxxmlhttprequestopera

The parameter 'data' is assumed to have an 'any' type in React hooks, according to ts(7006)

It's perplexing to me how the 7006 error underlines "data," while in the test environment on the main page of React Hooks (https://react-hook-form.com/get-started#Quickstart), everything works perfectly. I'm wondering if I need to include anothe ...

javascriptreactjstypescriptreact-hooks

What could be causing the getTotals() method to malfunction?

I have been working on a finance app that is designed to update the "income", "expenses", and "balance" tables at the top each time a new item is added by the user. However, the current code seems to be failing in updating these values correctly based on u ...

javascripttypescript

It is recommended that the page does not scroll while utilizing both the sidenav and toolbar simultaneously in Angular Material

Using md-sidenav without md-toolbar works fine. The sidenav opens correctly, as shown in the image below. https://i.sstatic.net/PjsPp.png However, when a toolbar is added before the sidenav or its containing section, opening the sidenav causes the page t ...

cssangularjsmaterial-designangular-material

Exploring the font variables in the asset pipeline of Rails 7

Creating a habit of defining a set of root variables is crucial for maintaining consistency throughout an application. :root { --main-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; --kbd-font-family: Consolas, "Libe ...

cssruby-on-railsasset-pipeline

Implementing ajax functionality for a form component in vuejs

I am currently working with a Vue.js component that serves as a form with a single field for an email input. The default value of this field, "email", is provided to the component by the parent as a prop. Upon form submission, I need to trigger an event to ...

javascriptajaxformsvue.jsvuejs2

Is it possible for a mobile device to play .ogg videos?

Currently, I am setting up a server to stream videos using HTML. So far, I have tested playing both .mp4 and .ogg video formats on my computer successfully. However, when I attempted to play the same videos on a mobile device, only the .mp4 file showed u ...

htmlnode.jsvideo-streamingogg

problems encountered while trying to increment ng-click function in Angular JS and Ionic

I'm currently working on developing a quiz using Angular JS and Ionic Framework. However, I've encountered an issue: The "Continue" button is not functioning as expected when clicked (using ng-click) to move to the next question. &l ...

javascriptangularjsionic-framework

Prevent any YouTube iframe from playing when a different one is activated

I have a unique challenge where I need to embed 10 YouTube iframes in my webpage, each with its own custom play/pause buttons. While I started with this solution from http://jsfiddle.net/buuuue/dzroqgj0/, I am struggling to modify the code to ensure that w ...

javascriptiframeyoutubeyoutube-apiyoutube-iframe-api

Instructions for showcasing an image taken using cordova-plugin-media-capture

I recently implemented this specific plugin in my project which allows me to easily capture images using my Android device. However, I'm encountering some difficulties when trying to display the images that are captured within my app. After attemptin ...

javascriptcordovaandroid-cameracordova-pluginsfilereader

Is there a way to adjust the text color based on whether a value is negative?

I am currently developing a web application that performs addition operations on integers. Within this application, I have implemented two functions named num1() and num2() to retrieve the integers provided by the user for calculation. My objective is to m ...

javascripthtmlcss

Is it possible to extract pages from a PDF document and showcase them?

I have a vision to create a seamless magazine reading experience on a platform, and I want the process of uploading magazines to be quick and smooth. My idea is to utilize PDF files for this purpose. I am wondering if it's achievable to develop a mod ...

javascriptjqueryhtmlpdfuser-interface

How can I call a Vue component method from a different application?

I'm facing an issue where my code works perfectly in pure html/javascript, but not when using vuejs. The function causing the problem is called myMethod(). While debugging in the javascript console, I can access it using myMethod("toto"). However, in ...

javascriptvue.jsvuejs2vue-component

Monitoring variables in AngularJS services

Hey, I'm having some trouble with this issue. I've searched everywhere for a solution, but couldn't find one, despite there being similar questions out there. Basically, I have a class and I only need one instance of it, so I created a serv ...

javascriptangularjsangularjs-service

Unable to cancel the setTimeout function by using clearTimeout as the value appears to be null for unknown reasons

Within my react-native application, I am attempting to halt the execution of a setTimeout function by utilizing clearTimeout. The instance of setTimeout is stored in a global variable. let timeoutId: any = null; const doOtp = () => { if(can ...

javascripttypescriptsettimeoutcleartimeout

unable to navigate to next or previous page in react-bootstrap-table2-paginator

I successfully implemented a table with pagination using react-bootstrap-table2-paginator. On each page number click, it calls an API to fetch the table data. However, I encountered issues with the next page, previous page, and last page buttons not workin ...

javascriptreactjspaginationreact-bootstrap-table

Error message in Angular js: Unable to load file using XMLHttpRequest

Encountering an error while debugging an Angular JS application in the WebStorm IDE. The error message states: "XMLHttpRequest cannot load file:///C:/Users/../list.html. Cross origin requests are only supported for HTTP." Provided Javascript code : var a ...

javascripthtmlangularjs