Javascript

[css] contentプロパティで挿入できるコンテンツ

2010/03/23 CSS 10 comments ,

clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、
:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。

挿入出来るモノ

大きく分けると3つです。

  • テキスト
  • プロパティの値
  • 画像

(さらに…)

[PHP] ページング機能の仕組みとか作り方とか

2009/10/22 PHP 6 comments ,

ページング機能というのは、「複数に分かれたページの前後ページへ移動するためのナビゲーションリンク」のことで
このブログにも下の方に次のページへ移動させるためのページ番号リンクがありますよね。それです。

先頭の何ページ目かまではページ番号、それ以上は三点リーダーとかでぼかしたりするGoogleライクなものや、
前後への矢印だけしか表示させなかったりするものなど、スタイルは色々ありますが
これが自作しようとすると結構面倒臭い。そしてプログラミング初心者だとまず仕組みが良く分からない。
結構よく使うのに作り方や仕組みの解説をあんまり見ない気がするので書いてみます。

ページング機能で最低限必要な情報

以下2つは必須。

  • 最大ページ数(10ページまでなら10)
  • 現在表示しているページのページ番号(1ページ目を表示しているなら1)

ページ数とページ番号はカウントを0から始めるか1から始めるかで変わりますが、
この記事では1から始める事を前提にして説明しています。

(さらに…)

[mootools]slideBox ver1.0をマウスホイールに対応させる

2008/10/30 MooTools No comments , ,

スクロールバーをカスタマイズ出来るmootools依存のライブラリslideBoxを、マウスホイールでも動くよう適当に変更してみた。
デフォルトだと矢印のクリックでスクロールするんだけど、
基本的なスクロール量は表示エリアの高さ(class-wrapper)と同じだから、マウスホイールで微調整したくなる場合もある。

使い方はファイル落とせば分かると思うので省略。

オプションは次の通り

options: {
	className:'slide',			// スライドするエリアのクラス名
	prevArrow:'-previous',		//前にスライドする矢印の接尾語
	nextArrow:'-next',		// 後にスライドする矢印の接尾語
	removeArrows:true,		//先頭と最後にスクロールしたとき矢印消すかどうか
	fadeArrows:false,			// 矢印にフェードエフェクトつけるかどうか
	startOpacity:0.5,			//フェードエフェクトがスタートした時の矢印の透明度
	endOpacity:1,			//フェードエフェクトが終わった時の矢印の透明度
	mouseoverBox:true,		//スライダー内にあるULとLI要素にクラスを追加するかどうか
	startClass:'normal',		// マウスアウト時に追加するクラス名
	endClass:'over',			//マウスエンター時に追加するクラス名
	speed:5,				//スクロールスピード(10:fast 1:slow)
	transition:Fx.Transitions.Quart.easeOut //スクロールのトランジション効果
},

カスタマイズ部分のソースのみ掲載してます。
(さらに…)

[jQuery]サムネイルクリックで画像変更(+effect)

2008/08/02 jQuery 6 comments , ,

前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。
このスクリプトは画像切り替えだけです。

動作にはjQuery1.2.6が必要です。

(さらに…)

[WP]AutoExternalLinkプラグイン修正

2008/06/15 plugin 4 comments , ,

inoccoさんが作成されたリンクに新しいウィンドウを開くアイコンを自動で追加するプラグイン
AutoExternalLinkをVicuna用に修正してみた話。

プラグイン添付のjsファイルはLogJETさんが作成されたそうなんですが、

  1. 表示エリアが見つからなかったときにエラーが出るのを直しておきたい。
  2. クラス名を2つ3つ並べて指定するとアイコンが出ないので、それもなんとかしたい。
  3. 今使ってるVicunaではヘッダにリンクを貼るとアイコンが出るので、hn要素以外のaタグに追加したい。
  4. iG:Syntax Hiliterのソースにはアイコン出ないようにしたい。

そのまま使えなかったので変えてみますた。
修正箇所は次の通りです。

(さらに…)