prototype.jsを利用したスムーズなページスクロール 2007年3月14日 最新のPrototype version 1.5.1_rc1と最新のscript.aculo.usのeffects.jsをを使った超簡単でしかも高機能なページスクロールを実現できる記事を見つけたのでご紹介します。 auto-scrolling page navigation 以下のコードをauto-scroll.jsとして保存します。 Event.observe(window, 'load', function() { $$('a[href^=#]:not([href=#])').each(function(element) { element.observe('click', function(event) { new Effect.ScrollTo(this.hash.substr(1)); Event
dom:loadedは、prototype.jsの拡張イベントです。通常ページを読み込まれた後にJavaScriptを実行するには、loadイベントを使いますが、サイズの大きい画像ファイルなどが存在すると、loadイベントが発生するまで時間がかかります。この場合、dom:loadedイベントを利用すると、ユーザビリティが向上します。ただし、ブラウザの仕様によって動作のタイミングは違います。
HEAD <!-- JS --> <script type="text/javascript" src="prototype-1.5.0.js" charset="utf-8"></script> <script type="text/javascript" src="scriptaculous.js?load=builder,effects" charset="utf-8"></script> <script type="text/javascript" src="tooltips.js" charset="utf-8"></script> <!-- CSS --> <link rel="stylesheet" href="tooltips.css" media="screen" charset="utf-8" /> HTML <ul> <li><a href="#" title="ツー
prototype.js の便利な機能に Form.serialize('フォームのid名前'); というのがありますが、これをテストしてみます。(↓添付ファイルをダウンロード後、prototype.jsを読み込ませて実行のこと) 実行してみてわかることは <textarea name="text" rows="3" id="text_id">bbb bbb bbb </textarea> のところは text=bbb%0Abbb%0Abbb%0A という値が帰ってくるということ。調べたとろ htmlファイルの改行コードが「 LF 」「 CR+LF 」「 CR 」いずれの場合も %0A になる。 id ではなく name の値でシリアライズされる。 という事みたいです。 別ウィンドウのフォームをシリアライズするには。。。 別ウィンドウの DOM document インターフェイスは var
このページはAjaxライブラリの1つであるPrototypeライブラリ系のライブラリの各種サンプルコードを掲載しています。 ミスや間違い、リンクエラーなどがありましたらopenspc@alpha.ocn.ne.jpまでお願いします。 一般的なJavaScriptに関するサンプルに関しては以下のサイトを参照してください。 JavaScript例文辞典 JavaScript例文辞典(新) Last update : 2008/7/23 PM 3:53 2008 Copyright 古籏一浩(KaZuhiro FuRuhata) ■Accordion ライブラリを読み込む アコーディオンを表示する アコーディオンを縦に表示する(横にスライドし展開表示する) 展開速度を指定する 展開処理するためのイベントを指定する 最初に表示するパネルを指定する ■DatePicker ライブラリを読み込む カレ
JavaScriptで配列をシャッフルする話を見て、そういえばArray#shuffleは以前書いた記憶があるなーと思って調べてみたらコピペだった。 http://www.fumiononaka.com/TechNotes/Flash/FN0212002.html Fisher-Yatesというアルゴリズムだそうです。 Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } a = [1,2,3,4,5]; a.shuffle() // 3,1,5,2,4 a // 3,1,5,2,4 ごく普通に実装
昔作った文字数カウントするやつが出てきたのでメモ、 この頃はjqueryをあんまり使って無かったみたい。 Prototypeのversionは'1.5.1.1' 完成デモ demo 主なソース部分 html側 <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/text_count.js"></script> ・ ・ ・ <textarea id="tContents"></textarea> <p>現在の文字数<span id="sCount"></span>文字</p> text_count.js window.onload = function () { fCount_load(); } // ページの初期化 functi
Prototype.jsとはなにか Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリだ。単体でもAjaxian.comの2006年と2007年の調査で最もよく知られたAjaxフレームワークに選ばれるほどの人気を得ているが、実はWebアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。 ライブラリはMITライセンスで公開され、ドキュメントはクリエイティブ・コモンズ(Creative Commons)ライセンスのAttribution-Share Alike 3.0で公開されている。詳細はライセンスのページで確認していただきたい。 これから6回にわたって、こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く