Question

I have a ul list that is dynamically generated upon page load via JavaScript.
The code that is generated can be seen here (with irrelevant items removed):

<ul class="tweet_list"><li class="tweet_first tweet_odd"></li></ul>

CSS:

​ul.tweet_list li {
    height: 55px;
    line-height: 55px;
    overflow: hidden;
    padding: 0.5em !important;
    vertical-align:middle;
}​

I’m trying to change the CSS line-height property based on the number of words in the Tweet (if over 9 words, I want the line height to change from 55px to 24px). Here is my JS:

$(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");
    }    
});

Here’s a screenshot of the widget http://justpaste.it/twitter-widget

EDIT: My code isn’t working. For some reason nothing I have above will change the line-height dynamically unless I go into my styles.css file and actually change the line height. HOW CAN I CALL IN MY JS THE ul.tweet_list li AND APPLY THE line-height property directly to it?

UPDATE: If someone can just tell me how to dynamically change the CSS portion, I can figure out how to detect the number of characters in the tweet. So, using Javascript, how can I change this:

​ul.tweet_list li {line-height: 55px; }​

to this:

​ul.tweet_list li {line-height: 24px; }​

UPDATE 2:
Code that calls 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..."
      });
    }); 

Answer 1

I think it shold be:

$(function(){
    var $tweet = $(".tweet_first");
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css({ "font-size": "55px", "line-height": "55px" });
    }
    else {
        $tweet.css({ "font-size": "24px", "line-height": "24px" });
    }    
});

UPDATE: Ok, maybe I’ve understand:

Taking a look to the documentation of the plugin you’ve used I see that you could bind an eventhandler like “loaded”, that fires after the tweet is rendered. So you’ve to change your code with:

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..."
  }).bind("loaded", function() {
    var $tweet = $(".tweet_first"); // maybe using  $(this)  is better
    var $numWords = $tweet.text().split(" ").length;
    if (($numWords >= 1) && ($numWords < 10)) {
        $tweet.css({ "font-size": "55px", "line-height": "55px" });
    }
    else {
        $tweet.css({ "font-size": "24px", "line-height": "24px" });
    }
  });
});

Please try, is untested 🙂