JavaScriptの勉強会資料を公開 - os0x.blog
私が講師役をしている社内向けJavaScript勉強会の資料をまとめて公開しました。 実践JavaScript - 株式会社ALBERT 社内勉強会資料 1回目を書いてからだいぶ間が空いてしまいましたが、その分6回分をまとめて、インデックスや見た目等々を整理してあります。 コードのハイライトには google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting を使用してみたのですが、すごく重かったので出力結果を静的に使っています。 オススメ回は実践JavaScript - JavaScript特有の問題・クロスブラウザなど - 株式会社ALBERT 勉強会資料でしょうか。特にクロスブラウザなDOMサイズ取得は自分でも良く参照してます。 間違いなどありましたら
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
How To Use Pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins
How To Use Pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins Everybody knows about web forms and it has fast becoming part of our daily online interaction. Everyday we will need to enter some sort of information into a web form, whether it’s a simple login to your web-mail account, an online purchase, or signing up for a website. These are the basic, and pretty much the eff
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
クリエイター手抜きプロジェクト［172］Illustrator CS3編 アンドゥアニメーション／古籏一浩
クリエイター手抜きプロジェクト［172］Illustrator CS3編 アンドゥアニメーション ── 古籏一浩 ── 投稿：2008年06月23日 著者：古籏一浩 llustrator CS3から、新たにアンドゥ、リドゥ機能がスクリプトから制御できるようになりました。不思議なことに、Photoshopには標準でヒストリーパレットがあり、任意のヒストリーに戻せるのに対して、Illustrator CS3ではヒストリーパレットもなく、手作業またはバッチで一定回数アンドゥを繰り返して元に戻す、といった作業をしなければなりません。 また、機能が使えるようになったと言ってもヒストリー機能はないので、何回アンドゥしたのかが全く不明です。 20回前に戻したいなら for(i=0;i < 20; i++) app.undo(); のスクリプトで元に戻すことができます。 戻す時にapp.redraw()
404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節
2008年05月20日14:15 カテゴリLightweight Languages javascript - 勝手に添削 - textareaの高さを自動調節 これはなかなかいいですね。 textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました Firefox 2, Safari 3, Opera 9で動作確認してあります。 イチ に 三 function resize_textarea(ev){ //if (ev.keyCode != 13) return; var textarea = ev.target || ev.srcElement; var value = textarea.value; var
Nihilogic: JavaScript Super Mario Kart
For comments and more info, go here for the blog post discussing this game. For more JavaScript game experiments, click here. Use mouse to select driver and map. Use arrow keys to drive. Quality: Screen size: Render mode: Music: Please note that the settings only take effect when the race is on. Click somewhere on the page if the game doesn't respond after changing something.
ロールオーバーを簡単に実装する-Image Rollover Code-
ロールオーバーを簡単に実装する-Image Rollover Code- Image Rollover Codeはロールーオーバーを簡単に実装する為のjsライブラリです。 設置方法 配布元のDaniel Nolanのサイトよりrollover.jsを取得し、head要素内などで読み込みます。 <script src="rollover.js" type="text/javascript"></script> ロールオーバーを実装したいimg要素のclass名に『imgover』を指定します。 <img src="sample.jpg" alt="Some Image" class="imgover" /> すでに、他のclass名がつけられている場合は、半角スペース区切りで指定することにより複数のclass名を指定する事が可能です。 <img src="sample.jpg" alt="S
画像やページをLightBox風に表示できるThickbox:phpspot開発日誌
Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の説明文を入れます。 <a href="images/image2.jpg" title="画像と一緒に表示させたい文字列" class="thickbox"><img src="images/image2_t.jpg" alt="Image 2"/></a> たったこれだけで、次のようにLightBox風に画像を開くことが出来ます。 titleで指定した説明文が画像の下に入ってます。 次にHTML
JavaScript Tips & Technique
操作方法 → キー: 次のページへ ← キー: 前のページへ ↑ キー: 目次ページへ ↓ キー: 目次ページから戻る 目次ページでは ← → キーで一覧を移動し、クリックで選択します 10 年。 世界が JavaScript の真の実力を発見するのに要した時間である。 1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、 ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。 JavaScript は、Web の「あちら側」と「こちら側」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 10 年を自らの手で創り出す
[JS]デザイナーのためのjQueryのチュートリアル
Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
なんでも単語帳化スクリプト
書いてみた。こいつを「なんちゃら.js」として格納しておいて、本体側からはとでもして読み込むだけ。内に書いた内容が全部マスクされて、左右の矢印キーでめくったり戻したりできる。1192つくろう鎌倉幕府、みたいな var tangoMask = "####"; var tangoMaskColor = "red"; var tangoClass = "tng"; var tangoElems; var tangoIdx; var tangoMemory; function keyhandle(e) { if (document.all) { e = event; } //IE if (e.keyCode == 39) { tango_forward(); } if (e.keyCode == 37) { tango_backward(); } return true; } function t
web-conte.com | blue | Lightbox JS v2.0 と Flash
web-conte.comでも画像の拡大表示時に使っている「Lightbox JS v2.0」。これ、ページ内にFlashが同居していると厄介なのである。自分のサイト（ここ）だとそもそもFlashを置いていないから気づきにくい問題なのだが、先日あるサイトを作っていてこのことに気づいた。Flashオブジェクトは z-indexなどの指定を無視し、基本的にドキュメントの最前面にあるように表示されてしまうため、Flashだけは背景に追いやられず、Lightboxで拡大表示させた画像のさらに手前に出てきてしまう。 このことの解決策はひとまずあって、たとえば「小粋空間: Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」などの解説が丁寧だ。要は、Flashを埋め込む際の記述のひとつに「背景を透過する」という命令にあたるものがあって、それを書き加えてやればいい。
VoxもmixiもGmailも早くなる!? JavaScriptのおまじない - カイ士伝
VoxもmixiもGmailも早くなる!? JavaScriptのおまじない（ただしXP＆IE6限定）スター users ※Windows XPでInternet Explorer 6を使っている向けの情報です。 何回かのエントリで書いている通り、毎週Voxで行なわれている「美味しい動画コンテスト」に参加しているのですが、Voxが重いのがちょっと困ってました。ページが出るのに時間がでるだけでなく、タブブラウザでタブ開きまくってるとブラウザ自体がフリーズすることすらあったので。 最近mixiもユーザー数が増えたからかかなり重くなってて大変こまりもの。仕事中はmixi日記は書かないので夜にまとめて書こうと思うとあまりの重さに書く気なくしてしまう、なんてことがここ最近しょっちゅうでした。 そんなことをちょいと愚痴っていたら、ある日天の声がとどいたのです。 てんくうの ちをひきし わかものよ この
InfoQ: JavaScriptへのマルチスレッド・プログラミングの導入
function backgroundLoad ( ids ) { for ( var i=0; i < ids.length; i++ ) { var a = getArticleWithCache(ids[i]); backgroundLoad(a.children); } } このbackgroundLoadはIDの配列を引数に取り、その各IDに対して上で定義したgetArticleWithCacheを呼び出します。これでIDに対応する記事のデータがキャッシュされます。そして読み込んだ記事の子記事のIDに対してbackgroundLoadを再帰的に呼び出すことで、ツリー全体をキャッシュすることができます。 ここまですべてうまくいっているように見えます。しかし、一度でもAjax開発を経験したことのある方ならば、これではうまくいかないということはすでにおわかりだと思います。これまでの例で
MarkeZine：◎JavaScriptを利用してGoogle Analyticsを賢く活用する
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
ECMAScript 第4版の最終ドラフトが公開 - JavaScriptデベロッパは注目を | エンタープライズ | マイコミジャーナル
The ECMAScript groupは22日(米国時間)、「ECMAScript 4th Edition Language Overview」の最終ドラフトを公開した。ECMAScript 4th Editionは1999年にスタンダードECMA-262として認可された3rd Editionの次に当たるバージョン。3rd Editionと互換性を保ちながらも言語機能(クラス、インタフェース、名前空間、パッケージ、プログラムユニット、アノテーション、静的型チェックと検証)、スクリプティング(構造型、ダック型、型定義、マルチメソッド)、データ型構築子(パラメータ型、アクセッサメソッド、メタレベルメソッド)、制御アブストラクション、イントロスペクションなどに及ぶ、大幅な機能追加/強化が実施されている。 4th Editionではさらに正規表現とUnicodeのサポートが改善されている。ECM
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Welcome to Tablecloth テーブルのマウスオーバーを色変更