jQuery code tailored specifically for desktop use

Question

jQuery code tailored specifically for desktop use

Hello, I could use some assistance with a jquery script. I have been able to accomplish what I need using a jquery script, but I would like it to only work on desktops and be disabled on tablets and mobile devices.

The script I am currently using is as follows:

jQuery(document).ready(function($) {
  var max = 0;
  $(".sameheight .x-column").each(function(index, el) {
    if( $(this).height() > max ){
      max = $(this).height();
    }
  });
  $(".sameheight .x-column").css('height', max);
});

If anyone could provide some guidance, that would be greatly appreciated.

Thank you!

javascript jquery css responsive

Answer 1

Answer №1

To ensure that the body width is greater than 1024px before executing the code, you can use the following approach.

See the example provided below.

var bodyWidth = $("body").width();
console.log(bodyWidth);

if (bodyWidth > 1024) {
alert("Width is over 1024px;")
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

</body>

Answer 2

To ensure that the body width is greater than 1024px before executing the code, you can use the following approach.

See the example provided below.

var bodyWidth = $("body").width();
console.log(bodyWidth);

if (bodyWidth > 1024) {
alert("Width is over 1024px;")
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

</body>

Answer 3

Answer №2

If my interpretation is correct, please give this a try:

Important note: Make sure to test the code in fullscreen mode;

function adjustColumnSizeOnDesktop() {
  var width = $("body").width();
  if (width > 1024) {
    var max = 0;
    $(".sameheight .x-column").each(function(index, el) {
      if ($(this).height() > max) {
        max = $(this).height();
      }
    });
    $(".sameheight .x-column").css('height', max);
  }
};
$(window).on("load resize", function(e) {
  adjustColumnSizeOnDesktop()
});

.x-column {
  background: #EEE;
  width: 20%;
  float: left;
  margin: 5%;
  padding :10px;
  text-align: justify;
  border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sameheight">
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to </div>
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </div>
</div>

Answer 4

If my interpretation is correct, please give this a try:

Important note: Make sure to test the code in fullscreen mode;

function adjustColumnSizeOnDesktop() {
  var width = $("body").width();
  if (width > 1024) {
    var max = 0;
    $(".sameheight .x-column").each(function(index, el) {
      if ($(this).height() > max) {
        max = $(this).height();
      }
    });
    $(".sameheight .x-column").css('height', max);
  }
};
$(window).on("load resize", function(e) {
  adjustColumnSizeOnDesktop()
});

.x-column {
  background: #EEE;
  width: 20%;
  float: left;
  margin: 5%;
  padding :10px;
  text-align: justify;
  border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sameheight">
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to </div>
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div class="x-column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </div>
</div>

jQuery code tailored specifically for desktop use

Answer №1

Answer №2

Similar questions

Employ the power of AJAX to selectively display or conceal a specific group of images

Utilizing an object as a prop within React-router's Link functionality

Detecting when an image, passed through props, finishes loading and updating the state in React - here's how!

The attempt to log in using AJAX and PHP was unsuccessful

Addressing the "Your tests are loading..." Problem in Cypress Following Redirect from PayPal Login

Is there a way to deliver information to a specific element on a client's HTML page?

Identifying overflow of text or elements in JavaScript during execution

Guide on launching Selenium within an already open browser using manual settings

Using a JavaScript variable in conjunction with an AJAX-PHP variable

I am trying to center align this image, but for some reason, it's not cooperating

Step-by-step guide on applying a universal CSS class to every component within an application

Interacting between frames with jQuery

Determining User Consent: A Straightforward Guide to Identifying Previously Accepted Cookie Consent

Is there a way to remove the "next" button from the last page in a table?

Bidirectional communication between two AngularJS scopes or controllers utilizing a service

jQuery Autocomplete API Issue: Undefined

Leveraging Javascript variables in console.log for referencing purposes

What is preventing the text of the elements from being updated?

The x-axis title in Apexcharts is consistently misaligned

Utilizing quotation marks in ASP MVC4 when accessing Model values