Slice text and add trails with jQuery.

jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 | BlackFlag

このエントリーのコード、もう少し可読性を上げた方が良いと思ったので、書き直してみた。

jQueryって、

$foo.html(something).css(something).animate(something)... ;

とできるので、処理分けしているところで同じ関数を書いたりしてると、コードが見難くなる。

最終的に同じ後処理をするなら、if文を抜けてから書くべきと思ってる。

// css() が2つある
if(cutFigure < textLength) {
    $(this).html(textTrim + afterTxt).css({visibility:'visible'});
} else if(cutFigure >= textLength) {
    $(this).css({visibility:'visible'});
}

// こうするべき
if(cutFigure < textLength) {
    $(this).html(textTrim + afterTxt);
}
$(this).css({visibility:'visible'});

あと、ダミーテキストはいいのですが、もうちょい３０文字で切れることを確認できるものがよいかと思われます。

画面をスクロールしたとき、要素を少し透過させる

画面をスクロールしたときに、fixedしているヘッダーやナビゲーションに対して、少し透過させるとかっこよくありません？

実装の仕方は scroll されたときの位置を取得し、それに応じて透過させるだけで良いです。

See the Pen rWXoBY by Shintaro Kaneko (@kaneshin) on CodePen.

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
      $('header').css('opacity', 0.8);
    } else {
      $('header').css('opacity', 1);
    }
  });
});

これは、window がスクロールされたときに処理をするようにしています。

$(selector).scroll(function() {
  // Do something
});

この関数の中に、現在のTOPのスクロール位置が取得できる $(selector).scrollTop() で処理しています。

if ($(this).scrollTop() > 0) {
  // Topでないとき
} else {
  // Topのとき
}

JavaScript (jQuery) で動的にイベントの処理を追加する方法

基本的に要素へイベントの処理を追加する場合は

$('#foo').bind('click', function() {
  // procedure
});

としますが、これは動的に生成された要素にはその処理を追加することができません。
そういうときは live メソッドを使用します

$('#foo').live('click', function() {
  // procedure
});

こうすると、動的に生成された foo セレクターにも click の処理が追加することが可能になります。