ページ遷移前に確認をする、onbeforeunload - 実用
JavaScriptwindowのonbeforeunloadハンドラで、Event#returnValueに値を入れると、ページ遷移直前にユーザーに確認ダイアログを表示することができる(んだって)。 以下コードの正常動作を、Firefox 2.0とIE 7で確認した。Operaでは実行されなかった。 window.onbeforeunload = function(event){ event = event || window.event; event.returnValue = '?'; } 以下は、IEとFirefoxの確認ダイアログのキャプチャ。 MochiKitでは、Event#confirmUnloadで確認ダイアログを出せる。 connect(window, 'onbeforeunload', function(event){ event.confirmUnload('?'
JSによるカスタムダイアログボックス作成ライブラリ:phpspot開発日誌
Web Development Blog Custom JavaScript Dialog Boxes have put together a lightweight (~4.5kb) JavaScript dialog box library. JSによるカスタムダイアログボックス作成ライブラリ。 JavaScript標準のダイアログボックスでなく、以下のような、エラー、警告、成功、確認の４つのダイアログを実装できるライブラリが公開。 ポップアップすると背景がグレーでなく白っぽくなってダイアログが現れます。 通常のダイアログはBeep音が流れて驚きますが、ソフトにダイアログを出したい際につかえます。 ダイアログに大きくアイコンが表示されていて、色合いもあって分かりやすいかも。 関連エントリ ページ内でpromptやconfirmの実行を可能にするJavaScriptライブラリ「pprom
The Lightbox Clones Matrix « planetOzh
This tool lists a number of javascript scripts designed to embed various objects in HTML pages, such as images, flash animations, movies and iframes. Comparison of various scripts that display images and other objects in somehow cool CSS popups
[JS]軽量のスムーズに開閉するドロップダウンメニューのスクリプト | コリス
leigeberのエントリーから、ドロップダウンメニューをスムーズに開閉する、1.8KBの軽量のスクリプトを紹介します。 Sliding JavaScript Dropdown Menu デモページ スクリプトはjQueryやPrototypeなどの他のスクリプトに依存せず、単独で動作するもので、対応ブラウザはIE6, IE7, IE8, Firefox, Opera and Safariとなっています。 ドロップダウンメニューはリスト要素で実装されており、項目はテキストなので日本語で実装することも可能です。
XPathGraph のテクニック - IT戦記
XPathGraph とは http://xpath.kayac.com/ URL と XPath を指定すると URL の先をスクレイピングしてグラフを作ってくれるサービスです。 このエントリでは、どのような手順で XPath を組み立てていけばいいかをよくあるパターンで解説します。 0. 値の元となる要素を探す <div class="hoge">1,234,567</div>//div[@class="hoge"] 1. カンマを外すなど、純粋な数値に変換する 1,234,567translate(//div[@class="hoge"], ",", "")translate 関数は、第一引数の div を文字列に変換し、カンマを空の文字に置換します（つまり、カンマを削ります） 2. 演算する 1234567translate(//div[@class="hoge"], ",", "
DOM 2 Style の JavaScript オブジェクト - IT戦記
CSS のデータを扱う JavaScript を書きたくて作った いろいろと使えそうなので晒しておきます まだ、インタフェースだけですよ＞＜ var JSCSS = {}; // http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet JSCSS.StyleSheet = function(type, disabled, ownerNode, parentStyleSheet, href, title, media) { this.type = type; this.disabled = disabled; this.ownerNode = ownerNode; this.parentStyleSheet = parentStyleSheet; this.href = href; this
MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
CSS の構文解析と @-webkit-*** ルールの意味 - IT戦記
はじめに あのDan Kogai 氏にも好評な噂の名著「Jythonプログラミング」がついに発売されるわけですが、皆様いかがお過ごしでしょうか。今日は Jython にちなんで、 CSS の構文解析のお話をしたいと思います。（関係ない） 知ってますか？ Safari（などの WebKit を使ったブラウザ）にある以下のルールを @-webkit-rule @-webkit-value @-webkit-decls @-webkit-mediaquery これらのルールの使い方を知っていますか？ 僕は、今日まで使い方が分からなくて困っていたのです＞＜ 話は変わって 最近、僕の中では CSS （の実装）ブームです。 前回のパーサブームでは JavaScript で XPath を作ったわけですが、そのときはパーサを手で書いていました。 じゃあ、今回は yacc でも使ってみるかと鼻息荒めで挑ん
javascript - IPアドレスヘルパー : 404 Blog Not Found
2008年04月26日03:30 カテゴリLightweight Languages javascript - IPアドレスヘルパー そんなあなたのために。 はてなブックマーク - hakoeraのブックマーク / 2008年04月25日 クラスBのIPアドレス計算（サブネット分割）が苦手なオレに優しいもんも作ってください（泣 http://keisan.casio.jp/もビット演算まではしてくれませんしね。 最近はDHCPのおかげでシステム管理者ぐらいしか手でIP Addressを設定したりすることはなくなりましたが、システム管理者には今もなおつきまとう業務でもありますし。 #ISPが生IP Addressを配ってたこともあったよなあ...(遠い目) IP Address: / Netmask: Net Range: 以下、IPアドレスがらみの演算のみソースを。表示系は本entryのH
正規表現ベースの字句解析器を書くときは - 最速チュパカブラ研究会
正規表現ベースの字句解析器を書くときは、narcissusというJSベースのJS処理系のコードを見るといいです http://mxr.mozilla.org/mozilla/source/js/narcissus/jsparse.js 面倒な正規表現の模範解答が載ってます。下手に自分で考えて誤爆するより、一流の人が書いたものを使いましょう 正規表現リテラル /^\/((?:\\.|[^\/])+)\/([gimy]*)/ 文字列（ダブルクォート、シングルクォート共）/^"(?:\\.|[^"])*"|^'(?:[^']|\\.)*'/ → 訂正 Cスタイルコメント（一行、ブロック共） /^\/(?:\*(?:.|\n)*?\*\/|\/.*)/ ↓narcissusについてはyukobaさんのプレゼンを(去年のShibuya.es) http://accelart.jp/shibuyajs
秋元@サイボウズラボ・プログラマー・ブログ: lightboxライブラリ37個の比較表
写真などをページ上で強調表示する、いわゆるlightbox効果を実現するJavascript+CSSライブラリを37個も集めて、ライブラリサイズやそれぞれの機能、どのJavascriptライブラリを使っているかなどで絞り込めるようにした比較表が発表されている。 このようなUI系のライブラリを使う際には、自分が普段使っているベースライブラリとの親和性などが重要だと思うので、このような形でまとまっているとdel.icio.usで”lightbox”タグで絞り込む、といった調べ方よりも楽にライブラリが選べていい。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘い
Re:一晩で覚えるjQueryの逆引き基礎サンプル7つ (でぃべろっぱーず・さいど)
一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳 jQueryに書くとほってんとり入りできるらしいので便乗。というかリンク先で紹介されているサンプルコードにちょっと意義異議あり。 一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。 ということであれば、「jQueryらしい」書き方をした方が良いかなと思います。 で、僕ならこう書くってことで。 全般的に使われている$(document).ready(fn)は、$(fn)でショートカットできます。 $(document).ready(function(){alert('hoge');}) は、 $(function(){alert('hoge');}) こう書けると。 まあ、これはどうでもいいや。短く書けるって
指定したHTMLエレメントをローディング中にする際に便利な「busy.js」:phpspot開発日誌
busy.js (loading indicators) busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages 指定したHTMLエレメントをローディング中にする際に便利な「busy.js」。 例えば、div 要素全体に次のようにローディング中にすることが出来ます。 デモはこちら - 要素をクリックでローディング状態にすることが可能 オーバーレイで要素自体の色も変わるため、ローディング中であることがよく分かるようになっています。 関連エントリ グレーアウト表示ライブラリ:glayer.js 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」
難読化されたJavaScriptを見やすく·JsDecoder MOONGIFT
JavaScriptが多用されるになっているが、そのために肥大化する傾向にある。特に共通ライブラリ系は相当重たくなっており、ブラウザへの負担が大きくなっている。そのためにサイズを減らすべく使われているのが難読化処理だ。 見づらい… 変数名を短い単語に置き換え、余計な改行やコメント、空白を省いていく。開発は通常のソースで行い、配布は難読化処理を行ったものを利用する。だが、利用者側は問題が起きた時に情報が得づらくなってしまう。そこでこれを使ってみよう。 今回紹介するオープンソース・ソフトウェアはJsDecoder、難読化の逆処理を行うソフトウェアだ。 JsDecoderは難読化処理されたJavaScriptを逆に見やすくするソフトウェアだ。;で区切り、適切なインデントを行い、さらにハイライト処理を行ってくれる。もちろん、変数名が変わる訳ではないが、これでも随分見やすくなるだろう。 見やすい！
一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳
一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。 エフェクト関係とかそれ以前に、どんなことをすればどうなるのかという基礎的なサンプルです。 プラグイン関係は以前書いた記事を参照してください。 jQueryでweb制作をする時にキープしておきたい30リスト そもそもｊQueryって何ですかという人は以下を。 今更ですが、jQueryにはまりました 追記：ほんとすいませんローカルで動作確認したところ動くのですが、オンラインではfirefoxしか動作確認せずに公開。 IE7では上の4つが動きません。 いくつか確認したのですが、どうしてもIE7でJavaScriptエラー。ダメすぎる自分・・・。 追記2：まいりました。他のサイトの記述を見てもミスが見つかりません。言語問題でしょうか・・・アク
MOONGIFT: » Ajaxを使ったWebベースのコンソール「Web Console」:オープンソースを毎日紹介
外部においたWebサーバをメンテナンスしようと思ったら、SSHを使って行うのが一般的だ。だが、ターミナルも使えないPCやPDAなどからではどうやって操作を行えば良いだろう。 ログイン設定画面 危険は承知の上で、このような方法もある。Webベースでコンソールを利用するのだ。 今回紹介するオープンソース・ソフトウェアはWeb Console、Webベースのコンソールだ。 Web Consoleは予めログイン設定を行っておくことで、任意に利用されることを防いでいる。Ajaxを使って、ほぼ通常のコンソール操作は可能だ。findなど、画面に出力が返ってくるものは、全ての出力が終わるまで待たされ、一気に表示される。 ログイン直後の画面 sudoが使えそうな感じもするが、利用できない。suは無理とのこと。実行履歴に対応し、Ctrl+aやCtrl+eで移動、Ctrl+kで切り取ることだってできる（貼付けは
あのサイトのAjax、Javascriptを実装するための方法60選『60 More AJAX- and Javascript Solutions For Professional Coding』 – creamu
DiaryTechnology あのサイトのAjax、Javascriptを実装するための方法60選『60 More AJAX- and Javascript Solutions For Professional Coding』 あのかっこいいサイトのAjaxを取り入れたい。 そんなあなたにおすすめなのが、『60 More AJAX- and Javascript Solutions For Professional Coding』。あのサイトのAjax、Javascriptを実装するための方法60選だ。 ↑はCoda Popup Bubbles。 クールなポップアップメッセージが表示される。 » iCarousel carouselを作るためのオープンソース（フリー）Javascript » Product Slider スライダーで商品を選択できるインターフェース » Oversize
MOONGIFT: 開発者必須！ブラウザでRESTful APIにPUT&DELETE「RestTest」:オープンソースを毎日紹介
RESTfulなWeb APIを利用する際には、通常のGETやPOSTの他に、PUT/DELETEを活用する必要がある。これらのHTTPメソッドはブラウザで対応していないためにライブラリを使ったり、専用のソフトウェアを利用する必要がある。 GETを行った場合 だが、これでは面倒だと感じることが多いだろう。そこでブラウザに対応してもらおう。 今回紹介するフリーウェアはRestTest、FirefoxにPUT/DELETE/OPTIONSメソッドを実行させるFirefoxアドオンだ。 RestTestは残念ながらFirefox2系までしか対応していない。インストール後、ツールメニューにRESTTestという項目が表示される。これを選ぶと専用ウィンドウが開く。入力項目はURL、メソッド選択、ヘッダー、POST/PUTデータだ。 PUTを行った場合 各項目を必要に応じて入力し、Sendボタンを押せ
[JS]コンテンツをスクロールするアクセシブルなスクリプト -Easy Scroll
Easy Scrollは、スクリプトやCSSオフ時でも情報の提供が可能な、コンテンツをスクロールするスクリプトです。 Easy Scroll: Accessible Content Scroller デモページ スクリプトのオフ時には隠されているコンテンツが全て表示され、CSSのオフ時にはスクロールボタンがリストで表示されます。 Easy ScrollはjQueryやPrototypeなどのライブラリを必要とせず、単独のスクリプトとして配布されています。 設置もシンプルで、コンテンツのスクロールアップ・スクロールダウン・リセットの機能があり、スクロール領域の高さとスピードを設定することができます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryサンプル集 | DesignWalker
