[mootools] 透過PNGをIE6で自動的に表示させる pingfix.js clone

必要に迫られて作ったIE Pingfix.jsのクローン
ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。
透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方

適用する画像の判別はファイル名で行います。
背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。

やってる事は大体同じ

  1. 透過する画像を取得
  2. 画像の属性を取得(width,height,alt,src,class,id等)
  3. 新しい要素を作成(このクラスではspan)
  4. 作成した要素に画像の属性を当てる
  5. Style属性で作った要素をスタイリング(AlphaImageLoaderはここ)
  6. img要素を削除またはdisplay:noneにして作成した要素を挿入

続きを読む

[mootools]カイジっぽく「ざわ…ざわ…」を表示する…

何となく思いつきだけで作ってみたっ…!
このプラグインは、ページに「ざわ…」を延々表示し続ける…たったそれだけの機能しかない…!


直接見る »

おっと……忘れるところだった………
一度しか言わない…… このプラグインはmootools ver1.2 が必要だ…
jQueryとprototype.jsでの作成は検討していない…が、要望があったら作る…かもしれないっ…

続きを読む

[jQuery]IE6以下で閲覧すると画面左端にアナログと表示させるプラグイン

jQuery練習ついでにプラグイン作って便乗。元ネタはCSS Happy Lifeさん。
最近テレビの画面左端にアナログと出るようになってますが、
あのウザい表示をIE6使ってるときにやろうじゃないか、というものです。

このプラグインはスクロールしても追いかけて常に画面左端に表示し、
さらにアイコンへマウスオーバーするとメッセージを入れ替えて
ユーザーにしつこくバージョンアップを促しますwww

以下デモはIE以外だと何も表示されません。
View Demo »

jQuery ver 1.2.6以上用プラグインです
jQuery.browserのサポートの関係で1.3以上が必要でした。

続きを読む

[jQuery]リンクに新しいウィンドウを開くアイコンを自動で追加する

殴り書きは続く…AutoExternalLinkのjQuery版。mootools版の同タイトル記事とほぼ同じです。
jQueryは馴染みが浅いのでもっさり感漂う残念なソースになってます。
自分がサイト組む時は外部リンクに大抵relかclass属性を付与するんで、relかclass持ちにだけ追加するライト版も書いてみた。
ダウンロードはスクリプトファイル2種と、jQuery版に修正したAutoExternalLinkプラグインファイルのセット。
元ソースからの入れ替えとかは自己責任でお願いします。

wordpressプラグイン本体の改造はこちらの記事で解説していますが、
zipに修正済みのプラグインファイルも突っ込んどいたので上書きでおk。動作デモはこのブログそのものです。

jQueryプラグインなので普通のサイトでも使えると思います。
varは1.2.6以上対応です多分。(1.2.6と1.3.2でしか確認してない)

Header

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jExternalLink.plugin.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	$("#main").jExternalLink();
});
//]]>
</script>

上記指定で#main以下にあるaタグを全てチェックします。

続きを読む

[mootools]スクロールに追随させる – mooFollow.js

スクロールした時勝手に追随して動く要素を作成するクラス。mootools ver1.2以上用。
どう見てもwrapScrollです本当に(ry)っていうツッコミは置いといて、
スクロールした時とし終わった時のイベントとか、
トランジションや遅延の指定とかがしやすい。と思う。

続きを読む

[mootools] Class – KitchenTimer

前エントリーのカウントダウンタイマークラスにカウントアップとか追加してキッチンタイマーっぽい代物に。
Javascriptなのでページ内埋め込みが出来るんだけどmootoolsが必要っていう。

使い方は続きに。

続きを読む

[mootools] ひらがなをローマ字に変換するクラス

人が作ったのを使って楽したかったんだけどいいのが無かったので、ひらがなをローマ字に変換するクラスを自作した。
タイピングゲーム製作でどうしても必要になる問題文章を、ひらがな(数字+一部記号も可)で作るだけで全部ローマ字に変換します。
※mootools.1.2が必要

日本語は母音と子音の組み合わせで出来てる。
「く」ならK+U、「し」ならS+I/SH+I/C+I、「わ」ならW+A。
入力方式が変わるのは、「し」や「じ」等特定の文字と、「ん」、小文字のや行、小文字の「つ」との組み合わせの時だけで
あとは特定の子音1種と母音5種類の組み合わせで成り立つ。

で、大体次のような流れで変換を行います。

  1. パブリックメソッドに文章投入→「このぶんしょうはさんぷるっぽいなにかです!」
  2. 1文字または2文字単位に分割して配列化。小文字は前後の文字とセットにする。
    →[こ,の,ぶ,ん,しょ,う,は,さ,ん,ぷ,る,っぽ,い,な,に,か,で,す]
    「っ」で終わる場合や記号・数字とセットになる場合はそれぞれを1文字とする。
  3. ループ文で1文字か2文字か判別。変換関数に飛ばす
    →こ:1文字  しょ:2文字
  4. 1文字の場合はそのまま変換。この時、入力方式の設定がある文字についてはその方式に従う。
    →こ:K+O  ん:NまたはNN
  5. 2文字の場合、最初に「つ」があるかどうか捜査。
    【小文字のつがある場合】
    2文字目を1文字変換のメソッドに通して子音を2つに増やす。
    →っぽ:P+PO →っと:T + TO
    【小文字のつがない場合】
    switch文で入力方式の設定がある文字(し+小文字や行、じ+小文字や行等)を変換。
    他は、1文字変換のメソッドに通して子音+小文字や行ローマ字にする。
    →しゃ:(SH)(SY)+A にゃ:N(i)+YA
  6. 結果を返す
    →[ko,no,bu,nn,syo,u,ha,sa,nn,pu,ru,ppo,i,na,ni,ka,de,su,!]
    →[k,o,n,o,b,u,n,n,s,y,o,u,h,a,s,a,n,n,p,u,r,u,p,p,o,i,n,a,n,i,k,a,d,e,s,u,!]

以下全文。長いw

続きを読む

[mootools]文章の入力速度をリアルタイムで計測する

文章が完成するまでの時間を計測するツールWriting Speed Counter作ってみた。「最初の一文字入力した時点から、変換の確定ではないエンターキーが押されるまでの間」 を1つの文章として判断し、入力に掛かった時間と文字数を表示します。入力した文章のログ表示、結果の平均出力もつけてみた。

SiteTemplate07:Autumn Lovely

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
時期ハズレの秋用テーマです…

このテンプレートは1カラムの固定レイアウトで、slideBoxを使用してスクロールバーをカスタマイズしています。
元々ブログ用に作ったものなので、普通のサイトだと使いづらいかもしれません。
コンテンツのスライドはslideBox.js ver1.0を改変してマウスホイール対応にさせてます。
詳しくはこちらの記事を参照»[mootools]slideBox ver1.0をマウスホイールに対応させる
下方向の処理は手抜いてるので普通にスクロールバー出した方がいいかも。

トップページでコンテンツを非表示にするスクリプトと、
マウスオーバーで一言コメント表示するToolTipも仕込んであります

フォントサイズ指定はYUIのやつ使ってます。

SiteTemplate07:Autumn Lovely

  • 1Columun 2BOX
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

続きを読む

SiteTemplate06: PhantomWhite

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの2カラム固定幅レイアウト。色違いの黒もあります。

半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。

SiteTemplate06

  • 2Columun 2BOX(irregular)
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

続きを読む

SiteTemplate05: PhantomBlack

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの2カラム固定幅レイアウト。色違いの白もあります。

半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。

SiteTemplate05

  • 2Columun 2BOX(irregular)
  • XML宣言あり
  • ドキュメントタイプ:XHTML 1.0 Transitional
  • 文字コード:UTF-8

続きを読む

[bg]CSS用ドロップシャドウ背景 8ColorPack(パステル系)

コンテンツ部分の両端にドロップシャドウを付ける、repeat-y用の背景画像をまとめたパッケージです。 パステル調の8色セット。コンテンツエリアはwidth:900pxです。 サンプルページ フリー素材です。色変更、サイ … 続きを読む