What is the best way to apply "display: none;" on a span element nested within a title attribute?

I am utilizing the social-share-button gem to share blog posts on social media. The website has been internationalized, making it bilingual (English and German). Everything is functioning correctly, but I encounter an issue with the social share buttons when switching to German:

show.html.erb

<div id="share_box">
    <% if I18n.locale == :de %>
        <h3 class="share_title wow bounceIn" data-wow-duration="1400ms" data-wow-delay="200ms">Teile diesen Beitrag</h3>
    <% else %>
        <h3 class="share_title wow bounceIn" data-wow-duration="1400ms" data-wow-delay="200ms">Share this Post</h3>
    <% end %>
    <div class="wow fadeIn" data-wow-duration="1400ms" data-wow-delay="200ms">
        <% if I18n.locale == :de %>
            <%= social_share_button_tag(@post.title_de, :url => post_url(@post)) %>
        <% else %>
            <%= social_share_button_tag(@post.title_en, :url => post_url(@post)) %>
        <% end %>
    </div>
</div>

English:

<a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="Share to Twitter" href="#"></a>

German:

<a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="<span class=" translation_missing"="">Share To" href="#"></a>

There appears to be a translation missing inside the gem causing this undesirable text to appear! To address this issue, I want to hide the text using CSS. However, I am struggling to target the text!

This is what I have attempted so far:

1) Had zero effect

.translation_missing {
  display: none !important;
}

2) The whole icons disappeared

a[title] {
  display: none !important;
}

3) Tried to get rid of it with JavaScript (Only the hover text disappeared)

$(document).ready(function() {
    $("a").removeAttr("title");
});

Hover text was: 

<span class=

Element on Inspect with JavaScript:

<a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" translation_missing"="">Share To" href="#"></a>

If anyone has any suggestions on how to solve this issue and remove this unwanted text, your help would be greatly appreciated! Thank you in advance!

javascripthtmlcssruby-on-rails

Answer №1

Utilize dynamic calling and the I18n module instead of cluttering your code with conditionals.

module PostsHelper
  def localized_title(post, locale: I18n.locale)
    post.public_send("title_#{locale.to_s}")
  end
end

<div id="share_box">
  <h3 class="share_title wow bounceIn" data-wow-duration="1400ms" data-wow-delay="200ms"><%= t('.share_this_post') %></h3>
   <div class="wow fadeIn" data-wow-duration="1400ms" data-wow-delay="200ms">
     <%= social_share_button_tag(localized_title(@post), url: post_url(@post)) %>
   </div>
</div>

The coding quality in that gem is subpar - to avoid generating invalid HTML this line:

link_title = t "social_share_button.share_to", :name => t("social_share_button.#{name.downcase}")

Should verify if the translation exists (using translate!) or offer a default:

link_title = strip_tags(t("social_share_button.share_to", default: 'Share to')), :name => strip_tags(t("social_share_button.#{name.downcase}", default: name))

If you have a strong preference for that specific gem, consider forking it, making necessary fixes, and submitting a pull request. Otherwise, there are numerous alternative options available.

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

Secret button concealed within a div, revealing only a helpful hint

On my website, there is a list of items where each item is represented by either a picture or a name enclosed in an <article> tag. Here is an example of how it looks: <article class="client-card"> <p><img width="211" height="106" ...

htmlcssstylesheet

Tips for aligning column components in a vertical position

My task is to align vertically the elements within multiple columns that include a headline, a description, and a button. By default, each element expands based on its content size https://i.stack.imgur.com/RJJP4.png However, I need all elements to be al ...

htmlcssalignmentcss-grid

What is preventing me from navigating to other pages in my React application?

Recently, I have been experimenting with ReactJS and encountered an issue where I couldn't access my other pages. The code snippet provided below seems to be the root of the problem. I am in the process of developing a multi-page application using Re ...

javascriptreactjs

A guide to resetting items directly from a dropdown select menu

I need help with clearing or resetting select options directly from the dropdown itself, without relying on an external button or the allowClear feature. Imagine if clicking a trash icon in the select option could reset all values: https://i.stack.imgur. ...

javascriptreactjsnext.jsantd

Vim: Turn off autocomplete when using insert mode key bindings

I've set up a mapping in insert mode to automatically indent brackets: inoremap [;<CR> [<CR>];<Esc>O<Tab> When I use it, the result looks like this (the pipe character represents the cursor): const a = [ | ]; Now, I want ...

javascriptvim

Unable to "serialize" geoJSON information

While working with Leaflet JavaScript, I am attempting to retrieve data directly from GeoServer using an Ajax link. To display it nicely in a DataTables table, I need to convert it into JSON format as per DataTables instructions. However, I keep encounteri ...

javascriptjsonajaxgeojsonstringify

Step by step guide on showcasing live server information obtained from the user-end through AJAX technique in a Javascript Pie Chart, within an ASP.NET html template

I have successfully managed to transfer data from the Client Side (C# Back End) to Server Side (JavaScript HTML in aspx) using AJAX. I need help figuring out how to display my own data dynamically in a JavaScript Pie Chart instead of hardcoding values. He ...

javascriptc#htmlasp.netajax

Submitting Files to the API using Vue.js

I have the following code in Vue.js and I am trying to upload a file, but my issue is that I want to save the filename of the uploaded file to the JSON API using a POST method. Is there a way to achieve this? Thank you in advance. <div class="input-f ...

javascriptvue.js

Is there a way to properly access and interpret a .log extension file within a React component?

import React from "react"; import "./App.css"; function FileReaderComponent() { const readLogFile = () => { if (window.File && window.FileReader && window.FileList && window.Blob) { const preview = document.getElementByI ...

javascriptreactjsreact-hookslogfile

The text and buttons exceed the size limits of the popup box

Currently, I am tasked with updating an old website that includes a popup box containing an iFrame and nested tables. The content within these tables consists of text and two input boxes at the bottom. Everything within the box looks fine on screen resolu ...

htmlcss

Designing unique variations using Material UI

I am currently exploring the creation of custom variants for the Button component in Material UI. To start off, I am developing a customized component based on the Button component with specific styles: // CTA.js import { makeStyles } from "@materia ...

javascriptreactjsmaterial-ui

Choosing the initial offspring of an element that do not share a common parent

My question might not be perfectly phrased, for which I apologize. Is there a CSS method to select only the first child of an element without affecting others that are not grouped under the same parent? For instance: <div class="parent"> <div ...

csscss-selectors

Creating a legitimate string using a function for jqGrid editoptions value: What's the best way to do it?

I am encountering an issue while trying to create a string for the editoptions value using a function. The desired string format is as follows: '1:Active;2:Inactive;3:Pending;4:Suspended'. Strangely, when I manually input this string as the value ...

javascriptjqueryjsonajaxjqgrid

What is the process for invoking a server-side Java function from HTML with JavaScript?

Can someone help me figure out the best way to invoke a Java method from HTML (I'm working with HTML5) using JavaScript? I attempted using Applets but that approach didn't yield any results. My goal is to extract the value from a drop-down menu i ...

javajavascripthtmlajax

I'd like to know what sets next/router apart from next/navigation

Within Next.js, I've noticed that both next/router and next/navigation offer a useRouter() hook, each returning distinct objects. What is the reasoning behind having the same hook available in two separate routing packages within Next.js? ...

javascriptreactjsnext.js

Transform HTML elements within an *ngFor iteration based on a specific variable in Angular 4

In my current project using Angular 4, I am faced with the task of dynamically modifying HTML tags within an *ngFor loop based on a variable. Here is the code snippet that represents my approach: <mat-card-content *ngFor="let question of questionGrou ...

htmlangulartypescript

Passing an array from PHP to JavaScript using AJAX

Here is the code snippet on the server side: <?php header('Content-Type: text/html; charset=utf-8'); require "../general.variables.php"; require "../functions_validation.php"; require "../functions_general.php"; require "../../db_con.php"; $ ...

phpjavascriptjqueryajax

JQuery Scroll Spy Implementation

I have structured the page with a header at the top and 3 columns below. The left column contains a menu, the middle column is a text container, and the right column is another section. As the page scrolls up, the menu becomes fixed in position which func ...

jqueryhtmlcss

How can I modify the parent form element to only evaluate the expression at the text node, without affecting Angular interpolation?

Currently, I am in the process of developing an eCommerce platform and utilizing angular to construct a widget on product detail pages. Unfortunately, my control over the initial HTML rendered for the browser is quite limited. While most tasks related to m ...

javascripthtmlformstemplatesangularjs

Trouble with implementing Ajax in Express and jquery

My app has a browse page where users can add items as owned or wanted. Currently, when adding an item it redirects back to the general /browse page. However, I want the page to not refresh at all. I'm attempting to achieve this with ajax, but as a beg ...

javascriptjqueryajaxexpress