10月 312013
 

こんばんは。ファガイです。

今回は、少しだけ書きます。jQueryを使って横スクロールを実現する方法です。

例えば、ulタグにliで画像等を横並びで出したいとかいう時に使える。

html
“`

  • 1
  • 2
  • 3

“`

css
[css]
div{
width: XXX;
overflow: auto;
}
li {
width: XXX;
float: left;
}
[/css]

javascript
“`
;(function($)
{
$(function(){
li_width = $(“ul li”).outerWitdh(true);
li_count = $(“ul li”).length;

$(“ul”).width(li_width * li_count);
});
})(jQuery);
“`

こんな感じですかね。
今回、outerWidthが便利すぎた。outerWidthはborderとかmarginとかを合わせたwidthを返してくれます。これで結構楽になれました。

 Posted by at 6:01 PM
6月 262013
 

深夜遅くに、こんばんは。

関係ないですがカテゴリに学んだカテゴリーを追加しました。
このカテゴリでは覚えてて損はないでしょ的なことと、忘れないように・・・って感じのことを書いておきます。
なので多分フォーマットはしっかりしてないです。

CSSだけでテキストのラップをする

テキストのラップ?いわゆるテキストが長く続いた時に…等を表示させるあれです。あれ。便利ですよね。
あれって、サーバーサイド側で処理する人が多いんですが、CSSにもあるんです。

.text-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}

こういうのです。私はこんな風にクラスを作って使いたい時に使ってます。

ついでなのですが、サーバーサイド側でラップした際にはしっかりとタグの属性に元のテキストを追加をしておきましょう。これは自分はやってるのですが、するべきなのかどうなのかは不明です。

あいう...

こんな感じで。

ではではー。

 Posted by at 1:56 AM