There is a button on my website that uses a small piece of Javascript to post a tweet, but unfortunately, it is not functional on mobile devices

Check out this link to view the demonstration - http://codepen.io/illpill/pen/VbeVEq

function sendTweet(message, author) {
  window.open('https://twitter.com/intent/tweet?hashtags=thequotemachine&text=' + encodeURIComponent('"' + message + '" ' + author + " via"));
}

$('button.tweet').click(function() {
  var currentQuote = $('#quote').text();
  var currentAuthor = $('#author').text();
  var truncatedString = truncateContent(currentQuote, currentAuthor)
  sendTweet(truncatedString, currentAuthor);
});

It works like a charm on desktop. It extracts the quote and creates a tweet perfectly, but when I try it on my iPhone by tapping the button, nothing happens. Any thoughts on why this issue might occur?

This is the logic behind the truncateContent function:

function truncateContent(content, auth) {
    var shorterContent = [];
    var charCounter = 0;
    contentSplit = content.split(" ");

    if (content.length > (113 - auth.length)) {
        for (var i = 0; i < contentSplit.length; i++) {
            if (charCounter < (113 - auth.length)) {
                charCounter += contentSplit[i].length + 1;
                shorterContent.push(contentSplit[i]);
            }
        }
        shorterContent.pop();
        return (shorterContent.join(" ") + "...");
    } else {
        return content;
    }
}

Answer №1

Consider implementing a touch event for better user experience.

$('button.tweet').on("tap touchstart",function() {

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

Having difficulty retrieving the current time of an audio element using jQuery

Currently, I am facing an issue while attempting to manage an audio element for my custom player. Despite numerous attempts, I have been unsuccessful in acquiring the currentTime and duration properties. Below is a snippet of what I've tried: var pla ...

Achieving perfect alignment: Centering text within a div with an aspect ratio

I have encountered a situation where I need to center text within a div that also has an aspect ratio. Since the aspect-ratio property is not supported by major browsers like Safari, I am looking for an alternative solution. Here is my current code: .a ...

Modify the display of multiple divs within a main div

I am facing an issue with a parent div that contains multiple child divs. When there are many children, they all remain in a single row without adjusting into columns. Below is my current HTML: item1 item2 item3 ... <mat-card class="hove ...

Rendering an array of objects in Three JS

I am encountering an error while trying to render an array of objects in a three.js scene. The error message from three.js reads as follows: three.module.js:8589 Uncaught TypeError: Cannot read property 'center' of undefined at Sphere.copy (thr ...

What is the best way to align the navbar items at the center in Bootstrap when mx-auto is not working?

<nav class="navbar navbar-expand-sm navbar-light"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls ...

What is the purpose of wrapping my EventEmitter's on function when I pass/expose it?

My software interacts with various devices using different methods like serial (such as USB CDC / Virtual COM port) and TCP (like telnet). To simplify the process, I have created a higher-level interface to abstract this functionality. This way, other sect ...

I am struggling to align elements properly with Bootstrap, and I am encountering issues with the border radius of a specific div

I'm having trouble aligning all the elements in the center of my login form created with HTML and Bootstrap. The header appears to be center-aligned, but it is not vertically aligned with the other elements. I've been using the Grid system and ne ...

Add opening and closing HTML tags to enclose an already existing HTML structure

Is there a way to dynamically wrap the p tag inside a div with the class .description-wrapper using JavaScript or jQuery? This is the current html structure: <div class="coursePrerequisites"> <p> Lorem ipsum.. </p> </ ...

Experiencing difficulty converting a JSON array to a C# list during deserialization

With so many options available for serializing and deserializing JSON, it can be confusing to determine which one is the best choice. It's curious why there are multiple tools that seem to accomplish the same task. Some examples include JsonConvert, J ...

How to use jQuery to smoothly scroll an element to the bottom

After searching online, all I can find are tutorials on scrolling the entire page or to a specific element. I'm curious - is there a way to scroll a certain div that has the "overflow:auto" style to its bottom using jQuery? ...

When using CasperJS to capture multiple screenshots, the most recent screenshot will replace all previous ones

Exploring CasperJS has been a great experience for me. Despite my enjoyment, I've encountered an issue with casper.capture() that has me stumped. I've set it up to capture screenshots whenever a test fails and placed it in a separate setup module ...

Unforeseen box model quirks found in modern browsers when styling <table> elements

Here is a sample HTML document that demonstrates the issue: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; ...

There appears to be an issue with the functionality of the Bootstrap toggle tab

Currently, I am facing a toggle issue and having trouble pinpointing the root cause as there are no errors appearing in the console. The problem involves two tabs that can be toggled between - "pay" and "method". Initially, the default tab displayed is "pa ...

What seems to be the issue with my code for Javascript Math functions?

Welcome to the number game slider! If you roll above 50, you will get double the amount bet. Use the slider to choose your desired betting amount. Issue 1: After a win, the score does not update correctly. Instead of showing increments of 5, it displays s ...

Looking to showcase initial API data upon page load without requiring any user input?

Introduction Currently, I am retrieving data from the openweatherAPI, which is being displayed in both the console and on the page. Issue My problem lies in not being able to showcase the default data on the frontend immediately upon the page's fir ...

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

Upon filtering the table, I noticed that the header disappears sporadically. The issue is that the table header row should remain in place regardless of whether or not the characters used for filtering are present in the table rows. In Example 1: When fil ...

Is it feasible in Vue to import an scss file with deep selectors into the scoped styles of a component?

Is it possible to extract a Vue component's scoped SCSS with deep selectors into a separate file and then import it back in? For example: // Main.vue <template> <div id="main"> <h1>Title</h1> <span>Text< ...

What steps can I take to ensure my CSS component remains unaffected by the global CSS styles?

My navbar component is not displaying the styles correctly as intended. I have a Navbar.module.css file to style it, but after using next-auth for social login, only the buttons remain unstyled while everything else gets styled. The code snippet for impor ...

Interested in leveraging string functions on the information retrieved from the API?

I am trying to utilize String functions such as slice(x,y), length() on the data received from the API. To achieve this, I first converted the data to a variable called mystr using JSON.stringify(obj), but encountered an issue where the console displayed: ...

Retrieve the data stored in a selection of checkbox fields on a form

I have a table of checkboxes: <div> <h1 class="text-center">Select activities</h1> <div class="row"> <div class="col"></div> <div class="col-md-8 col-lg-8"> <h3>Link activ ...