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:

https://i.sstatic.net/woAdp.png

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

German:

https://i.sstatic.net/mTRVy.png

<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

Encountering a bug that states "TypeError: Cannot read properties of null (reading 'useState')" while trying to use useState in a react application

I'm working on incorporating useState into my Next.js app, but I encountered an error as soon as I added the line of code to initialize useState. The popup error message reads: TypeError: Cannot read properties of null (reading 'useState') ...

javascriptreactjsnext.jsuse-state

Using httpRequest to handle binary data in JavaScript

Having trouble deciphering the response of an http request that is a binary datastream representing a jpeg image, despite numerous attempts. Edit: Including the full code snippet below: xmlhttp = false; /*@cc_on@*/ /*@if (@_jscript_versio ...

javascripthtmlxmlhttprequestbinary-dataresponsetext

Displaying JSON data in HTML proves to be a challenge

I have collected JSON data and organized it into two arrays, then displayed it in JSON format. Now I'm trying to showcase this data in HTML using two loops by correlating the IDs of one array with the userIds of another array. {"personaldetails":[{"i ...

javascriptphpjqueryhtmljson

Master the art of animating ng-view transitions with AngularJS

I have 2 distinct HTML pages, namely welcome.html and login.html. These two pages are incorporated or "inserted" into a common page called index.html through the utilization of an exclusive attribute known as ngview, together with a router provider. This i ...

javascriptangularjsanimationurl-routing

Use the jQuery function `stop(true, true)` to swiftly end all animations currently in the queue

For handling animations in jQuery, I have been utilizing the stop(true, true) method to clear running animations so that the next one can start right away. What I observed was that while the first parameter, clearQueue, clears the entire animation queue, t ...

javascriptjqueryanimationqueue

HTML numbered list - precise sequence

Can I customize the format of my ordered list in HTML/CSS to look like this? o. Item 1 i. Item 2 ii. Item 3 iii. Item 4 Is it feasible to create a custom format for ordered lists using HTML and CSS? ...

htmlhtml-lists

How to Use Laravel to Create HTML Divs Without Images

While working with a text editor, we have the ability to incorporate various HTML tags such as images and videos. However, I am only interested in displaying text fields. When I use {{$loop->content}}, it displays: <p><strong>EXAMPLE</st ...

htmlcsslaravellaravel-5

Vue: Ensuring one method finishes executing before triggering the next one

I've implemented two methods in my Vue instance; const app = new Vue({ el: '#app', data: { id: null }, methods: { getId: function() { return axios.get('url') .then(response => response.data) .then(i ...

javascriptvue.js

Utilizing ES6 promises in node.js to send a null response

I'm looking for assistance on how to execute a query using ES6 native promises in node.js. The code I have below is what I've been working with: let arr= []; conn.query('select * from table1', (err, b) => { for (let i = 0; i ...

javascriptnode.jspromisees6-promise

Tips for activating the default 500 error page in Next.js

I'm having trouble getting Next.js to display its default 500 error page. While most sources discuss creating a custom error page, the Next.js documentation only briefly references their built-in 500 error page. I want the default page to show up when ...

javascriptnext.js

How is it possible that my form is able to save data into the database even without any

I am considering adding a captcha process to my form and I am brainstorming some logic for it. I downloaded a login from Google, but I am confused why my form is still storing data into the database using action=' ' instead of action="register.ph ...

javascriptphpjquerymysql

Utilizing Jquery for Enhanced HTML5 Validation

I need to ensure compatibility with browsers that do not support HTML5 validation. My goal is to display the basic error message from the browser using HTML5, while also adding a CSS class of "error" to each input, label, and parent div for fields with err ...

javascriptjqueryhtml

Counting the number of times a form is submitted using a submit button and storing the data

After researching for a few hours, I've gathered information on different techniques for storing data related to a submit button counter in a text file. <form action="/enquiry.php" method="post" name="form"> <label>Name *</label> &l ...

javascriptphpjquery

Exploring the differences between utilizing request.body in building RESTful APIs with Django versus Node.js

As I dive into learning the Django framework, my main aim is to leverage this knowledge in creating a rest api. Although I've looked into using django-rest framework, my current job necessitates a focus on Django specifically. In my journey so far, I ...

javascriptpythonnode.jsdjangoexpress

Bootstrap dropdown menu fails to expand

I recently attempted to implement a hamburger menu using Bootstrap on my website. After checking and adding the necessary CSS and JS files, I encountered an issue where the menu wasn't expanding as expected. I followed the example code provided on the ...

cssbootstrap-5

Transfer the "file" from the busboy to the GM for FTP uploading

I'm looking to resize an uploaded image using nodejs and send it via ftp. I'll be utilizing nodejs, busboy, GraphicsMagick, and jsftp. var uploadFile = function(dir, req, cb) { req.busboy.on('file', function(fieldname, file, filename, ...

javascriptnode.jsftpgraphicsmagickbusboy

Nested promise not being waited for

As someone new to all things asynchronous, I am currently facing a challenge. I want to ensure that a file exists before updating it, creating the file if necessary. However, I am struggling to figure out how to achieve this. I am aware of the option to u ...

javascriptnode.jsasynchronousasync-awaitfs

The MongoDB GridFS is refusing to accept the buffer being written

Hey everyone, I've been working on this issue for nearly a day now and can't seem to figure it out. I'm utilizing multer's inMemory flag to upload an image from my website. My approach involves writing the buffer received from multer to ...

javascriptnode.jsmongodbexpressgridfs

Blank white screen in Three.js following the rendering of numerous objects

I have a situation where I am loading over 4350 3D objects from JSON files in my game. for (var y in game.fields) { for (var x in game.fields[y]) { switch (game.fields[y][x]) { case 'm': ...

javascriptthree.jschromium

Tips for displaying all documents within a MongoDB collection using the sharedb-cli command line tool

My client-demo is not working as expected. I am trying to retrieve all documents from the "file" collection, but I am getting null results. https://i.sstatic.net/Pw6sA.png When testing with the mongo shell, I can see that the document data actually exist ...

javascriptnode.jsmongodbsharedb