スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset [ad#ad-2] vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、7つのツールとそのコードを紹介します。 ※外部ファイル・スタイルシートは省略 スライダーのデモページ div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。 HTML <!-- the slider content holder --> <div class="slider"> <!-- the elements inside the s

jQuery Shadow Plugin ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」。 次のようにボックス要素に対して影を自由に付けられるプラグインです。$(elem).shadow(option); という風にするだけなので使い方は簡単ですね 単なるボックス要素があっというまにクールになりますね 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」 ブラウザ上でサインを書けるjQueryプラグイン「jSignature」 JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 ページめくりを実現するためのjQueryプラグイン集

最近, JSX やら enchant.js やら arctic.js やらで JavaScript 界隈はすごく盛り上がっています. そんな中, 私自身も一石を投じようと本日 JavaScript ライブラリ 『tmlib.js』を公開しました!! リニューアルって言った方が良いのかな？ 実際には, ２年前に作っていたライブラリ 『tmlib』 を大幅に改良したものになります. 私一人でコツコツと作っていたものなのでクォリティは低めです. 誰か協力してくれー!! コンセプトは『JavaScript をより使いやすく, より便利に, そしてより豊かに』とざっくりとした感じ. やってることは 生成時に new がいらない class 定義の仕組みを作ってみたり jQuery ライクに DOM を扱えるようにしたり ajax 機能をサポートしてみたり HTML5 Canvas をラップして使いや

予め、script.aculo.usからjsファイルをダウンロードしておく。 普通はscriptaculous.jsにリンクするのだが、今回はscriptaculous.jsがインクルードするjsファイルの中でもeffects.jsしか使用しないので、読み込み量をケチるために、effects.jsを単体で読み込む。また、このライブラリはprototype.jsが必要となるので、先にprototype.jsも読み込んでおく。 ●マウスオーバーでフェードインバージョン ※ちと急に現れるのでユーザーの心臓には悪げ。 ・後から現れる部分 <div id="sample01" style="width:●px;height:●px;background:url(xxx.gif) no-repeat;padding:10px;display:none;"> <p>サンプルでーす</p> </div>

サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは本日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

Overview Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. Note: An new version of this script is available: Lightbox JS v2.0 Example To make sense of it all, check out these examples. Click on a thumbnail or text link below: Benefits Places images above your current page, not within. This frees you from t

JavaScript Reference src 関連オブジェクト : Image タイプ : プロパティ 書式 document.画像名.src = "画像のURL" サンプル myURL = document.myImage.src document.write(myURL); 表示した画像が配置されている URLを参照、または設定します。指定する画像形式は GIF、JPEG のどちらかになります。 結果 Top / Home / Index / Next

ブロードバンド環境が整いつつあるとはいえ、画像を使用しすぎるとローディングが長くなります。 lazierLoadは見えている部分の画像のみを読み込んで表示するjavascriptです。 sponsors 使用方法 lazierLoadからlazierLoad.jsをprototypeからprototype.js（v1.6）をダウンロードします。 <script src="http://yourdomain/prototype.js" type="text/javascript"></script> <script src="http://yourdomain//lazierLoad.js" type="text/javascript"></script> 以上で完成です。 なお読み込む時に表示する画像はlazierLoad.jsの46、47行目で変更します。 this.options.re

lazierLoad is Bramus! his take at writing a delayed javascript image loader for use with PrototypeJS. lazierLoad automatically hooks itself to the page, finds all images and only loads those appearing “above the fold” resulting in faster page loads. The images not located in the viewport, are not loaded until they appear within it (viz. when the user scrolls down). The idea for lazierLoad was insp

yamaokaです。 webページの表示を高速化する手法にはいろいろありますが、 その一つとして遅延読み込みという手法があります。 初期状態で表示する必要のない要素については読み込まず、 必要になったタイミングで読み込み、表示するようにする手法です。 ページの読み込みにかかる時間の大半を 画像の読み込みが占めている場合が多いので、 画像の読み込みを遅延させるという手法が多く取られます。 検討するべきケース では、画像の遅延読み込みはどのような場合に検討されるべきでしょうか。 最初から表示されている必要がない画像が存在し、その画像のサイズが大きかったり、 そうした画像の数が多い場合は検討してみる価値があると思います。 例えば、次のようなケースです。 初期状態では表示されないブロックに属する画像が存在し、 JavaScriptで表示するかしないかを切り替えているような場合 ページのずーっと下の

ホーム ＞HTMLに役立つヒント＞ JAVAスクリプトコレクション ＞ 文章を折りたたんだり表示したり 文章を折りたたんだり表示したり 「しらぎく折り畳みスクリプト」に刺激され、もっとシンプルな折りたたみ方式を考えてみようと、やってみた。 考え方は単純だ。文章の表示/非表示はCSSのdisplay指定で行う。JAVAscriptでこの指定の値を「none/block」に切り替えることで文章を見えるようにしたり折りたたんだりする。 基本はこれだけ。では作ってみる。 CSSを使って見えたり見えなかったりする部分を、あらかじめ「display:none;」として見えなくしておく。ここにはIDも仕込んでおく。IDはユニークなもの（他に同じものがないという意味）であればなんでもいいが、ここでは「SH-001」とした。 <div id="SH-001" style="display: none"> こ

スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ：別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要