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

JavaScript error: Cannot read property 'str' of undefined

I'm attempting to retrieve specific values from a JSON array object, but I encounter an error message. var i = 0; while (i < n) { $.get("counter.html").done(function (data2) { var $html = $("<div>").html(data2); var str = ...

Convert XML data into a structured table format

We have an XML file named "servers.xml" that needs to be parsed. This file is located on the same server where we want it to be parsed, in the same folder. <root> <list> <server> <server name="28 Disconnects La ...

What methods are most effective for evaluating the properties you send to offspring elements?

Currently, I'm in the process of testing a component using Vue test utils and Jest. I'm curious about the most effective method to verify that the correct values are being passed to child components through their props. Specifically, I want to e ...

Space within a series of photographs

Looking for some assistance: I am trying to maintain a consistent margin of 10px between posts and between photos in a photoset. However, when a post is a photoset, the margins of the bottom photo and the overall post add up to 20px. I want to retain the ...

Utilize JSON parsing with a reviver parameter to filter out specific object properties

In the process of developing a Node.js server, I am working on a particular service that requires accepting a stringified JSON object while also implementing field whitelisting. To achieve both of these objectives, I intend to utilize JSON.parse() with the ...

A step-by-step guide on building a custom contact form using ReactJS and transmitting the data through an API with Express

In my quest to utilize ReactJS for building a contact form and seamlessly sending the data to my email address, I embarked on creating a contact form within my App.js file. import React, { Component } from 'react'; import axios from 'axios& ...

how can I transfer model values to a dashboard in Rails 5?

I have developed an app that includes an adminlte dashboard. The dashboard is populated with various values obtained by a jQuery file. I am trying to pass module values to the dashboard. For example, the number of users shown in the dashboard should be fet ...

Weird occurrences observed when JSON wraps my objects

I am sending the following request to my server: $.ajax({ url: url, data: JSON.stringify({ SecretKey: e.Code, CommentId: e.Id, Direction: direction, VoteType:1}), type: "POST", contentType: "application/json;charset=utf-8", }); After the ...

Display full desktop version on mobile devices with minimized view and no need for horizontal scrolling

While it may seem unusual, my client has requested temporarily removing responsiveness from the site to view the desktop version on mobile. I initially tried removing the responsive meta tag, but encountered horizontal scrolls on the page. My goal is to di ...

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...

Dealing with numerous promises simultaneously using AngularJS Factory

I have created a code that makes multiple $http calls recursively and saves all the promises it returns in an array. Then, I resolve all of them and save the responses in another array. Now, my question is: How can I efficiently return this final array to ...

Unable to locate the CSS file

I'm struggling to link a stylesheet file to my 'base.html' template that is used throughout my entire project. Here's the path to the file I want to link: C:\forum_project\static\main\css\style.css Below is ...

Error Message: Unable to access properties of an undefined object while interacting with an API in a React application

Creating a Weather application in React JS that utilizes the OpenWeatherMapAPI to display dynamic backgrounds based on the API response. I need to access the data at 'data.weather[0].main' which will contain values like 'Clear', ' ...

Place the text below the adaptable div

Could anyone offer guidance on how to properly align text underneath responsive images within divs? The issue I'm facing is that the divs adjust smoothly based on the viewport size, but the text below them doesn't stay centered as intended. Whi ...

Utilize JSON data to dynamically populate TextFields or Select menus depending on a specific key in the JSON object

As I retrieve multiple JSON groups from an API, each group contains one or more questions objects. The task at hand is to attach each question along with its corresponding response to a textField. Based on the value of QuestionType, it will be decided whet ...

Trouble with connecting CSS files

Can anyone explain why my CSS file isn't linking properly when the HTML file is located in a subfolder within the directory that contains both the CSS and HTML folders? I attempted to remove the main folder path from the link, but the issue still pers ...

Is there a way to add text to HTML code using CKEditor?

I incorporate CKEditor into my website. When I click on a specific link, it adds some text to the editor successfully. However, when I switch to the source tab, I am unable to append this text to the existing source code. Can anyone offer guidance on h ...

Evolving the appearance of every vacant element

Currently, I am working on a project that allows users to add items. To facilitate this process, I have included an "add another" button which enables them to include additional items all at once. In order to validate the form and save values to the datab ...

Tips for enabling the OnLoad Event for a React Widget

Hey there! I'm a beginner with React and I'm struggling to call a function once after the component is created. I tried adding an onLoad event in the component creation, but it's not working as expected. The function 'handleClick' ...

Tips for transforming a JSON response into an array with JavaScript

I received a JSON response from an API: [ { "obj_Id": 66, "obj_Nombre": "mnu_mantenimiento_de_unidades", "obj_Descripcion": "Menu de acceso a Mantenimiento de Unidades" }, { "obj_Id": 67, "ob ...