Slideshow alternative | SonSpring
Sep 10, 2006 — Topic: javascript Note: The following article is outdated. I recommend you check out my rotating images demo from the jQuery Cookbook. You can download the code here. First off, let me say that I did not write this bit of JavaScript, and that full credit goes to Steven G. Chipman for his excellent Cross Fade Redux. That being said, you can check out the demo that I have made here… S
MooTools - a compact javascript framework
MooTools is a collection of JavaScript utilities designed for the intermediate to advanced JavaScript developer. It allows you to write powerful and flexible code with its elegant, well documented, and coherent APIs. MooTools code is extensively documented and easy to read, enabling you to extend the functionality to match your requirements. Open Source LicenseMooTools libraries are released under
JavaScriptでブラウザのフォントサイズを検出する方法:phpspot開発日誌
A List Apart: Articles: Text-Resize Detection When you design for the web, you don’t know what software people will use to experience your site, and you don’t know what capabilities your users (and their software) have.CSSとJavaScriptでブラウザのフォントサイズを検出する方法。 ブラウザの各々のフォントのサイズって検出できないと思っていましたが、JavaScriptを使うことでそれが可能です。 これにより、次のことが可能になります。 ・ フォントサイズに合わせたデザイン調整 ・ アクセスログに新たなデータを追加(利用者はどのぐらいのサイズで自分のページを見ているか
JavaScriptでWiki記法のテキストをHTMLに変換する:phpspot開発日誌
Kazuho@Cybozu Labs: Wiki.Formatter in JavaScript というわけで、いまさら Wiki のフォーマッタを作りました。JavaScript で実装したので、クライアントサイドで整形することができます注1。なので、既存のウェブアプリを wiki 記法に対応させたいな、といった場合に便利だと思います注2。記法も自由に拡張できるようになっていますし。 JavaScriptでWiki記法のテキストをHTMLに変換するライブラリが公開されました。 次のようにして簡単に使うことが出来る模様です。 var formatter = new Wiki.Formatter(); document.getElementById('wiki').innerHTML = formatter.format(srcText); JavaScriptで実装できることで、サーバ側に
JavaScript圧縮＆難読化ツールまとめ:phpspot開発日誌
JavaScriptのコードはクライアントサイドで動作し、誰にでもコードが読めてしまいます。 あまり自分の書いたコードは読まれたくないもので、せめてコードを読みにくく、ということで難読化のツールが多数公開されてます。 最近のJavaScriptブーム以前よりそういったツールは当然ながら存在するようで、ちょっとまとめてみました。 GUI/コマンドラインツール ObfuscateJS - JAVAで書かれたGUI画面で難読化。改行/タブ除去の他変数名変更 Dojo compressor - JAVAで動作するコマンドラインツール。スペース等除去。サイト上で変換前、変換後のサンプルが見れます JavascriptZIP - JAVAで書かれたJavascriptコード圧縮ツール JSC (JavaScript Compressor) - EXE形式でコマンドラインで使える圧縮ツール オンラインで
ブラウザ上で動作するソースコードエディタ『Edit Area』:phpspot開発日誌
Edit Area Here is EditArea, a free javascript editor for source code. (That is no way a WYSIWYG editor). This editor is designed to edit souce code files in a textarea. The main goal is to allow text formatting, search and replace and syntax highlight (for small text).ブラウザ上で動作するソースコードエディタ『Edit Area』。 エディタ自体はJavaScriptによって実装されていて、編集対象の言語はPHP, CSS, JavaScript, Pythonに対応しています。 ブラウザ上でWYSIWYGにＨＴＭＬを編集でき
onsubmit で disable にするやつ
■ onsubmit で disable にするやつ onsubmit で submit ボタンを disable にしてユーザビリティを良くする フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ？ そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。 ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。 なので、書き直してみました。 var DisableSubmit = { init: function() { this.addEvent(window, 'load', thi
テキストフィールドのフォーカス時に背景色を変更する JavaScript
■ テキストフィールドのフォーカス時に背景色を変更する JavaScript 以下の JavaScript を読み込ませれば、フォームのテキストフィールドにフォーカスした時に、背景に色がつくようになります。今どのフィールドを選択しているのかが視覚的にわかるので便利。 mixi にこの機能がついていたんだけど、onfocus なんてのをいっぱい書いていて非効率的だと思ったので、読み込ませるだけで勝手に全部のフィールドに設定されるようなものを書いてみました。 window.onload = function() { var colorful = new ColorfulInput; colorful.set(); } function ColorfulInput() { this.skip = []; this.color = { 'blur': '', 'focus': '#EEEEEE'
フォームに入力を促すメッセージを出力する JavaScript
■ フォームに入力を促すメッセージを出力する JavaScript input type="text" なフォームに最初から「ここに入力して下さい」みたいなメッセージを薄い色で表示させておいて入力を促すようなのありますよね。なんか、あれを、現実逃避気味に書いたので。 function inputDefault(elm, msg) { this.elm = elm; this.msg = msg; this.color = '#999999'; this.bgColor = '#F9FFF9'; } inputDefault.prototype.set = function() { this._cleared = false; this._defColor = this.elm.style.color; this._defBGColor = this.elm.style.background
パスワードの安全性を教えてくれる JavaScript
■ パスワードの安全性を教えてくれる JavaScript みんな大好き Google さんが、アカウントのパスワードを変更する時にパスワードの安全性を教えてくれるので真似っ子してみました。 最初は処理をパクってこっそり自分だけで使おうと思っていたのだけど、何やら単語の検索をしたりとややこしい事をしているようなので自前で作りました。 動作サンプル 使ってみたい人は、上の動作サンプルを見てパクッて下さい。 例のごとく。 var safe = new safetyCheck(document.getElementById('password')); safe.set(); みたいにして動かします。 コードを見るとわかりますが、かなり単純な計算方法です。Google さんみたいに単語だったら駄目だとかそんな事はありません。文字の種類(英大文字小文字、数字、記号)と文字の長さを元にして計算していま
カーソル位置のセルの上端と横端をハイライトする JavaScript
■ カーソル位置のセルの上端と横端をハイライトする JavaScript 好評の、読み込ませるだけで動く JavaScript シリーズの5段目くらいです。このシリーズもたまってきたので、そのうちまとめます。 Excel とかの表計算ソフトって選択しているセルの列番号や行番号がハイライトされたりしてますよね？table タグ上であれと同じものを実現する JavaScript を書いてみました。 こんなようなテーブルを作らなくちゃいけない事になりそうなんだけど…。 実際には15×20くらいはあるので、チェックを入れる時にすごく使い辛そうですよね。なので、カーソルの位置がわかりやすくなるようにハイライト出来たら便利だろうと思ったんです。 実際の動作サンプル rowspan とか colspan を使って複雑にしていると、上端とか横端の位置を取得するのがやたらと面倒になってくるので、画面上のセル
テキストエリアとかリサイズ可能にする JavaScript
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析:phpspot開発日誌
A New Way of Tracking Users' Browsing Habits - techfoolery Jeremiah Grossman came up with a really clever way of using Javascript to find what pages you've visited recently. CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析する方法。 自分のサイトに来ている人は他のこんなサイトも見ている、なんてことを管理者側で知ることができるんですね。 早速デモを見ていきましょう。 まずは、サイト訪問済みとするため、www.yahoo.com を見ておきましょう。 そして、サンプルページ を見てみてください。www.yahoo.com が表示されるはずです。 (他にもサンプルページ上で定義されたリストの中
Using Force Directed Graphs in Your App on kylescholz.com :: blog
I'm really pleased with the response to my first posts on Force Directed Graphs in JavaScript. A number of people have expressed interest in using these libararies in their own applications so I'm providing some details on how to do so here. Have fun! Disclaimer This is alpha code. I'm sharing it now because I want to see what you can do with it and what you think it should do. License JavaScript
JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法:phpspot開発日誌
JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法 2006年08月17日- Mouse wheel programming in JavaScript Web applications are becoming more and more like “normal” desktop applications. Of course, they are more and more functional, but smooth user interface acts the primary role. So we have drag and drop, autocompletition, and much more. Many of those nice features got possible only with help of AJAX. JavaScriptで
ツールチップテキストを簡単実装 : Tooltips.js:phpspot開発日誌
Tooltips.js (c)Matthias Platzer, based on script.acolo.us and prototype.js Tooltips.js depends on the latest versions of prototype.js and script.aculo.us from SVN. アンカー<a>タグにカーソルを合わせた時に、ツールチップテキストを表示するためのライブラリ。 prototype.js と script.aculo.us をベースに作成されているようです。 ダウンロード: tooltips.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
ブログマーケティング勉強会議の締め切りについて - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
http://blog.jolt.jp/2006/06/post_41.html
Flashのバージョンを検出するJavascriptコード:phpspot開発日誌