リアルタイムにファイルをアップロード可能なExtベースJavaScriptライブラリ:phpspot開発日誌
Ext File Upload Form Widget Example by Saki リアルタイムにファイルをアップロード可能なExtベースJavaScriptライブラリ 「Add」でファイルを選んで↑ボタンでファイルをその画面上でアップロードしてくれます。 現状では、ダウンロードリンクやバックエンドプログラムのダウンロードリンクはないので手動で解析する必要がありそうですが、なかなかこれはカッコいいですね。 関連エントリ FlashとAjaxを使った使いやすいファイルアップロードライブラリ「FancyUpload」 SWFUpload アップロードの進捗を表示しつつアップロードするサンプル
[YUI] マウスオーバーでリンク先サムネイル表示
Yahoo! UI Library の YAHOO.widget.Tooltip オブジェクトのツールチップ機能と、 Simple API のサムネイル画像取得サービスを組み合わせて、 マウスオーバーでリンク先サイトのサムネイル表示を行うデモです。 Yahoo! JAPAN PC Watch asahi.com Yahoo! UI Library: Tooltip kawa.net xp ゆうすけブログ Flickr: Photos from Yusuke,SF 上記リンク部分にマウスカーソルを乗せると、サムネイルを表示します。 ソースコード 短いです。YUI と SimpleAPI に感謝！ <script type="text/javascript" src="js/yahoo.js"></script> <script type="text/javascript" src="js/e
リンク先のプレビューを吹き出し方式のポップアップでサムネイル表示「WebSnapr」:phpspot開発日誌
WebSnapr - Preview Bubble Javascript The WebSnapr Preview Bubble is a simple, unobtrusive script used to display an overlay bubble showing a hyperlink target thumbnail using WebSnapr. It's a snap to setup and works on all modern browsers. リンク先のプレビューを吹き出し方式のポップアップでサムネイル表示「WebSnapr」。 単純にポップアップするだけ、よりもちょっとオシャレな効果が得られますね。 使い方 previewbubble.zip をダウンロード previewbubble.js の var bubbleImagePath = '/images/
HeartRails Glance | リンク先 「チラ見」 サービス
「チラ見」 ウィンドウに必要を感じないお客様は、「チラ見」 ウインドウ下部の x ボタンをクリックすることにより、以後、そのサイトに付加された 「チラ見」 機能を無効にすることができます。また、「チラ見」 機能を導入済みのサイトには、併せて 「チラ見」 機能の有効／無効を切り替えるための Switch を設置することができます。 Switch を設置したい場所に下記の JavaScript をペーストしてください。 お客様のサイトの文字コードが UTF-8 の場合 <script type="text/javascript" charset="UTF-8" src="http://glance.heartrails.com/api/utf8/switch.js"></script> お客様のサイトの文字コードが EUC-JP の場合 <script type="text/javascrip
JavaScriptist - javascript/ajax/サンプル/入門/リファレンス/ライブラリ
サイト更新情報 2006/12/06 よく使われているページを検索窓から簡単に辿れるようにしました。(検索窓に「prototype」と入力) 2006/11/27 JavaScript入門/応用サイトJavaScriptistオープン！ 2006/11/23 試して確認できるJavaScriptオンラインエディタを公開 2006/11/20 JavaScriptリファレンス、逆引きサンプル集を公開 2006/11/19 JavaScriptライブラリ活用ページ公開 2006/11/15 JavaScriptistベース機能の構築完了 過去のサイト更新情報
JavaScript でバナーをクロスフェード表示
以前、「div要素をクロスフェード表示する JavaScript」 として紹介した 「Javascript / CSS Crossfader」 を実際に当サイトで使用したので、ひとつの使用例として公開したいと思います。 といっても普通に使っているだけで特に変わったことをやっているわけではないのですが、前回紹介した際に div 要素をクロスフェードすると書いたので div 要素専用っぽい説明になっていましたが、実際は div 要素以外でも使用することができるので、その辺も合わせて説明を。 実際に使用しているものは、サイドメニュー部分に設置してありますのでそちらを参考に。では実際の使用方法です。 2007/12/14 追記 サイトリニューアルでサンプルとなるバナーは撤去してしまいました。 まずは JavaScript ファイルをダウンロードして、文書に読み込んでおきましょう。 <script
高機能な JavaScript 圧縮ツール「jsjuicer」 - WebOS Goodies
JavaScript を使った Web アプリケーションを公開する際にほぼ必須となるツールが JavaScript Obfuscator 、いわゆる JavaScript 圧縮（難読化）ツールです。とくに Ajax を活用したサイトでは JavScript ファイルも大きくなりがちなので、できるだけコンパクトにまとめてページのロード時間を短縮したいところです。そんなわけで、私も Infosketch を公開する際にいろいろ試しまして、本日ご紹介する jsjuicer を使うことにしました。 この jsjuicer は Web 関連のツールでは珍しく C++ で組まれたコマンドラインプログラムとなっています。そのため使い始めは少々面倒ですが、 make などによる自動化がやりやすいというのは大きな利点です。他のツールにはない便利な機能もいくつか実装されていますので、実用的な JavaScri
HTMLエンティティ化
HTMLエンティティ化 version Japanese 1.0（説明） エンティティ化するテキスト mailto:someone@some.domain.com エンティティ化されたテキスト オプション 入力文の半角スペース、タブ、改行を除去する エンティティ化する・しない文字を無作為に選ぶ（チェックしないときは全てエンティティ化） 但し、以下の文字は必ずエンティティ化する： エンティティ出力形式： 注1 説明 ホームページに公開するメールアドレスなどを広告業者に収集されるのを防止するためのソフトウエアです。ＷＷＷページに記載するメールアドレスなどをこのプログラムでエンティティコード（数値文字実体参照）に変換して書き換えてやれば、ＷＷＷページを実際に見ている人間には支障を与えることなく、メールアドレスなどが自動収集プログラムなどから見つかり難くなります。 使い方 変換したいメールアドレス
[NS] お知らせ:「コナミコマンド」を実装しました
当サイトでは、本日よりコナミコマンドを実装いたしました。コマンドはファミコン版グラディウス準拠の「上上下下左右左右BA」です。SFC版グラディウスIIIのように自爆はしません。ご安心ください。 コマンドを打つとサイト全体がパワーアップします。もう一度コマンドを打つと元に戻ります。携帯電話やRSSリーダでご覧の場合は効果がありません。ご了承ください。 特に意味はありませんが、どうしようもなくコナミコマンドを打ちたくて打ちたくて仕方がなくなったときなどにご利用ください。料金は一切いただきません。 著作権を主張するようなモノでもないので、自分のサイトに付けたいと考えてらっしゃる奇特な方はソースを見て勝手にお持ち帰りください。 追記:うまくいかない方は日本語入力をオフにしてください。Windows版のInternetExplorer、Firefox、Operaそれぞれの最新版で動作確認済みです。
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
ITmedia Biz.ID：キミはブックマークレットを知っているか？
何もインストールすることなく、「このページを翻訳」したり「このページをブログに引用」したりできるボタンをブラウザに設置できる。ブックマークレットで、操作性アップを目指そう。 ブックマークレット（Bookmarklet）という言葉を聞いたことがあるだろうか。これは、ブックマークにURLを登録する代わりに、短いJavaScriptを登録して、ブラウザにいろいろな機能を追加する特殊なブックマークだ。 扱いはブックマークと同じ。「お気に入り」などに登録して、選択すれば実行される。ブックマーク同様、リンクをドラッグしてブラウザのリンクバー（ブックマークバー）にドロップすれば、簡単に押せるボタンになる。livedoor クリップのブックマークレット解説ページに、ブックマーク登録方法についてのムービーがあり、分かりやすい ブックマークの場合は、登録したサイトにジャンプするわけだが、ブックマークレットは現
画像を立体ガラス風にするエフェクト実装JavaScriptライブラリ「Glossy.js」:phpspot開発日誌
Glossy.js (with IE 6/7 support) Glossy.js 1.3 allows you to add corners and shading and shadow to images on your webpages (alternatively: corner.js). 画像を立体ガラス風にするエフェクト実装JavaScriptライブラリ「Glossy.js」。 プレーンな画像に、次のように画像にガラスのような立体効果を与えることが可能。 必要なライブラリを読み込んで、<img>タグに、class="glossy"を指定するだけでいいお手軽さです。 目立たせたい画像に対してこのエフェクトを指定すると効果的ですね。 IE6,7もサポートしているようです
ドラッグ＆ドロップで画像を切抜くJavaScriptライブラリ「jsCropperUI」
イメージ切り抜きのためのインタフェースを提供するJavaScriptライブラリで、prototype.jsやscript.aculo.usを使っています。 写真上をマウスカーソルでドラッグすると枠が破線で作成され、囲んだ領域の座標とサイズを取得し、トリミングすることができます。カーソルキーによる移動にも対応しているので微調整も可能、実にすごい。 詳細は以下の通り。 ダウンロードは以下から。 DEfusion.org.uk >> JavaScript Image Cropper UI, using Prototype & script.aculo.us デモは以下から。実際にドラッグして切り抜きを体験できます。 DEfusion.org.uk >> Demo >> Prototype JavaScript Image Cropper UI 操作感覚が通常のアプリケーションとほとんど差異がない
MOONGIFT: » 1行プレゼンをはじめよう「one-line-presentation」:オープンソースを毎日紹介
技術者の間では高橋メソッドが利用されることが多い。私自身、広い会場で小さなプレゼンの文字は読みづらいし、何よりスライドの中に大量の情報を盛り込むべきではないと考えている。 高橋メソッドを使った場合、スライドの数が多くなりがちで、通常のプレゼンテーションソフトウェアでは作成が面倒に感じてしまう。そこで使ってみたいのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはone-line-presentation、1行プレゼン作成ソフトウェアだ。 one-line-presentationはHTML（配布はPHP）とJavaScrptでなるソフトウェアで、ブラウザを使ったプレゼンテーションを作成する。巨大な文字が表示される点は高橋メソッドと同じだ。 なぜ1行プレゼンかと言えば、その内容が一行で作成されるからに他ならない。デフォルトではタブ区切りの文字列を作成すると、タブごとにスライド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flip
CSSデザインできるスクロールバー表示JavaScript （fleXcroll） - youmos
http://youmos.com/news/reflector
wrapScroll JavaScript Library - youmos
CSSデザインで綺麗なボタンを作成する （How to make sexy buttons with CSS） - youmos
http://icebeat.bitacoras.com/mootools/growl/