たったの20KBでショッピングカートを実装できるJavaScript『SimpleCart.js』 | 100SHIKI
これはすごいかも。 いわゆるショッピングカート機能を実装するためのJavaScriptのライブラリがSimpleCartだ。しかも20KBというコンパクトなサイズである。 商品の陳列、注文内容の変更や削除、数量変更などをさくっと実現してくれる。なお、実際の決済にはPayPalかGoogle Checkoutを利用することになる。 残念ながら日本で使うにはまだハードルが高いが（言語や決済方法などで）、いざ実装しようと思うと面倒な機能だけにこうしたライブラリは歓迎したいところだ。 こうしたライブラリを活用してどんどん経済が活性化していくと良いですな。
JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
XUL Apps > Tips > 現在のフレームを参照する - outsider reflex
いくつかの方法がありますので、順に説明しましょう。 window._content あるいは getBrowser().contentDocument.defaultView この両者では、現在表示されている内容領域の window オブジェクトを得ることができます。しかし、フレームを使用したページの場合、トップレベルのフレーム（ window.top ）しか参照できません。 document.popupNode.ownerDocument.defaultView document.popupNode.ownerDocument.defaultView は「最後にポップアップメニューを開いた要素が含まれる document オブジェクトが所属している window オブジェクト」で、コンテキストメニューの中で参照すれば、メニューを開いたフレームを確実に参照できます。 ただし、 docume
css + javascript の質問です。 javascript 中で css (外部ファイル) を読み込みたいと思っています。…
css + javascript の質問です。 javascript 中で css (外部ファイル) を読み込みたいと思っています。 そこで以下のような javascript を書いてみました。 var cs = document.createElement("link"); cs.rel="stylesheet"; cs.href="http://foobar.com/styles-site.css"; cs.type="text/css"; document.body.appendChild(cs); IEなどではうまく動くのですが、残念ながら Safari だけはスタイルシートを読んでくれません・・・。 document.write('<link src=... >'); とすれば大丈夫なのですが、できれば document.write は使いたくないのです。 Safari でも使え
Prototype ユーザが 10 分で jQuery を使い出すスレ - ヽ( ・∀・)ノくまくまー(2007-10-07)
● [jQuery] Prototype ユーザが 10 分で jQuery を使い出すスレ さぁ、今夜もはじまりました、熊井ちゃん王国。それでは早速、熊井ちゃんに伝えたい jQuery の魅力 RANKIN Q！ 渋谷の女性300人に聞いた jQuery の好きな所 TOP 10 名前空間の汚染が最小 簡潔明瞭なメソッド名 CSS3 + XPath ちっくアクセス メソッドに対する閉包性 (メソッドチェイン) ● 1. 名前空間の汚染が最小 Prototype では、DOM要素のID指定には $()、CSSセレクタ指定には $$() といったように、多くの関数が global に定義されている。しかし、jQuery で定義された global 変数は $ のみであり、上記の要素指定はどちらも $() で記述できる。(※ CSS 表記なのでIDの場合は'#'が必要) 正確に言えば、jQue
JavaScriptやFirefox拡張開発等に使われるXULの開発環境「Spket IDE」:phpspot開発日誌
Spket IDE Spket IDE is powerful toolkit for JavaScript and XML development. JavaScriptやFirefox拡張等に使われるXULの開発環境「Spket IDE」。 Aptana に続き、Eclipseベースの JavaScript エディタが公開されました。 JavaScript、XUL以外にも、Laszlo、SVG、Yahoo! Widget のコード補完に対応しているようです。 JavaScript開発環境としては、Aptana もすごいですが、Firefox拡張の開発に使われるXULのコード補完は嬉しいですね。 関連エントリ JavaScript開発用IDE:Aptana
JavaScriptやCSSを動的にdeflate圧縮するのではなく、あらかじめ圧縮しておいたものを配信することでサーバーのCPUリソースを節約する « cyano
JavaScriptやCSSを動的にdeflate圧縮するのではなく、あらかじめ圧縮しておいたものを配信することでサーバーのCPUリソースを節約する prototype.jsを10KBにする方法やSafari と gzip 圧縮 JavaScriptなどですでに述べられてることですが、mod_deflateでリクエストがある度にアセット（CSSやJavaScript）にdeflate圧縮をかけるのは、deflate処理が軽いからと言っても、塵も積もれば馬鹿にならない（WWWサーバーやAPサーバーに本来使って欲しいCPUリソースを蝕む）訳で、deflateしたいアセットには予めgzip圧縮してそれを配信し、サーバーのCPUリソースに優しいようにしましょう、というお話。 今回は、予めgzip圧縮するという作業を自動化するために、Railsでよく使われるデプロイツールであるCapistranoを
z-indexの最も大きい値を取ってくる - 考え得る最高を常に行う
zindexの最大値を取ってくる関数を作ってみた。 とりあえずモダンブラウザは全て動いてました。(IE7/Safari2-3/Firefox2/Opera9/NN7) コード var getLargestZIndex = function(){ var largestZIndex = 0; var defaultView = document.defaultView; var func = function(tagname){ var elems = document.getElementsByTagName(tagname), len=elems.length; for(var i=0; i<len; i++){ var elem = elems[i]; var zIndex = elem.style.zIndex; if (!zIndex) { var css = elem.curre
jan.varwig » REST in Place
_______ / \ | R.I.P.| | | | | ------------- REST in Place is an AJAX Inplace-Editor that talks to RESTful controllers. It requires absolutely no additional server-side code if your controller fulfills the following REST preconditions: It uses the HTTP PUT method to update a record It delivers an object in XML form for requests with “Accept: application/xml” headers The editor works by PUTting the
ppBlog official
さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。 まず、1.CSSのみの方法から １．基本的な考え方は、HTML(あるいはBODY)タグのスクロールバーを非表示にして、かわりにDIVタグ(HTMLならBODYタグ)のスクロールバーを表示させる方法です。具体的な記述は以下のようになります。 html { overflow: hidden; } body { height: 100%; overflow: auto; } 次に、固定表示したいDIVタグ(タグは何でも良い
エレメントの位置固定 - Thousand Years
よくJavaScriptでスクロールしても同じ位置にエレメントを固定させているテクがあり実装されているところも少なくない。でも僕はあんまり好きではない。というのもスクロールさせたさいに”チラツク”から嫌いです。ちらつかなければな…と思いこんなコードを実装してみた。ちらつくのが嫌なので是非ちらつかないコードを実装して欲しいです。 一般的だと思うコード(ちらつきコード) window.onscrollを利用してイベント発生のつど書き直している。サンプルページ → http://www.starmsg.net/misc/2006/09/190309.html。はやくスクロールさせればさせるほどちらつく。 <style type="text/css"> #fixed { position: absolute; top: 300px; left: 64px; width: 100px; height
JavaScript で簡単にスタックトレースを取るテクニック
Firebug を使うと console.trace(); これだけでスタックトレースを取ることが出来ます。 でも、 XUL の開発とか、人のブラウザで Firebug が入ってない時とかは出来ないので、 そういう時は、 alert(Error().stack); これだけで出来ます。まあ Firefox only ですが。
最速インターフェース研究会 :: Safariでreplace callback のエミュレーション
replaceメソッドをhackしてsafariでもreplace callbackを使えるようにしてみた。Safari バージョン 2.0.2（416.13）で上手く動いたそうです。手元に環境が無いので細かい検証はできませんが、とりあえず。 http://la.ma.la/misc/js/replace_callback/ 解説JavaScriptのString#replaceメソッドは文字列を置換して新しい文字列を返すメソッドですが、第二引数に置換後の文字列を指定する代わりにfunctionオブジェクトを渡してやると、Perlでいうところのeオプションみたいなことができます。 // 大文字を小文字に、小文字を大文字に String.prototype.swapcase = function(){ return this.replace(/([a-z])|([A-Z])/g,functi
はてなスターの認証強化について - はてなスター日記
先ほど、はてなスターの仕組みを変更し、正常なはてなスターのコード以外で☆が付けにくくなりました。 これまでの仕様では、画像（img）タグなどに☆を追加するためのURLを仕込ませるだけで、そのページにアクセスしただけで☆をつけたことになってしまうなどの問題が発生していましたが、今回の変更により、セッションごとに暗号化された文字列を追加でやりとりするようになり、意図しない☆がつきにくい仕組みになりました。 なお、既存のはてなスターを設置のユーザー様は、特に設定の変更などは必要ございません。 新しい仕様でも、JavaScriptが実行可能な環境で意図的にスクリプトを仕込むことで意図しない☆が付く動作を実行させることが可能ですが、はてなダイアリーやグループなどのJavaScriptを自由に書くことができない環境ではこのようなことはできなくなっています。 はてなスターでは、外部のブログサイトなど様々
IFRAME の内容を動的生成する正しい方法 - WebOS Goodies
先日 Firebug Lite ブックマークレットを公開しましたが、動的生成した IFRAME に HTML を流し込むとブラウザが読み込み状態のままになってしまう（ロード中アニメーションなどが再生されっぱなしになる）という問題がありました。 IFRAME の動的生成はいろいろと応用範囲が広いので、なんとかこの問題は解決しておきたいところです。そこでいろいろと試行錯誤して、なんとか回避方法を見つけることができました。本日はそれをご紹介しようと思います。 さっそく種明かししてしまいましょう。実は答えはいとも簡単でした。 document.write で HTML を流し込む前後で document.open と document.close をきちんと呼ぶ必要があるようです。こんな感じですね。 var iframe = document.createElement('IFRAME'); do
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Purchase Intent Data for Enterprise Tech Sales and Marketing - TechTarget
403 アクセス禁止
掲示板/JavaScript質問板［過去ログ］/一覧/テキスト選択の禁止について - TAG index Webサイト
replace callback emulation for safari
http://youmos.com/reference/scrolltop_pos