The iPad seems to be having trouble with the character limit feature

I implemented the script below to restrict character count based on window size, and it works perfectly on desktop web. However, when viewing the page on an iPad, the character limits do not apply. What steps can be taken to resolve this issue? Any assistance is welcome.

/*limit characters in featured text column */
$( document ).ready(function() {
    function checkWidth() {
        if ($(window).width() < 1270) {
            $(".i-trim-header").addClass('i-text-trim');
            $(".i-trim-header").each(function(i){
                len=$(this).text().length;
                if(len>25) {
                    $(this).text($(this).text().substr(0,25)+'...');
                }
            });
        } else {
            $('.i-trim-header').removeClass('i-text-trim');
            $(".i-trim-header").each(function(i){
                $(this).text($(this).data('.i-trim-header-o'));
            });
        }
    }
    $(".i-trim-header").each(function(){
        $(this).data({originalTxt: $(this).text()});
      });
    $(window).resize(checkWidth);
});

/* default character limit in text column */
// <![CDATA[
$(function(){
    $(".i-trim-header-o").each(function(i){
        len=$(this).text().length;
        if(len>55) {
            $(this).text($(this).text().substr(0,55)+'...');
        }
    });
});
// ]]></script>

Answer №1

For mobile browsing, ensure JavaScript is enabled by going to settings -> Safari -> Advanced. Note that while most JavaScript codes may not work on mobile devices, it is recommended to have it turned on.

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

Could the Ajax success outcome be utilized to automatically fill in a jQuery DataTable?

Is there a way to declare my jQuery datatable without initially populating it, and instead use the results from Ajax calls as the data source? Currently, I am making multiple Ajax calls for this purpose and would like to find a more efficient solution. $. ...

Harnessing the Power of Global Configuration in React

Lately, I've been delving into the world of ReactJS. One thing I'm trying to figure out is how to establish a global configuration variable like SERVER_IP_ADDR. My goal is to be able to use this global configuration variable when making API req ...

What is the appropriate way to handle an ajax request in a PHP backend?

Struggling to capture success on the client side, but running into errors. When I include the following code in my AJAX request: error:function(data){ console.log(data); console.log('error'); } It capt ...

Discover the process of integrating PWA features into an Express web application

I'm currently in the process of integrating PWA into a web application. I've created a manifest.json file and added it to the head of my page, which is loading correctly. However, the service worker registered in my app.js doesn't seem to be ...

How can one retrieve elements from a loaded webpage?

I've been using the jQuery function .load() to load a page and I'm trying to find a way to access HTML elements within the loaded page from the source page once it's finished loading. The only method I've come across so far is to add pa ...

Issue: Unable to locate the files 'Upload' and 'Results' in the React Application

I've encountered an issue while developing a react-app front-end for Amazon AWS S3. Specifically, I am facing difficulty importing the 'Upload' and 'Results' components from the 'components' folder in my project. The prob ...

What is the best way to pass parameters to a PHP script using AJAX to ensure they are properly processed on the server side?

I'm working with the following function: function myFunction () { $.getJSON('remote.php', function(json) { var messages = json; function check() { ... In this function, I call the remote.php script which e ...

How to eliminate a variable-named option_for_select item using JavaScript

Looking for help with this code snippet: function remove_name(i) { var phase_name = document.getElementById('phase_rates_phase_name' + '-c' + i).value; $("select#payer_contract option[value='Phase 3']").remove(); } T ...

Will images still be loaded within a hidden div in Bootstrap 3?

Creating a responsive website that features a large carousel with multiple images on the homepage. My goal is to optimize image sizes for each device so that only the necessary image is downloaded, conserving bandwidth for mobile users. To achieve this, ...

The size of the dropdown adjusts according to the changes in the page size

Can anyone help me with an issue I'm facing in my form? Whenever I zoom in or out on my browser, the select element within the form gets resized and changes its position. Any suggestions would be greatly appreciated. Below is the code snippet for refe ...

How can an Ubuntu server be set up to automatically restart an NPM process in case of failure?

Currently, my Discord bot is being hosted on AWS. I am curious to know if there is a way for AWS to automatically restart the npm start command in case the process stops running unexpectedly. I tried looking through the official AWS help center but couldn ...

In JavaScript, the price can be calculated and displayed instantly when a number is entered into a form using the input type 'number'

Is there a way for me to automatically calculate the price and display it as soon as I enter a number into my form? Currently, the price is only displayed after I press submit. <script type="text/javascript"> function calculatePrice() { ...

Linking AJAX to a specific URL and controller

In order to submit a form, I utilize an AJAX request that sends data to a specific page like form.ajax.php. On this page, I first check if '_POST' is set and then proceed to validate the form and save the information using my database class. The ...

When a jQuery checkbox is checked, the addClass and toggleClass effects are applied to all DIVs, not just the enclosing DIV

I am working with Bootstrap Cards that have checkboxes inside them. When a checkbox is checked, I want to apply 2 specific classes to the Card DIVs: Change class="card border-secondary" to class="card border-success" Change class="card-header" to class ...

Background in white color accompanied by materials design colors

Can the background color be set to white using md-colors in angular material without creating a custom white palette? I attempted to use the grey palette based on information from the documentation, where it states: background - grey (white is included ...

Mobile device not displaying Bootstrap menu

I'm having trouble understanding why the bootstrap menu isn't visible on mobile and tablet devices. Check it out live at: ...

Executing a Javascript function through Typescript in an Ionic application

I integrated a plugin into my ionic project, which includes both Java and JS code: cordova.define("cordova-sms-plugin.Sms", function(require, exports, module) { 'use strict'; var exec = require('cordova/exec'); var sms = {}; functio ...

Ways to superimpose an image

Struggling to overlay an image over two div columns - I attempted using Z-index and experimented with various positioning properties. What am I missing? The triangle situated behind the two boxes, along with the additional text on JSFiddle, should appear ...

Utilize jQuery for transferring a JavaScript array to PHP backend

Trying to pass a Javascript array to PHP using AJAX and jQuery. The simple page contains selectable numbers via jQuery UI (see below). When a group of numbers is selected, they are added to an array called "shift" using array.push. The main question is: W ...

Issue with Bootstrap 4 activate.bs.scrollspy event not triggering

Currently utilizing Bootstrap v4.0.0 for my project. All essential JavaScript files (jQuery, popper, and Bootstrap) have been properly included, along with the necessary CSS files. Here is a snippet of the HTML code: <body data-spy="scroll" data-targ ...