Upon page load, a ul list is dynamically generated via JavaScript. The relevant code snippet is as follows:
<ul class="tweet_list"><li class="tweet_first tweet_odd"></li></ul>
Related CSS:
ul.tweet_list li {
height: 55px;
line-height: 55px;
overflow: hidden;
padding: 0.5em !important;
vertical-align:middle;
}
To dynamically adjust the line-height based on the number of words in a tweet (changing from 55px to 24px for tweets with more than 9 words), the following JavaScript code is used:
$(function(){
var $tweet = $(".tweet_first");
var $numWords = $tweet.text().split(" ").length;
if (($numWords >= 1) && ($numWords < 10)) {
$tweet.css("line-height", "55px");
}
else {
$tweet.css("line-height", "24px");
}
});
For a visual representation of the widget, refer to this screenshot:
UPDATE: The current code is not updating the line-height dynamically as intended. How can I directly apply the line-height property to ul.tweet_list li using JavaScript?
UPDATE: To dynamically change the line-height CSS property using JavaScript, the goal is to transition from:
ul.tweet_list li {line-height: 55px; }to:
ul.tweet_list li {line-height: 24px; }UPDATE 2: The following code is used to call the tweet:
jQuery(function($){
$(".tweeter_widget").tweet({
join_text: "auto",
username: "twitter_username",
avatar_size: null,
count: 1,
auto_join_text_default: "",
auto_join_text_ed: "",
auto_join_text_ing: "",
auto_join_text_reply: "",
auto_join_text_url: "",
loading_text: "loading tweets..."
});
});