気ままに綴る独学メモ帳
iPhone用Photoshopモックアップテンプレート。Safari、アプリの両方作ってあります。psdファイルのみ配布。
必要に迫られて作ったIE Pingfix.jsのクローン
ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。
透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方
適用する画像の判別はファイル名で行います。
背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。
やってる事は大体同じ
jQuery練習ついでにプラグイン作って便乗。元ネタはCSS Happy Lifeさん。
最近テレビの画面左端にアナログと出るようになってますが、
あのウザい表示をIE6使ってるときにやろうじゃないか、というものです。
このプラグインはスクロールしても追いかけて常に画面左端に表示し、
さらにアイコンへマウスオーバーするとメッセージを入れ替えて
ユーザーにしつこくバージョンアップを促しますｗｗｗ
以下デモはＩＥ以外だと何も表示されません。
View Demo »
jQuery ver 1.2.6以上用プラグインです
jQuery.browserのサポートの関係で1.3以上が必要でした。
殴り書きは続く…AutoExternalLinkのjQuery版。mootools版の同タイトル記事とほぼ同じです。
jQueryは馴染みが浅いのでもっさり感漂う残念なソースになってます。
自分がサイト組む時は外部リンクに大抵relかclass属性を付与するんで、relかclass持ちにだけ追加するライト版も書いてみた。
ダウンロードはスクリプトファイル２種と、jQuery版に修正したAutoExternalLinkプラグインファイルのセット。
元ソースからの入れ替えとかは自己責任でお願いします。
wordpressプラグイン本体の改造はこちらの記事で解説していますが、
zipに修正済みのプラグインファイルも突っ込んどいたので上書きでおｋ。動作デモはこのブログそのものです。
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 ver1.2以上用。
どう見てもwrapScrollです本当に（ｒｙ）っていうツッコミは置いといて、
スクロールした時とし終わった時のイベントとか、
トランジションや遅延の指定とかがしやすい。と思う。
前エントリーのカウントダウンタイマークラスにカウントアップとか追加してキッチンタイマーっぽい代物に。
Javascriptなのでページ内埋め込みが出来るんだけどmootoolsが必要っていう。
使い方は続きに。
mootoolsのClassでカウントダウンタイマー作ってみた。一時停止、リセット、再生、自動再生が出来る
人が作ったのを使って楽したかったんだけどいいのが無かったので、ひらがなをローマ字に変換するクラスを自作した。
タイピングゲーム製作でどうしても必要になる問題文章を、ひらがな（数字＋一部記号も可）で作るだけで全部ローマ字に変換します。
※mootools.1.2が必要
日本語は母音と子音の組み合わせで出来てる。
「く」ならK+U、「し」ならS+I/SH+I/C+I、「わ」ならW+A。
入力方式が変わるのは、「し」や「じ」等特定の文字と、「ん」、小文字のや行、小文字の「つ」との組み合わせの時だけで
あとは特定の子音１種と母音５種類の組み合わせで成り立つ。
で、大体次のような流れで変換を行います。
以下全文。長いｗ
文章が完成するまでの時間を計測するツールWriting Speed Counter作ってみた。「最初の一文字入力した時点から、変換の確定ではないエンターキーが押されるまでの間」 を１つの文章として判断し、入力に掛かった時間と文字数を表示します。入力した文章のログ表示、結果の平均出力もつけてみた。
ボタンのベース素材。大きい楕円形なのでアイキャッチとかにも使えるかもしれない。fireworks・photoshop・Web(png24)の３形式で配布してるので色とテキスト変更が可能です。[クリエイティブコモンズライセンス]
ちょっとテクニカルなレイアウトのWebサイトテンプレート。
時期ハズレの秋用テーマです…
このテンプレートは１カラムの固定レイアウトで、slideBoxを使用してスクロールバーをカスタマイズしています。
元々ブログ用に作ったものなので、普通のサイトだと使いづらいかもしれません。
コンテンツのスライドはslideBox.js ver1.0を改変してマウスホイール対応にさせてます。
詳しくはこちらの記事を参照»[mootools]slideBox ver1.0をマウスホイールに対応させる
下方向の処理は手抜いてるので普通にスクロールバー出した方がいいかも。
トップページでコンテンツを非表示にするスクリプトと、
マウスオーバーで一言コメント表示するToolTipも仕込んであります
フォントサイズ指定はYUIのやつ使ってます。
クリスマスボックスのフォルダアイコン作っってみた。デスクトップに置いてあるとプレゼント貰った気分になれるかもｗWeb用素材も同封したよー
自分用に作っておいたiframe用のGoogleMapsページテンプレート。必要そうなのは一通り書いてあるので、複製して値変えるだけでおｋ。コピペすれば埋め込みも出来る。LatLngを検索するスクリプトファイルとセットで晒しちゃうよー。
コードビューのカラーリングが違うと計り知れない違和感を感じる件…ってなわけで AptanaのコードビューをDreamweaverっぽい色にするcolファイルを晒してみるテスト。 完全に同じ色にはならないけど雰囲気は似てる … 続きを読む
ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの２カラム固定幅レイアウト。色違いの黒もあります。
半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。
ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの２カラム固定幅レイアウト。色違いの白もあります。
半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。
コンテンツ部分の両端にドロップシャドウを付ける、repeat-y用の背景画像をまとめたパッケージです。 パステル調の８色セット。コンテンツエリアはwidth:900pxです。 サンプルページ フリー素材です。色変更、サイ … 続きを読む
