Ways to eliminate a css class with jquery based on a specific screen dimension

There is a div element that includes a specific class. My goal is to remove this class when the window is resized to fit a mobile view-port.

<div class="box"></div>

Answer №1

To achieve this effect, you can utilize media queries for a straightforward solution. However, if you prefer to implement it using jQuery, you can employ the toggleClass method as demonstrated below:

$(window).on('resize',function(){
  var newSize = $(window).width();//retrieve updated width upon window resize
  $('.box').toggleClass('box', newSize > 1067);//remove class only when size is greater than 1067
}).resize();//trigger resize event on page load

Answer №2

Give this a shot:

$(window).resize(function() {
  if ($(window).width() < 480) {
          $('#yourElementId').removeClass('specialBox');
     }
  else{}
});

Answer №3

To achieve this effect, utilize CSS3 media queries.

Here is the CSS3 Code:

/* Styles for iPhone 4 and 4S */

/* Supports both Portrait and Landscape */
@media only screen 
 and (min-device-width: 320px) 
 and (max-device-width: 480px)
 and (-webkit-min-device-pixel-ratio: 2) {
     .box {
        // Reset all existing CSS properties assigned to the box class.
     }
 }

CSS3 provides the sole solution for this task as it lacks the capability to modify the DOM or alter its structure.

Answer №4

Kindly review the code snippet provided below to get a better understanding of the functionality. You can also refer to my JSFIDDLE for further reference.

HTML:

<div class="box">dd</div>

JQ:

$(window).on('resize', function () {
    var screen = $(window);//Window instance...
    var mobileWidth = 400;//Mobile width...

    //If mobile view then remove div class, set div class other than mobile view...
    screen.width() < mobileWidth ? $('div').removeClass('box') : $('div').addClass('box');

    //Set window current width for temporary check...
    $('div').text($(window).width());//Comment this if you don't want it.
}).trigger('resize');

I hope this explanation provides clarity on the functionality. Feel free to reach out for any further assistance.

Answer №5

Utilize the following code snippet for style enhancement:

@media screen and (min-width: 480px) {
    .box {
        display:none;
    }
}

Alternatively, you can also try:

@media screen and (min-width: 480px) {
    .box {
        visibility: hidden;
    }
}

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

Tips for expanding a text input field vertically, not horizontally like in Facebook, while typing or by holding down the Shift key and pressing Enter

I've come across numerous plugins that enable vertical resizing of a textarea and others that allow horizontal resizing of an input field. However, I have yet to find one that enables vertical resizing of an input field similar to Facebook's comm ...

Issue encountered with Tailwind Color Classes not functioning correctly when triggered by a button click within NextJS and React Vite framework

Recently, I've developed a component showcasing the "Text Gradient" effect in Tailwind + React. The component comprises of 4 select dropdowns and a "randomize" button. Upon clicking the button or selecting an option from the dropdowns, the changes are ...

aligning JSON information with JavaScript object

I am currently in the process of setting up a sample dataset in JSON format for a JavaScript tutorial that I'm going through. Here's how the data object looks in JavaScript: app.Book = Backbone.Model.extend({ defaults: { coverImage: ...

How can I retrieve text that is enclosed within 2 specific tags and then format the output according to my preference?

Is it possible to extract text between specific tags and format the output as desired? Are there any tools or scripts available for this task? For instance: [b]1.[/b] [artist]Norman Bass[/artist] – How U Like Bass? (Warp Brothers Club Mix) [i](3:26 ...

PHP code that removes a table row from a database

Can anyone help me troubleshoot my code? My PHP seems to be functioning, but for some reason the delete button is not working! if(isset($_POST['delete'])) { $ID = $_POST['value']; $delete = "DELETE FROM tbl_document WHERE ID = ...

increasing the size of the drop-down menu width

I have been struggling to adjust the width of my dropdown list box on my page. Despite my efforts, I cannot seem to make it bigger. Here is the code snippet causing me trouble: <div class="form-group row"> <div class="col-sm-1&quo ...

I encountered a problem in Javascript where I was unable to get the video.getCurrentTime() function to display the current time of

While everything else in my code is running smoothly with setInterval, there seems to be an issue with video.getCurrentTime() not displaying in the div id = "test" when the video is playing. I've been trying to figure out why this is happening. Here&a ...

Utilizing JSON for HTML conversion in Codeigniter

public function getCrew(){ $search = $this->input->post('name'); if($this->input->post('ajax') && (!empty($search))){ $result = $this->model->getNames($search); foreach($result as $r){ ...

Showcase a picture within a row of a table using Ajax in an MVC framework

Getting straight to the point, I have a similar code snippet in my Controller: return base.File(getSomeImageBitmap, "image/jpeg"); This code successfully displays the image in a new window using @Html.ActionLink. However, I want the image to be directly ...

Ways to eliminate the default button styling

I've encountered an issue with the CSS for a button that I created, as it is not displaying as expected. https://i.sstatic.net/qHLZX.png Below is my HTML code snippet: .button{ /* center the button */ margin: 0; position: absolute; top: ...

What is the process for running a Template.HTML file within an Index.html file?

After downloading the template from this link, I made changes to the template.html file located in the src folder. Now I'm trying to figure out how to run the template.html file within index.html so that I can deploy it successfully. Simply copying th ...

Tips for avoiding flickering in a background image when it is being changed

Utilizing JavaScript, I am setting a repeated background image from a canvas to a div in the following way: var img_canvas = document.createElement('canvas'); img_canvas.width = 16; img_canvas.height = 16; img_canvas.getContext('2d' ...

Tips for uploading an image file from Django Admin to the HTML

If I have already used a for loop in my code, how should I write the image address if I don't want to use 'for'? Can I directly write something like '/img/1.jpg'? Here is the directory where my images are stored: This is my Djang ...

When using VueJS to load an SVG file based on a variable within a for loop and utilizing v-html, the result returned is "[

I'm faced with a challenge of loading SVGs saved in separate files based on the content within a loop. Upon page load, what I see is: Hey there, check out my code snippet below: <div v-for="(rec, index) in stats" :key="index" > <div ...

What is the purpose of Firebug adding <tbody> elements to <table> tags?

While analyzing the HTML source code, I noticed that the <tbody> tag is missing. However, when inspecting the code using Firebug in the HTML tab, the <tbody> tag suddenly appears. What could be the reason behind this discrepancy? ...

Words program with the header feature incorporated

Hello, I am currently working with Laravel to build an HTML page and have successfully converted it to MS Word. However, I am now trying to add a header inside. Can anyone help me achieve this? Here is a snippet of my code: <body> <a class= ...

What is the best way to link and store invoice formset with the main form foreign key in Django?

I am new to Django and need help. I am trying to save my invoice in a database, but the issue I'm facing is that I can't retrieve the foreign key from the main form when I try to save the formset. View.py def createInvoice(request):` if requ ...

What are the steps to decode a JSON response using jQuery?

Working on a fun little web app for my significant other and me to keep track of movies we want to watch together. I'm exploring using TheMovieDatabase.org's API (which only supports JSON) to simplify the process of adding movies to our list. The ...

The issue I am experiencing within my PHP code is that the redirection to the gratitude page is not functioning correctly when utilizing

As a newcomer to PHP, I have been struggling with an example code from a website that is not redirecting to the thank you page as expected. Moreover, the email functionality is not working properly either. The code was sourced from: Upon downloading the f ...

When downloading files in Chrome or Safari, the $ajax call is in a pending state, whereas in IE or Firefox,

Measuring the time it takes to download a 1MB file using AJAX calls. Below is the code snippet: var start = new Date(); $(document).ready(function() { $.ajax ({ url: 'https://www.example.com/dummyFile1024', crossDomain: t ...