はてなブックマーク

シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。 シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。（※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。） 表示コンテンツの切り替えができること。コレが本命。とっても

スクロールで背景画像がズレるやつを制作しました。パララックスとか言うやつですね。まあコンテンツごとの背景がズレるだけなので、視差と呼べるかは微妙ですけれど、他のをみるとそう呼んでもいい感じですね。 とりあえず今回のウリはタイトル通り単純だけど簡単ってところです。パララックスする要素をまとめて指定するだけでOK。あとは動きの量を調整したければする位です。まあ、大したモノではありませんし、もう新しいって程でもありませんが、チョット試してみようかなって思ってる方にはイイかもしれません。 Demo 必要なファイル jquery.js 対応ブラウザ Google Chrome Safari Firefox Internet Explorer7～ Opera ※Windowsのみの確認です。また、Internet Explorer以外は記事投稿時の最新版を対象にした確認です。 コーディング＆設定 HT

IE6ではa要素以外に:hover擬似クラスを使用できず、min-widthプロパティも効かないので、HTMLヘッダー内に以下のスクリプトを読み込んで対応する。 以下の様にul#dropdownmenu内にリストの入れ子をつくる。入れ子の数に制限はない。 <ul id="dropdownmenu"> <li><a href="#">テキスト</a><ul> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> </ul></li> <li><a href="#">テキスト</a><ul> <li><a href="#">テキスト</a></li> <li><a href="#">テキスト</a></li> </ul></li> <li><a href="#">テキスト</a><ul> <li><a href="#">テキスト

前に作ったフォントサイズを変更するjQueryのスクリプトの改良版です。元々はフォントサイズ切替用のスタイルシートを作るのがメンドイので作ってみました。改良点は画像でもテキストでも使えるし、クリックするとアクティブ用のクラスが付くのでCSSを適応できます。さらにロールオーバー画像のオンオフも切り替えれます。おまけにフォントサイズの段階（標準・大とか小・中・大みたいな）もいくつでも設定できます。ちなみにプラグイン風？に作りました。もちろん自己満の為です。 画像タイプDemo テキストタイプDemo 対応ブラウザ Google Chrome Safari4~ Firefox3~ Internet Explorer6~ Opera11 ※Windowsのみの確認です。 ※IE6はテキストタイプの場合、a要素を使用していない為ホバー機能が効きません。a要素を追加しても問題ないかと思いますが、リンク

シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。 シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。（※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。） 表示コンテンツの切り替えができること。コレが本命。とっても

フォントサイズを変更するスクリプトを探していましたが、お気に召すものがなかなか見つかりませんでした。CSSを切り替えないタイプのものが欲しかったのですけれど。フォントサイズ変更用のCSS作るのもイヤだなと思いましてね。仕方ないので、最近チョコチョコと触りはじめたjQueryで作ってみました。でも汎用性は良くないし不具合もあるかもしれません。それにもっとスマートに書けるとも思います。でも今はこれが精一杯です。 Demo ※改修したものを公開していますのでよろしければCSS切替なしでフォントサイズを変更するjQueryのスクリプトをご覧下さい。 必要なファイル jquery.js jquery.cookie.js コーディング＆設定 HTML HTMLヘッダー内でjquery.js、jquery.cookie.jsを読み込む。 <script src="jquery.js" type="tex

JavaScriptを使ったロールオーバーって大体imgにクラス名を追加するだけで出来るタイプが多いですよね。同じ感じでアニメーションロールオーバーも出来たらいいよね！って思って作りました。きっと同じ様に思っている人もたくさんいるはずだし。。。まー、ソースも綺麗じゃないし、バグだってあるかもしませんが、きっと誰かが素敵に書き換えてくれるでしょう。既にあるかもですが・・・。 Demo ※プラグイン化したものを公開していますのでよろしければ画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのプラグインをご覧下さい。 必要なファイル jquery.js（ver 1.4.3～） 対応ブラウザ Google Chrome Safari4~ Firefox3~ Internet Explorer6~ Opera11 ※Windowsのみの確認です。 コーディング＆設定 HTM

このサイトを初めてから3連続でjQueryの記事になってしまいました。他の記事も書かなきゃと思っているのですが、記事の為の記事なんて書きたくないと思い、結果今はまっているjQueryの記事になってしまってます。そんな今回はタブ切替コンテンツです。まー、よくあるものですが自分にとってはいつも通り大変でした。一応これでも、動けばいいって感じではなく美しいをコードを目指して端正込めて作ってます。 Demo 必要なファイル jquery.js コーディング＆設定 HTML HTMLヘッダー内でjquery.jsを読み込む。 以下の様にul#tabchange内のliとdiv#tabchangeContents内のdiv.tabchangeBoxは同じ数だけ用意する。数はいくつでもよい。次にdiv.tabchangeBox内にコンテンツを記述する。タブとコンテンツの関係は記述順になっている。 #bo

ハイきました。待望のCanvasです。イロイロ頑張って動かしてみました。お手製の雑なイージング付きです。分かりやすいよう多少ウザ目に作っていますが、調整したら普通のページに組み込んでもイケるかも。結構重いですけどね。。。 自分ならCanvasで何をしたいかと考えたすえに、Flashの様なリッチ感をだしたいと思いたちこの内容にしました。いろんなサイトで見るCanvasに比べたらマダマダですが、どうぞご覧アレ。 Demo ※新バージョンを公開していますのでよろしければCanvasで実現するカラフルな円が小さくなったり大きくなったりする背景2をご覧下さい。 必要なファイル jquery.js 対応ブラウザ Google Chrome Safari3~ Firefox2~ Opera10.6 ※Windowsのみの確認です。 IEも頑張ればちゃんと表示できそうですが、どのみち処理が重いので除外しま

イロイロとプラグインやらナンやら巷に溢れていますが、「そんな高機能はいらない」「もっとシンプルなのがいい」って思ってるあなたへ。今回はシンプルで簡単に実装でき、よく使いそうなjQueryのスクリプトをまとめて紹介します。まあ独断と偏見によりますが。それではどうぞ。 準備 今回のスクリプトは全てjQueryを必要としますので、まずはそちらの導入から始めます。 必要なファイル jquery.js 設定 HTMLヘッダー内でjquery.jsを読み込む。 準備が出来ましたら、どうぞスクリプト達と戯れて下さい。 1.画像のロールオーバー 野に咲く花のように巷に溢れているスクリプトだと思います。単純かつ効果的。無くても大丈夫だけど無いとなんだか寂しい。そんな時こそ彼の健気なココロを知るのです。そんな素敵な存在です。 Demo HTML ロールオーバーを設定するimg要素にclass="rollove