Develop Reference

Trim tweets from plugin

I am using this Wordpress plugin
https://smashballoon.com/custom-twitter-feeds/demo
I would like to trim the Tweets to 120 characters.
I have no JS skills and very little php - I tried this which I found but I don't know if it's relevant at all.
$twitter_feed = (strlen($twitter_feed) > 120) ? substr($twitter_feed,0,10).'...' : $twitter_feed;
enter code here
I also attempted to edit my working code for trimming my post titles to suit which did not work.
function custom_trim_my_tweet( $twitter_feed ) {
global $uncode_vc_index;
if ( is_singular() && !$uncode_vc_index )
return $twitter_feed;
$twitter_feed = wp_trim_words( $twitter_feed, 9 );
return $twitter_feed;
}
add_filter( 'ctf-tweet-text', 'custom_trim_my_tweet' );

To trim the text using JavaScript:
First you have to select the element using a css selector. It's easiest if you can select the elements using an element id, like so:
var tweet = document.getElementById("my_tweet_id");
Then you can grab the text content of the element with element.innerText
var tweetText = tweet.innerText;
Then you can simple cut the length of the text inside the element using string.substring()
tweet.innerText = tweetText.substring(0, 120);
I honestly think you should try to fix this at the plugin/wordpress/php level rather than cutting text in JavaScript. But if that's what you want to do, then the above methos would work.
EDIT:
In case the tweet elements do not have unique ID's you will have to select all of them and then loop through each and perform the text-cutting. I'll give you an example of how to do that:
You might have to be a bit creative with your css selectors depending on how the tweets are displayed.
In my example I will assume that you have a div with the ID 'tweets' that then holds five separate div elements, one for each tweet, that all have the same class of 'single-tweet'.
First we get all the 'single-tweet' elements:
var tweets = document.querySelectorAll('#tweets .single-tweet');
tweets now contain a node list of the five 'single-tweet' divs.
Then we loop through them with .forEach() and do the text-cutting on each element.
tweets.forEach( (tweet) => {
tweet.innerText = tweet.innerText.substring(0, 120);
})
Now all of the 'single-tweet' elements will contain what's left after you cut the text down to 120 characters.

Verifying display of a pair of strings on a webpage in single line or different lines

I need to verify a web page about a sportsperson, and I need to check if the sportsperson name displays on web page correctly. For instance, "Sir Andrew Barron Murray" is the name I need to check throughout the web page and the name should get display in each and every instance in a single line. It should not display like, Sir Andrew in one line and Barron Murray in the second line. The entire name has to display in a single line.
I tried with a body of the text and checked the IndexOf each letter, but didn't work out. The other solution I could think of is getting the exact coordinates of each word in a string and compare to each other. But I am not sure how to get the coordinates of text in a web-element. I understand that we can use getLocation, but this would get the web-element location but not the exact text within a web-element.

Using XPath
//*[contains(text(), 'your text you are searching for')]
If the text is on the page it will find it

In JS you could fill the Element with a character like 'a' via element.innerHTML, then get its height with element.getBoundingClientRect().height.
Then you insert the name back into the element and do the same again. You'll find that the second height is a multiple of the first one.
var text = element.innerHTML;
var one_line_height = element.getBoundingClientRect().height;
element.innerHTML = text;
var current_height = element.getBoundingClientRect().height; // must be recalled
console.log("Ratio: "+(current_height/one_line_height));
// should output 1 if the two are matching or 2, if its two lines
Edit: If the name is inside a text, wrap the name inside a div-wrapper with display: inline; and redo the calculation on the div element. That's because inline-elements break at a line-break.

jQuery how to do the following

I've the following question, let say we have a div like this:
These are dynamically formatted divs, with the classes 'row', 'element' and 'isotope-item' are always present. Everything in between can vary per div.
What I want is to the following:
As you see the commmas are no longer there and seperate classes between the commas are now one class.
Anyone any idea?
I already have the following to remove the commas:
$('div.element').each(function () {
var _sCurrClasses = jQuery(this).attr('class');
jQuery(this).attr('class', _sCurrClasses.replace(/,/g, ' '));
});

I would advise doing this backend,but in JavaScript you could:
This will not account for the space in the words though.
You would need to pass then trough separately one by one and replace.
or store them in a data-attribute and format when you need them.
<string>
var classesFormat = classes.replace(/,/g, '');
var classesList = classesFormat.split(" ");
for(String c : classesList)
{
$("#id").addClass(c);
}
</string>
So you could create a data-attribute for each one instead.
Go through each one, format and the add to class.
<div data-id="Microsoft Office," class="test test test">
With the script
$(this).attr("data-id") // will return the string "Microsoft Office,"
or .data() (if you use newer jQuery >= 1.4.3)
$(this).data("id") // will return the Microsoft Office,
And then do your replace after that and addClass.

I don't think classes work like you think they do
the first PICTURE you posted would result in that div having the follwing classes
row
element
Microsoft
Office,
My
SQL,
Page
Rank
isotope-item
Note the , is PART of the class
You want, according to the second PICTURE
row
element
MicrosoftOffice
MySQL
Page
Rank
isotope-item
Removing , is just as you posted ... the problem is, how do you determine which spaces to remove, and which to keep?
(I posted this as an ANSWER, but I KNOW IT IS NOT AN ANSWER)

javascript - check if a div is empty

I have the following setup:
<div id="whatever">
<!-- Here some dynamic divs will be loaded -->
</div>
I need to know when the "whateverdiv" has nothing inside. The catch is that when I say nothing I mean if user sees nothing. So if inside the div something like
<div style="display: none">LOOOONG TEXT</div>
is loaded I consider it empty.
If is full of blank spaces is also empty, etc... if user doesn't see anything in it is empty.
Since there are too many cases to cover (content with height 0, content with display none, blank spaces, tabs, hidden inputs etc... almost anything may be loaded there depending on situations) I tried to use the height attribute to see if has content (the div expands depending on content). This idea worked ok but now I have another problem: I must add display: none on it sometimes. When I do that the height is always load as 0. I can't use visibility because div has 10px padding that I don't want to see when is not shown. So I'm back to square one... finding some sort of way to see if a div is empty in all that cases.
Any idea how should I do that?

var d = $('#myDiv');
var empty = d.text().trim().length === 0 || !d.is(':visible');

This one should work.
http://jsfiddle.net/fedmich/SmRnT/
I'm cleaning the html comments via Regex
$(function() {
var w = $('#whatever').clone();
w.find(':hidden').remove();
var html = w.html();
html = html.replace(/<!--.*-->/g,'')
html = $.trim(html);
alert( html );
});​
To summarize
clone the object
remove hidden elements
remove html comments
$.trim( )

If you dont count whitespace as if something is not empty:
$("selector").is(":empty")
OR
$("selector").contens().length
Does the trick.
If you dont want to count text nodes as empty:
$("selector").children().length
See:
http://api.jquery.com/empty-selector/
http://api.jquery.com/contents/
http://api.jquery.com/children/

Get specified texts in a div, than search for them in a different div

I am trying to get texts from a div, than i want to search for these titles on the same page, but in a different div. And if one of the title exist there, i want to put some text after it. I tried to do it, but i don't know what is the problem. Last time i tried it with this jquery code:
var cim = $.trim($('.hirblokk span.comments:contains("új")').parent(".hirblokk").children("h3").text());
jQuery.each(cim, function(X) {
$("ul.s_hir.show li.hir a:contains(X)").find("small").append(" (Új!)");
return (this == cim.length);
});
As you can see i put the texts what i wanted to 'cim'(it is working). Than i tried (line 3) to check if one of the 'ul.s_hir.show li.hir a' contains one of the text, and if it containes, i put (append) something in the small tag (there is a small tag inside a tag : Text..)(this is not working). I tried it in more ways, but none of them worked.
If i write:
$("ul.s_hir.show li.hir a:contains(a)").find("small").append(" (Új!)");
than it will put ' (Új)' after every small tag when the a contains a character. So it looks like the problem is how i want to check if it a contains one of the text.
Oh, and i can get more than whan text for example: 'I am new' and 'Oh, hello darling' and only one of them contains *ul.s_hir.show li.hir a*

I'm not sure I have fully understood what text you want to search, but I see several problems:
your cim var is a single string: as jQuery docs explains, the result of the .text() method is a string containing the combined text of all matched elements http://api.jquery.com/text/ . So if you have multiple elements matched with your selector, cim will be a string of all text concatenated.
jQuery.each() iterate on each character of cim, and X is the index of the character in the string, not the value
in your third line, X is not evaluated as a var because it's in double quotes.
I don't understand what you're expecing with return (this == cim.length) : you're comparing a number (cim.length) with a string (the value of each currently evaluated).
Try something like this:
// titles contain all the h3 elements you're searching
var titles = $('.hirblokk span.comments:contains("új")').parent(".hirblokk").children("h3"));
// you're iterating on each title
jQuery.each(titles, function(index,title) {
// you're searching links elements containing each title text
var text = $.trim($(title).text());
$("ul.s_hir.show li.hir a:contains("+text+")").find("small").append(" (Új!)");
});