jQuery Circulate
Prereqs Requires the jQuery Library as well as the Easing plugin. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type='text/javascript' src='js/jquery.easing.1.2.js'></script> <script type='text/javascript' src='js/jquery.circulate.js'></script> Usage / Options / Defaults $("#anything).circulate({ speed: 400, // Speed of each qu
JavaScriptでヒアドキュメントや簡易テンプレート - latest log
JavaScriptでもヒアドキュメントやテンプレートが使えれば便利だし、それらを組み合わせてコードの塊(スニペット)にできれば便利だよね。 ってことで、既に同様のアイデアはゴロゴロしてそうなんですが、自分用にざざっと叩き台を書いてみました。 DEMO http://pigs.sourceforge.jp/blog/20100505/test/demo.snippet/uu.snippet.htm <!doctype html><html><head><meta charset="utf-8" /> <title></title> <script src="src/uupaa.js"></script> <script src="src/uu.snippet.js"></script> <script> function xboot(uu) { var arg = { PHPStyleAr
[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
HTML 5 data- Attributes - LEMON IN THE BOOKSTORE
こんなかんじ？ var $D = (function(){ var camelize = function(string){ return string.replace(/-+(.)?/g, function(match, chr) { return chr ? chr.toUpperCase() : ''; }); }; return function(element){ if( element.dataset ) return element.dataset; var sets = {}; for(var i=0,a=element.attributes,l=a.length;i<l;i++){ var attr = a[i]; if( !attr.name.match(/^data-/) ) continue; sets[camelize(attr.name.replace(/^da
IE8とIE9pp の非互換性(event) - latest log
IE9正式版ではなく IE9pp(IE9 Platform Preview) や IE9pp2 の現状について記載しています。 IE9ppがDOMの仕様に合わせたため、IE8までとは互換性がなくなっている部分をちょこちょこ書いていきます。 IE9pp の event イベントハンドラが受け取る event オブジェクトは DOM Level3 Event の仕様に従うようになりました。 IE9pp では event.button の値が変化 event.button の値が 0(left click), 1(mid click), 2(right click) になりました。 IE8 までは各ボタンの同時押しを判定できたため、どのボタンが押されているかはビットアンドで比較する必要がありました。 event.button & 0x1 が true なら left click event.bu
JavaScript連載第4回 - os0x.blog
これでできる！ クロスブラウザJavaScript入門 第4回 JavaScriptの基礎知識#1 今回は少し基本に戻ったお話です。いや基本といえば基本だけど、わかりにくい・間違いやすいだろうなというところにスポットを当ててます。 この連載で意識しているのは、「JavaScriptは専門じゃないけどライブラリとか使って、本当にこれでいいのか不安を感じつつもJavaScriptを書いてるプログラマ」です。と、改めて考えたら高階関数とかクロージャーは書いておくべきだなと。JavaScriptって(サーバーサイドの)他の言語を専門にしてる人が(言い方悪いけど)片手間で書いてることが多いので、そういう人は結構多いだろうと思っています。 プログラミングには大抵「動く」という正解があるけど、JavaScriptではクロスブラウザを考えるとその正解のハードルがすごく高くなります(いや、高くというよりハー
[作って学ぶ！jQuery] 第0回 jQuery とは？ | バシャログ。
こんにちは、kimoto です。最近暑くなったり寒くなったりで落ち着かない気候ですが、みなさんいかがお過ごしでしょうか。 私は階段で転んで肩と二の腕を痛めました。気候関係ないですけど。 さて、今や JavaScript ライブラリと言えばコレ！と言うくらい人気のある jQuery 。 その jQuery にスポットを当てて短期集中連載をしていこうと思います。 実際に使えるサンプルを題材に、概要を学べる内容にしたいと思っています。 本日は第 0 回という事で、jQuery とは何か？という所から始めたいと思います。 jQuery とは、JavaScript ライブラリの一つで、現在もっとも人気のある JavaScript ライブラリだと言われています。 MIT License と GNU General Public License のデュアルライセンスで、フリーかつオープンソースです。 J
![[作って学ぶ！jQuery] 第0回 jQuery とは？ | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
新しいjQueryのプラグイン25 – creamu
86501330, Jupiterimages/ Goodshoot/ Thinkstock かっこいい動きが実装できるjQueryプラグインを探している。 そんなときにおすすめなのが、『25 Amazing and Fresh jQuery Plugins』。新しいjQueryのプラグイン集です。 既出のものがありますが、動きの洗練されたものがまとまっています。 YoxView – jQuer Image Viewer Plugin lightbox系のかっこいいスライドショー Uniform – Sexy forms with jQuery ラジオボタンやファイル選択ボックス、チェックボックスをjQueryでデザイン。ホワイト、グレー+ブルー、ブラックの3タイプがダウンロードできる jQuery Form Wizard Plugin フェードイン&アウトで遷移するバリデーション付きのフ
第3回はクロスブラウザの傾向と対策 - os0x.blog
これでできる！ クロスブラウザJavaScript入門：第3回 クロスブラウザの傾向と対策｜gihyo.jp … 技術評論社 と、今さらですが、連載全体としては連載：これでできる！ クロスブラウザJavaScript入門｜gihyo.jp … 技術評論社からどうぞ。 今回からいよいよクロスブラウザの本題に入ってきました。前回の記事について、バッドノウハウを広めるのはどうよ的なツッコミがあり、はてなブックマーク - clear sky source - とてもCSSハックが面倒ですので、何か用意してくださいのedvakfさんのコメントなどに影響されたところもあって、かなり標準仕様への準拠を意識した内容になっています。正直、すごいハードルが高くなるので不安はありますが、折角なので頑張ろうと思っています。 あと正直、何が辛いかというとDOM Level 0周りのドキュメントの少なさが一番きついで
Internet Explorer リーク パターンを理解して解決する
Justin Rogers Microsoft Corporation June 2005 日本語版最終更新日 2006 年 2 月 3 日 Web 開発者の進化 以前は、メモリ リークは Web 開発者にとって大きな問題ではありませんでした。ページは比較的単純に保たれ、サイト内の異なるロケーション間のナビゲーションは解放されたメモリをクリーンアップするうえで優れた方法でした。リークがあった場合も、たいていは気付かないほど小さなものでした。 新しい Web アプリケーションは、より高い標準に従います。ページはナビゲートされずに何時間も実行され、Web サービスを通じて更新情報を動的に取得する場合があります。複合イベント スキーム、オブジェクト指向の JScript、およびアプリケーション全体を生成するためのクロージャを組み合わせることで、言語機能が限界点に達します。これらの変更およびその他
メモリーリークパターンを理解する - babu_babu_babooのゴミ箱
メモリーリークに関する覚え書き メモリーリークとは コンピュータの動作中に、使用可能なメモリ容量が、だんだん減っていく現象。 OSやアプリケーションソフトが、処理のために占有したメモリ領域を、解放しないまま放置してしまうために起きる。 メモリーリークパターン（以下のタイプを考察） ドキュメントツリーに属さないノードに、イベントを貼り付けた場合。 DOM プロセッサが管理しているオブジェクトと、スクリプトエンジンが管理しているオブジェクト、が混在した場合 いわゆるクロージャが、その混在を招くパターン（これが難解） メモリーリークに該当しないもの DOM プロセッサが管理している変数が、グローバル変数である window, document は、グローバル変数なので、該当しない。 ドキュメントツリーに属さないノードに、イベントを貼り付けた場合 ページを破棄するときに、ドキュメントツリーのノード
最速インターフェース研究会 :: IEでXMLHttpRequestを使えるようにする
もうあんまり需要無いような気もするけど。 IEで「new XMLHttpRequest」と書けるようにするラッパを書いてみた。 XMLHttpRequest for IE http://la.ma.la/misc/js/ie_xmlhttp.html 結構前にIE7(JavaScriptの方)の人が似たようなのを作ってたのですが、 http://dean.edwards.name/weblog/2004/11/ie7-xml-extras/ ふつうに使う分にはこれでも問題はないです。 if(typeof ActiveXObject == "function" && typeof XMLHttpRequest == "undefined"){ XMLHttpRequest = function(){ return new ActiveXObject("Microsoft.XMLHTTP")
<script>タグから読み込んだjsのディレクトリを取得 - prog*sig
<script src="..."> という感じでjsファイルを読み込んで、src部分が http://example.com/lab/test.js であるとき、 http://example.com/lab/ を自分自身で取り出す方法を模索する。 自分自身のsrcを調べる方法は とてもシンプルに自分自身が属する script 要素を取得 - IT戦記 http://d.hatena.ne.jp/amachang/20061201/1164986067 で大体いいと思います。 もしくは var n=document.getElementsByTagName("script"); n[n.length-1].src; // 自分自身のurl 相対パスの場合とか調べてないけど、今回の主題はディレクトリを取り出すとこなので後回し。 Twitterでどういう方法があるのだろうと投
細かいJavaScriptの仕様や習慣やテク集 - 三等兵
気づいたことやミスしたことなどメモしていたので確認作業。細かい仕様だったり暗黙のルールだったり、テクニックだったり。JSに慣れていたら当たり前なことばかりかもしらん。 追記のところはid:os0xさんより。ありがとうございます！ undefined var a; alert(a) // undefined 宣言だけだとundefined。undefinedというのは、宣言している変数に値が入っていませんよ、ということ。 そしてオブジェクトには無いプロパティとか参照すると出てくる。 var a = 100; alert(a.length); // undefined さらに引数も。 function func(val) { alert(val); } func() // undefined 引数はCallオブジェクトってのに格納される。このオブジェクトはローカルの変数が格納されるオブジェクト
JavaScriptでSVGのレーダーチャートを描画するライブラリ Raphael Radar をつくった - I CAN ’CAUSE I THINK I CAN!
概要 JavaScriptでSVGを描画するライブラリRaphael.jsを使って、 操作可能なレーダーチャートを描画するライブラリ Raphael Radar を作りました。 Raphael Radar は次の2つの機能を持ちます。 レーダーチャートをSVGで表示 レーダーチャートの各軸の値をフォームと対応づけて、インタラクティブに値を選択 (2)の機能は任意で無効化して単純なレーダーチャートとして利用することもできます。 入手と使い方 依存ライブラリ Raphael Radar を使う前に、2つのライブラリをインストールする必要があります。 Raphael.js (1.3.1 以降) jQuery (1.4.2 以降) もしうまく動作しない場合、Raphael.jsとjQueryのバージョンを合わせてみてください。 インストール方法 上記の依存ライブラリをインストール Raphael
Embedder's Guide - V8 JavaScript Engine - JavaScriptで遊ぶよ - g:javascript
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Greasemonkeyスクリプトの開発で役に立ったサイトや本 - Alone Like a Rhinoceros Horn
Firefox にこんな機能があればいいなあ → ん、Greasemonkey というのでできるらしいぞ → ユーザースクリプトとやらを書けばいいのか → どうやって書くんだ？ というところからスタートして、最終的に自作のユーザースクリプトを公開するに至るまでの間、参考にしたサイトや本をできるだけ自分の学習順に時系列に沿って列挙してみました。 JavaScript を少々かじったことのある人が Greasemonkeyスクリプトを書いてみようと思い立ったときに、その学習の指針というか、道標のようなものとして役立つリンク集になればいいなと思ってます。 Greasemonkey まずは Greasemonkey ってなんだとか、ユーザースクリプトってどう書くんだというのを調べるところからスタート。（以下小見出しがリンクになっています） Greasemonkeyの開発をまとめてみる ここで Gr
第4回 JavaScriptの基礎知識#1 | gihyo.jp
こんにちは、太田です。前回はクロスブラウザのパターンについてまとめました。今回はより具体的にJavaScriptの基礎的な部分からそこそこJavaScriptに慣れた方でも間違いやすいポイントを中心に解説します。 JavaScriptの背景知識 JavaScriptは（未だに）誤解されがちな言語です。まずはJavaScriptの背景から解説していきます。 （広義の）JavaScriptとはEcma Internationalによって策定されているECMA-262という規格（ECMAScript）を実装した処理系で実行される言語を指します。遠回りな表現になっていますが、これはJavaScriptのややこしさの一端を表しています。つまり、JavaScriptそれ自体に仕様があるわけではない、ということです。ECMAScriptと呼ばれる言語の仕様があって、その仕様に準拠した言語を（広義の）Ja
140文字以内で DOMContentLoaded - latest log
DOM構築完了またはそれ相当のタイミングで (どこかで定義されている)関数A をコールバックします。 function Z(){try{(new Image).doScroll();A()}catch(e){setTimeout(Z,0)}} +[1,]?document.addEventListener("DOMContentLoaded",A,!1):Z() 130byteで驚きの読み辛さ。 ヒューマンリーダブル版 (function() { function IEDOMContentLoaded(){ try { (new Image()).doScroll(); // [!] throws A(); } catch(err) { setTimeout(IEDOMContentLoaded, 64); // delay after 64ms } } // IE6〜IE8を判定(IE8
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5で何が変わる？ InfoTalk#17 フォトレポート － ＠IT自分戦略研究所